@elementor/editor-editing-panel 1.34.0 → 1.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.34.0",
+  "version": "1.35.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,12 +39,12 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.19.1",
-    "@elementor/editor-canvas": "0.21.1",
-    "@elementor/editor-controls": "0.29.0",
+    "@elementor/editor": "0.19.2",
+    "@elementor/editor-canvas": "0.21.2",
+    "@elementor/editor-controls": "0.30.0",
     "@elementor/editor-current-user": "0.3.2",
     "@elementor/editor-elements": "0.8.2",
-    "@elementor/editor-panels": "0.15.1",
+    "@elementor/editor-panels": "0.15.2",
     "@elementor/editor-props": "0.12.0",
     "@elementor/editor-responsive": "0.13.4",
     "@elementor/editor-styles": "0.6.6",
@@ -52,8 +52,8 @@
     "@elementor/editor-ui": "0.8.1",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.40.1",
-    "@elementor/locations": "0.7.7",
-    "@elementor/menus": "0.1.4",
+    "@elementor/locations": "0.8.0",
+    "@elementor/menus": "0.1.5",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.34.2",

package/src/components/editing-panel-tabs.tsx

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
 import { ScrollProvider } from '../contexts/scroll-context';
+import { useStateByElement } from '../hooks/use-state-by-element';
 import { SettingsTab } from './settings-tab';
 import { stickyHeaderStyles, StyleTab } from './style-tab';
 
@@ -12,30 +13,46 @@ type TabValue = 'settings' | 'style';
 
 export const EditingPanelTabs = () => {
 	const { element } = useElement();
-
-	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( '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
 		<Fragment key={ element.id }>
-			<ScrollProvider>
-				<Stack direction="column" sx={ { width: '100%' } }>
-					<Stack sx={ { ...stickyHeaderStyles, top: 0 } }>
-						<Tabs variant="fullWidth" size="small" sx={ { mt: 0.5 } } { ...getTabsProps() }>
-							<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
-							<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
-						</Tabs>
-						<Divider />
-					</Stack>
-					<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
-						<SettingsTab />
-					</TabPanel>
-					<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
-						<StyleTab />
-					</TabPanel>
-				</Stack>
-			</ScrollProvider>
+			<PanelTabContent />
 		</Fragment>
 	);
 };
+
+const PanelTabContent = () => {
+	const defaultComponentTab = 'settings';
+
+	const [ currentTab, setCurrentTab ] = useStateByElement< TabValue >( 'tab', defaultComponentTab );
+	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( currentTab );
+	return (
+		<ScrollProvider>
+			<Stack direction="column" sx={ { width: '100%' } }>
+				<Stack sx={ { ...stickyHeaderStyles, top: 0 } }>
+					<Tabs
+						variant="fullWidth"
+						size="small"
+						sx={ { mt: 0.5 } }
+						{ ...getTabsProps() }
+						onChange={ ( _: unknown, newValue: TabValue ) => {
+							getTabsProps().onChange( _, newValue );
+							setCurrentTab( newValue );
+						} }
+					>
+						<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
+						<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
+					</Tabs>
+					<Divider />
+				</Stack>
+				<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
+					<SettingsTab />
+				</TabPanel>
+				<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
+					<StyleTab />
+				</TabPanel>
+			</Stack>
+		</ScrollProvider>
+	);
+};

package/src/components/section.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { type PropsWithChildren, useId, useState } from 'react';
+import { type PropsWithChildren, useId } from 'react';
 import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
+import { useStateByElement } from '../hooks/use-state-by-element';
 import { CollapseIcon } from './collapse-icon';
 
 type Props = PropsWithChildren< {
@@ -10,7 +11,7 @@ type Props = PropsWithChildren< {
 } >;
 
 export function Section( { title, children, defaultExpanded = false }: Props ) {
-	const [ isOpen, setIsOpen ] = useState( !! defaultExpanded );
+	const [ isOpen, setIsOpen ] = useStateByElement( title, !! defaultExpanded );
 
 	const id = useId();
 	const labelId = `label-${ id }`;
@@ -21,7 +22,7 @@ export function Section( { title, children, defaultExpanded = false }: Props ) {
 			<ListItemButton
 				id={ labelId }
 				aria-controls={ contentId }
-				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+				onClick={ () => setIsOpen( ! isOpen ) }
 				sx={ { '&:hover': { backgroundColor: 'transparent' } } }
 			>
 				<ListItemText

package/src/hooks/use-state-by-element.ts

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { getSessionStorageItem, setSessionStorageItem } from '@elementor/session';
+
+import { useElement } from '../contexts/element-context';
+
+export const useStateByElement = < T >( key: string, initialValue: T ) => {
+	const { element } = useElement();
+	const lookup = `elementor/editor-state/${ element.id }/${ key }`;
+	const storedValue = getSessionStorageItem< T >( lookup );
+	const [ value, setValue ] = useState( storedValue ?? initialValue );
+
+	const doUpdate = ( newValue: T ) => {
+		setSessionStorageItem( lookup, newValue );
+		setValue( newValue );
+	};
+
+	return [ value, doUpdate ] as const;
+};