@elementor/editor-editing-panel 1.34.0 → 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(
@@ -3219,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;