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

package/dist/index.mjs

@@ -152,16 +152,18 @@ 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
 } from "@elementor/editor-styles-repository";
 import { InfoAlert, WarningInfotip } from "@elementor/editor-ui";
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
 import { ColorSwatchIcon, MapPinIcon } from "@elementor/icons";
 import { createLocation as createLocation2 } from "@elementor/locations";
 import {
   Box as Box2,
+  Button,
   Chip as Chip3,
   FormLabel,
   Link,
@@ -374,14 +376,20 @@ function useCreateOption(params) {
 
 // src/components/creatable-autocomplete/use-filter-options.ts
 import { createFilterOptions } from "@elementor/ui";
+var STRIP_NON_CLASS_CHARS = /[^a-zA-Z0-9_-]/g;
+function normalizeClassSearch(value) {
+  return value.replace(STRIP_NON_CLASS_CHARS, "").toLowerCase();
+}
 function useFilterOptions(parameters) {
   const { options: options13, selected, onCreate, entityName } = parameters;
-  const filter = createFilterOptions();
+  const filter = createFilterOptions({
+    matchFrom: "any"
+  });
   const filterOptions = (optionList, params) => {
     const selectedValues = selected.map((option) => option.value);
     const filteredOptions = filter(
       optionList.filter((option) => !selectedValues.includes(option.value)),
-      params
+      { ...params, inputValue: normalizeClassSearch(params.inputValue) }
     );
     const isExisting = options13.some((option) => params.inputValue === option.label);
     const allowCreate = Boolean(onCreate) && params.inputValue !== "" && !selectedValues.includes(params.inputValue) && !isExisting;
@@ -554,7 +562,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 +596,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 +622,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 +638,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 +649,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 +840,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 +996,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 +1009,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 +1159,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(() => {
@@ -1228,6 +1248,19 @@ var validateLabel = (newLabel) => {
 // src/components/css-classes/css-class-selector.tsx
 var ID = "elementor-css-class-selector";
 var TAGS_LIMIT = 50;
+var EVENT_OPEN_GLOBAL_CLASSES_MANAGER = "elementor/open-global-classes-manager";
+var EVENT_TOGGLE_DESIGN_SYSTEM = "elementor/toggle-design-system";
+function openClassManagerPanel() {
+  if (isExperimentActive("e_editor_design_system_panel")) {
+    window.dispatchEvent(
+      new CustomEvent(EVENT_TOGGLE_DESIGN_SYSTEM, {
+        detail: { tab: "classes" }
+      })
+    );
+    return;
+  }
+  window.dispatchEvent(new CustomEvent(EVENT_OPEN_GLOBAL_CLASSES_MANAGER));
+}
 var EMPTY_OPTION = {
   label: __6("local", "elementor"),
   value: null,
@@ -1243,7 +1276,7 @@ function CssClassSelector() {
   const autocompleteRef = useRef(null);
   const [renameError, setRenameError] = useState4(null);
   const handleSelect = useHandleSelect();
-  const { create, validate, entityName } = useCreateAction();
+  const { create, validate, entityName, isAtLimit, limitCount } = useCreateAction();
   const appliedOptions = useAppliedOptions(options13);
   const active = appliedOptions.find((option) => option.value === activeId) ?? EMPTY_OPTION;
   const showPlaceholder = appliedOptions.every(({ fixed }) => fixed);
@@ -1272,7 +1305,7 @@ function CssClassSelector() {
         onCreate: create ?? void 0,
         validate: validate ?? void 0,
         limitTags: TAGS_LIMIT,
-        renderEmptyState: EmptyState,
+        renderEmptyState: isAtLimit && typeof limitCount === "number" ? (props) => /* @__PURE__ */ React11.createElement(LimitReachedEmptyState, { limitCount, onClear: props.onClear }) : EmptyState,
         getLimitTagsText: (more) => /* @__PURE__ */ React11.createElement(Chip3, { size: "tiny", variant: "standard", label: `+${more}`, clickable: true }),
         renderTags: (values, getTagProps) => values.map((value, index) => {
           const chipProps = getTagProps({ index });
@@ -1311,7 +1344,7 @@ function CssClassSelector() {
     )
   ), !canEdit && /* @__PURE__ */ React11.createElement(InfoAlert, { sx: { mt: 1 } }, __6("With your current role, you can use existing classes but can\u2019t modify them.", "elementor")));
 }
-var EmptyState = ({ searchValue, onClear }) => /* @__PURE__ */ React11.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React11.createElement(
+var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ React11.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React11.createElement(
   Stack3,
   {
     gap: 1,
@@ -1322,14 +1355,59 @@ var EmptyState = ({ searchValue, onClear }) => /* @__PURE__ */ React11.createEle
   },
   /* @__PURE__ */ React11.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
   /* @__PURE__ */ React11.createElement(Typography3, { align: "center", variant: "subtitle2" }, __6("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React11.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React11.createElement(Typography3, { align: "center", variant: "caption", sx: { mb: 2 } }, __6("With your current role,", "elementor"), /* @__PURE__ */ React11.createElement("br", null), __6("you can only use existing classes.", "elementor")),
+  children,
   /* @__PURE__ */ React11.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __6("Clear & try again", "elementor"))
 ));
+var EmptyState = (props) => /* @__PURE__ */ React11.createElement(EmptyStateLayout, { ...props }, /* @__PURE__ */ React11.createElement(Typography3, { align: "center", variant: "caption", sx: { mb: 2 } }, __6("With your current role,", "elementor"), /* @__PURE__ */ React11.createElement("br", null), __6("you can only use existing classes.", "elementor")));
+var LimitReachedEmptyState = ({
+  limitCount,
+  onClear
+}) => /* @__PURE__ */ React11.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React11.createElement(
+  Stack3,
+  {
+    gap: 1,
+    alignItems: "center",
+    color: "text.secondary",
+    justifyContent: "center",
+    sx: { px: 1, m: "auto", maxWidth: "260px" }
+  },
+  /* @__PURE__ */ React11.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
+  /* @__PURE__ */ React11.createElement(
+    Typography3,
+    { align: "center", variant: "subtitle2" },
+    /* translators: %s is the maximum number of classes */
+    __6("Limit of %s classes reached", "elementor").replace("%s", String(limitCount))
+  ),
+  /* @__PURE__ */ React11.createElement(Typography3, { align: "center", variant: "caption", component: "div" }, __6("Remove a class to create a new one.", "elementor"), " ", /* @__PURE__ */ React11.createElement(
+    Link,
+    {
+      color: "inherit",
+      variant: "caption",
+      component: "button",
+      onClick: onClear,
+      sx: { verticalAlign: "baseline" }
+    },
+    __6("Clear", "elementor")
+  )),
+  /* @__PURE__ */ React11.createElement(
+    Button,
+    {
+      variant: "outlined",
+      color: "secondary",
+      size: "small",
+      onClick: () => {
+        openClassManagerPanel();
+        onClear();
+      }
+    },
+    __6("Class Manager", "elementor")
+  )
+));
 var updateClassByProvider = (provider, data) => {
   if (!provider) {
     return;
   }
-  const providerInstance = stylesRepository6.getProviderByKey(provider);
+  const providerInstance = stylesRepository7.getProviderByKey(provider);
   if (!providerInstance) {
     return;
   }
@@ -1367,6 +1445,11 @@ function useCreateAction() {
   if (!provider || !createAction) {
     return {};
   }
+  const entityName = provider.labels.singular && provider.labels.plural ? provider.labels : void 0;
+  const validate = (newClassLabel, event) => validateStyleLabel2(newClassLabel, event);
+  if (hasReachedLimit(provider)) {
+    return { entityName, isAtLimit: true, limitCount: provider.limit, validate };
+  }
   const create = (classLabel) => {
     const { createdId } = createAction({ classLabel });
     trackStyles(provider.getKey() ?? "", "classCreated", {
@@ -1375,21 +1458,7 @@ function useCreateAction() {
       classId: createdId
     });
   };
-  const validate = (newClassLabel, event) => {
-    if (hasReachedLimit(provider)) {
-      return {
-        isValid: false,
-        /* translators: %s is the maximum number of classes */
-        errorMessage: __6(
-          "You\u2019ve reached the limit of %s classes. Please remove an existing one to create a new class.",
-          "elementor"
-        ).replace("%s", provider.limit.toString())
-      };
-    }
-    return validateStyleLabel2(newClassLabel, event);
-  };
-  const entityName = provider.labels.singular && provider.labels.plural ? provider.labels : void 0;
-  return { create, validate, entityName };
+  return { create, validate, entityName, isAtLimit: false };
 }
 function hasReachedLimit(provider) {
   return provider.actions.all().length >= provider.limit;
@@ -1820,7 +1889,7 @@ function EditorPanelErrorFallback() {
 import { Fragment as Fragment9 } from "react";
 import * as React86 from "react";
 import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
-import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive4 } from "@elementor/editor-v1-adapters";
 import { Divider as Divider6, Stack as Stack13, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
 import { __ as __60 } from "@wordpress/i18n";
 
@@ -2570,7 +2639,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 +2916,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();
@@ -3382,7 +3451,7 @@ var EffectsSection = () => {
 import * as React55 from "react";
 import { ControlFormLabel as ControlFormLabel2 } from "@elementor/editor-controls";
 import { useParentElement } from "@elementor/editor-elements";
-import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
 import { __ as __33 } from "@wordpress/i18n";
 
 // src/hooks/use-computed-style.ts
@@ -3705,7 +3774,7 @@ var getOptions2 = (parentStyleDirection) => {
 import * as React44 from "react";
 import { useMemo as useMemo9 } from "react";
 import { ToggleControl as ToggleControl6 } from "@elementor/editor-controls";
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
 import { __ as __22 } from "@wordpress/i18n";
 var DISPLAY_LABEL = __22("Display", "elementor");
 var displayFieldItems = [
@@ -3748,7 +3817,7 @@ var displayFieldItems = [
 ];
 var DisplayField = () => {
   const placeholder = useDisplayPlaceholderValue();
-  const isGridActive = isExperimentActive("e_css_grid");
+  const isGridActive = isExperimentActive2("e_css_grid");
   const items3 = useMemo9(
     () => isGridActive ? displayFieldItems : displayFieldItems.filter((item) => item.value !== "grid"),
     [isGridActive]
@@ -4378,7 +4447,7 @@ var LayoutSection = () => {
     history: { propDisplayName: DISPLAY_LABEL2 }
   });
   const displayPlaceholder = useDisplayPlaceholderValue();
-  const isGridExperimentActive = isExperimentActive2("e_css_grid");
+  const isGridExperimentActive = isExperimentActive3("e_css_grid");
   const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
   const isDisplayGrid = "grid" === (display?.value ?? displayPlaceholder?.value);
   const { element } = useElement();
@@ -5370,7 +5439,7 @@ var PanelTabContent = () => {
   const { element } = useElement();
   const editorDefaults = useDefaultPanelSettings();
   const defaultComponentTab = editorDefaults.defaultTab;
-  const isInteractionsActive = isExperimentActive3("e_interactions");
+  const isInteractionsActive = isExperimentActive4("e_interactions");
   const isPromotedElement = !!getWidgetsCache2()?.[element.type]?.meta?.is_pro_promotion;
   const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
   const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;