← All changes | assets/js/packages/editor-controls/editor-controls.js +20 -11 4.3.0-beta1 → trunk View file →

		@@ -9418,9 +9418,9 @@
9418	9418	};
9419	9419
9420	9420	//#endregion
9421	9421	//#region packages/packages/libs/editor-controls/src/controls/toggle-control.tsx
9422		- var ToggleControl = createControl(({ options, fullWidth = false, size = "tiny", exclusive = true, maxItems, convertOptions = false }) => {
	9422	+ var ToggleControl = createControl(({ options, fullWidth = false, size = "tiny", exclusive = true, maxItems, convertOptions = false, allowEmpty = false }) => {
9423	9423	const { value, setValue, placeholder, disabled } = useBoundProp(_elementor_editor_props.stringPropTypeUtil);
9424	9424	const processedOptions = convertOptions ? convertToggleOptionsToAtomic(options) : options;
9425	9425	const exclusiveValues = processedOptions.filter((option) => option.exclusive).map((option) => option.value);
9426	9426	const handleNonExclusiveToggle = (selectedValues) => {
		@@ -9434,12 +9434,19 @@
9434	9434	fullWidth,
9435	9435	size,
9436	9436	placeholder
9437	9437	};
	9438	+ const handleExclusiveToggle = (selectedValue) => {
	9439	+ if (allowEmpty && !selectedValue) {
	9440	+ setValue("");
	9441	+ return;
	9442	+ }
	9443	+ setValue(selectedValue);
	9444	+ };
9438	9445	return exclusive ? /* @__PURE__ */ react.createElement(ControlToggleButtonGroup, {
9439	9446	...toggleButtonGroupProps,
9440		- value: value ?? null,
9441		- onChange: setValue,
	9447	+ value: allowEmpty ? value || null : value ?? null,
	9448	+ onChange: handleExclusiveToggle,
9442	9449	disabled,
9443	9450	exclusive: true
9444	9451	}) : /* @__PURE__ */ react.createElement(ControlToggleButtonGroup, {
9445	9452	...toggleButtonGroupProps,
		@@ -10780,29 +10787,31 @@
10780	10787	const [isActive, setIsActive] = (0, react.useState)(!!value || !!linkPlaceholder);
10781	10788	const { allowCustomValues = true, queryOptions, placeholder, minInputLength = 2, context: { elementId }, label = (0, _wordpress_i18n.__)("Link", "elementor"), ariaLabel } = props || {};
10782	10789	const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, react.useState)((0, _elementor_editor_elements.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder));
10783	10790	const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
10784		- const debouncedCheckRestriction = (0, _elementor_utils.useDebouncedCallback)(() => {
	10791	+ const syncLinkRestriction = (clearActiveLinkWhen = "restricted") => {
10785	10792	const newRestriction = (0, _elementor_editor_elements.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder);
10786		- if (newRestriction.shouldRestrict && isActive && !linkPlaceholder) {
	10793	+ const becameRestricted = newRestriction.shouldRestrict && !linkInLinkRestriction.shouldRestrict;
	10794	+ if ((clearActiveLinkWhen === "newly-restricted" ? becameRestricted : newRestriction.shouldRestrict) && isActive && !linkPlaceholder) {
10787	10795	setIsActive(false);
10788	10796	if (value !== null) setValue(null);
10789	10797	}
10790	10798	setLinkInLinkRestriction((prev) => isSameRestriction(prev, newRestriction) ? prev : newRestriction);
10791		- }, 300);
	10799	+ };
	10800	+ const debouncedSyncLinkRestriction = (0, _elementor_utils.useDebouncedCallback)((clearActiveLinkWhen = "restricted") => syncLinkRestriction(clearActiveLinkWhen), 300);
10792	10801	(0, _elementor_editor_v1_adapters.__privateUseListenTo)((0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/set-settings"), () => {
10793		- debouncedCheckRestriction();
10794		- }, [debouncedCheckRestriction]);
	10802	+ debouncedSyncLinkRestriction("newly-restricted");
	10803	+ }, [debouncedSyncLinkRestriction]);
10795	10804	(0, react.useEffect)(() => {
10796		- debouncedCheckRestriction();
	10805	+ debouncedSyncLinkRestriction();
10797	10806	const handleInlineLinkChanged = () => {
10798		- debouncedCheckRestriction();
	10807	+ debouncedSyncLinkRestriction();
10799	10808	};
10800	10809	window.addEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
10801	10810	return () => {
10802	10811	window.removeEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
10803	10812	};
10804		- }, [elementId, debouncedCheckRestriction]);
	10813	+ }, [elementId, debouncedSyncLinkRestriction]);
10805	10814	const onEnabledChange = () => {
10806	10815	setLinkInLinkRestriction((0, _elementor_editor_elements.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder));
10807	10816	if (linkInLinkRestriction.shouldRestrict && !isActive) return;
10808	10817	const newState = !isActive;