@webbio/strapi-plugin-page-builder 0.12.2-platform → 0.12.4-platform

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

@@ -1,121 +1,121 @@
-// @ts-nocheck
-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: isDisabled ? theme.colors.neutral100 : 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
-				}
-			}
-		})
-	};
-};
+// @ts-nocheck
+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: isDisabled ? theme.colors.neutral100 : 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,46 +1,46 @@
-import styled, { css } from 'styled-components';
-
-const Wrapper = styled.div`
-	${({ theme }) => css`
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	`}
-`;
-
-const ElementWrapper = styled.div`
-	${({ theme }) => css`
-		width: 100%;
-		display: flex;
-		gap: 4px;
-		> :first-child {
-			flex-grow: 1;
-		}
-	`}
-`;
-
-const Option = styled.span`
-	display: flex;
-	flex-direction: column;
-`;
-
-const LabelWrapper = styled.div`
-	${({ theme }) => css`
-		width: 100%;
-		display: flex;
-		gap: 4px;
-		justify-content: space-between;
-		color: ${theme.colors.neutral800};
-		font-size: ${theme.fontSizes[1]};
-	`}
-`;
-
-const ComboboxStyles = {
-	Wrapper,
-	Option,
-	LabelWrapper,
-	ElementWrapper
-};
-
-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 ElementWrapper = styled.div`
+	${({ theme }) => css`
+		width: 100%;
+		display: flex;
+		gap: 4px;
+		> :first-child {
+			flex-grow: 1;
+		}
+	`}
+`;
+
+const Option = styled.span`
+	display: flex;
+	flex-direction: column;
+`;
+
+const LabelWrapper = styled.div`
+	${({ theme }) => css`
+		width: 100%;
+		display: flex;
+		gap: 4px;
+		justify-content: space-between;
+		color: ${theme.colors.neutral800};
+		font-size: ${theme.fontSizes[1]};
+	`}
+`;
+
+const ComboboxStyles = {
+	Wrapper,
+	Option,
+	LabelWrapper,
+	ElementWrapper
+};
+
+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;