@webbio/strapi-plugin-page-builder 0.12.8-platform → 0.13.0-platform

package/README.md

@@ -137,7 +137,11 @@ Ik wil een lijst van vacature relaties selecteren. Deze vacatures moeten van het
       // (Default: true). Disables result filtering by globally selected platform
       "disablePlatformFilter": boolean,
       // (Default: false) Hides id of the entity that is edited if it's the same as the targetField uid. So if this is enabled on a vacancy entity and also targets other vacancies, the current vacancy that is edited will not be shown.
-      "hideSameEntity": boolean
+      "hideSameEntity": boolean,
+      // (Default: ['title']) Defines searchable fields
+      "searchableFields": string[],
+      // If set the field will show a subtitle with the value that results in following this path.
+      "subTitlePath": string
     }
   },
   "type": "customField",

package/admin/src/api/page-type-exists.ts

@@ -0,0 +1,44 @@
+import { useQuery, UseQueryOptions } from 'react-query';
+
+import { useFetchClient } from '@strapi/helper-plugin';
+
+type PageTypeExistsQueryParams = {
+	uid: string;
+	fetchClient?: any;
+	platformId: number;
+};
+
+const QUERY_KEY = 'pageTypeExists';
+
+const fetchPageTypeExists = async ({ fetchClient, uid, platformId }: PageTypeExistsQueryParams): Promise<boolean> => {
+	try {
+		if (!uid) {
+			throw new Error('No uid');
+		}
+
+		if (!platformId) {
+			throw new Error('No platformId');
+		}
+
+		const { get } = fetchClient;
+		const result = await get('/content-manager/collection-types/api::page-type.page-type?page=1&pageSize=999');
+
+		const pageTypeExists = result?.data?.results.some(
+			(entity: Record<string, any>) => entity?.platform?.id === platformId && entity.uid === uid
+		);
+
+		return Boolean(pageTypeExists);
+	} catch {
+		return false;
+	}
+};
+
+export const usePageTypeExists = (params: PageTypeExistsQueryParams, options?: UseQueryOptions<boolean, Error>) => {
+	const fetchClient = useFetchClient();
+
+	return useQuery<boolean, Error>(
+		[QUERY_KEY, params?.uid, params.platformId],
+		() => fetchPageTypeExists({ ...params, fetchClient }),
+		options
+	);
+};

package/admin/src/api/search-filtered-entity.ts

@@ -1,5 +1,6 @@
 import { useQuery, UseQueryOptions } from 'react-query';
 import orderBy from 'lodash/orderBy';
+import objGet from 'lodash/get';
 
 import { useFetchClient } from '@strapi/helper-plugin';
 import qs from 'qs';
@@ -17,6 +18,7 @@ export type SearchFilteredEntitiesResult = {
 		href: string;
 		publicationState?: string | false;
 		publishedAt?: string;
+		subTitle?: string;
 	}[];
 };
 
@@ -29,6 +31,9 @@ type SearchFilteredEntitiesQueryParams = {
 	platformTitle?: string;
 	notIds?: number[];
 	customFilters?: Record<string, any>[];
+	searchableFields?: string[];
+	subTitlePath?: string;
+	mainFieldName?: string;
 };
 
 const QUERY_KEY = 'filteredEntities';
@@ -41,22 +46,30 @@ export const getSearchFilteredEntities = async ({
 	searchQuery,
 	platformTitle,
 	notIds,
-	customFilters
+	customFilters,
+	searchableFields = ['title'],
+	subTitlePath,
+	mainFieldName = 'title'
 }: SearchFilteredEntitiesQueryParams): Promise<SearchFilteredEntitiesResult> => {
 	try {
 		const { get } = fetchClient;
 		const notIdFilters = notIds && notIds.length > 0 ? notIds.map((id) => ({ id: { $ne: id } })) : [];
 		const customFilterObject = Array.isArray(customFilters) ? customFilters : [];
 
+		const fieldFilters = searchableFields.map((field) => ({ [field]: { $containsi: searchQuery } }));
+
 		const filters = qs.stringify({
 			page,
 			pageSize: 20,
 			locale,
-			sort: searchQuery ? 'title:ASC' : undefined,
-			_q: searchQuery || undefined,
+			// _q is a fuzzy search with sometimes unexpected results
+			// _q: searchQuery || undefined,
 			filters: {
 				$and: [
-					{ platform: { title: { $contains: platformTitle || undefined } } },
+					{ platform: { title: { $eq: platformTitle || undefined } } },
+					{
+						$or: fieldFilters
+					},
 					...notIdFilters,
 					...customFilterObject
 				]
@@ -74,12 +87,15 @@ export const getSearchFilteredEntities = async ({
 					return false;
 				};
 
+				const subTitle = subTitlePath ? objGet(result, subTitlePath) : undefined;
+
 				return {
 					id: result.id,
-					title: result.title,
+					title: result?.[mainFieldName],
 					publicationState: getPublicationState(),
 					publishedAt: result?.publishedAt,
-					href: `/content-manager/collectionType/${uid}/${result.id}`
+					href: `/content-manager/collectionType/${uid}/${result.id}`,
+					subTitle: typeof subTitle === 'string' || typeof subTitle === 'number' ? String(subTitle) : ''
 				};
 			}
 		);

package/admin/src/components/EditView/CollectionTypeSettings/index.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from 'react';
 
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Flex } from '@strapi/design-system';
-import { Link } from '@strapi/icons';
+import { Flex, Typography, Link } from '@strapi/design-system';
+import { Link as LinkIcon } from '@strapi/icons';
 
 import { Wrapper } from '../wrapper';
 import { CreatePageButton } from './CreatePageButton';
 import { PAGE_TYPE_PAGE, PAGE_UID } from '../../../../../shared/utils/constants';
 import { usePlatformFormData } from '../../../utils/hooks/usePlatformFormData';
 import S from '../Details/styles';
+import { usePageTypeExists } from '../../../api/page-type-exists';
 
 interface CollectionTypeSettingsProps {
 	onlyPlatform?: boolean;
@@ -20,8 +21,11 @@ export const CollectionTypeSettings = ({ onlyPlatform }: CollectionTypeSettingsP
 	const { layout, isCreatingEntry, initialData, modifiedData, onChange } = form;
 	const isUserCreatedContentType = layout.uid.startsWith('api::');
 	const [linkedPage, setLinkedPage] = useState<Record<string, any> | undefined>(initialData.page?.[0]);
-
-	const showCreatePageButton = isUserCreatedContentType && !isCreatingEntry && !linkedPage && !isLoadingPlatform;
+	const { data: pageTypeExists, isLoading: isLoadingPageTypeExists } = usePageTypeExists({
+		uid: layout.uid,
+		platformId: selectedPlatform?.id
+	});
+	const showCreatePageButton = !linkedPage && isUserCreatedContentType && !isCreatingEntry && !isLoadingPlatform;
 	const url = generateLink(linkedPage?.id, initialData?.locale);
 
 	useEffect(() => {
@@ -50,7 +54,14 @@ export const CollectionTypeSettings = ({ onlyPlatform }: CollectionTypeSettingsP
 			{!isCreatingEntry && !onlyPlatform && (
 				<Wrapper title="Gekoppelde pagina">
 					<Flex direction="column" gap={4} width="100%" alignItems="start">
-						{showCreatePageButton && selectedPlatform && (
+						{!pageTypeExists && !linkedPage && !isLoadingPageTypeExists && (
+							<S.InfoType variant="pi" textColor="neutral800">
+								Er bestaat nog geen{' '}
+								<Link to="/content-manager/collectionType/api::page-type.page-type">pagina type</Link> voor dit content
+								type.
+							</S.InfoType>
+						)}
+						{showCreatePageButton && selectedPlatform && (pageTypeExists || linkedPage) && (
 							<CreatePageButton onCreatedPage={(page) => setLinkedPage(page)} selectedPlatform={selectedPlatform} />
 						)}
 
@@ -61,7 +72,7 @@ export const CollectionTypeSettings = ({ onlyPlatform }: CollectionTypeSettingsP
 								</S.SubtleType>
 								<S.EntityLinkWrapper variant="pi" textColor="neutral800">
 									<S.EntityLink title={linkedPage?.title || '-'} to={url} variant="pi">
-										<Link />
+										<LinkIcon />
 										{linkedPage?.title || '-'}
 									</S.EntityLink>
 								</S.EntityLinkWrapper>

package/admin/src/components/EditView/Details/styles.ts

@@ -8,6 +8,15 @@ const SubtleType = styled(Typography)`
 	`}
 `;
 
+const InfoType = styled(Typography)`
+	${({ theme }) => css`
+		&,
+		a span {
+			font-size: ${theme.fontSizes[1]};
+		}
+	`}
+`;
+
 const EntityLinkWrapper = styled(Typography)`
 	${({ _theme }) => css`
 		display: flex;
@@ -45,7 +54,8 @@ const DetailsStyles = {
 	SubtleType,
 	EntityLink,
 	EntityLinkWrapper,
-	EditLink
+	EditLink,
+	InfoType
 };
 
 export default DetailsStyles;

package/admin/src/components/PageFilters/filters.tsx

@@ -2,7 +2,6 @@ import { useEffect, useMemo } from 'react';
 import set from 'lodash/set';
 
 import { Stack } from '@strapi/design-system';
-import { useQueryParams } from '@strapi/helper-plugin';
 
 import PageTypeFilter from './PageTypeFilter';
 import { PAGE_TYPE_PAGE, PLATFORM } from '../../../../shared/utils/constants';
@@ -12,13 +11,14 @@ import { PageType } from '../../api/platform-page-types';
 import { useGetPageTypesForPlatform } from '../../api/platform-page-types';
 import { useDefaultPlatformFromLocalStorage } from '../../utils/hooks/useDefaultPlatformFromLocalStorage';
 import { useHideOverviewFilterTags } from '../../utils/hooks/useHideOverviewFilterTags';
+import { useQueryParams } from '../../utils/hooks/useQueryParams';
 
 interface PageFiltersProps {
 	hidePageType?: boolean;
 }
 
 const PageFilters = ({ hidePageType }: PageFiltersProps) => {
-	const [{ query }, setQuery] = useQueryParams() as any;
+	const [{ query }, setQuery] = useQueryParams();
 	const { selectedPlatform: globalSelectedPlatform } = useDefaultPlatformFromLocalStorage();
 	useHideOverviewFilterTags();
 	const { data: platforms } = useGetPlatforms({});
@@ -50,19 +50,27 @@ const PageFilters = ({ hidePageType }: PageFiltersProps) => {
 
 		const removedFilters = removeFiltersFromQuery({ filters: currentFilters }, filterCategoryToRemove);
 
-		setQuery({
-			page: 1,
-			filters: removedFilters
-		});
+		setQuery(
+			{
+				page: 1,
+				filters: removedFilters
+			},
+			undefined,
+			'replace'
+		);
 	};
 
 	const removeFilters = (filterCategory: string) => {
 		const filters = removeFiltersFromQuery(query, filterCategory);
 
-		setQuery({
-			page: 1,
-			filters
-		});
+		setQuery(
+			{
+				page: 1,
+				filters
+			},
+			undefined,
+			'replace'
+		);
 	};
 
 	const handlePlatformSelect = (platformTitle: string) => {

package/admin/src/components/PlatformFilteredSelectField/Multi/index.tsx

@@ -14,7 +14,6 @@ import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
 import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
 import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
 import { getTranslation } from '../utils/get-translations';
-import { Platform } from '../../../api/platform';
 
 const PAGE = 1;
 
@@ -25,8 +24,6 @@ export interface IMultiPlatformFilteredSelectFieldProps extends IPlatformFiltere
 	isCloningEntry?: boolean;
 	totalRelations: number;
 	relationsFromModifiedData?: Record<string, any>[];
-	selectedPlatform?: Platform;
-	hiddenId?: number[];
 }
 
 const MultiPlatformFilteredSelectField = ({
@@ -43,7 +40,8 @@ const MultiPlatformFilteredSelectField = ({
 	totalRelations,
 	relationsFromModifiedData,
 	selectedPlatform,
-	hiddenId
+	hiddenId,
+	disabled
 }: IMultiPlatformFilteredSelectFieldProps) => {
 	const fetchClient = useFetchClient();
 	const {
@@ -73,7 +71,7 @@ const MultiPlatformFilteredSelectField = ({
 
 	const { formatMessage } = useIntl();
 
-	const { targetAttributes, targetFieldValue, targetField } = RelationHelper.getTargetAttributes(
+	const { targetAttributes, targetFieldValue, targetField, relationMainFieldName } = RelationHelper.getTargetAttributes(
 		name,
 		attribute,
 		modifiedData,
@@ -102,7 +100,10 @@ const MultiPlatformFilteredSelectField = ({
 			searchQuery: inputValue,
 			platformTitle: attribute?.pluginOptions?.filteredSelect?.disablePlatformFilter ? '' : selectedPlatform?.title,
 			notIds: [...(selectedResults?.data || []).map((x: Record<string, any>) => x.id), ...(hiddenId || [])],
-			customFilters: attribute?.pluginOptions?.filteredSelect?.customFilters
+			customFilters: attribute?.pluginOptions?.filteredSelect?.customFilters,
+			searchableFields: attribute?.pluginOptions?.filteredSelect?.searchableFields,
+			subTitlePath: attribute?.pluginOptions?.filteredSelect?.subTitlePath,
+			mainFieldName: relationMainFieldName
 		});
 
 		const mapped = entities?.results.map((x) => ({
@@ -110,7 +111,8 @@ const MultiPlatformFilteredSelectField = ({
 			mainField: x.title,
 			href: x?.href,
 			publicationState: x.publicationState,
-			publishedAt: x.publishedAt
+			publishedAt: x.publishedAt,
+			subTitle: x.subTitle
 		}));
 
 		// @ts-expect-error data is fine
@@ -202,7 +204,7 @@ const MultiPlatformFilteredSelectField = ({
 			hint={hint || ''}
 			labelAction={labelAction}
 			required={required}
-			disabled={!selectedPlatform}
+			disabled={!selectedPlatform || disabled}
 		/>
 	);
 };

package/admin/src/components/PlatformFilteredSelectField/Single/index.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import debounce from 'lodash/debounce';
+import objGet from 'lodash/get';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { useSelector } from 'react-redux';
-import { Field } from '@strapi/design-system';
+import { Field, Flex } from '@strapi/design-system';
 import { useFetchClient } from '@strapi/helper-plugin';
 import { Link } from '@strapi/icons';
 
@@ -14,17 +15,14 @@ import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
 import S from './../styles';
 import getTrad from '../../../utils/getTrad';
 import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
-import { Platform } from '../../../api/platform';
 
-export interface ISinglePlatformFilteredSelectFieldProps extends IPlatformFilteredSelectFieldProps {
-	selectedPlatform?: Platform;
-	hiddenId?: number[];
-}
+export interface ISinglePlatformFilteredSelectFieldProps extends IPlatformFilteredSelectFieldProps {}
 
 interface CustomReactSelectValue extends Omit<IReactSelectValue, 'initialSelected'> {
 	href?: string;
 	publicationState?: string | false;
 	publishedAt?: string;
+	subTitle?: string;
 }
 
 const SEARCH_DEBOUNCE_MS = 150;
@@ -38,7 +36,8 @@ const SinglePlatformFilteredSelectField = ({
 	intlLabel,
 	name,
 	selectedPlatform,
-	hiddenId
+	hiddenId,
+	disabled
 }: ISinglePlatformFilteredSelectFieldProps) => {
 	const fetchClient = useFetchClient();
 	const { onChange, initialData, modifiedData, isCreatingEntry, layout, allLayoutData } =
@@ -53,7 +52,7 @@ const SinglePlatformFilteredSelectField = ({
 
 	const { formatMessage } = useIntl();
 
-	const { targetAttributes, targetFieldValue, targetField } = RelationHelper.getTargetAttributes(
+	const { targetAttributes, targetFieldValue, targetField, relationMainFieldName } = RelationHelper.getTargetAttributes(
 		name,
 		attribute,
 		modifiedData,
@@ -70,7 +69,10 @@ const SinglePlatformFilteredSelectField = ({
 		: '';
 
 	useEffect(() => {
-		const initialSelect = getInitialSelectItem(targetFieldValue?.[0]);
+		const initialSelect = getInitialSelectItem(
+			targetFieldValue?.[0],
+			attribute?.pluginOptions?.filteredSelect?.subTitlePath
+		);
 
 		setSelected(initialSelect);
 	}, [targetFieldValue]);
@@ -116,7 +118,10 @@ const SinglePlatformFilteredSelectField = ({
 			searchQuery: inputValue,
 			platformTitle: attribute?.pluginOptions?.filteredSelect?.disablePlatformFilter ? '' : platformTitle,
 			customFilters: attribute?.pluginOptions?.filteredSelect?.customFilters,
-			notIds: hiddenId
+			notIds: hiddenId,
+			searchableFields: attribute?.pluginOptions?.filteredSelect?.searchableFields,
+			subTitlePath: attribute?.pluginOptions?.filteredSelect?.subTitlePath,
+			mainFieldName: relationMainFieldName
 		});
 
 		return pages?.results.map((x) => ({
@@ -124,7 +129,8 @@ const SinglePlatformFilteredSelectField = ({
 			label: x.title,
 			href: x?.href,
 			publicationState: x.publicationState,
-			publishedAt: x.publishedAt
+			publishedAt: x.publishedAt,
+			subTitle: x.subTitle
 		}));
 	};
 
@@ -153,9 +159,9 @@ const SinglePlatformFilteredSelectField = ({
 						onChange={handleChange}
 						value={selected}
 						defaultOptions
-						hideSelectedOptions
+						// hideSelectedOptions
 						labelAction={labelAction}
-						isDisabled={!selectedPlatform}
+						isDisabled={!selectedPlatform || disabled}
 						afterInput={
 							<S.LinkToPage
 								title={formatMessage({ id: getTrad('platformFilteredSelect.linkToEntity.label') })}
@@ -172,25 +178,33 @@ const SinglePlatformFilteredSelectField = ({
 	);
 };
 
-const CustomOption = (props: OptionProps<CustomReactSelectValue, false>) => {
+export const CustomOption = (props: OptionProps<CustomReactSelectValue, false>) => {
 	return (
 		<components.Option {...props}>
 			<S.CustomOption>
 				{props.data?.publicationState && <S.CustomOptionStatus publicationState={props.data?.publicationState} />}
-				{props.children}
+
+				<Flex direction="column" alignItems="start" gap={1}>
+					{props.children}
+					{props.data?.subTitle && <S.CustomOptionSubTitle>{props.data?.subTitle}</S.CustomOptionSubTitle>}
+				</Flex>
 			</S.CustomOption>
 		</components.Option>
 	);
 };
 
-const getInitialSelectItem = (initialValue?: Record<string, any>): SingleValue<CustomReactSelectValue | null> =>
+const getInitialSelectItem = (
+	initialValue?: Record<string, any>,
+	subTitlePath?: string
+): SingleValue<CustomReactSelectValue | null> =>
 	initialValue?.id
 		? {
 				value: String(initialValue?.id),
 				label: initialValue?.title ?? '',
 				href: initialValue?.href,
 				publicationState: initialValue.publicationState,
-				publishedAt: initialValue.publishedAt
+				publishedAt: initialValue.publishedAt,
+				subTitle: subTitlePath ? objGet(initialValue, subTitlePath) : ''
 			}
 		: null;
 

package/admin/src/components/PlatformFilteredSelectField/styles.tsx

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Box, Link, Typography } from '@strapi/design-system';
+import { Box, Link, Flex, Typography } from '@strapi/design-system';
 
 const EntityLinkWrapper = styled(Typography)`
 	${({ _theme }) => css`
@@ -31,12 +31,29 @@ const CustomOption = styled(Box)`
 	gap: 8px;
 `;
 
+const CustomOptionSubTitle = styled(Box)`
+	${({ theme, disabled }) => css`
+		font-size: ${theme.fontSizes[1]};
+		opacity: 0.5;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		width: calc(100%);
+	`}
+`;
+const CustomOptionItemWrapper = styled(Flex)`
+	> ${CustomOptionSubTitle} {
+		margin-top: -2px;
+	}
+`;
+
 const CustomOptionStatus = styled(Box)`
 	background: ${({ theme, publicationState }) =>
 		publicationState === 'published' ? theme.colors.success600 : theme.colors.secondary600};
 	width: 6px;
 	height: 6px;
 	border-radius: 100px;
+	flex-shrink: 0;
 `;
 
 const FieldWrapper = styled(Box)`
@@ -73,5 +90,7 @@ export default {
 	EntityLink,
 	CustomOptionStatus,
 	CustomOption,
+	CustomOptionSubTitle,
+	CustomOptionItemWrapper,
 	LinkToPage
 };

package/admin/src/components/PlatformFilteredSelectField/utils/relation-helper.ts

@@ -1,6 +1,7 @@
 import { IntlFormatters, MessageDescriptor } from '@formatjs/intl';
 import get from 'lodash/get';
 import { pointPathToGetPath } from '../../../utils/getObjectFromFormName';
+import { Platform } from '../../../api/platform';
 
 export interface GetTargetAttributesResult {
 	targetAttributes?: {
@@ -28,6 +29,8 @@ export interface IPlatformFilteredSelectFieldProps {
 				customFilters?: Record<string, any>[];
 				disablePlatformFilter?: boolean;
 				hideSameEntity?: boolean;
+				searchableFields?: string[];
+				subTitlePath?: string;
 			};
 		};
 		required?: boolean;
@@ -41,6 +44,8 @@ export interface IPlatformFilteredSelectFieldProps {
 	value?: string;
 	contentTypeUID?: string;
 	placeholder?: MessageDescriptor & Parameters<IntlFormatters['formatMessage']>;
+	selectedPlatform?: Platform;
+	hiddenId?: number[];
 }
 
 const RelationHelper = {
@@ -54,7 +59,6 @@ const RelationHelper = {
 		const lastFieldName = fieldName?.split('.')?.[fieldName?.split('.')?.length - 1];
 		const targetField = attribute?.pluginOptions?.filteredSelect?.targetField || fieldName || '';
 		const targetFieldName = (fieldName || '')?.replace(lastFieldName || '', targetField);
-
 		const component = getComponent(targetFieldName, modifiedData, allLayoutData);
 		const result: GetTargetAttributesResult = {
 			targetAttributes: undefined,

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/components/Relations/RelationInput.tsx

@@ -32,6 +32,7 @@ import { getTranslation } from '../../utils/translations';
 import type { NormalizedRelation } from './utils/normalizeRelations';
 import type { Contracts } from '../../../../../../content-manager/shared';
 import type { Entity } from '@strapi/types';
+import S from '../../../../../../../PlatformFilteredSelectField/styles';
 
 const RELATION_ITEM_HEIGHT = 50;
 const RELATION_GUTTER = 4;
@@ -81,6 +82,7 @@ interface RelationInputProps
 		hasNextPage?: boolean;
 	};
 	size: number;
+	mainField?: string;
 }
 
 const RelationInput = ({
@@ -114,6 +116,7 @@ const RelationInput = ({
 	required,
 	relations: paginatedRelations,
 	searchResults,
+	mainField,
 	size
 }: RelationInputProps) => {
 	const [textValue, setTextValue] = React.useState<string | undefined>('');
@@ -265,9 +268,9 @@ const RelationInput = ({
 							onSearch(event.currentTarget.value);
 						}}
 					>
-						{options.map((opt) => {
-							return <Option key={opt.id} {...opt} />;
-						})}
+						{options.map((opt) => (
+							<Option key={opt.id} {...opt} />
+						))}
 					</Combobox>
 				</ComboboxWrapper>
 
@@ -309,7 +312,8 @@ const RelationInput = ({
 							onRelationDisconnect,
 							publicationStateTranslations,
 							relations,
-							updatePositionOfRelation: handleUpdatePositionOfRelation
+							updatePositionOfRelation: handleUpdatePositionOfRelation,
+							subTitle: 'ho'
 						}}
 						itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
 						innerElementType="ol"
@@ -366,8 +370,9 @@ const ShadowBox = styled(Box)<{ overflowDirection?: 'top-bottom' | 'top' | 'bott
 const Option = ({
 	publicationState,
 	mainField,
-	id
-}: Pick<NormalizedRelation, 'id' | 'mainField' | 'publicationState'>) => {
+	id,
+	subTitle
+}: Pick<NormalizedRelation, 'id' | 'mainField' | 'publicationState'> & { subTitle?: string }) => {
 	const { formatMessage } = useIntl();
 	const stringifiedDisplayValue = (mainField ?? id).toString();
 
@@ -384,18 +389,32 @@ const Option = ({
 		const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
 
 		return (
-			<ComboboxOption value={id.toString()} textValue={stringifiedDisplayValue}>
+			<ComboboxOption
+				value={id.toString()}
+				textValue={stringifiedDisplayValue}
+				style={{ paddingTop: 5, paddingBottom: 5 }}
+			>
 				<Flex>
 					<StyledBullet title={title} isDraft={isDraft} />
-					<Typography ellipsis>{stringifiedDisplayValue}</Typography>
+					<S.CustomOptionItemWrapper direction="column" alignItems="start">
+						<Typography ellipsis>{stringifiedDisplayValue}</Typography>
+						{subTitle && <S.CustomOptionSubTitle>{subTitle}</S.CustomOptionSubTitle>}
+					</S.CustomOptionItemWrapper>
 				</Flex>
 			</ComboboxOption>
 		);
 	}
 
 	return (
-		<ComboboxOption value={id.toString()} textValue={stringifiedDisplayValue}>
-			{stringifiedDisplayValue}
+		<ComboboxOption
+			value={id.toString()}
+			textValue={stringifiedDisplayValue}
+			style={{ paddingTop: 5, paddingBottom: 5 }}
+		>
+			<S.CustomOptionItemWrapper direction="column" alignItems="start" gap={0}>
+				{stringifiedDisplayValue}
+				{subTitle && <S.CustomOptionSubTitle>{subTitle}</S.CustomOptionSubTitle>}
+			</S.CustomOptionItemWrapper>
 		</ComboboxOption>
 	);
 };
@@ -433,6 +452,7 @@ interface ListItemProps extends Pick<RelationItemProps, 'index' | 'style'> {
 			published: string;
 		};
 		relations: NormalizedRelation[];
+		subTitle?: string;
 	};
 }
 
@@ -487,14 +507,20 @@ const ListItem = ({ data, index, style }: ListItemProps) => {
 			}}
 			updatePositionOfRelation={updatePositionOfRelation}
 		>
-			<Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+			<Box minWidth={0} paddingRight={4}>
 				<Tooltip description={mainField ?? `${id}`}>
 					{href ? (
-						<LinkEllipsis to={href}>{mainField ?? id}</LinkEllipsis>
+						<Flex direction="column" alignItems="start" gap={0}>
+							<LinkEllipsis to={href}>{mainField ?? id}</LinkEllipsis>
+							{data?.subTitle && <S.CustomOptionSubTitle>{data.subTitle}</S.CustomOptionSubTitle>}
+						</Flex>
 					) : (
-						<Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
-							{mainField ?? id}
-						</Typography>
+						<Flex direction="column" alignItems="start" gap={0}>
+							<Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
+								{mainField ?? id}
+							</Typography>
+							{data?.subTitle && <S.CustomOptionSubTitle>{data.subTitle}</S.CustomOptionSubTitle>}
+						</Flex>
 					)}
 				</Tooltip>
 			</Box>