@elementor/editor-editing-panel 4.2.0-904 → 4.2.0-905

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.2.0-904",
+  "version": "4.2.0-905",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-904",
-    "@elementor/editor-canvas": "4.2.0-904",
-    "@elementor/editor-controls": "4.2.0-904",
-    "@elementor/editor-documents": "4.2.0-904",
-    "@elementor/editor-elements": "4.2.0-904",
-    "@elementor/editor-interactions": "4.2.0-904",
-    "@elementor/editor-notifications": "4.2.0-904",
-    "@elementor/editor-panels": "4.2.0-904",
-    "@elementor/editor-props": "4.2.0-904",
-    "@elementor/editor-responsive": "4.2.0-904",
-    "@elementor/editor-styles": "4.2.0-904",
-    "@elementor/editor-styles-repository": "4.2.0-904",
-    "@elementor/editor-ui": "4.2.0-904",
-    "@elementor/editor-v1-adapters": "4.2.0-904",
-    "@elementor/http-client": "4.2.0-904",
+    "@elementor/editor": "4.2.0-905",
+    "@elementor/editor-canvas": "4.2.0-905",
+    "@elementor/editor-controls": "4.2.0-905",
+    "@elementor/editor-documents": "4.2.0-905",
+    "@elementor/editor-elements": "4.2.0-905",
+    "@elementor/editor-interactions": "4.2.0-905",
+    "@elementor/editor-notifications": "4.2.0-905",
+    "@elementor/editor-panels": "4.2.0-905",
+    "@elementor/editor-props": "4.2.0-905",
+    "@elementor/editor-responsive": "4.2.0-905",
+    "@elementor/editor-styles": "4.2.0-905",
+    "@elementor/editor-styles-repository": "4.2.0-905",
+    "@elementor/editor-ui": "4.2.0-905",
+    "@elementor/editor-v1-adapters": "4.2.0-905",
+    "@elementor/http-client": "4.2.0-905",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.2.0-904",
-    "@elementor/locations": "4.2.0-904",
-    "@elementor/menus": "4.2.0-904",
-    "@elementor/query": "4.2.0-904",
-    "@elementor/schema": "4.2.0-904",
-    "@elementor/session": "4.2.0-904",
+    "@elementor/editor-variables": "4.2.0-905",
+    "@elementor/locations": "4.2.0-905",
+    "@elementor/menus": "4.2.0-905",
+    "@elementor/query": "4.2.0-905",
+    "@elementor/schema": "4.2.0-905",
+    "@elementor/session": "4.2.0-905",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-904",
-    "@elementor/wp-media": "4.2.0-904",
+    "@elementor/utils": "4.2.0-905",
+    "@elementor/wp-media": "4.2.0-905",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/control-label.tsx

@@ -1,12 +1,22 @@
 import * as React from 'react';
 import { type PropsWithChildren } from 'react';
 import { ControlAdornments, ControlFormLabel } from '@elementor/editor-controls';
-import { Stack } from '@elementor/ui';
+import { InfoCircleIcon } from '@elementor/icons';
+import { Stack, Tooltip } from '@elementor/ui';
 
-export const ControlLabel = ( { children }: PropsWithChildren< object > ) => {
+type ControlLabelProps = PropsWithChildren< {
+	infoTooltip?: string;
+} >;
+
+export const ControlLabel = ( { children, infoTooltip }: ControlLabelProps ) => {
 	return (
 		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 0.25 }>
 			<ControlFormLabel>{ children }</ControlFormLabel>
+			{ infoTooltip && (
+				<Tooltip title={ infoTooltip } placement="top">
+					<InfoCircleIcon fontSize="tiny" />
+				</Tooltip>
+			) }
 			<ControlAdornments />
 		</Stack>
 	);

package/src/components/style-sections/layout-section/grid-auto-track-fields.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { SizeControl } from '@elementor/editor-controls';
+import { Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const DEFAULT_UNIT = 'fr' as const;
+
+type SizeControlProps = React.ComponentProps< typeof SizeControl >;
+
+const AUTO_ROWS_LABEL = __( 'Auto rows', 'elementor' );
+const AUTO_COLUMNS_LABEL = __( 'Auto columns', 'elementor' );
+const AUTO_ROWS_TOOLTIP = __(
+	'Set the size for new rows created automatically when content exceeds the defined grid.',
+	'elementor'
+);
+const AUTO_COLUMNS_TOOLTIP = __(
+	'Set the size for new columns created automatically when content exceeds the defined grid.',
+	'elementor'
+);
+
+type GridAutoTrackFieldProps = {
+	bind: 'grid-auto-rows' | 'grid-auto-columns';
+	infoTooltip: string;
+	label: string;
+	rowRef: React.RefObject< HTMLDivElement >;
+};
+
+const GridAutoTrackField = ( { bind, infoTooltip, label, rowRef }: GridAutoTrackFieldProps ) => (
+	<StylesField bind={ bind } propDisplayName={ label }>
+		<StylesFieldLayout infoTooltip={ infoTooltip } label={ label } ref={ rowRef }>
+			<SizeControl
+				enablePropTypeUnits
+				defaultUnit={ DEFAULT_UNIT as SizeControlProps[ 'defaultUnit' ] }
+				anchorRef={ rowRef }
+			/>
+		</StylesFieldLayout>
+	</StylesField>
+);
+
+export const GridAutoTrackFields = () => {
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<Stack gap={ 2 } pt={ 2 } ref={ rowRef }>
+			<GridAutoTrackField
+				bind="grid-auto-rows"
+				infoTooltip={ AUTO_ROWS_TOOLTIP }
+				label={ AUTO_ROWS_LABEL }
+				rowRef={ rowRef }
+			/>
+			<GridAutoTrackField
+				bind="grid-auto-columns"
+				infoTooltip={ AUTO_COLUMNS_TOOLTIP }
+				label={ AUTO_COLUMNS_LABEL }
+				rowRef={ rowRef }
+			/>
+		</Stack>
+	);
+};

package/src/components/style-sections/layout-section/layout-section.tsx

@@ -10,6 +10,7 @@ import { useComputedStyle } from '../../../hooks/use-computed-style';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
+import { StyleTabCollapsibleContent } from '../../style-tab-collapsible-content';
 import { AlignContentField } from './align-content-field';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
@@ -20,6 +21,7 @@ import { FlexOrderField } from './flex-order-field';
 import { FlexSizeField } from './flex-size-field';
 import { GapControlField } from './gap-control-field';
 import { GridAutoFlowField } from './grid-auto-flow-field';
+import { GridAutoTrackFields } from './grid-auto-track-fields';
 import { GridJustifyItemsField } from './grid-justify-items-field';
 import { GridOutlineField } from './grid-outline-field';
 import { GridSizeFields } from './grid-size-field';
@@ -93,6 +95,9 @@ const GridFields = () => (
 		<GridOutlineField />
 		<GridSizeFields />
 		<GridAutoFlowField />
+		<StyleTabCollapsibleContent fields={ [ 'grid-auto-rows', 'grid-auto-columns' ] }>
+			<GridAutoTrackFields />
+		</StyleTabCollapsibleContent>
 		<PanelDivider />
 		<GapControlField />
 		<PanelDivider />

package/src/components/style-tab.tsx

@@ -84,6 +84,8 @@ export const StyleTab = () => {
 									'order',
 									'grid-column',
 									'grid-row',
+									'grid-auto-rows',
+									'grid-auto-columns',
 								] }
 							/>
 							<StyleTabSection

package/src/components/styles-field-layout.tsx

@@ -7,51 +7,47 @@ type StylesFieldLayoutProps = {
 	label: string;
 	children: React.ReactNode;
 	direction?: 'row' | 'column';
+	infoTooltip?: string;
 };
 
 export const StylesFieldLayout = React.forwardRef< HTMLDivElement, StylesFieldLayoutProps >( ( props, ref ) => {
-	const { direction = 'row', children, label } = props;
+	const { direction = 'row', children, label, infoTooltip } = props;
 
 	const LayoutComponent = direction === 'row' ? Row : Column;
 
-	return <LayoutComponent label={ label } ref={ ref } children={ children } />;
+	return <LayoutComponent label={ label } infoTooltip={ infoTooltip } ref={ ref } children={ children } />;
 } );
 
-const Row = React.forwardRef< HTMLDivElement, { label: string; children: React.ReactNode } >(
-	( { label, children }, ref ) => {
-		return (
+type LayoutProps = {
+	label: string;
+	children: React.ReactNode;
+	infoTooltip?: string;
+};
+
+const Row = React.forwardRef< HTMLDivElement, LayoutProps >( ( { label, children, infoTooltip }, ref ) => {
+	return (
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ ref } aria-label={ `${ label } control` }>
+			<Grid item xs={ 6 }>
+				<ControlLabel infoTooltip={ infoTooltip }>{ label }</ControlLabel>
+			</Grid>
 			<Grid
-				container
-				gap={ 2 }
-				alignItems="center"
-				flexWrap="nowrap"
-				ref={ ref }
-				aria-label={ `${ label } control` }
+				item
+				xs={ 6 }
+				sx={ ( theme: Theme ) => ( {
+					width: `calc(50% - ${ theme.spacing( 2 ) })`,
+				} ) }
 			>
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ label }</ControlLabel>
-				</Grid>
-				<Grid
-					item
-					xs={ 6 }
-					sx={ ( theme: Theme ) => ( {
-						width: `calc(50% - ${ theme.spacing( 2 ) })`,
-					} ) }
-				>
-					{ children }
-				</Grid>
-			</Grid>
-		);
-	}
-);
-
-const Column = React.forwardRef< HTMLDivElement, { label: string; children: React.ReactNode } >(
-	( { label, children }, ref ) => {
-		return (
-			<Stack gap={ 0.75 } ref={ ref }>
-				<ControlLabel>{ label }</ControlLabel>
 				{ children }
-			</Stack>
-		);
-	}
-);
+			</Grid>
+		</Grid>
+	);
+} );
+
+const Column = React.forwardRef< HTMLDivElement, LayoutProps >( ( { label, children, infoTooltip }, ref ) => {
+	return (
+		<Stack gap={ 0.75 } ref={ ref }>
+			<ControlLabel infoTooltip={ infoTooltip }>{ label }</ControlLabel>
+			{ children }
+		</Stack>
+	);
+} );