@elementor/editor-editing-panel 1.27.0 → 1.28.0

package/dist/index.mjs

@@ -10,14 +10,15 @@ import * as React7 from "react";
 import { getElementSetting, updateElementSettings as updateElementSettings2, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil } from "@elementor/editor-props";
 import {
-  ELEMENTS_STYLES_PROVIDER_KEY as ELEMENTS_STYLES_PROVIDER_KEY2,
+  isElementsStylesProvider as isElementsStylesProvider2,
   stylesRepository as stylesRepository4,
   useCreateActionsByProvider,
-  useProviders
+  useProviders,
+  validateStyleLabel as validateStyleLabel2
 } from "@elementor/editor-styles-repository";
 import { MapPinIcon } from "@elementor/icons";
 import { createLocation } from "@elementor/locations";
-import { Chip as Chip2, Stack as Stack3, Typography as Typography2 } from "@elementor/ui";
+import { Chip as Chip2, FormLabel, Stack as Stack3 } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
 
 // src/contexts/classes-prop-context.tsx
@@ -92,7 +93,7 @@ function useStyle() {
 }
 function getProviderByStyleId(styleId) {
   const styleProvider = stylesRepository.getProviders().find((provider) => {
-    return provider.actions.get().find((style) => style.id === styleId);
+    return provider.actions.all().find((style) => style.id === styleId);
   });
   return styleProvider ?? null;
 }
@@ -112,6 +113,7 @@ function MultiCombobox({
   selected,
   options: options13,
   onSelect,
+  placeholder,
   ...props
 }) {
   const filter = useFilterOptions();
@@ -134,6 +136,7 @@ function MultiCombobox({
         TextField,
         {
           ...params,
+          placeholder,
           sx: (theme) => ({
             ".MuiAutocomplete-inputRoot.MuiInputBase-adornedStart": {
               paddingLeft: theme.spacing(0.25),
@@ -230,7 +233,7 @@ function isAction(option) {
 // src/components/css-classes/css-class-item.tsx
 import * as React6 from "react";
 import { useState as useState2 } from "react";
-import { stylesRepository as stylesRepository3 } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository3, validateStyleLabel } from "@elementor/editor-styles-repository";
 import { EditableField, EllipsisWithTooltip, useEditable } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
 import {
@@ -245,7 +248,7 @@ import { __ as __2 } from "@wordpress/i18n";
 
 // src/components/css-classes/css-class-menu.tsx
 import * as React5 from "react";
-import { ELEMENTS_STYLES_PROVIDER_KEY, stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
+import { isElementsStylesProvider, stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
 import { MenuListItem } from "@elementor/editor-ui";
 import { bindMenu, Divider, Menu, MenuSubheader, Stack } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
@@ -298,7 +301,7 @@ var StyleIndicator = styled2("div", {
 var STATES = ["hover", "focus", "active"];
 function CssClassMenu({ styleId, provider, popupState, handleRename, anchorEl }) {
   const styledStates = useStyledStates(styleId);
-  const indicatorVariant = provider === ELEMENTS_STYLES_PROVIDER_KEY ? "local" : "global";
+  const indicatorVariant = !provider || isElementsStylesProvider(provider) ? "local" : "global";
   const handleKeyDown = (e) => {
     e.stopPropagation();
   };
@@ -316,7 +319,8 @@ function CssClassMenu({ styleId, provider, popupState, handleRename, anchorEl })
         horizontal: "left",
         vertical: -4
       },
-      onKeyDown: handleKeyDown
+      onKeyDown: handleKeyDown,
+      disableAutoFocusItem: true
     },
     getMenuItemsByProvider({ provider, styleId, handleRename, closeMenu: popupState.close }),
     /* @__PURE__ */ React5.createElement(MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, __("States", "elementor")),
@@ -359,7 +363,7 @@ function getMenuItemsByProvider({
   handleRename,
   closeMenu
 }) {
-  if (!styleId) {
+  if (!styleId || !provider) {
     return [];
   }
   const providerInstance = stylesRepository2.getProviderByKey(provider);
@@ -449,8 +453,8 @@ function RenameClassMenuItem({
 var CHIP_SIZE = "tiny";
 function CssClassItem({
   id,
-  label,
   provider,
+  label,
   isActive,
   color: colorProp,
   icon,
@@ -474,7 +478,7 @@ function CssClassItem({
     validation: validateLabel
   });
   const color = error ? "error" : colorProp;
-  const providerActions = stylesRepository3.getProviderByKey(provider)?.actions;
+  const providerActions = provider ? stylesRepository3.getProviderByKey(provider)?.actions : null;
   const allowRename = Boolean(providerActions?.update);
   const isShowingState = isActive && meta.state;
   return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
@@ -549,13 +553,11 @@ function CssClassItem({
   ));
 }
 var validateLabel = (newLabel) => {
-  if (!stylesRepository3.isLabelValid(newLabel)) {
-    return __2("Invalid format", "elementor");
-  }
-  if (stylesRepository3.isLabelExist(newLabel)) {
-    return __2("Name exists", "elementor");
+  const result = validateStyleLabel(newLabel);
+  if (result.isValid) {
+    return null;
   }
-  return null;
+  return result.error;
 };
 
 // src/components/css-classes/css-class-selector.tsx
@@ -567,7 +569,7 @@ var EMPTY_OPTION = {
   fixed: true,
   color: "accent",
   icon: /* @__PURE__ */ React7.createElement(MapPinIcon, null),
-  provider: ELEMENTS_STYLES_PROVIDER_KEY2
+  provider: null
 };
 var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = createLocation();
 function CssClassSelector() {
@@ -578,11 +580,13 @@ function CssClassSelector() {
   const handleApply = useHandleApply(appliedIds, setAppliedIds);
   const applied = useAppliedOptions(options13, appliedIds);
   const active = applied.find((option) => option.value === activeId) ?? EMPTY_OPTION;
-  return /* @__PURE__ */ React7.createElement(Stack3, { gap: 1, p: 2 }, /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React7.createElement(Typography2, { component: "label", variant: "caption", htmlFor: ID }, __3("Classes", "elementor")), /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React7.createElement(
+  const showPlaceholder = applied.every(({ fixed }) => fixed);
+  return /* @__PURE__ */ React7.createElement(Stack3, { p: 2 }, /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React7.createElement(FormLabel, { htmlFor: ID, size: "small" }, __3("Classes", "elementor")), /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React7.createElement(
     MultiCombobox,
     {
       id: ID,
       size: "tiny",
+      placeholder: showPlaceholder ? __3("Type to search/add global classes", "elementor") : void 0,
       options: options13,
       selected: applied,
       onSelect: handleApply,
@@ -618,6 +622,9 @@ function CssClassSelector() {
   ));
 }
 var updateClassByProvider = (provider, data) => {
+  if (!provider) {
+    return;
+  }
   const providerInstance = stylesRepository4.getProviderByKey(provider);
   if (!providerInstance) {
     return;
@@ -628,8 +635,8 @@ function useOptions() {
   const { element } = useElement();
   const isProviderEditable = (provider) => !!provider.actions.updateProps;
   return useProviders().filter(isProviderEditable).flatMap((provider) => {
-    const isElements = provider.key === ELEMENTS_STYLES_PROVIDER_KEY2;
-    const styleDefs = provider.actions.get({ elementId: element.id });
+    const isElements = isElementsStylesProvider2(provider.getKey());
+    const styleDefs = provider.actions.all({ elementId: element.id });
     if (isElements && styleDefs.length === 0) {
       return [EMPTY_OPTION];
     }
@@ -640,7 +647,7 @@ function useOptions() {
         fixed: isElements,
         color: isElements ? "accent" : "global",
         icon: isElements ? /* @__PURE__ */ React7.createElement(MapPinIcon, null) : null,
-        provider: provider.key,
+        provider: provider.getKey(),
         // translators: %s is the plural label of the provider (e.g "Existing classes").
         group: __3("Existing %s", "elementor").replace("%s", provider.labels?.plural ?? "")
       };
@@ -657,7 +664,7 @@ function useCreateActions({
       label: (value) => __3('Create "%s"', "elementor").replace("%s", value),
       // translators: %s is the singular label of css class provider (e.g "CSS Class").
       group: __3("Create a new %s", "elementor").replace("%s", provider.labels?.singular ?? ""),
-      condition: (_, inputValue) => isLabelValid(inputValue) && !hasReachedLimit(provider),
+      condition: (_, inputValue) => validateStyleLabel2(inputValue).isValid && !hasReachedLimit(provider),
       apply: (label) => {
         const createdId = create(label);
         if (!createdId) {
@@ -670,18 +677,12 @@ function useCreateActions({
   });
 }
 function hasReachedLimit(provider) {
-  if (provider.limit === void 0) {
-    return false;
-  }
-  return provider.actions.get().length >= provider.limit;
-}
-function isLabelValid(newLabel) {
-  return stylesRepository4.isLabelValid(newLabel) && !stylesRepository4.isLabelExist(newLabel);
+  return provider.actions.all().length >= provider.limit;
 }
 function useAppliedOptions(options13, appliedIds) {
   const applied = options13.filter((option) => option.value && appliedIds.includes(option.value));
   const hasElementsProviderStyleApplied = applied.some(
-    (option) => option.provider === ELEMENTS_STYLES_PROVIDER_KEY2
+    (option) => option.provider && isElementsStylesProvider2(option.provider)
   );
   if (!hasElementsProviderStyleApplied) {
     applied.unshift(EMPTY_OPTION);
@@ -752,7 +753,7 @@ import { createMenu } from "@elementor/menus";
 import * as React8 from "react";
 import { useId as useId2 } from "react";
 import { XIcon } from "@elementor/icons";
-import { bindPopover, bindToggle, IconButton, Popover, Stack as Stack4, Tooltip, Typography as Typography3, usePopupState as usePopupState2 } from "@elementor/ui";
+import { bindPopover, bindToggle, IconButton, Popover, Stack as Stack4, Tooltip, Typography as Typography2, usePopupState as usePopupState2 } from "@elementor/ui";
 var SIZE = "tiny";
 function PopoverAction({
   title,
@@ -779,7 +780,7 @@ function PopoverAction({
       },
       ...bindPopover(popupState)
     },
-    /* @__PURE__ */ React8.createElement(Stack4, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React8.createElement(Icon, { fontSize: SIZE, sx: { mr: 0.5 } }), /* @__PURE__ */ React8.createElement(Typography3, { variant: "subtitle2" }, title), /* @__PURE__ */ React8.createElement(IconButton, { sx: { ml: "auto" }, size: SIZE, onClick: popupState.close }, /* @__PURE__ */ React8.createElement(XIcon, { fontSize: SIZE }))),
+    /* @__PURE__ */ React8.createElement(Stack4, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React8.createElement(Icon, { fontSize: SIZE, sx: { mr: 0.5 } }), /* @__PURE__ */ React8.createElement(Typography2, { variant: "subtitle2" }, title), /* @__PURE__ */ React8.createElement(IconButton, { sx: { ml: "auto" }, size: SIZE, onClick: popupState.close }, /* @__PURE__ */ React8.createElement(XIcon, { fontSize: SIZE }))),
     /* @__PURE__ */ React8.createElement(PopoverContent2, { closePopover: popupState.close })
   ));
 }
@@ -982,8 +983,7 @@ var Control2 = ({ control }) => {
 
 // src/components/style-tab.tsx
 import * as React65 from "react";
-import { useState as useState7 } from "react";
-import { getElementStyles, useElementSetting as useElementSetting5 } from "@elementor/editor-elements";
+import { useState as useState8 } from "react";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
@@ -1006,6 +1006,9 @@ var useStylesRerender = () => {
   useEffect(() => provider?.subscribe(reRender), [provider]);
 };
 
+// src/styles-inheritance/create-snapshots-manager.ts
+import { filterEmptyValues } from "@elementor/editor-props";
+
 // src/styles-inheritance/utils.ts
 var DEFAULT_STATE = "normal";
 var DEFAULT_BREAKPOINT = "desktop";
@@ -1096,12 +1099,16 @@ function buildInitialSnapshotFromStyles(styles) {
       variant: { props }
     } = styleData;
     Object.entries(props).forEach(([key, value]) => {
+      const filteredValue = filterEmptyValues(value);
+      if (filteredValue === null) {
+        return;
+      }
       if (!snapshot[key]) {
         snapshot[key] = [];
       }
       const snapshotPropValue = {
         ...styleData,
-        value
+        value: filteredValue
       };
       snapshot[key].push(snapshotPropValue);
     });
@@ -1133,7 +1140,7 @@ function createStylesInheritance(styleDefs, breakpointsRoot) {
 function buildStyleVariantsByMetaMapping(styleDefs) {
   const breakpointStateSlots = {};
   styleDefs.forEach((styleDef) => {
-    const provider = getProviderByStyleId(styleDef.id)?.key ?? null;
+    const provider = getProviderByStyleId(styleDef.id)?.getKey() ?? null;
     styleDef.variants.forEach((variant) => {
       const { meta } = variant;
       const { state, breakpoint } = meta;
@@ -1198,6 +1205,30 @@ var useBaseStyles = () => {
   return Object.values(widgetCache?.base_styles ?? {});
 };
 
+// src/hooks/use-active-style-def-id.ts
+import { useState as useState4 } from "react";
+import { getElementStyles, useElementSetting as useElementSetting5 } from "@elementor/editor-elements";
+function useActiveStyleDefId(classProp) {
+  const [activeStyledDefId, setActiveStyledDefId] = useState4(null);
+  const appliedClassesIds = useAppliedClassesIds2(classProp)?.value || [];
+  const fallback = useFirstAppliedClass(appliedClassesIds);
+  const activeAndAppliedClassId = useActiveAndAppliedClassId(activeStyledDefId, appliedClassesIds);
+  return [activeAndAppliedClassId || fallback?.id || null, setActiveStyledDefId];
+}
+function useFirstAppliedClass(appliedClassesIds) {
+  const { element } = useElement();
+  const stylesDefs = getElementStyles(element.id) ?? {};
+  return Object.values(stylesDefs).find((styleDef) => appliedClassesIds.includes(styleDef.id));
+}
+function useAppliedClassesIds2(classProp) {
+  const { element } = useElement();
+  return useElementSetting5(element.id, classProp);
+}
+function useActiveAndAppliedClassId(id, appliedClassesIds) {
+  const isClassApplied = !!id && appliedClassesIds.includes(id);
+  return isClassApplied ? id : null;
+}
+
 // src/components/style-sections/background-section/background-section.tsx
 import * as React19 from "react";
 import { BackgroundControl } from "@elementor/editor-controls";
@@ -1215,7 +1246,7 @@ import {
   getElementLabel
 } from "@elementor/editor-elements";
 import { getVariantByMeta } from "@elementor/editor-styles";
-import { LOCAL_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
+import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
 import { undoable } from "@elementor/editor-v1-adapters";
 import { __ as __4 } from "@wordpress/i18n";
 function useStylesFields(propNames) {
@@ -1256,9 +1287,9 @@ function getProps({ styleId, elementId, provider, meta, propNames }) {
   if (!provider || !styleId) {
     return null;
   }
-  const style = provider.actions.getById?.(styleId, { elementId });
+  const style = provider.actions.get(styleId, { elementId });
   if (!style) {
-    throw new StyleNotFoundUnderProviderError({ context: { styleId, providerKey: provider.key } });
+    throw new StyleNotFoundUnderProviderError({ context: { styleId, providerKey: provider.getKey() } });
   }
   const variant = getVariantByMeta(style, meta);
   return Object.fromEntries(
@@ -1272,7 +1303,7 @@ function useUndoableCreateElementStyle() {
         do: (payload) => {
           return createElementStyle({
             ...payload,
-            label: LOCAL_STYLES_RESERVED_LABEL
+            label: ELEMENTS_STYLES_RESERVED_LABEL
           });
         },
         undo: ({ elementId }, styleId) => {
@@ -1282,7 +1313,7 @@ function useUndoableCreateElementStyle() {
           return createElementStyle({
             ...payload,
             styleId,
-            label: LOCAL_STYLES_RESERVED_LABEL
+            label: ELEMENTS_STYLES_RESERVED_LABEL
           });
         }
       },
@@ -1300,10 +1331,10 @@ function useUndoableUpdateStyle() {
         do: ({ elementId, styleId, provider, meta, props }) => {
           if (!provider.actions.updateProps) {
             throw new StylesProviderCannotUpdatePropsError({
-              context: { providerKey: provider.key }
+              context: { providerKey: provider.getKey() }
             });
           }
-          const style = provider.actions.getById(styleId, { elementId });
+          const style = provider.actions.get(styleId, { elementId });
           const prevProps = getCurrentProps(style, meta);
           provider.actions.updateProps(
             {
@@ -1350,7 +1381,7 @@ function useStylesField(propName) {
 // src/styles-inheritance/styles-inheritance-indicator.tsx
 import * as React17 from "react";
 import { useBoundProp } from "@elementor/editor-controls";
-import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, ELEMENTS_STYLES_PROVIDER_KEY as ELEMENTS_STYLES_PROVIDER_KEY3 } from "@elementor/editor-styles-repository";
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider as isElementsStylesProvider3 } from "@elementor/editor-styles-repository";
 import { __ as __5 } from "@wordpress/i18n";
 var StylesInheritanceIndicator = () => {
   const { value, path } = useBoundProp();
@@ -1370,7 +1401,7 @@ var StylesInheritanceIndicator = () => {
       StyleIndicator,
       {
         "aria-label": __5("This is the final value", "elementor"),
-        variant: currentStyleProvider?.key === ELEMENTS_STYLES_PROVIDER_KEY3 ? "local" : "global"
+        variant: isElementsStylesProvider3(currentStyleProvider?.getKey()) ? "local" : "global"
       }
     );
   }
@@ -1387,11 +1418,12 @@ var StylesInheritanceIndicator = () => {
 };
 
 // src/controls-registry/styles-field.tsx
-var StylesField = ({ bind, children }) => {
+var StylesField = ({ bind, placeholder, children }) => {
   const [value, setValue] = useStylesField(bind);
   const stylesSchema = getStylesSchema();
   const propType = createTopLevelOjectType({ schema: stylesSchema });
   const values = { [bind]: value };
+  const placeholderValues = { [bind]: placeholder };
   const setValues = (newValue) => {
     setValue(newValue[bind]);
   };
@@ -1405,7 +1437,16 @@ var StylesField = ({ bind, children }) => {
         }
       ]
     },
-    /* @__PURE__ */ React18.createElement(PropProvider2, { propType, value: values, setValue: setValues }, /* @__PURE__ */ React18.createElement(PropKeyProvider2, { bind }, children))
+    /* @__PURE__ */ React18.createElement(
+      PropProvider2,
+      {
+        propType,
+        value: values,
+        setValue: setValues,
+        placeholder: placeholderValues
+      },
+      /* @__PURE__ */ React18.createElement(PropKeyProvider2, { bind }, children)
+    )
   );
 };
 
@@ -1885,35 +1926,37 @@ import * as React35 from "react";
 import { ToggleControl as ToggleControl4 } from "@elementor/editor-controls";
 import { Stack as Stack10 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
+var displayFieldOptions = [
+  {
+    value: "block",
+    renderContent: () => __14("Block", "elementor"),
+    label: __14("Block", "elementor"),
+    showTooltip: true
+  },
+  {
+    value: "flex",
+    renderContent: () => __14("Flex", "elementor"),
+    label: __14("Flex", "elementor"),
+    showTooltip: true
+  },
+  {
+    value: "inline-block",
+    renderContent: () => __14("In-blk", "elementor"),
+    label: __14("Inline-block", "elementor"),
+    showTooltip: true
+  },
+  {
+    value: "inline-flex",
+    renderContent: () => __14("In-flx", "elementor"),
+    label: __14("Inline-flex", "elementor"),
+    showTooltip: true
+  }
+];
 var DisplayField = () => {
-  const options13 = [
-    {
-      value: "block",
-      renderContent: () => __14("Block", "elementor"),
-      label: __14("Block", "elementor"),
-      showTooltip: true
-    },
-    {
-      value: "flex",
-      renderContent: () => __14("Flex", "elementor"),
-      label: __14("Flex", "elementor"),
-      showTooltip: true
-    },
-    {
-      value: "inline-block",
-      renderContent: () => __14("In-blk", "elementor"),
-      label: __14("Inline-block", "elementor"),
-      showTooltip: true
-    },
-    {
-      value: "inline-flex",
-      renderContent: () => __14("In-flx", "elementor"),
-      label: __14("Inline-flex", "elementor"),
-      showTooltip: true
-    }
-  ];
-  return /* @__PURE__ */ React35.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React35.createElement(Stack10, { gap: 0.75 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, __14("Display", "elementor")), /* @__PURE__ */ React35.createElement(ToggleControl4, { options: options13, fullWidth: true })));
+  const placeholder = useDisplayPlaceholderValue();
+  return /* @__PURE__ */ React35.createElement(StylesField, { bind: "display", placeholder }, /* @__PURE__ */ React35.createElement(Stack10, { gap: 0.75 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, __14("Display", "elementor")), /* @__PURE__ */ React35.createElement(ToggleControl4, { options: displayFieldOptions, fullWidth: true })));
 };
+var useDisplayPlaceholderValue = () => useStylesInheritanceField("display")[0]?.value ?? void 0;
 
 // src/components/style-sections/layout-section/flex-direction-field.tsx
 import * as React36 from "react";
@@ -1960,7 +2003,7 @@ var FlexDirectionField = () => {
 
 // src/components/style-sections/layout-section/flex-order-field.tsx
 import * as React37 from "react";
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { ControlToggleButtonGroup, NumberControl } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowUpSmallIcon as ArrowUpSmallIcon2, PencilIcon } from "@elementor/icons";
 import { DirectionProvider as DirectionProvider5, Grid as Grid6, ThemeProvider as ThemeProvider5 } from "@elementor/ui";
@@ -1996,7 +2039,7 @@ var items = [
 ];
 var FlexOrderField = () => {
   const { isSiteRtl } = useDirection(), [order, setOrder] = useStylesField("order");
-  const [groupControlValue, setGroupControlValue] = useState4(getGroupControlValue(order?.value || null));
+  const [groupControlValue, setGroupControlValue] = useState5(getGroupControlValue(order?.value || null));
   const handleToggleButtonChange = (group) => {
     setGroupControlValue(group);
     if (!group || group === CUSTOM) {
@@ -2034,7 +2077,7 @@ var getGroupControlValue = (order) => {
 
 // src/components/style-sections/layout-section/flex-size-field.tsx
 import * as React38 from "react";
-import { useMemo as useMemo2, useState as useState5 } from "react";
+import { useMemo as useMemo2, useState as useState6 } from "react";
 import {
   ControlToggleButtonGroup as ControlToggleButtonGroup2,
   NumberControl as NumberControl2,
@@ -2071,7 +2114,7 @@ var FlexSizeField = () => {
   const grow = fields?.["flex-grow"]?.value || null;
   const shrink = fields?.["flex-shrink"]?.value || null;
   const basis = fields?.["flex-basis"]?.value || null;
-  const currentGroup = useMemo2(() => getActiveGroup({ grow, shrink, basis }), [grow, shrink, basis]), [activeGroup, setActiveGroup] = useState5(currentGroup);
+  const currentGroup = useMemo2(() => getActiveGroup({ grow, shrink, basis }), [grow, shrink, basis]), [activeGroup, setActiveGroup] = useState6(currentGroup);
   const onChangeGroup = (group = null) => {
     setActiveGroup(group);
     if (!group || group === "custom") {
@@ -2232,16 +2275,25 @@ var WrapField = () => {
 // src/components/style-sections/layout-section/layout-section.tsx
 var LayoutSection = () => {
   const [display] = useStylesField("display");
+  const displayPlaceholder = useDisplayPlaceholderValue();
+  const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
   const { element } = useElement();
   const parent = useParentElement(element.id);
   const parentStyle = useComputedStyle(parent?.id || null);
-  return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(DisplayField, null), ("flex" === display?.value || "inline-flex" === display?.value) && /* @__PURE__ */ React42.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React42.createElement(FlexChildFields, null));
+  return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React42.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React42.createElement(FlexChildFields, null));
 };
 var FlexFields = () => {
   const [flexWrap] = useStylesField("flex-wrap");
   return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(FlexDirectionField, null), /* @__PURE__ */ React42.createElement(JustifyContentField, null), /* @__PURE__ */ React42.createElement(AlignItemsField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(GapControlField, null), /* @__PURE__ */ React42.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React42.createElement(AlignContentField, null));
 };
 var FlexChildFields = () => /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(ControlFormLabel3, null, __21("Flex child", "elementor")), /* @__PURE__ */ React42.createElement(AlignSelfChild, null), /* @__PURE__ */ React42.createElement(FlexOrderField, null), /* @__PURE__ */ React42.createElement(FlexSizeField, null));
+var shouldDisplayFlexFields = (display, local) => {
+  const value = display?.value ?? local?.value;
+  if (!value) {
+    return false;
+  }
+  return "flex" === value || "inline-flex" === value;
+};
 
 // src/components/style-sections/position-section/position-section.tsx
 import * as React46 from "react";
@@ -2413,11 +2465,11 @@ import * as React64 from "react";
 
 // src/components/collapsible-content.tsx
 import * as React50 from "react";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Button, Collapse as Collapse3, Stack as Stack15 } from "@elementor/ui";
 import { __ as __28 } from "@wordpress/i18n";
 var CollapsibleContent = ({ children, defaultOpen = false }) => {
-  const [open, setOpen] = useState6(defaultOpen);
+  const [open, setOpen] = useState7(defaultOpen);
   const handleToggle = () => {
     setOpen((prevOpen) => !prevOpen);
   };
@@ -2764,7 +2816,7 @@ var TypographySection = () => {
 var StyleTab = () => {
   const currentClassesProp = useCurrentClassesProp();
   const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
-  const [activeStyleState, setActiveStyleState] = useState7(null);
+  const [activeStyleState, setActiveStyleState] = useState8(null);
   const breakpoint = useActiveBreakpoint();
   return /* @__PURE__ */ React65.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React65.createElement(
     StyleProvider,
@@ -2780,17 +2832,6 @@ var StyleTab = () => {
     /* @__PURE__ */ React65.createElement(SessionStorageProvider2, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React65.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React65.createElement(CssClassSelector, null), /* @__PURE__ */ React65.createElement(Divider4, null), /* @__PURE__ */ React65.createElement(SectionsList, null, /* @__PURE__ */ React65.createElement(Section, { title: __43("Layout", "elementor") }, /* @__PURE__ */ React65.createElement(LayoutSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Spacing", "elementor") }, /* @__PURE__ */ React65.createElement(SpacingSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Size", "elementor") }, /* @__PURE__ */ React65.createElement(SizeSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Position", "elementor") }, /* @__PURE__ */ React65.createElement(PositionSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Typography", "elementor") }, /* @__PURE__ */ React65.createElement(TypographySection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Background", "elementor") }, /* @__PURE__ */ React65.createElement(BackgroundSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Border", "elementor") }, /* @__PURE__ */ React65.createElement(BorderSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: __43("Effects", "elementor") }, /* @__PURE__ */ React65.createElement(EffectsSection, null)))))
   ));
 };
-function useActiveStyleDefId(currentClassesProp) {
-  const [activeStyledDefId, setActiveStyledDefId] = useState7(null);
-  const fallback = useFirstElementStyleDef(currentClassesProp);
-  return [activeStyledDefId || fallback?.id || null, setActiveStyledDefId];
-}
-function useFirstElementStyleDef(currentClassesProp) {
-  const { element } = useElement();
-  const classesIds = useElementSetting5(element.id, currentClassesProp)?.value || [];
-  const stylesDefs = getElementStyles(element.id) ?? {};
-  return Object.values(stylesDefs).find((styleDef) => classesIds.includes(styleDef.id));
-}
 function useCurrentClassesProp() {
   const { elementType } = useElement();
   const prop = Object.entries(elementType.propsSchema).find(
@@ -2892,7 +2933,7 @@ import {
   Tab as Tab2,
   TabPanel as TabPanel2,
   Tabs as Tabs2,
-  Typography as Typography5,
+  Typography as Typography4,
   UnstableTag as Tag,
   usePopupState as usePopupState3,
   useTabs as useTabs2
@@ -3020,7 +3061,7 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 import * as React70 from "react";
-import { Fragment as Fragment9, useState as useState8 } from "react";
+import { Fragment as Fragment9, useState as useState9 } from "react";
 import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { DatabaseIcon, SearchIcon } from "@elementor/icons";
 import {
@@ -3033,12 +3074,12 @@ import {
   MenuSubheader as MenuSubheader2,
   Stack as Stack18,
   TextField as TextField2,
-  Typography as Typography4
+  Typography as Typography3
 } from "@elementor/ui";
 import { __ as __46 } from "@wordpress/i18n";
 var SIZE3 = "tiny";
 var DynamicSelection = ({ onSelect }) => {
-  const [searchValue, setSearchValue] = useState8("");
+  const [searchValue, setSearchValue] = useState9("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const { value: anyValue } = useBoundProp4();
   const { bind, value: dynamicValue, setValue } = useBoundProp4(dynamicPropTypeUtil);
@@ -3101,8 +3142,8 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React70.createElem
     sx: { pb: 3.5 }
   },
   /* @__PURE__ */ React70.createElement(DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React70.createElement(Typography4, { align: "center", variant: "subtitle2" }, __46("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React70.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React70.createElement(Typography4, { align: "center", variant: "caption" }, __46("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React70.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __46("Clear & try again", "elementor")))
+  /* @__PURE__ */ React70.createElement(Typography3, { align: "center", variant: "subtitle2" }, __46("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React70.createElement("br", null), "\u201C", searchValue, "\u201D."),
+  /* @__PURE__ */ React70.createElement(Typography3, { align: "center", variant: "caption" }, __46("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React70.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __46("Clear & try again", "elementor")))
 );
 var NoDynamicTags = () => /* @__PURE__ */ React70.createElement(Box4, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(
   Stack18,
@@ -3116,8 +3157,8 @@ var NoDynamicTags = () => /* @__PURE__ */ React70.createElement(Box4, { sx: { ov
     sx: { pb: 3.5 }
   },
   /* @__PURE__ */ React70.createElement(DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React70.createElement(Typography4, { align: "center", variant: "subtitle2" }, __46("Streamline your workflow with dynamic tags", "elementor")),
-  /* @__PURE__ */ React70.createElement(Typography4, { align: "center", variant: "caption" }, __46("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
+  /* @__PURE__ */ React70.createElement(Typography3, { align: "center", variant: "subtitle2" }, __46("Streamline your workflow with dynamic tags", "elementor")),
+  /* @__PURE__ */ React70.createElement(Typography3, { align: "center", variant: "caption" }, __46("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
 ));
 var useFilteredOptions = (searchValue) => {
   const dynamicTags = usePropDynamicTags();
@@ -3177,7 +3218,7 @@ var DynamicSelectionControl = () => {
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       ...bindPopover2(selectionPopoverState)
     },
-    /* @__PURE__ */ React71.createElement(Stack19, null, /* @__PURE__ */ React71.createElement(Stack19, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React71.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(Typography5, { variant: "subtitle2" }, __47("Dynamic tags", "elementor")), /* @__PURE__ */ React71.createElement(IconButton3, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React71.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
+    /* @__PURE__ */ React71.createElement(Stack19, null, /* @__PURE__ */ React71.createElement(Stack19, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React71.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(Typography4, { variant: "subtitle2" }, __47("Dynamic tags", "elementor")), /* @__PURE__ */ React71.createElement(IconButton3, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React71.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
@@ -3202,7 +3243,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       ...bindPopover2(settingsPopupState)
     },
-    /* @__PURE__ */ React71.createElement(Paper, { component: Stack19, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React71.createElement(Stack19, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React71.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(Typography5, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React71.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React71.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
+    /* @__PURE__ */ React71.createElement(Paper, { component: Stack19, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React71.createElement(Stack19, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React71.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(Typography4, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React71.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React71.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
   ));
 };
 var DynamicSettings = ({ controls }) => {
@@ -3327,10 +3368,8 @@ var blockV1Panel = () => {
     condition: isAtomicWidgetSelected
   });
 };
-
-// src/index.ts
-init2();
 export {
+  init2 as init,
   injectIntoClassSelectorActions,
   replaceControl,
   useBoundProp7 as useBoundProp,