[APP-2298] Fix console errors

modules/settings/assets/js/components/analytics/charts/usage-table.js

@@ -4,6 +4,7 @@ import CardHeader from '@elementor/ui/CardHeader';
 import Table from '@elementor/ui/Table';
 import TableBody from '@elementor/ui/TableBody';
 import TableCell from '@elementor/ui/TableCell';
+import TableFooter from '@elementor/ui/TableFooter';
 import TableHead from '@elementor/ui/TableHead';
 import TablePagination from '@elementor/ui/TablePagination';
 import TableRow from '@elementor/ui/TableRow';
@@ -98,20 +99,22 @@ export const UsageTable = () => {
 							</TableRow>
 						))}
 					</TableBody>
+					{tablePageData.length > 1 && (
+						<TableFooter>
+							<TableRow>
+								<TablePagination
+									disabled={!stats.elements.length}
+									count={stats.elements.length}
+									onPageChange={(event, page) => setCurrentPage(page)}
+									page={currentPage}
+									rowsPerPage={TABLE_PER_PAGE}
+									rowsPerPageOptions={[]}
+									sx={{ borderBottom: 'none' }}
+								/>
+							</TableRow>
+						</TableFooter>
+					)}
 				</Table>
-				{tablePageData.length > 1 && (
-					<Box display="flex" justifyContent="end">
-						<TablePagination
-							disabled={!stats.elements.length}
-							count={stats.elements.length}
-							onPageChange={(event, page) => setCurrentPage(page)}
-							page={currentPage}
-							rowsPerPage={TABLE_PER_PAGE}
-							rowsPerPageOptions={[]}
-							sx={{ borderBottom: 'none' }}
-						/>
-					</Box>
-				)}
 				{stats.elements.length === 0 && <NoData />}
 			</StyledCardContent>
 		</Card>

modules/settings/assets/js/components/capabilities-item/pro-item-infotip.js

@@ -137,15 +137,17 @@ const ProItemInfotip = ({
 			}}
 			onOpen={handleOnOpenEvent}
 		>
-			{showIcon && (
-				<StyledChip
-					color="promotion"
-					variant="standard"
-					icon={<ProCrownIcon />}
-					size="small"
-				/>
-			)}
-			{children}
+			<>
+				{showIcon && (
+					<StyledChip
+						color="promotion"
+						variant="standard"
+						icon={<ProCrownIcon />}
+						size="small"
+					/>
+				)}
+				{children}
+			</>
 		</Infotip>
 	);
 };

modules/settings/assets/js/components/help-menu/popup-menu.js

@@ -8,7 +8,7 @@ import { mixpanelEvents, mixpanelService } from '@ea11y-apps/global/services';
 import { __ } from '@wordpress/i18n';
 import { openLink } from '../../utils';
 
-export const HelpPopupMenu = (menuProps) => {
+export const HelpPopupMenu = ({ closeAction, ...menuProps }) => {
 	const { setIsGetStartedModalOpen } = useSettings();
 
 	const handleGetStartedClick = () => {
@@ -18,8 +18,8 @@ export const HelpPopupMenu = (menuProps) => {
 		});
 		setIsGetStartedModalOpen(true);
 
-		if (menuProps.closeAction) {
-			menuProps.closeAction();
+		if (closeAction) {
+			closeAction();
 		}
 	};
 

modules/settings/assets/js/components/html-to-typography/index.js

@@ -26,7 +26,7 @@ const HtmlToTypography = ({ htmlString, replacements }) => {
 	};
 
 	// Function to transform HTML elements into Typography components
-	const transform = (node) => {
+	const transform = (node, index) => {
 		if (node.type === 'tag') {
 			const tagName = node.name; // Extract the HTML tag name
 
@@ -46,13 +46,15 @@ const HtmlToTypography = ({ htmlString, replacements }) => {
 			if (supportedTags.includes(tagName)) {
 				return (
 					<Typography
+						key={index}
 						variant={tagName === 'p' ? 'body2' : 'subtitle2'}
 						component={tagName}
 						marginBottom={1}
-						sx={node.attribs.class ? { textAlign: 'center' } : {}} //for correct render on preview
+						sx={node.attribs?.class ? { textAlign: 'center' } : {}} //for correct render on preview
 						color={tagName === 'p' ? 'text.secondary' : 'text.primary'}
 					>
-						{node.children && node.children.map((child) => transform(child))}
+						{node.children &&
+							node.children.map((child, i) => transform(child, i))}
 					</Typography>
 				);
 			}

modules/settings/assets/js/components/my-account-menu/popup-menu.js

@@ -24,7 +24,7 @@ import API from '../../api/index';
 import { truncateEmail } from '../../helpers/popup-menu';
 import { openLink } from '../../utils';
 
-export const PopupMenu = (menuProps) => {
+export const PopupMenu = ({ closeAction, showUpgradeButton, ...menuProps }) => {
 	const { save } = useStorage();
 	const { error } = useToastNotification();
 	const { planData } = useSettings();
@@ -117,7 +117,7 @@ export const PopupMenu = (menuProps) => {
 				<QuotaBar type="scanner" quotaData={planData?.scannedPages} />
 				<QuotaBar type="ai" quotaData={planData?.aiCredits} />
 
-				{!menuProps.showUpgradeButton && (
+				{!showUpgradeButton && (
 					<Button
 						variant="outlined"
 						startIcon={isFree ? <CrownIcon /> : null}

modules/settings/assets/js/components/position-control/index.js

@@ -28,7 +28,9 @@ const verticalOptions = [
 	{ value: 'bottom', label: __('Lower', 'pojo-accessibility') },
 ];
 
-const StyledContainer = styled(Box)`
+const StyledContainer = styled(Box, {
+	shouldForwardProp: (prop) => prop !== 'isError',
+})`
 	display: flex;
 	gap: ${({ theme }) => theme.spacing(1)};
 	margin-top: ${({ theme }) => theme.spacing(2)};

modules/settings/assets/js/layouts/statement-link/index.js

@@ -159,7 +159,7 @@ const StatementLink = () => {
 							<Box
 								display="flex"
 								flexDirection="row"
-								fullWidth
+								width="100%"
 								alignItems="center"
 							>
 								<PageSelect />
@@ -194,11 +194,11 @@ const StatementLink = () => {
 										color="info"
 										size="small"
 										sx={{ marginLeft: 3 }}
+										checked={!!accessibilityStatementData?.hideLink}
 									/>
 								}
 								sx={{ marginBottom: 3, alignSelf: 'start', ml: 0 }}
 								onChange={onHideLink}
-								checked={accessibilityStatementData?.hideLink}
 							/>
 						</FormControl>
 					</Box>

modules/settings/assets/js/pages/assistant/results/pagination.js

@@ -31,7 +31,7 @@ const AccessibilityAssistantResultsPagination = () => {
 			onPageChange={onPageChange}
 			rowsPerPage={rowsPerPage}
 			onRowsPerPageChange={onRowsPerPageChange}
-			colspan="6"
+			colSpan={6}
 			align="right"
 		/>
 	);

modules/settings/assets/js/pages/assistant/results/search.js

@@ -80,7 +80,9 @@ const StyledSearchButton = styled(Button)`
 	margin-inline-end: ${({ theme }) => theme.spacing(2)};
 `;
 
-const StyledTextField = styled(TextField)`
+const StyledTextField = styled(TextField, {
+	shouldForwardProp: (prop) => prop !== 'expanded',
+})`
 	width: ${({ expanded }) => (expanded ? '250px' : '0')};
 
 	opacity: ${({ expanded }) => (expanded ? 1 : 0)};

modules/settings/assets/js/pages/assistant/results/table.js

@@ -79,7 +79,7 @@ const AccessibilityAssistantResultsTable = ({ scannerResults, loading }) => {
 						</TableCell>
 						<TableCell>
 							<VisuallyHidden>
-								<Typography as="span">
+								<Typography component="span">
 									{__('Actions', 'pojo-accessibility')}
 								</Typography>
 							</VisuallyHidden>
@@ -98,16 +98,14 @@ const AccessibilityAssistantResultsTable = ({ scannerResults, loading }) => {
 								<TableRow>
 									<StyledShortCell component="th" scope="row">
 										<Tooltip arrow title={result.page_title}>
-											{result.page_title}
+											<span>{result.page_title}</span>
 										</Tooltip>
 									</StyledShortCell>
 
 									<StyledLongCell>
-										<span>
-											<Tooltip arrow title={result.page_url}>
-												{result.page_url}
-											</Tooltip>
-										</span>
+										<Tooltip arrow title={result.page_url}>
+											<span>{result.page_url}</span>
+										</Tooltip>
 									</StyledLongCell>
 
 									<StyledShortCell>

modules/settings/assets/js/pages/assistant/stats/issues-by-category/issue-list.js

@@ -84,7 +84,9 @@ IssueList.propTypes = {
 	issueByCategory: PropTypes.object.isRequired,
 };
 
-const StyledIssueLevel = styled(Box)`
+const StyledIssueLevel = styled(Box, {
+	shouldForwardProp: (prop) => prop !== 'colorIndex',
+})`
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;

modules/settings/assets/js/pages/assistant/stats/tooltip.js

@@ -21,7 +21,9 @@ const StatsPieTooltip = (props) => {
 
 export default StatsPieTooltip;
 
-const StyledStatsPieTooltipTitle = styled(Typography)`
+const StyledStatsPieTooltipTitle = styled(Typography, {
+	shouldForwardProp: (prop) => prop !== 'itemColor',
+})`
 	position: relative;
 	padding-left: 18px;
 	&:before {