@automattic/jetpack-components 0.70.0 → 0.71.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.71.0] - 2025-03-26
+### Removed
+- Removed threat components [#41654]
+
+### Fixed
+- Split Button: Increase compatibility of components, preventing console warnings. [#42627]
+
+## [0.70.1] - 2025-03-24
+### Fixed
+- Fix admin panel header component layout. [#42614]
+
 ## [0.70.0] - 2025-03-24
 ### Changed
 - Update component that renders the terms of service to have a text-only version. [#42600]
@@ -1322,6 +1333,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.71.0]: https://github.com/Automattic/jetpack-components/compare/0.70.1...0.71.0
+[0.70.1]: https://github.com/Automattic/jetpack-components/compare/0.70.0...0.70.1
 [0.70.0]: https://github.com/Automattic/jetpack-components/compare/0.69.1...0.70.0
 [0.69.1]: https://github.com/Automattic/jetpack-components/compare/0.69.0...0.69.1
 [0.69.0]: https://github.com/Automattic/jetpack-components/compare/0.68.2...0.69.0

package/build/components/admin-page/index.js

@@ -37,7 +37,7 @@ const AdminPage = ({ children, moduleName = __('Jetpack', 'jetpack-components'),
             __('There was an error testing Jetpack. Error: %s', 'jetpack-components'), error.message));
         }
     }, []);
-    return (_jsxs("div", { className: rootClassName, children: [showHeader && (_jsx(Container, { horizontalSpacing: 5, children: _jsxs(Col, { className: styles['admin-page-header'], children: [header ? header : _jsx(JetpackLogo, {}), sandboxedDomain && (_jsx("code", { className: styles['sandbox-domain-badge'], onClick: testConnection, onKeyDown: testConnection, 
+    return (_jsxs("div", { className: rootClassName, children: [showHeader && (_jsx(Container, { horizontalSpacing: 5, children: _jsxs(Col, { className: clsx(styles['admin-page-header'], 'jp-admin-page-header'), children: [header ? header : _jsx(JetpackLogo, {}), sandboxedDomain && (_jsx("code", { className: styles['sandbox-domain-badge'], onClick: testConnection, onKeyDown: testConnection, 
                             // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
                             role: "button", tabIndex: 0, title: `Sandboxing via ${sandboxedDomain}. Click to test connection.`, children: "API Sandboxed" }))] }) })), _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), showFooter && (_jsx(Container, { horizontalSpacing: 5, children: _jsx(Col, { children: _jsx(JetpackFooter, { moduleName: moduleName, moduleNameHref: moduleNameHref, menu: optionalMenuItems, useInternalLinks: useInternalLinks }) }) }))] }));
 };

package/build/components/split-button/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonGroup, Button, DropdownMenu } from '@wordpress/components';
+import { Button, Flex, DropdownMenu } from '@wordpress/components';
 import styles from './style.module.scss';
 const DownIcon = () => (_jsx("svg", { width: "15", height: "9", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "10 9 4 7", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m18.004 10.555-6.005 5.459-6.004-5.459 1.009-1.11 4.995 4.542 4.996-4.542 1.009 1.11Z" }) }));
 const SplitButton = ({ variant, controls, popoverProps, toggleProps, label, ...buttonProps }) => {
-    return (_jsxs(ButtonGroup, { className: styles['split-button'], children: [_jsx(Button, { variant: variant, ...buttonProps, className: styles.button }), _jsx(DropdownMenu, { toggleProps: { variant, className: styles.button, ...toggleProps }, popoverProps: { noArrow: false, ...popoverProps }, icon: _jsx(DownIcon, {}), disableOpenOnArrowDown: true, controls: controls, label: label })] }));
+    return (_jsx(Flex, { className: styles['split-button'], children: _jsxs("div", { role: "group", className: "components-button-group", children: [_jsx(Button, { variant: variant, ...buttonProps, className: styles.button }), _jsx(DropdownMenu, { toggleProps: { variant, className: styles.button, ...toggleProps }, popoverProps: { noArrow: false, ...popoverProps }, icon: _jsx(DownIcon, {}), disableOpenOnArrowDown: true, controls: controls, label: label })] }) }));
 };
 export default SplitButton;

package/build/index.d.ts

@@ -28,9 +28,6 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard/index
 export * from './components/icons/index.js';
 export { default as SplitButton } from './components/split-button/index.js';
 export { default as ThemeProvider } from './components/theme-provider/index.js';
-export { default as ThreatFixerButton } from './components/threat-fixer-button/index.js';
-export { default as ThreatSeverityBadge } from './components/threat-severity-badge/index.js';
-export { default as ThreatsDataViews } from './components/threats-data-views/index.js';
 export { default as Text, H2, H3, Title } from './components/text/index.js';
 export { default as ToggleControl } from './components/toggle-control/index.js';
 export { default as NumberControl } from './components/number-control/index.js';
@@ -40,6 +37,7 @@ export { default as Button } from './components/button/index.js';
 export type { ButtonProps } from './components/button/types.js';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
 export { default as TermsOfService } from './components/terms-of-service/index.js';
+export { default as Badge } from './components/badge/index.js';
 export { default as Chip } from './components/chip/index.js';
 export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.js';
 export { default as BoostScoreBar } from './components/boost-score-bar/index.js';

package/build/index.js

@@ -43,9 +43,6 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard/index
 export * from './components/icons/index.js';
 export { default as SplitButton } from './components/split-button/index.js';
 export { default as ThemeProvider } from './components/theme-provider/index.js';
-export { default as ThreatFixerButton } from './components/threat-fixer-button/index.js';
-export { default as ThreatSeverityBadge } from './components/threat-severity-badge/index.js';
-export { default as ThreatsDataViews } from './components/threats-data-views/index.js';
 export { default as Text, H2, H3, Title } from './components/text/index.js';
 export { default as ToggleControl } from './components/toggle-control/index.js';
 export { default as NumberControl } from './components/number-control/index.js';
@@ -54,6 +51,7 @@ export { default as QRCode } from './components/qr-code/index.js';
 export { default as Button } from './components/button/index.js';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
 export { default as TermsOfService } from './components/terms-of-service/index.js';
+export { default as Badge } from './components/badge/index.js';
 export { default as Chip } from './components/chip/index.js';
 export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.js';
 export { default as BoostScoreBar } from './components/boost-score-bar/index.js';

package/components/admin-page/index.tsx

@@ -63,7 +63,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
 		<div className={ rootClassName }>
 			{ showHeader && (
 				<Container horizontalSpacing={ 5 }>
-					<Col className={ styles[ 'admin-page-header' ] }>
+					<Col className={ clsx( styles[ 'admin-page-header' ], 'jp-admin-page-header' ) }>
 						{ header ? header : <JetpackLogo /> }
 						{ sandboxedDomain && (
 							<code

package/components/split-button/index.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroup, Button, DropdownMenu } from '@wordpress/components';
+import { Button, Flex, DropdownMenu } from '@wordpress/components';
 import styles from './style.module.scss';
 import { SplitButtonProps } from './types.js';
 import type React from 'react';
@@ -22,17 +22,19 @@ const SplitButton: React.FC< SplitButtonProps > = ( {
 	...buttonProps
 } ) => {
 	return (
-		<ButtonGroup className={ styles[ 'split-button' ] }>
-			<Button variant={ variant } { ...buttonProps } className={ styles.button } />
-			<DropdownMenu
-				toggleProps={ { variant, className: styles.button, ...toggleProps } }
-				popoverProps={ { noArrow: false, ...popoverProps } }
-				icon={ <DownIcon /> }
-				disableOpenOnArrowDown={ true }
-				controls={ controls }
-				label={ label }
-			/>
-		</ButtonGroup>
+		<Flex className={ styles[ 'split-button' ] }>
+			<div role="group" className="components-button-group">
+				<Button variant={ variant } { ...buttonProps } className={ styles.button } />
+				<DropdownMenu
+					toggleProps={ { variant, className: styles.button, ...toggleProps } }
+					popoverProps={ { noArrow: false, ...popoverProps } }
+					icon={ <DownIcon /> }
+					disableOpenOnArrowDown={ true }
+					controls={ controls }
+					label={ label }
+				/>
+			</div>
+		</Flex>
 	);
 };
 

package/components/split-button/style.module.scss

@@ -4,6 +4,11 @@
     height: var(--actions-size);
     border-radius: var(--jp-border-radius);
 
+	:global(.components-button-group) {
+		display: flex;
+		height: 100%;
+	}
+
     & > .button:first-child {
         border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
     }

package/index.ts

@@ -44,9 +44,6 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard/index
 export * from './components/icons/index.js';
 export { default as SplitButton } from './components/split-button/index.js';
 export { default as ThemeProvider } from './components/theme-provider/index.js';
-export { default as ThreatFixerButton } from './components/threat-fixer-button/index.js';
-export { default as ThreatSeverityBadge } from './components/threat-severity-badge/index.js';
-export { default as ThreatsDataViews } from './components/threats-data-views/index.js';
 export { default as Text, H2, H3, Title } from './components/text/index.js';
 export { default as ToggleControl } from './components/toggle-control/index.js';
 export { default as NumberControl } from './components/number-control/index.js';
@@ -56,6 +53,7 @@ export { default as Button } from './components/button/index.js';
 export type { ButtonProps } from './components/button/types.js';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
 export { default as TermsOfService } from './components/terms-of-service/index.js';
+export { default as Badge } from './components/badge/index.js';
 export { default as Chip } from './components/chip/index.js';
 export {
 	default as PricingTable,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.70.0",
+	"version": "0.71.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -17,14 +17,12 @@
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-boost-score-api": "^0.1.60",
 		"@automattic/jetpack-api": "^0.20.0",
-		"@automattic/jetpack-scan": "^0.5.9",
 		"@automattic/jetpack-script-data": "^0.3.0",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.19.0",
 		"@wordpress/components": "29.5.0",
 		"@wordpress/compose": "7.19.0",
 		"@wordpress/data": "10.19.0",
-		"@wordpress/dataviews": "4.15.0",
 		"@wordpress/date": "5.19.0",
 		"@wordpress/element": "6.19.0",
 		"@wordpress/i18n": "5.19.0",

package/build/components/threat-fixer-button/index.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" resolution-mode="require"/>
-import { type Threat } from '@automattic/jetpack-scan';
-/**
- * Threat Fixer Button component.
- *
- * @param {object}   props           - Component props.
- * @param {object}   props.threat    - The threat.
- * @param {Function} props.onClick   - The onClick function.
- * @param {string}   props.className - The className.
- *
- * @return {JSX.Element} The component.
- */
-export default function ThreatFixerButton({ threat, className, onClick, }: {
-    threat: Threat;
-    onClick: (items: Threat[]) => void;
-    className?: string;
-}): JSX.Element;

package/build/components/threat-fixer-button/index.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getFixerState, getFixerAction, getFixerDescription, } from '@automattic/jetpack-scan';
-import { Tooltip } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Button } from '@automattic/jetpack-components';
-import styles from './styles.module.scss';
-/**
- * Threat Fixer Button component.
- *
- * @param {object}   props           - Component props.
- * @param {object}   props.threat    - The threat.
- * @param {Function} props.onClick   - The onClick function.
- * @param {string}   props.className - The className.
- *
- * @return {JSX.Element} The component.
- */
-export default function ThreatFixerButton({ threat, className, onClick, }) {
-    const fixerState = useMemo(() => {
-        return getFixerState(threat.fixer);
-    }, [threat.fixer]);
-    const tooltipText = useMemo(() => {
-        if (!threat.fixable) {
-            return null;
-        }
-        if (fixerState.error) {
-            return __('An error occurred auto-fixing this threat.', 'jetpack-components');
-        }
-        if (fixerState.stale) {
-            return __('The auto-fixer is taking longer than expected.', 'jetpack-components');
-        }
-        if (fixerState.inProgress) {
-            return __('An auto-fixer is in progress.', 'jetpack-components');
-        }
-        return getFixerDescription(threat);
-    }, [threat, fixerState]);
-    const buttonText = useMemo(() => {
-        if (!threat.fixable) {
-            return null;
-        }
-        if (fixerState.error) {
-            return __('Error', 'jetpack-components');
-        }
-        return getFixerAction(threat);
-    }, [threat, fixerState.error]);
-    const handleClick = useCallback((event) => {
-        event.stopPropagation();
-        onClick([threat]);
-    }, [onClick, threat]);
-    if (!threat.fixable) {
-        return null;
-    }
-    return (_jsx("div", { children: _jsx(Tooltip, { className: styles.tooltip, text: tooltipText, children: _jsx(Button, { size: "small", weight: "regular", variant: "secondary", onClick: handleClick, children: buttonText, className: className, isLoading: fixerState.inProgress, isDestructive: (threat.fixable && threat.fixable.fixer === 'delete') ||
-                    fixerState.error ||
-                    fixerState.stale, style: { minWidth: '72px' } }) }) }));
-}

package/build/components/threat-severity-badge/index.d.ts

@@ -1,4 +0,0 @@
-declare const ThreatSeverityBadge: ({ severity }: {
-    severity: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ThreatSeverityBadge;

package/build/components/threat-severity-badge/index.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { _x } from '@wordpress/i18n';
-import Badge from '../badge/index.js';
-const ThreatSeverityBadge = ({ severity }) => {
-    if (severity >= 5) {
-        return (_jsx(Badge, { variant: "danger", children: _x('Critical', 'Severity label for issues rated 5 or higher.', 'jetpack-components') }));
-    }
-    if (severity >= 3 && severity < 5) {
-        return (_jsx(Badge, { variant: "warning", children: _x('High', 'Severity label for issues rated between 3 and 5.', 'jetpack-components') }));
-    }
-    return (_jsx(Badge, { children: _x('Low', 'Severity label for issues rated below 3.', 'jetpack-components') }));
-};
-export default ThreatSeverityBadge;

package/build/components/threats-data-views/constants.d.ts

@@ -1,33 +0,0 @@
-export declare const THREAT_STATUSES: {
-    value: string;
-    label: string;
-    variant?: 'success' | 'warning';
-}[];
-export declare const THREAT_TYPES: {
-    value: string;
-    label: string;
-}[];
-export declare const THREAT_ICONS: {
-    plugins: any;
-    themes: any;
-    core: any;
-    file: any;
-    default: any;
-};
-export declare const THREAT_FIELD_THREAT = "threat";
-export declare const THREAT_FIELD_TITLE = "title";
-export declare const THREAT_FIELD_DESCRIPTION = "description";
-export declare const THREAT_FIELD_ICON = "icon";
-export declare const THREAT_FIELD_STATUS = "status";
-export declare const THREAT_FIELD_TYPE = "type";
-export declare const THREAT_FIELD_EXTENSION = "extension";
-export declare const THREAT_FIELD_PLUGIN = "plugin";
-export declare const THREAT_FIELD_THEME = "theme";
-export declare const THREAT_FIELD_SEVERITY = "severity";
-export declare const THREAT_FIELD_SIGNATURE = "signature";
-export declare const THREAT_FIELD_FIRST_DETECTED = "first-detected";
-export declare const THREAT_FIELD_FIXED_ON = "fixed-on";
-export declare const THREAT_FIELD_AUTO_FIX = "auto-fix";
-export declare const THREAT_ACTION_FIX = "fix";
-export declare const THREAT_ACTION_IGNORE = "ignore";
-export declare const THREAT_ACTION_UNIGNORE = "unignore";

package/build/components/threats-data-views/constants.js

@@ -1,37 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { code as fileIcon, color as themeIcon, plugins as pluginIcon, shield as shieldIcon, wordpress as coreIcon, } from '@wordpress/icons';
-export const THREAT_STATUSES = [
-    { value: 'current', label: __('Active', 'jetpack-components'), variant: 'warning' },
-    { value: 'fixed', label: __('Fixed', 'jetpack-components'), variant: 'success' },
-    { value: 'ignored', label: __('Ignored', 'jetpack-components') },
-];
-export const THREAT_TYPES = [
-    { value: 'plugins', label: __('Plugin', 'jetpack-components') },
-    { value: 'themes', label: __('Theme', 'jetpack-components') },
-    { value: 'core', label: __('WordPress', 'jetpack-components') },
-    { value: 'file', label: __('File', 'jetpack-components') },
-];
-export const THREAT_ICONS = {
-    plugins: pluginIcon,
-    themes: themeIcon,
-    core: coreIcon,
-    file: fileIcon,
-    default: shieldIcon,
-};
-export const THREAT_FIELD_THREAT = 'threat';
-export const THREAT_FIELD_TITLE = 'title';
-export const THREAT_FIELD_DESCRIPTION = 'description';
-export const THREAT_FIELD_ICON = 'icon';
-export const THREAT_FIELD_STATUS = 'status';
-export const THREAT_FIELD_TYPE = 'type';
-export const THREAT_FIELD_EXTENSION = 'extension';
-export const THREAT_FIELD_PLUGIN = 'plugin';
-export const THREAT_FIELD_THEME = 'theme';
-export const THREAT_FIELD_SEVERITY = 'severity';
-export const THREAT_FIELD_SIGNATURE = 'signature';
-export const THREAT_FIELD_FIRST_DETECTED = 'first-detected';
-export const THREAT_FIELD_FIXED_ON = 'fixed-on';
-export const THREAT_FIELD_AUTO_FIX = 'auto-fix';
-export const THREAT_ACTION_FIX = 'fix';
-export const THREAT_ACTION_IGNORE = 'ignore';
-export const THREAT_ACTION_UNIGNORE = 'unignore';

package/build/components/threats-data-views/index.d.ts

@@ -1,30 +0,0 @@
-/// <reference types="react" resolution-mode="require"/>
-import { type Threat } from '@automattic/jetpack-scan';
-import { type ActionButton, type Filter } from '@wordpress/dataviews';
-/**
- * DataViews component for displaying security threats.
- *
- * @param {object}   props                             - Component props.
- * @param {Array}    props.data                        - Threats data.
- * @param {Array}    props.filters                     - Initial DataView filters.
- * @param {Function} props.onChangeSelection           - Callback function run when an item is selected.
- * @param {Function} props.onFixThreats                - Threat fix action callback.
- * @param {Function} props.onIgnoreThreats             - Threat ignore action callback.
- * @param {Function} props.onUnignoreThreats           - Threat unignore action callback.
- * @param {Function} props.isThreatEligibleForFix      - Function to determine if a threat is eligible for fixing.
- * @param {Function} props.isThreatEligibleForIgnore   - Function to determine if a threat is eligible for ignoring.
- * @param {Function} props.isThreatEligibleForUnignore - Function to determine if a threat is eligible for unignoring.
- *
- * @return {JSX.Element} The ThreatsDataViews component.
- */
-export default function ThreatsDataViews({ data, filters, onChangeSelection, isThreatEligibleForFix, isThreatEligibleForIgnore, isThreatEligibleForUnignore, onFixThreats, onIgnoreThreats, onUnignoreThreats, }: {
-    data: Threat[];
-    filters?: Filter[];
-    onChangeSelection?: (selectedItemIds: string[]) => void;
-    isThreatEligibleForFix?: (threat: Threat) => boolean;
-    isThreatEligibleForIgnore?: (threat: Threat) => boolean;
-    isThreatEligibleForUnignore?: (threat: Threat) => boolean;
-    onFixThreats?: (threats: Threat[]) => void;
-    onIgnoreThreats?: ActionButton<Threat>['callback'];
-    onUnignoreThreats?: ActionButton<Threat>['callback'];
-}): JSX.Element;