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

package/README.md

@@ -137,7 +137,19 @@ 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,
+      // Conditional filters add the posibility to who results based on values from other fields.
+      // For now this only works for fields on the same level as the targetfield.
+      // The value found will be replacing the '${value}' string.
+      "conditionalFilters": {
+        "targetField": string,
+        "targetFieldKey": string,
+        "filter": [{ "title": { "$contains": "${value}" } }]
+      }[];
     }
   },
   "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,8 +1,10 @@
 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';
+import { getConditionalFilters } from '../components/PlatformFilteredSelectField/utils/get-condition-filters';
 
 export type SearchFilteredEntitiesResult = {
 	pagination: {
@@ -17,6 +19,7 @@ export type SearchFilteredEntitiesResult = {
 		href: string;
 		publicationState?: string | false;
 		publishedAt?: string;
+		subTitle?: string;
 	}[];
 };
 
@@ -29,6 +32,10 @@ type SearchFilteredEntitiesQueryParams = {
 	platformTitle?: string;
 	notIds?: number[];
 	customFilters?: Record<string, any>[];
+	searchableFields?: string[];
+	subTitlePath?: string;
+	mainFieldName?: string;
+	conditionalFilters?: Record<string, any>[];
 };
 
 const QUERY_KEY = 'filteredEntities';
@@ -41,24 +48,34 @@ export const getSearchFilteredEntities = async ({
 	searchQuery,
 	platformTitle,
 	notIds,
-	customFilters
+	customFilters,
+	searchableFields = ['title'],
+	subTitlePath,
+	mainFieldName = 'title',
+	conditionalFilters = []
 }: 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
+					...customFilterObject,
+					...conditionalFilters
 				]
 			}
 		});
@@ -74,12 +91,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,7 @@ 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';
+import { getConditionalFilters } from '../utils/get-condition-filters';
 
 const PAGE = 1;
 
@@ -25,8 +25,6 @@ export interface IMultiPlatformFilteredSelectFieldProps extends IPlatformFiltere
 	isCloningEntry?: boolean;
 	totalRelations: number;
 	relationsFromModifiedData?: Record<string, any>[];
-	selectedPlatform?: Platform;
-	hiddenId?: number[];
 }
 
 const MultiPlatformFilteredSelectField = ({
@@ -43,7 +41,8 @@ const MultiPlatformFilteredSelectField = ({
 	totalRelations,
 	relationsFromModifiedData,
 	selectedPlatform,
-	hiddenId
+	hiddenId,
+	disabled
 }: IMultiPlatformFilteredSelectFieldProps) => {
 	const fetchClient = useFetchClient();
 	const {
@@ -73,12 +72,8 @@ const MultiPlatformFilteredSelectField = ({
 
 	const { formatMessage } = useIntl();
 
-	const { targetAttributes, targetFieldValue, targetField } = RelationHelper.getTargetAttributes(
-		name,
-		attribute,
-		modifiedData,
-		layout,
-		allLayoutData
+	const { targetAttributes, targetFieldValue, targetField, relationMainFieldName } = RelationHelper.getTargetAttributes(
+		{ fieldName: name, attribute, modifiedData, layout, allLayoutData }
 	);
 
 	const label = intlLabel?.id
@@ -94,6 +89,14 @@ const MultiPlatformFilteredSelectField = ({
 	}, [targetFieldValue]);
 
 	const getItems = async (inputValue?: string) => {
+		const conditionalFilters = getConditionalFilters({
+			fieldName: name,
+			allLayoutData,
+			attribute,
+			layout,
+			modifiedData
+		});
+
 		const entities = await getSearchFilteredEntities({
 			fetchClient,
 			page: PAGE,
@@ -102,7 +105,11 @@ 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,
+			conditionalFilters
 		});
 
 		const mapped = entities?.results.map((x) => ({
@@ -110,7 +117,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 +210,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,15 @@ 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';
+import { getConditionalFilters } from '../utils/get-condition-filters';
 
-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 +37,8 @@ const SinglePlatformFilteredSelectField = ({
 	intlLabel,
 	name,
 	selectedPlatform,
-	hiddenId
+	hiddenId,
+	disabled
 }: ISinglePlatformFilteredSelectFieldProps) => {
 	const fetchClient = useFetchClient();
 	const { onChange, initialData, modifiedData, isCreatingEntry, layout, allLayoutData } =
@@ -53,12 +53,8 @@ const SinglePlatformFilteredSelectField = ({
 
 	const { formatMessage } = useIntl();
 
-	const { targetAttributes, targetFieldValue, targetField } = RelationHelper.getTargetAttributes(
-		name,
-		attribute,
-		modifiedData,
-		layout,
-		allLayoutData
+	const { targetAttributes, targetFieldValue, targetField, relationMainFieldName } = RelationHelper.getTargetAttributes(
+		{ fieldName: name, attribute, modifiedData, layout, allLayoutData }
 	);
 
 	const label = intlLabel?.id
@@ -70,7 +66,10 @@ const SinglePlatformFilteredSelectField = ({
 		: '';
 
 	useEffect(() => {
-		const initialSelect = getInitialSelectItem(targetFieldValue?.[0]);
+		const initialSelect = getInitialSelectItem(
+			targetFieldValue?.[0],
+			attribute?.pluginOptions?.filteredSelect?.subTitlePath
+		);
 
 		setSelected(initialSelect);
 	}, [targetFieldValue]);
@@ -108,6 +107,14 @@ const SinglePlatformFilteredSelectField = ({
 	};
 
 	const getItems = async (inputValue?: string, platformTitle?: string): Promise<CustomReactSelectValue[]> => {
+		const conditionalFilters = getConditionalFilters({
+			fieldName: name,
+			allLayoutData,
+			attribute,
+			layout,
+			modifiedData
+		});
+
 		const pages = await getSearchFilteredEntities({
 			fetchClient,
 			page: PAGE,
@@ -116,7 +123,11 @@ 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,
+			conditionalFilters
 		});
 
 		return pages?.results.map((x) => ({
@@ -124,7 +135,8 @@ const SinglePlatformFilteredSelectField = ({
 			label: x.title,
 			href: x?.href,
 			publicationState: x.publicationState,
-			publishedAt: x.publishedAt
+			publishedAt: x.publishedAt,
+			subTitle: x.subTitle
 		}));
 	};
 
@@ -153,9 +165,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 +184,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/hooks/useRelationLoad.tsx

@@ -24,7 +24,7 @@ const useRelationLoad = ({ name, attribute }: IRelationLoadProps) => {
 	const entityId = origin || modifiedData.id;
 
 	const { componentUid, componentId, relationMainFieldName, targetAttributes, targetField, targetFieldName } =
-		RelationHelper.getTargetAttributes(fieldName, attribute, modifiedData, layout, allLayoutData);
+		RelationHelper.getTargetAttributes({ fieldName, attribute, modifiedData, layout, allLayoutData });
 
 	const nameSplit = targetFieldName.split('.');
 	const isComponentRelation = Boolean(componentUid);

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

@@ -13,7 +13,13 @@ const PlatformFilteredSelectField = (props: IPlatformFilteredSelectFieldProps) =
 	const { modifiedData, layout, allLayoutData } = form;
 	const { selectedPlatform } = usePlatformFormData(form);
 	const { relations, isCloningEntry, totalRelations, relationsFromModifiedData } = useRelationLoad(props);
-	const { targetAttributes } = RelationHelper.getTargetAttributes(name, attribute, modifiedData, layout, allLayoutData);
+	const { targetAttributes } = RelationHelper.getTargetAttributes({
+		fieldName: name,
+		attribute,
+		modifiedData,
+		layout,
+		allLayoutData
+	});
 	const toOneRelation = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'].includes(
 		targetAttributes?.relation || ''
 	);

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
 };