@elementor/editor-controls 4.2.0-874 → 4.2.0-876

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": "4.2.0-874",
+  "version": "4.2.0-876",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.2.0-874",
-    "@elementor/editor-elements": "4.2.0-874",
-    "@elementor/editor-props": "4.2.0-874",
-    "@elementor/editor-responsive": "4.2.0-874",
-    "@elementor/editor-ui": "4.2.0-874",
-    "@elementor/editor-v1-adapters": "4.2.0-874",
-    "@elementor/env": "4.2.0-874",
-    "@elementor/events": "4.2.0-874",
-    "@elementor/http-client": "4.2.0-874",
+    "@elementor/editor-current-user": "4.2.0-876",
+    "@elementor/editor-elements": "4.2.0-876",
+    "@elementor/editor-props": "4.2.0-876",
+    "@elementor/editor-responsive": "4.2.0-876",
+    "@elementor/editor-ui": "4.2.0-876",
+    "@elementor/editor-v1-adapters": "4.2.0-876",
+    "@elementor/env": "4.2.0-876",
+    "@elementor/events": "4.2.0-876",
+    "@elementor/http-client": "4.2.0-876",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.2.0-874",
-    "@elementor/query": "4.2.0-874",
-    "@elementor/schema": "4.2.0-874",
-    "@elementor/session": "4.2.0-874",
+    "@elementor/locations": "4.2.0-876",
+    "@elementor/query": "4.2.0-876",
+    "@elementor/schema": "4.2.0-876",
+    "@elementor/session": "4.2.0-876",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-874",
-    "@elementor/wp-media": "4.2.0-874",
+    "@elementor/utils": "4.2.0-876",
+    "@elementor/wp-media": "4.2.0-876",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/controls/query-filter-repeater-control.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { useMemo, useRef } from 'react';
+import { useSelectedElementSettings } from '@elementor/editor-elements';
 import {
 	type CreateOptions,
+	extractValue,
 	type PropKey,
 	queryFilterArrayPropTypeUtil,
 	type QueryFilterKeyConfig,
 	queryFilterPropTypeUtil,
 	type QueryFilterPropValue,
 	type QueryPropValue,
+	stringArrayPropTypeUtil,
 	stringPropTypeUtil,
 } from '@elementor/editor-props';
 import { PlusIcon } from '@elementor/icons';
@@ -24,6 +27,7 @@ import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
 import { RepeaterHeader } from '../components/repeater/repeater-header';
 import { createControl } from '../create-control';
+import { ChipsControl } from './chips-control';
 import { QueryChipsControl } from './query-chips-control';
 import { SelectControl, type SelectOption } from './select-control';
 
@@ -43,23 +47,30 @@ export const QueryFilterRepeaterControl = createControl(
 	}: QueryFilterRepeaterControlProps ) => {
 		const { propType, value, setValue } = useBoundProp( queryFilterArrayPropTypeUtil );
 
+		const { settings } = useSelectedElementSettings();
+
+		const visibleKeys = useMemo(
+			() => allowedKeys.filter( ( key ) => isKeyVisible( keyConfig[ key ]?.visibleWhen, settings ) ),
+			[ allowedKeys, keyConfig, settings ]
+		);
+
 		const usedKeys = useMemo( () => getUsedKeys( value ?? [] ), [ value ] );
 		const nextAvailableKey = useMemo(
-			() => allowedKeys.find( ( key ) => ! usedKeys.has( key ) ) ?? null,
-			[ allowedKeys, usedKeys ]
+			() => visibleKeys.find( ( key ) => ! usedKeys.has( key ) ) ?? null,
+			[ visibleKeys, usedKeys ]
 		);
 
 		const getKeySelectOptions = useMemo(
 			() => ( currentKey: string | null ) =>
-				allowedKeys.map( ( itemKey ) => ( {
+				visibleKeys.map( ( itemKey ) => ( {
 					value: itemKey,
 					label: keyConfig[ itemKey ]?.label ?? itemKey,
 					disabled: itemKey !== currentKey && usedKeys.has( itemKey ),
 				} ) ),
-			[ allowedKeys, keyConfig, usedKeys ]
+			[ visibleKeys, keyConfig, usedKeys ]
 		);
 
-		const initialFallback = useMemo( () => createItemForKey( allowedKeys[ 0 ] ?? '' ), [ allowedKeys ] );
+		const initialFallback = useMemo( () => createItemForKey( visibleKeys[ 0 ] ?? '' ), [ visibleKeys ] );
 
 		return (
 			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
@@ -133,7 +144,12 @@ const ItemLabel = ( { value, keyConfig }: ItemLabelProps ) => {
 	const itemKey = stringPropTypeUtil.extract( value?.value?.key );
 	const label = ( itemKey && keyConfig[ itemKey ]?.label ) || __( 'Item', 'elementor' );
 	const chipLabels = extractChipLabels( value?.value?.values );
-	const suffix = chipLabels.length > 0 ? `: ${ chipLabels.join( ', ' ) }` : '';
+	const taxonomyLabels = extractTaxonomyLabels(
+		value?.value?.taxonomies,
+		itemKey ? keyConfig[ itemKey ] : undefined
+	);
+	const allLabels = [ ...chipLabels, ...taxonomyLabels ];
+	const suffix = allLabels.length > 0 ? `: ${ allLabels.join( ', ' ) }` : '';
 
 	return (
 		<Box component="span">
@@ -155,6 +171,11 @@ function extractChipLabels< T extends QueryArrayPropValue | undefined >( chipsPr
 
 type FilterItemValue = NonNullable< QueryFilterPropValue[ 'value' ] >;
 
+type SnapshotsByKey = Record<
+	string,
+	{ values?: FilterItemValue[ 'values' ] | null; taxonomies?: FilterItemValue[ 'taxonomies' ] | null }
+>;
+
 const ItemContent = ( {
 	keyConfig,
 	getKeySelectOptions,
@@ -166,7 +187,7 @@ const ItemContent = ( {
 } ) => {
 	const propContext = useBoundProp( queryFilterPropTypeUtil );
 
-	const valuesByKeyRef = useRef< Record< string, FilterItemValue[ 'values' ] | null > >( {} );
+	const snapshotsByKeyRef = useRef< SnapshotsByKey >( {} );
 
 	const handleValueChange = ( nextValue: FilterItemValue, options?: CreateOptions, meta?: { bind?: PropKey } ) => {
 		if ( meta?.bind !== 'key' ) {
@@ -178,17 +199,28 @@ const ItemContent = ( {
 		const newKey = stringPropTypeUtil.extract( nextValue?.key );
 
 		if ( previousKey ) {
-			valuesByKeyRef.current[ previousKey ] = propContext.value?.values ?? null;
+			snapshotsByKeyRef.current[ previousKey ] = {
+				values: propContext.value?.values ?? null,
+				taxonomies: propContext.value?.taxonomies ?? null,
+			};
 		}
 
-		const restoredValues = newKey ? valuesByKeyRef.current[ newKey ] ?? null : null;
+		const restored = newKey ? snapshotsByKeyRef.current[ newKey ] : undefined;
 
-		propContext.setValue( { ...nextValue, values: restoredValues }, options, meta );
+		propContext.setValue(
+			{
+				...nextValue,
+				values: restored?.values ?? null,
+				taxonomies: restored?.taxonomies ?? null,
+			},
+			options,
+			meta
+		);
 	};
 
 	const currentKey = stringPropTypeUtil.extract( propContext.value?.key );
 	const currentKeyConfig = currentKey ? keyConfig[ currentKey ] : undefined;
-	const hasValuesField = !! currentKeyConfig?.queryEndpoint;
+	const valueType = currentKeyConfig?.valueType ?? 'chips';
 	const keySelectOptions = useMemo( () => getKeySelectOptions( currentKey ), [ getKeySelectOptions, currentKey ] );
 
 	return (
@@ -204,7 +236,19 @@ const ItemContent = ( {
 						</PropKeyProvider>
 					</Grid>
 				</PopoverGridContainer>
-				{ hasValuesField && currentKeyConfig?.queryEndpoint && (
+				{ valueType === 'taxonomies' && currentKeyConfig?.staticOptions && (
+					<PopoverGridContainer flexWrap="wrap">
+						<Grid item xs={ 12 }>
+							<ControlFormLabel>{ currentKeyConfig.label }</ControlFormLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<PropKeyProvider bind="taxonomies">
+								<ChipsControl options={ currentKeyConfig.staticOptions } />
+							</PropKeyProvider>
+						</Grid>
+					</PopoverGridContainer>
+				) }
+				{ valueType !== 'taxonomies' && currentKeyConfig?.queryEndpoint && (
 					<PopoverGridContainer flexWrap="wrap">
 						<Grid item xs={ 12 }>
 							<ControlFormLabel>{ currentKeyConfig.label }</ControlFormLabel>
@@ -227,10 +271,45 @@ const ItemContent = ( {
 	);
 };
 
+export function isKeyVisible(
+	rule: QueryFilterKeyConfig[ 'visibleWhen' ] | undefined,
+	settings: Record< string, unknown > | null
+): boolean {
+	if ( ! rule ) {
+		return true;
+	}
+
+	if ( ! settings ) {
+		return false;
+	}
+
+	const extracted = stringPropTypeUtil.extract( extractValue( rule.path, settings ) );
+
+	return extracted !== null && rule.in.includes( extracted );
+}
+
+function extractTaxonomyLabels(
+	taxonomiesProp: QueryFilterPropValue[ 'value' ][ 'taxonomies' ],
+	config: QueryFilterKeyConfig | undefined
+): string[] {
+	const slugs = ( stringArrayPropTypeUtil.extract( taxonomiesProp ) ?? [] )
+		.map( ( item ) => stringPropTypeUtil.extract( item ) )
+		.filter( ( slug ): slug is string => !! slug );
+
+	if ( ! slugs.length ) {
+		return [];
+	}
+
+	const options = config?.staticOptions ?? [];
+
+	return slugs.map( ( slug: string ) => options.find( ( opt ) => opt.value === slug )?.label ?? slug );
+}
+
 function createItemForKey( key: string ): QueryFilterPropValue {
 	return queryFilterPropTypeUtil.create( {
 		key: stringPropTypeUtil.create( key ),
 		values: null,
+		taxonomies: null,
 	} );
 }