@elementor/editor-controls 3.35.0-436 → 3.35.0-438

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "3.35.0-436",
+  "version": "3.35.0-438",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.35.0-436",
-    "@elementor/editor-elements": "3.35.0-436",
-    "@elementor/editor-props": "3.35.0-436",
-    "@elementor/editor-responsive": "3.35.0-436",
-    "@elementor/editor-ui": "3.35.0-436",
-    "@elementor/editor-v1-adapters": "3.35.0-436",
-    "@elementor/env": "3.35.0-436",
-    "@elementor/http-client": "3.35.0-436",
+    "@elementor/editor-current-user": "3.35.0-438",
+    "@elementor/editor-elements": "3.35.0-438",
+    "@elementor/editor-props": "3.35.0-438",
+    "@elementor/editor-responsive": "3.35.0-438",
+    "@elementor/editor-ui": "3.35.0-438",
+    "@elementor/editor-v1-adapters": "3.35.0-438",
+    "@elementor/env": "3.35.0-438",
+    "@elementor/http-client": "3.35.0-438",
     "@elementor/icons": "^1.63.0",
-    "@elementor/locations": "3.35.0-436",
-    "@elementor/mixpanel": "3.35.0-436",
-    "@elementor/query": "3.35.0-436",
-    "@elementor/session": "3.35.0-436",
+    "@elementor/locations": "3.35.0-438",
+    "@elementor/mixpanel": "3.35.0-438",
+    "@elementor/query": "3.35.0-438",
+    "@elementor/session": "3.35.0-438",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-436",
-    "@elementor/wp-media": "3.35.0-436",
+    "@elementor/utils": "3.35.0-438",
+    "@elementor/wp-media": "3.35.0-438",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/controls/transform-control/transform-repeater-control.tsx

@@ -13,6 +13,7 @@ import { EditItemPopover } from '../../components/control-repeater/items/edit-it
 import { RepeaterHeader } from '../../components/repeater/repeater-header';
 import { ControlAdornments } from '../../control-adornments/control-adornments';
 import { createControl } from '../../create-control';
+import { useElementCanHaveChildren } from '../../hooks/use-element-can-have-children';
 import { initialRotateValue, initialScaleValue, initialSkewValue, initialTransformValue } from './initial-values';
 import { TransformContent } from './transform-content';
 import { TransformIcon } from './transform-icon';
@@ -25,10 +26,15 @@ export const TransformRepeaterControl = createControl( () => {
 	const context = useBoundProp( transformPropTypeUtil );
 	const headerRef = useRef< HTMLDivElement >( null );
 	const popupState = usePopupState( { variant: 'popover' } );
+	const showChildrenPerspective = useElementCanHaveChildren();
 
 	return (
 		<PropProvider { ...context }>
-			<TransformSettingsControl popupState={ popupState } anchorRef={ headerRef } />
+			<TransformSettingsControl
+				popupState={ popupState }
+				anchorRef={ headerRef }
+				showChildrenPerspective={ showChildrenPerspective }
+			/>
 			<PropKeyProvider bind={ 'transform-functions' }>
 				<Repeater headerRef={ headerRef } propType={ context.propType } popupState={ popupState } />
 			</PropKeyProvider>

package/src/controls/transform-control/transform-settings-control.tsx

@@ -14,9 +14,11 @@ const SIZE = 'tiny';
 export const TransformSettingsControl = ( {
 	popupState,
 	anchorRef,
+	showChildrenPerspective,
 }: {
 	popupState: PopupState;
 	anchorRef: React.RefObject< HTMLDivElement | null >;
+	showChildrenPerspective: boolean;
 } ) => {
 	const popupProps = bindPopover( {
 		...popupState,
@@ -47,10 +49,14 @@ export const TransformSettingsControl = ( {
 				<PropKeyProvider bind={ 'transform-origin' }>
 					<TransformOriginControl />
 				</PropKeyProvider>
-				<Box sx={ { my: 0.5 } }>
-					<Divider />
-				</Box>
-				<ChildrenPerspectiveControl />
+				{ showChildrenPerspective && (
+					<>
+						<Box sx={ { my: 0.5 } }>
+							<Divider />
+						</Box>
+						<ChildrenPerspectiveControl />
+					</>
+				) }
 			</PopoverContent>
 		</Popover>
 	);

package/src/hooks/use-element-can-have-children.ts

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { getContainer, useSelectedElement } from '@elementor/editor-elements';
+
+export const useElementCanHaveChildren = (): boolean => {
+	const { element } = useSelectedElement();
+	const elementId = element?.id || '';
+
+	return useMemo( () => {
+		const container = getContainer( elementId );
+
+		if ( ! container ) {
+			return false;
+		}
+
+		return container.model.get( 'elType' ) !== 'widget';
+	}, [ elementId ] );
+};

package/src/index.ts

@@ -81,3 +81,4 @@ export {
 
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';
+export { useElementCanHaveChildren } from './hooks/use-element-can-have-children';