@webbio/strapi-plugin-page-builder 0.2.2 → 0.2.4

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

@@ -1,77 +1,77 @@
-import React, { useEffect, useState } from 'react';
-import { ClearIndicatorProps, DropdownIndicatorProps, GroupBase, components } from 'react-select';
-import AsyncSelect, { AsyncProps } from 'react-select/async';
-
-import { CarretDown, Cross } from '@strapi/icons';
-import { Typography } from '@strapi/design-system';
-
-import S from './styles';
-import { useReactSelectCustomStyles } from './react-select-custom-styles';
-
-export interface IComboboxProps extends AsyncProps<IReactSelectValue, false, GroupBase<IReactSelectValue>> {
-	customOption?: typeof components.Option<IReactSelectValue, false, GroupBase<IReactSelectValue>>;
-	label?: string;
-	id: string;
-}
-
-export interface IReactSelectValue {
-	value: string;
-	label: string;
-	initialSelected?: boolean;
-}
-
-const Combobox = (props: IComboboxProps) => {
-	const { label, customOption, id, ...selectProps } = props;
-	const styles = useReactSelectCustomStyles();
-	const [inputValue, setInputValue] = useState<string | undefined>(props.inputValue);
-
-	useEffect(() => {
-		setInputValue(props.inputValue);
-	}, [props.inputValue]);
-
-	return (
-		<S.Wrapper>
-			{props.label && (
-				<Typography as="label" htmlFor={id} variant="pi" fontWeight="bold" textColor="neutral800">
-					{props.label}
-				</Typography>
-			)}
-			<AsyncSelect
-				{...selectProps}
-				inputId={id}
-				isClearable
-				onInputChange={(value, actionMeta) => {
-					props.onInputChange?.(value, actionMeta);
-					setInputValue(value);
-				}}
-				// @ts-ignore
-				styles={styles}
-				inputValue={inputValue}
-				components={{
-					IndicatorSeparator: null,
-					ClearIndicator,
-					DropdownIndicator,
-					Option: props.customOption || components.Option
-				}}
-			/>
-		</S.Wrapper>
-	);
-};
-
-export { Combobox };
-
-const ClearIndicator = (props: ClearIndicatorProps<IReactSelectValue, false>) => {
-	return (
-		<components.ClearIndicator {...props}>
-			<Cross />
-		</components.ClearIndicator>
-	);
-};
-
-const DropdownIndicator = (props: DropdownIndicatorProps<IReactSelectValue, false>) => {
-	return (
-		<components.DropdownIndicator {...props}>
-			<CarretDown />
-		</components.DropdownIndicator>
-	);
-};
+import React, { useEffect, useState } from 'react';
+import { ClearIndicatorProps, DropdownIndicatorProps, GroupBase, components } from 'react-select';
+import AsyncSelect, { AsyncProps } from 'react-select/async';
+
+import { CarretDown, Cross } from '@strapi/icons';
+import { Typography } from '@strapi/design-system';
+
+import S from './styles';
+import { useReactSelectCustomStyles } from './react-select-custom-styles';
+
+export interface IComboboxProps extends AsyncProps<IReactSelectValue, false, GroupBase<IReactSelectValue>> {
+	customOption?: typeof components.Option<IReactSelectValue, false, GroupBase<IReactSelectValue>>;
+	label?: string;
+	id: string;
+}
+
+export interface IReactSelectValue {
+	value: string;
+	label: string;
+	initialSelected?: boolean;
+}
+
+const Combobox = (props: IComboboxProps) => {
+	const { label, customOption, id, ...selectProps } = props;
+	const styles = useReactSelectCustomStyles();
+	const [inputValue, setInputValue] = useState<string | undefined>(props.inputValue);
+
+	useEffect(() => {
+		setInputValue(props.inputValue);
+	}, [props.inputValue]);
+
+	return (
+		<S.Wrapper>
+			{props.label && (
+				<Typography as="label" htmlFor={id} variant="pi" fontWeight="bold" textColor="neutral800">
+					{props.label}
+				</Typography>
+			)}
+			<AsyncSelect
+				{...selectProps}
+				inputId={id}
+				isClearable
+				onInputChange={(value, actionMeta) => {
+					props.onInputChange?.(value, actionMeta);
+					setInputValue(value);
+				}}
+				// @ts-ignore
+				styles={styles}
+				inputValue={inputValue}
+				components={{
+					IndicatorSeparator: null,
+					ClearIndicator,
+					DropdownIndicator,
+					Option: props.customOption || components.Option
+				}}
+			/>
+		</S.Wrapper>
+	);
+};
+
+export { Combobox };
+
+const ClearIndicator = (props: ClearIndicatorProps<IReactSelectValue, false>) => {
+	return (
+		<components.ClearIndicator {...props}>
+			<Cross />
+		</components.ClearIndicator>
+	);
+};
+
+const DropdownIndicator = (props: DropdownIndicatorProps<IReactSelectValue, false>) => {
+	return (
+		<components.DropdownIndicator {...props}>
+			<CarretDown />
+		</components.DropdownIndicator>
+	);
+};

package/admin/src/components/Combobox/react-select-custom-styles.tsx

@@ -1,111 +1,120 @@
-import { StylesConfig } from 'react-select';
-import { useTheme } from 'styled-components';
-import { IReactSelectValue } from '.';
-
-export const useReactSelectCustomStyles = (): StylesConfig<IReactSelectValue, false> => {
-	const theme = useTheme() as any;
-
-	return {
-		control: (provided, { isFocused, isDisabled }) => ({
-			...provided,
-			color: theme.colors.neutral800,
-			backgroundColor: provided.backgroundColor,
-			minHeight: '40px',
-			lineHeight: 1.4,
-			borderRadius: theme.borderRadius,
-			fontSize: theme.fontSizes[2],
-			borderColor: isFocused ? theme.colors.buttonPrimary600 : theme.colors.neutral200,
-			boxShadow: isFocused ? `${theme.colors.buttonPrimary600} 0px 0px 0px 2px` : 'none',
-
-			':hover': {
-				borderColor: isFocused ? theme.colors.buttonPrimary600 : theme.colors.neutral200
-			}
-		}),
-		placeholder: (provided) => ({
-			...provided,
-			color: theme.colors.neutral500
-		}),
-		menu: (provided) => ({
-			...provided,
-			border: `1px solid ${theme.colors.neutral150}`,
-			boxShadow: '0px 1px 4px rgba(33, 33, 52, 0.1)',
-			borderRadius: theme.borderRadius,
-			color: theme.colors.neutral800
-		}),
-		menuList: (provided) => ({
-			...provided,
-			paddingLeft: '4px',
-			paddingRight: '4px'
-		}),
-		option: (provided, { isFocused, isSelected, isDisabled }) => ({
-			...provided,
-			backgroundColor: isFocused ? theme.colors.primary100 : 'transparent',
-			fontSize: theme.fontSizes[2],
-			borderRadius: theme.borderRadius,
-			color: isSelected ? theme.colors.buttonPrimary600 : theme.colors.neutral800,
-			fontWeight: isSelected ? 700 : 400,
-			minHeight: '40px',
-			display: 'flex',
-			justifyContent: 'center',
-			flexDirection: 'column',
-			gap: '4px',
-			opacity: isDisabled ? 0.7 : 1,
-
-			'span:not(:first-of-type)': {
-				fontSize: theme.fontSizes[1],
-				color: theme.colors.neutral500
-			},
-
-			'&:active': {
-				backgroundColor: theme.colors.primary100
-			}
-		}),
-		loadingIndicator: (provided) => ({
-			...provided,
-			'>span': {
-				backgroundColor: theme.colors.buttonPrimary600
-			}
-		}),
-		loadingMessage: (provided) => ({
-			...provided,
-			color: theme.colors.neutral500
-		}),
-		noOptionsMessage: (provided) => ({
-			...provided,
-			color: theme.colors.neutral500
-		}),
-		clearIndicator: (provided, { isFocused }) => ({
-			...provided,
-			cursor: 'pointer',
-			display: 'flex',
-			alignItems: 'center',
-			justifyContent: 'center',
-			paddingLeft: '6px',
-			paddingRight: '6px',
-			svg: {
-				width: '0.6875rem',
-				path: {
-					fill: theme.colors.neutral600
-				}
-			},
-			':hover svg path': {
-				fill: theme.colors.neutral700
-			}
-		}),
-
-		dropdownIndicator: (provided, { isFocused }) => ({
-			...provided,
-			display: 'flex',
-			alignItems: 'center',
-			justifyContent: 'center',
-			paddingLeft: '6px',
-			paddingRight: '12px',
-			svg: {
-				width: '0.375rem',
-				path: {
-					fill: theme.colors.neutral600
-				}
-			}
-		})
-	};
-};
+import { StylesConfig } from 'react-select';
+import { useTheme } from 'styled-components';
+import { IReactSelectValue } from '.';
+
+export const useReactSelectCustomStyles = (): StylesConfig<IReactSelectValue, false> => {
+	const theme = useTheme() as Record<string, any>;
+
+	return {
+		control: (provided, { isFocused, isDisabled }) => ({
+			...provided,
+			color: theme.colors.neutral800,
+			backgroundColor: theme.colors.neutral0,
+			minHeight: '40px',
+			lineHeight: 1.4,
+			borderRadius: theme.borderRadius,
+			fontSize: theme.fontSizes[2],
+			borderColor: isFocused ? theme.colors.buttonPrimary600 : theme.colors.neutral200,
+			boxShadow: isFocused ? `${theme.colors.buttonPrimary600} 0px 0px 0px 2px` : 'none',
+
+			':hover': {
+				borderColor: isFocused ? theme.colors.buttonPrimary600 : theme.colors.neutral200
+			}
+		}),
+
+		input: (provided, {}) => ({
+			...provided,
+			color: theme.colors.neutral800
+		}),
+		singleValue: (provided, {}) => ({
+			...provided,
+			color: theme.colors.neutral800
+		}),
+		placeholder: (provided) => ({
+			...provided,
+			color: theme.colors.neutral500
+		}),
+		menu: (provided) => ({
+			...provided,
+			border: `1px solid ${theme.colors.neutral150}`,
+			boxShadow: '0px 1px 4px rgba(33, 33, 52, 0.1)',
+			borderRadius: theme.borderRadius,
+			backgroundColor: theme.colors.neutral0
+		}),
+		menuList: (provided) => ({
+			...provided,
+			paddingLeft: '4px',
+			paddingRight: '4px'
+		}),
+		option: (provided, { isFocused, isSelected, isDisabled }) => ({
+			...provided,
+			backgroundColor: isFocused ? theme.colors.primary100 : 'transparent',
+			fontSize: theme.fontSizes[2],
+			borderRadius: theme.borderRadius,
+			color: isSelected ? theme.colors.buttonPrimary600 : theme.colors.neutral800,
+			fontWeight: isSelected ? 700 : 400,
+			minHeight: '40px',
+			display: 'flex',
+			justifyContent: 'center',
+			flexDirection: 'column',
+			gap: '4px',
+			opacity: isDisabled ? 0.7 : 1,
+
+			'span:not(:first-of-type)': {
+				fontSize: theme.fontSizes[1],
+				color: theme.colors.neutral500
+			},
+
+			'&:active': {
+				backgroundColor: theme.colors.primary100
+			}
+		}),
+		loadingIndicator: (provided) => ({
+			...provided,
+			'>span': {
+				backgroundColor: theme.colors.buttonPrimary600
+			}
+		}),
+		loadingMessage: (provided) => ({
+			...provided,
+			color: theme.colors.neutral500
+		}),
+		noOptionsMessage: (provided) => ({
+			...provided,
+			color: theme.colors.neutral500
+		}),
+		clearIndicator: (provided, { isFocused }) => ({
+			...provided,
+			cursor: 'pointer',
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			paddingLeft: '6px',
+			paddingRight: '6px',
+			svg: {
+				width: '0.6875rem',
+				path: {
+					fill: theme.colors.neutral600
+				}
+			},
+			':hover svg path': {
+				fill: theme.colors.neutral700
+			}
+		}),
+
+		dropdownIndicator: (provided, { isFocused }) => ({
+			...provided,
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			paddingLeft: '6px',
+			paddingRight: '12px',
+			svg: {
+				width: '0.375rem',
+				path: {
+					fill: theme.colors.neutral600
+				}
+			}
+		})
+	};
+};

package/admin/src/components/Combobox/styles.ts

@@ -1,22 +1,22 @@
-import styled, { css } from 'styled-components';
-
-const Wrapper = styled.div`
-	${({ theme }) => css`
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	`}
-`;
-
-const Option = styled.span`
-	display: flex;
-	flex-direction: column;
-`;
-
-const ComboboxStyles = {
-	Wrapper,
-	Option
-};
-
-export default ComboboxStyles;
+import styled, { css } from 'styled-components';
+
+const Wrapper = styled.div`
+	${({ theme }) => css`
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	`}
+`;
+
+const Option = styled.span`
+	display: flex;
+	flex-direction: column;
+`;
+
+const ComboboxStyles = {
+	Wrapper,
+	Option
+};
+
+export default ComboboxStyles;

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

@@ -1,90 +1,90 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
-
-import { ModalLayout, ModalBody, ModalHeader, ModalFooter, Button, Typography } from '@strapi/design-system';
-
-import getTrad from '../../utils/getTrad';
-import { sleep } from '../../../../shared/utils/sleep';
-
-export interface IConfirmModalProps {
-	onSubmit: () => void;
-	closeModal: () => void;
-	isOpen?: boolean;
-	title?: React.ReactNode;
-	body?: React.ReactNode;
-	submitText?: string;
-}
-
-const ConfirmModal = ({
-	isOpen,
-	title,
-	body,
-	submitText,
-	onSubmit = () => {
-		console.warn('Modal submit function not set');
-	},
-	closeModal = () => {
-		console.warn('Modal close function not set');
-	}
-}: IConfirmModalProps): JSX.Element => {
-	const { formatMessage } = useIntl();
-
-	const colors = {
-		text: 'neutral800',
-		icon: 'neutral900'
-	};
-
-	const fixModalFocus = async () => {
-		if (isOpen) {
-			// To make sure the modal's focus trap works, we need to wait a short time before blurring the document
-			await sleep(100);
-			// @ts-ignore
-			document?.activeElement?.blur();
-		}
-	};
-
-	useEffect(() => {
-		fixModalFocus();
-	}, [isOpen]);
-
-	if (!isOpen) {
-		return <></>;
-	}
-
-	return (
-		<ModalLayout onClose={closeModal} labelledBy="title" width="500px">
-			<ModalHeader>
-				<Typography fontWeight="bold" textColor={colors.text} as="h2" id="title">
-					{title}
-				</Typography>
-			</ModalHeader>
-
-			{/* New Strapi design system overflow styling breaks dropdowns in modals */}
-			<ModalBody style={{ overflow: 'initial' }}>
-				<Typography textColor={colors.text} id="body">
-					{body}
-				</Typography>
-			</ModalBody>
-
-			<ModalFooter
-				startActions={
-					<Button onClick={closeModal} variant="tertiary">
-						{formatMessage({
-							id: getTrad('template.confirmModal.buttons.cancel')
-						})}
-					</Button>
-				}
-				endActions={
-					<Button onClick={onSubmit}>
-						{submitText ||
-							formatMessage({
-								id: getTrad('template.confirmModal.buttons.submit')
-							})}
-					</Button>
-				}
-			/>
-		</ModalLayout>
-	);
-};
-
-export default ConfirmModal;
+import React, { useEffect } from 'react';
+import { useIntl } from 'react-intl';
+
+import { ModalLayout, ModalBody, ModalHeader, ModalFooter, Button, Typography } from '@strapi/design-system';
+
+import getTrad from '../../utils/getTrad';
+import { sleep } from '../../../../shared/utils/sleep';
+
+export interface IConfirmModalProps {
+	onSubmit: () => void;
+	closeModal: () => void;
+	isOpen?: boolean;
+	title?: React.ReactNode;
+	body?: React.ReactNode;
+	submitText?: string;
+}
+
+const ConfirmModal = ({
+	isOpen,
+	title,
+	body,
+	submitText,
+	onSubmit = () => {
+		console.warn('Modal submit function not set');
+	},
+	closeModal = () => {
+		console.warn('Modal close function not set');
+	}
+}: IConfirmModalProps): JSX.Element => {
+	const { formatMessage } = useIntl();
+
+	const colors = {
+		text: 'neutral800',
+		icon: 'neutral900'
+	};
+
+	const fixModalFocus = async () => {
+		if (isOpen) {
+			// To make sure the modal's focus trap works, we need to wait a short time before blurring the document
+			await sleep(100);
+			// @ts-ignore
+			document?.activeElement?.blur();
+		}
+	};
+
+	useEffect(() => {
+		fixModalFocus();
+	}, [isOpen]);
+
+	if (!isOpen) {
+		return <></>;
+	}
+
+	return (
+		<ModalLayout onClose={closeModal} labelledBy="title" width="500px">
+			<ModalHeader>
+				<Typography fontWeight="bold" textColor={colors.text} as="h2" id="title">
+					{title}
+				</Typography>
+			</ModalHeader>
+
+			{/* New Strapi design system overflow styling breaks dropdowns in modals */}
+			<ModalBody style={{ overflow: 'initial' }}>
+				<Typography textColor={colors.text} id="body">
+					{body}
+				</Typography>
+			</ModalBody>
+
+			<ModalFooter
+				startActions={
+					<Button onClick={closeModal} variant="tertiary">
+						{formatMessage({
+							id: getTrad('template.confirmModal.buttons.cancel')
+						})}
+					</Button>
+				}
+				endActions={
+					<Button onClick={onSubmit}>
+						{submitText ||
+							formatMessage({
+								id: getTrad('template.confirmModal.buttons.submit')
+							})}
+					</Button>
+				}
+			/>
+		</ModalLayout>
+	);
+};
+
+export default ConfirmModal;