@elementor/editor-editing-panel 1.33.1 → 1.35.0

package/dist/index.mjs

@@ -1004,6 +1004,21 @@ function useScrollDirection() {
   return useContext4(ScrollContext)?.direction ?? DEFAULT_SCROLL_DIRECTION;
 }
 
+// src/hooks/use-state-by-element.ts
+import { useState as useState5 } from "react";
+import { getSessionStorageItem, setSessionStorageItem } from "@elementor/session";
+var useStateByElement = (key, initialValue) => {
+  const { element } = useElement();
+  const lookup = `elementor/editor-state/${element.id}/${key}`;
+  const storedValue = getSessionStorageItem(lookup);
+  const [value, setValue] = useState5(storedValue ?? initialValue);
+  const doUpdate = (newValue) => {
+    setSessionStorageItem(lookup, newValue);
+    setValue(newValue);
+  };
+  return [value, doUpdate];
+};
+
 // src/components/settings-tab.tsx
 import * as React16 from "react";
 import { ControlFormLabel } from "@elementor/editor-controls";
@@ -1105,7 +1120,7 @@ var SettingsField = ({ bind, children }) => {
 
 // src/components/section.tsx
 import * as React14 from "react";
-import { useId as useId3, useState as useState5 } from "react";
+import { useId as useId3 } from "react";
 import { Collapse, Divider as Divider2, ListItemButton, ListItemText, Stack as Stack5 } from "@elementor/ui";
 
 // src/components/collapse-icon.tsx
@@ -1122,7 +1137,7 @@ var CollapseIcon = styled5(ChevronDownIcon, {
 
 // src/components/section.tsx
 function Section({ title, children, defaultExpanded = false }) {
-  const [isOpen, setIsOpen] = useState5(!!defaultExpanded);
+  const [isOpen, setIsOpen] = useStateByElement(title, !!defaultExpanded);
   const id = useId3();
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
@@ -1131,7 +1146,7 @@ function Section({ title, children, defaultExpanded = false }) {
     {
       id: labelId,
       "aria-controls": contentId,
-      onClick: () => setIsOpen((prev) => !prev),
+      onClick: () => setIsOpen(!isOpen),
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
     /* @__PURE__ */ React14.createElement(
@@ -1583,10 +1598,24 @@ import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider as isElemen
 import { IconButton as IconButton2, Infotip } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 
-// src/sync/get-experiments-config.ts
-var getExperimentsConfig = () => {
+// src/sync/get-elementor-globals.ts
+var getElementorConfig = () => {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.config ?? {};
+};
+var getElementorFrontendConfig = () => {
+  const extendedWindow = window;
+  return extendedWindow.elementorFrontend?.config ?? {};
+};
+var getElementorCommonConfig = () => {
   const extendedWindow = window;
-  return extendedWindow.elementorCommon?.config?.experimentalFeatures ?? {};
+  return extendedWindow.elementorCommon?.config ?? {};
+};
+
+// src/sync/is-experiment-active.ts
+var isExperimentActive = (experiment) => {
+  const allFeatures = getElementorCommonConfig()?.experimentalFeatures ?? {};
+  return !!allFeatures?.[experiment];
 };
 
 // src/styles-inheritance/styles-inheritance-infotip.tsx
@@ -1673,7 +1702,7 @@ var StylesInheritanceIndicator = () => {
   const hasValue = value !== null && value !== void 0;
   const label = getLabel({ isFinalValue, hasValue });
   const variantType = getVariant({ isFinalValue, hasValue, currentStyleProvider });
-  const { e_indications_popover: eIndicationsPopover } = getExperimentsConfig();
+  const eIndicationsPopover = isExperimentActive("e_indications_popover");
   if (!eIndicationsPopover) {
     return /* @__PURE__ */ React19.createElement(StyleIndicator, { variant: variantType, "aria-label": label });
   }
@@ -1839,8 +1868,8 @@ import { __ as __8 } from "@wordpress/i18n";
 // src/hooks/use-direction.ts
 import { useTheme } from "@elementor/ui";
 function useDirection() {
-  const theme = useTheme(), extendedWindow = window;
-  const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
+  const theme = useTheme();
+  const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!getElementorFrontendConfig()?.is_rtl;
   return { isSiteRtl, isUiRtl };
 }
 
@@ -2260,7 +2289,7 @@ import * as React37 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 = [
+var displayFieldItems = [
   {
     value: "block",
     renderContent: () => __14("Block", "elementor"),
@@ -2278,17 +2307,27 @@ var displayFieldOptions = [
     renderContent: () => __14("In-blk", "elementor"),
     label: __14("Inline-block", "elementor"),
     showTooltip: true
-  },
-  {
+  }
+];
+var DisplayField = () => {
+  const isDisplayNoneFeatureActive = isExperimentActive("e_v_3_30");
+  const items3 = [...displayFieldItems];
+  if (isDisplayNoneFeatureActive) {
+    items3.push({
+      value: "none",
+      renderContent: () => __14("None", "elementor"),
+      label: __14("None", "elementor"),
+      showTooltip: true
+    });
+  }
+  items3.push({
     value: "inline-flex",
     renderContent: () => __14("In-flx", "elementor"),
     label: __14("Inline-flex", "elementor"),
     showTooltip: true
-  }
-];
-var DisplayField = () => {
+  });
   const placeholder = useDisplayPlaceholderValue();
-  return /* @__PURE__ */ React37.createElement(StylesField, { bind: "display", placeholder }, /* @__PURE__ */ React37.createElement(Stack10, { gap: 0.75 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, __14("Display", "elementor")), /* @__PURE__ */ React37.createElement(ToggleControl4, { options: displayFieldOptions, fullWidth: true })));
+  return /* @__PURE__ */ React37.createElement(StylesField, { bind: "display", placeholder }, /* @__PURE__ */ React37.createElement(Stack10, { gap: 0.75 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, __14("Display", "elementor")), /* @__PURE__ */ React37.createElement(ToggleControl4, { options: items3, maxItems: 4, fullWidth: true })));
 };
 var useDisplayPlaceholderValue = () => useStylesInheritanceField("display")[0]?.value ?? void 0;
 
@@ -2702,7 +2741,7 @@ var PositionSection = () => {
     "inset-inline-end"
   ]);
   const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
-  const { e_css_id: eCssId } = getExperimentsConfig();
+  const isCssIdFeatureActive = isExperimentActive("e_v_3_30");
   const onPositionChange = (newPosition, previousPosition) => {
     if (newPosition === "static") {
       if (dimensionsValues) {
@@ -2722,7 +2761,7 @@ var PositionSection = () => {
     }
   };
   const isNotStatic = positionValue && positionValue?.value !== "static";
-  return /* @__PURE__ */ React49.createElement(SectionContent, null, /* @__PURE__ */ React49.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(DimensionsField, null), /* @__PURE__ */ React49.createElement(ZIndexField, null)) : null, eCssId && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(PanelDivider, null), /* @__PURE__ */ React49.createElement(OffsetField, null)));
+  return /* @__PURE__ */ React49.createElement(SectionContent, null, /* @__PURE__ */ React49.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(DimensionsField, null), /* @__PURE__ */ React49.createElement(ZIndexField, null)) : null, isCssIdFeatureActive && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(PanelDivider, null), /* @__PURE__ */ React49.createElement(OffsetField, null)));
 };
 var usePersistDimensions = () => {
   const { id: styleDefID, meta } = useStyle();
@@ -2842,14 +2881,6 @@ import { __ as __31 } from "@wordpress/i18n";
 // src/components/style-sections/typography-section/hooks/use-font-families.ts
 import { useMemo as useMemo5 } from "react";
 import { __ as __30 } from "@wordpress/i18n";
-
-// src/sync/get-elementor-config.ts
-var getElementorConfig = () => {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.config ?? {};
-};
-
-// src/components/style-sections/typography-section/hooks/use-font-families.ts
 var supportedCategories = {
   system: __30("System", "elementor"),
   custom: __30("Custom Fonts", "elementor"),
@@ -2890,7 +2921,7 @@ var FontFamilyField = () => {
   if (fontFamilies.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React54.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React54.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(ControlLabel, null, __31("Font family", "elementor"))), /* @__PURE__ */ React54.createElement(Grid15, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React54.createElement(FontFamilyControl, { fontFamilies }))));
+  return /* @__PURE__ */ React54.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React54.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(ControlLabel, null, __31("Font family", "elementor"))), /* @__PURE__ */ React54.createElement(Grid15, { item: true, xs: 6, sx: { minWidth: 0 } }, /* @__PURE__ */ React54.createElement(FontFamilyControl, { fontFamilies }))));
 };
 
 // src/components/style-sections/typography-section/font-size-field.tsx
@@ -3203,13 +3234,32 @@ function useCurrentClassesProp() {
 // src/components/editing-panel-tabs.tsx
 var EditingPanelTabs = () => {
   const { element } = useElement();
-  const { getTabProps, getTabPanelProps, getTabsProps } = useTabs("settings");
   return (
     // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
     // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
-    /* @__PURE__ */ React69.createElement(Fragment8, { key: element.id }, /* @__PURE__ */ React69.createElement(ScrollProvider, null, /* @__PURE__ */ React69.createElement(Stack17, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React69.createElement(Stack17, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React69.createElement(Tabs, { variant: "fullWidth", size: "small", sx: { mt: 0.5 }, ...getTabsProps() }, /* @__PURE__ */ React69.createElement(Tab, { label: __45("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React69.createElement(Tab, { label: __45("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React69.createElement(Divider6, null)), /* @__PURE__ */ React69.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React69.createElement(SettingsTab, null)), /* @__PURE__ */ React69.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React69.createElement(StyleTab, null)))))
+    /* @__PURE__ */ React69.createElement(Fragment8, { key: element.id }, /* @__PURE__ */ React69.createElement(PanelTabContent, null))
   );
 };
+var PanelTabContent = () => {
+  const defaultComponentTab = "settings";
+  const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
+  const { getTabProps, getTabPanelProps, getTabsProps } = useTabs(currentTab);
+  return /* @__PURE__ */ React69.createElement(ScrollProvider, null, /* @__PURE__ */ React69.createElement(Stack17, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React69.createElement(Stack17, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React69.createElement(
+    Tabs,
+    {
+      variant: "fullWidth",
+      size: "small",
+      sx: { mt: 0.5 },
+      ...getTabsProps(),
+      onChange: (_, newValue) => {
+        getTabsProps().onChange(_, newValue);
+        setCurrentTab(newValue);
+      }
+    },
+    /* @__PURE__ */ React69.createElement(Tab, { label: __45("General", "elementor"), ...getTabProps("settings") }),
+    /* @__PURE__ */ React69.createElement(Tab, { label: __45("Style", "elementor"), ...getTabProps("style") })
+  ), /* @__PURE__ */ React69.createElement(Divider6, null)), /* @__PURE__ */ React69.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React69.createElement(SettingsTab, null)), /* @__PURE__ */ React69.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React69.createElement(StyleTab, null))));
+};
 
 // src/components/editing-panel.tsx
 var { useMenuItems } = controlActionsMenu;