@elementor/editor-controls 0.20.0 → 0.24.0

package/src/controls/link-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useMemo, useState } from 'react';
-import { getAncestorWithAnchorTag, getDescendantWithAnchorTag } from '@elementor/editor-elements';
+import { type PropsWithChildren, useMemo, useState } from 'react';
+import { getLinkInLinkRestriction, type LinkInLinkRestriction, selectElement } from '@elementor/editor-elements';
 import {
 	booleanPropTypeUtil,
 	linkPropTypeUtil,
@@ -9,10 +9,11 @@ import {
 	stringPropTypeUtil,
 	urlPropTypeUtil,
 } from '@elementor/editor-props';
+import { InfoTipCard } from '@elementor/editor-ui';
 import { type HttpResponse, httpService } from '@elementor/http';
-import { MinusIcon, PlusIcon } from '@elementor/icons';
+import { AlertTriangleIcon, MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
-import { Collapse, Divider, Grid, IconButton, Stack, Switch } from '@elementor/ui';
+import { Box, Collapse, Divider, Grid, IconButton, Infotip, Stack, Switch } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
@@ -24,7 +25,7 @@ import {
 	type FlatOption,
 	isCategorizedOptionPool,
 } from '../components/autocomplete';
-import { ControlLabel } from '../components/control-label';
+import { ControlFormLabel } from '../components/control-form-label';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { type ControlProps } from '../utils/types';
@@ -49,11 +50,15 @@ type LinkSessionValue = {
 type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
 
 const SIZE = 'tiny';
+const learnMoreButton = {
+	label: __( 'Learn More', 'elementor' ),
+	href: 'https://go.elementor.com/element-link-inside-link-infotip',
+};
 
 export const LinkControl = createControl( ( props: Props ) => {
 	const { value, path, setValue, ...propContext } = useBoundProp( linkPropTypeUtil );
 	const [ linkSessionValue, setLinkSessionValue ] = useSessionStorage< LinkSessionValue >( path.join( '/' ) );
-	const [ isEnabled, setIsEnabled ] = useState( !! value );
+	const [ isActive, setIsActive ] = useState( !! value );
 
 	const {
 		allowCustomValues,
@@ -63,20 +68,22 @@ export const LinkControl = createControl( ( props: Props ) => {
 		context: { elementId },
 	} = props || {};
 
+	const [ linkInLinkRestriction, setLinkInLinkRestriction ] = useState( getLinkInLinkRestriction( elementId ) );
 	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
 		generateFirstLoadedOption( value )
 	);
+	const shouldDisableAddingLink = ! isActive && linkInLinkRestriction.shouldRestrict;
 
 	const onEnabledChange = () => {
-		const shouldRestrict = getAncestorWithAnchorTag( elementId ) || getDescendantWithAnchorTag( elementId );
+		setLinkInLinkRestriction( getLinkInLinkRestriction( elementId ) );
 
-		if ( shouldRestrict && ! isEnabled ) {
+		if ( linkInLinkRestriction.shouldRestrict && ! isActive ) {
 			return;
 		}
 
-		setIsEnabled( ( prevState ) => ! prevState );
-		setValue( isEnabled ? null : linkSessionValue?.value ?? null );
-		setLinkSessionValue( { value, meta: { isEnabled: ! isEnabled } } );
+		setIsActive( ( prevState ) => ! prevState );
+		setValue( isActive ? null : linkSessionValue?.value ?? null );
+		setLinkSessionValue( { value, meta: { isEnabled: ! isActive } } );
 	};
 
 	const onOptionChange = ( newValue: number | null ) => {
@@ -144,14 +151,17 @@ export const LinkControl = createControl( ( props: Props ) => {
 						alignItems: 'center',
 					} }
 				>
-					<ControlLabel>{ __( 'Link', 'elementor' ) }</ControlLabel>
-					<ToggleIconControl
-						enabled={ isEnabled }
-						onIconClick={ onEnabledChange }
-						label={ __( 'Toggle link', 'elementor' ) }
-					/>
+					<ControlFormLabel>{ __( 'Link', 'elementor' ) }</ControlFormLabel>
+					<ConditionalInfoTip isVisible={ ! isActive } linkInLinkRestriction={ linkInLinkRestriction }>
+						<ToggleIconControl
+							disabled={ shouldDisableAddingLink }
+							active={ isActive }
+							onIconClick={ onEnabledChange }
+							label={ __( 'Toggle link', 'elementor' ) }
+						/>
+					</ConditionalInfoTip>
 				</Stack>
-				<Collapse in={ isEnabled } timeout="auto" unmountOnExit>
+				<Collapse in={ isActive } timeout="auto" unmountOnExit>
 					<Stack gap={ 1.5 }>
 						<PropKeyProvider bind={ 'destination' }>
 							<ControlActions>
@@ -159,7 +169,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 									options={ options }
 									allowCustomValues={ allowCustomValues }
 									placeholder={ placeholder }
-									value={ value?.destination?.value }
+									value={ value?.destination?.value?.settings?.label || value?.destination?.value }
 									onOptionChange={ onOptionChange }
 									onTextChange={ onTextChange }
 									minInputLength={ minInputLength }
@@ -167,7 +177,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 							</ControlActions>
 						</PropKeyProvider>
 						<PropKeyProvider bind={ 'isTargetBlank' }>
-							<SwitchControl />
+							<SwitchControl disabled={ ! value } />
 						</PropKeyProvider>
 					</Stack>
 				</Collapse>
@@ -177,34 +187,43 @@ export const LinkControl = createControl( ( props: Props ) => {
 } );
 
 type ToggleIconControlProps = {
-	enabled: boolean;
+	disabled: boolean;
+	active: boolean;
 	onIconClick: () => void;
 	label?: string;
 };
 
-const ToggleIconControl = ( { enabled, onIconClick, label }: ToggleIconControlProps ) => {
+const ToggleIconControl = ( { disabled, active, onIconClick, label }: ToggleIconControlProps ) => {
 	return (
-		<IconButton size={ SIZE } onClick={ onIconClick } aria-label={ label }>
-			{ enabled ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
+		<IconButton size={ SIZE } onClick={ onIconClick } aria-label={ label } disabled={ disabled }>
+			{ active ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
 		</IconButton>
 	);
 };
 
 // @TODO Should be refactored in ED-16323
-const SwitchControl = () => {
+const SwitchControl = ( { disabled }: { disabled: boolean } ) => {
 	const { value = false, setValue } = useBoundProp( booleanPropTypeUtil );
 
 	const onClick = () => {
 		setValue( ! value );
 	};
 
+	const inputProps = disabled
+		? {
+				style: {
+					opacity: 0,
+				},
+		  }
+		: {};
+
 	return (
 		<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
 			<Grid item>
-				<ControlLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlLabel>
+				<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
 			</Grid>
 			<Grid item>
-				<Switch checked={ value } onClick={ onClick } />
+				<Switch checked={ value } onClick={ onClick } disabled={ disabled } inputProps={ inputProps } />
 			</Grid>
 		</Grid>
 	);
@@ -248,3 +267,56 @@ function generateFirstLoadedOption( unionValue: LinkPropValue[ 'value' ] | null
 		  ]
 		: [];
 }
+
+interface ConditionalInfoTipType extends PropsWithChildren {
+	linkInLinkRestriction: LinkInLinkRestriction;
+	isVisible: boolean;
+}
+
+const ConditionalInfoTip: React.FC< ConditionalInfoTipType > = ( { linkInLinkRestriction, isVisible, children } ) => {
+	const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
+
+	const handleTakeMeClick = () => {
+		if ( elementId ) {
+			selectElement( elementId );
+		}
+	};
+
+	return shouldRestrict && isVisible ? (
+		<Infotip
+			placement="right"
+			content={
+				<InfoTipCard
+					content={ INFOTIP_CONTENT[ reason ] }
+					svgIcon={ <AlertTriangleIcon /> }
+					learnMoreButton={ learnMoreButton }
+					ctaButton={ {
+						label: __( 'Take me there', 'elementor' ),
+						onClick: handleTakeMeClick,
+					} }
+				/>
+			}
+		>
+			<Box>{ children }</Box>
+		</Infotip>
+	) : (
+		<>{ children }</>
+	);
+};
+
+const INFOTIP_CONTENT = {
+	descendant: (
+		<>
+			{ __( 'To add a link to this container,', 'elementor' ) }
+			<br />
+			{ __( 'first remove the link from the elements inside of it.', 'elementor' ) }
+		</>
+	),
+	ancestor: (
+		<>
+			{ __( 'To add a link to this element,', 'elementor' ) }
+			<br />
+			{ __( 'first remove the link from its parent container.', 'elementor' ) }
+		</>
+	),
+};

package/src/controls/linked-dimensions-control.tsx

@@ -5,6 +5,7 @@ import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
 import { type ExtendedValue, SizeControl } from './size-control';
@@ -72,7 +73,7 @@ export const LinkedDimensionsControl = createControl(
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
+							<ControlFormLabel>{ __( 'Top', 'elementor' ) }</ControlFormLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
@@ -85,9 +86,9 @@ export const LinkedDimensionsControl = createControl(
 					</Grid>
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>
+							<ControlFormLabel>
 								{ isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ) }
-							</ControlLabel>
+							</ControlFormLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
@@ -108,7 +109,7 @@ export const LinkedDimensionsControl = createControl(
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
+							<ControlFormLabel>{ __( 'Bottom', 'elementor' ) }</ControlFormLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
@@ -121,9 +122,9 @@ export const LinkedDimensionsControl = createControl(
 					</Grid>
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>
+							<ControlFormLabel>
 								{ isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ) }
-							</ControlLabel>
+							</ControlFormLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control

package/src/controls/stroke-control.tsx

@@ -4,7 +4,7 @@ import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
-import { ControlLabel } from '../components/control-label';
+import { ControlFormLabel } from '../components/control-form-label';
 import { SectionContent } from '../components/section-content';
 import { createControl } from '../create-control';
 import { ColorControl } from './color-control';
@@ -39,7 +39,7 @@ const Control = ( { bind, label, children }: StrokeProps ) => (
 	<PropKeyProvider bind={ bind }>
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
-				<ControlLabel>{ label }</ControlLabel>
+				<ControlFormLabel>{ label }</ControlFormLabel>
 			</Grid>
 			<Grid item xs={ 6 }>
 				{ children }

package/src/controls/svg-media-control.tsx

@@ -7,7 +7,7 @@ import { type OpenOptions, useWpMediaAttachment, useWpMediaFrame } from '@elemen
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
-import { ControlLabel } from '../components/control-label';
+import { ControlFormLabel } from '../components/control-form-label';
 import { EnableUnfilteredModal } from '../components/enable-unfiltered-modal';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
@@ -83,7 +83,7 @@ export const SvgMediaControl = createControl( () => {
 	return (
 		<Stack gap={ 1 }>
 			<EnableUnfilteredModal open={ unfilteredModalOpenState } onClose={ onCloseUnfilteredModal } />
-			<ControlLabel> { __( 'SVG', 'elementor' ) } </ControlLabel>
+			<ControlFormLabel> { __( 'SVG', 'elementor' ) } </ControlFormLabel>
 			<ControlActions>
 				<StyledCard variant="outlined">
 					<StyledCardMediaContainer>

package/src/index.ts

@@ -19,7 +19,7 @@ export { SvgMediaControl } from './controls/svg-media-control';
 export { BackgroundControl } from './controls/background-control/background-control';
 
 // components
-export { ControlLabel } from './components/control-label';
+export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
 
 // types
@@ -39,5 +39,6 @@ export { ControlActionsProvider, useControlActions } from './control-actions/con
 export { useBoundProp, PropProvider, PropKeyProvider } from './bound-prop-context';
 export { ControlAdornmentsProvider } from './control-adornments/control-adornments-context';
 export { ControlAdornments } from './control-adornments/control-adornments';
+
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';

package/src/control-adornments/control-label-with-adornments.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { type PropsWithChildren } from 'react';
-import { Stack } from '@elementor/ui';
-
-import { ControlLabel } from '../components/control-label';
-import { ControlAdornments } from './control-adornments';
-
-export const ControlLabelWithAdornments = ( { children }: PropsWithChildren< object > ) => {
-	return (
-		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
-			<ControlLabel>{ children }</ControlLabel>
-			<ControlAdornments />
-		</Stack>
-	);
-};