@automattic/jetpack-components 0.68.2 → 0.69.1

package/build/components/testimonials/types.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+export interface TestimonialProps {
+    img: string;
+    quote: string;
+    author: string;
+    profession: string | ReactNode;
+    hidden?: boolean;
+}
+export type TestimonialType = FC<TestimonialProps>;
+export interface TestimonialsProps {
+    testimonials: TestimonialProps[];
+}
+export type TestimonialsType = FC<TestimonialsProps>;

package/build/components/testimonials/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/text/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const VARIANTS_MAPPING: {
+    readonly 'headline-medium': "h1";
+    readonly 'headline-small': "h2";
+    readonly 'headline-small-regular': "h2";
+    readonly 'title-medium': "h3";
+    readonly 'title-medium-semi-bold': "h3";
+    readonly 'title-small': "h4";
+    readonly body: "p";
+    readonly 'body-small': "p";
+    readonly 'body-extra-small': "p";
+    readonly 'body-extra-small-bold': "p";
+    readonly label: "p";
+};
+export declare const BOX_MODEL_VALUES: readonly ["mt", "mr", "mb", "ml", "mx", "my", "m", "pt", "pr", "pb", "pl", "px", "py", "p"];

package/build/components/text/constants.js

@@ -0,0 +1,29 @@
+export const VARIANTS_MAPPING = {
+    'headline-medium': 'h1',
+    'headline-small': 'h2',
+    'headline-small-regular': 'h2',
+    'title-medium': 'h3',
+    'title-medium-semi-bold': 'h3',
+    'title-small': 'h4',
+    body: 'p',
+    'body-small': 'p',
+    'body-extra-small': 'p',
+    'body-extra-small-bold': 'p',
+    label: 'p',
+};
+export const BOX_MODEL_VALUES = [
+    'mt',
+    'mr',
+    'mb',
+    'ml',
+    'mx',
+    'my',
+    'm',
+    'pt',
+    'pr',
+    'pb',
+    'pl',
+    'px',
+    'py',
+    'p',
+];

package/build/components/text/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { H3Props, TextProps, TitleProps } from './types.js';
+/**
+ * Text component.
+ *
+ * @param {TextProps} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
+ */
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+export default Text;
+/**
+ * Heading component - Medium size.
+ *
+ * @param {TextProps} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
+ */
+export declare const H2: React.FC<TextProps>;
+/**
+ * Heading component - Small size,
+ *
+ * @param {H3Props} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
+ */
+export declare const H3: React.FC<H3Props>;
+/**
+ * Title component, based on Text component.
+ *
+ * @param {TitleProps} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
+ */
+export declare const Title: React.FC<TitleProps>;
+export * from './constants.js';

package/build/components/text/index.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants.js';
+import styles from './style.module.scss';
+/**
+ * Text component.
+ *
+ * @param {TextProps} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
+ */
+const Text = forwardRef(({ variant = 'body', children, component, className, ...componentProps }, ref) => {
+    const Component = component || VARIANTS_MAPPING[variant] || 'span';
+    // Build Styles module CSS classnames.
+    const boxModelClasses = useMemo(() => {
+        return BOX_MODEL_VALUES.reduce((acc, value) => {
+            if (typeof componentProps[value] !== 'undefined') {
+                acc += styles[`${value}-${componentProps[value]}`] + ' ';
+                // pick spacing prop. Do not pass down to Component.
+                delete componentProps[value];
+            }
+            return acc;
+        }, '');
+    }, [componentProps]);
+    return (_jsx(Component, { className: clsx(styles.reset, styles[variant], className, boxModelClasses), ...componentProps, ref: ref, children: children }));
+});
+Text.displayName = 'Text';
+export default Text;
+/**
+ * Heading component - Medium size.
+ *
+ * @param {TextProps} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
+ */
+export const H2 = ({ children, ...componentProps }) => (_jsx(Text, { variant: "headline-medium", mb: 3, ...componentProps, children: children }));
+/**
+ * Heading component - Small size,
+ *
+ * @param {H3Props} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
+ */
+export const H3 = ({ children, weight = 'bold', ...componentProps }) => {
+    const variant = `headline-small${weight === 'bold' ? '' : `-${weight}`}`;
+    return (_jsx(Text, { variant: variant, mb: 3, ...componentProps, children: children }));
+};
+/**
+ * Title component, based on Text component.
+ *
+ * @param {TitleProps} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
+ */
+export const Title = ({ children, size = 'medium', ...componentProps }) => (_jsx(Text, { variant: `title-${size}`, mb: 1, ...componentProps, children: children }));
+export * from './constants.js';

package/build/components/text/types.d.ts

@@ -0,0 +1,50 @@
+import { VARIANTS_MAPPING } from './constants.js';
+import type React from 'react';
+export type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type TextProps = {
+    variant?: keyof typeof VARIANTS_MAPPING;
+    /** margin */
+    m?: SpacingValue;
+    /** margin-top */
+    mt?: SpacingValue;
+    /** margin-right */
+    mr?: SpacingValue;
+    /** margin-bottom */
+    mb?: SpacingValue;
+    /** margin-left */
+    ml?: SpacingValue;
+    /** margin left and right */
+    mx?: SpacingValue;
+    /** margin top and bottom */
+    my?: SpacingValue;
+    /** padding */
+    p?: SpacingValue;
+    /** padding-top */
+    pt?: SpacingValue;
+    /** padding-right */
+    pr?: SpacingValue;
+    /** padding-bottom */
+    pb?: SpacingValue;
+    /** padding-left */
+    pl?: SpacingValue;
+    /** padding left and right */
+    px?: SpacingValue;
+    /** padding top and bottom */
+    py?: SpacingValue;
+    /** HTML Class */
+    className?: string;
+    /** The text itself that will be rendered. */
+    children: React.ReactNode;
+    /** Force an specific tag (span, div) or use a custom component that will receive className and children */
+    component?: React.FC<{
+        [prop: string]: unknown;
+    }> | React.ElementType;
+};
+export type H3Props = TextProps & {
+    /** Font weight: 'bold' (default) | 'regular'. */
+    weight?: 'bold' | 'regular';
+};
+export type TitleProps = TextProps & {
+    /** Heading size: 'medium' (default) | 'small'. */
+    size?: 'medium' | 'small';
+};

package/build/components/text/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/theme-provider/index.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+import { ThemeProviderProps } from './types.js';
+export declare const typography: {
+    '--font-headline-medium': string;
+    '--font-headline-small': string;
+    '--font-title-medium': string;
+    '--font-title-small': string;
+    '--font-body': string;
+    '--font-body-small': string;
+    '--font-body-extra-small': string;
+    '--font-title-large': string;
+    '--font-label': string;
+};
+export declare const colors: {
+    '--jp-black': string;
+    '--jp-black-80': string;
+    '--jp-white': string;
+    '--jp-white-off': string;
+    '--jp-gray': string;
+    '--jp-gray-0': string;
+    '--jp-gray-5': string;
+    '--jp-gray-10': string;
+    '--jp-gray-20': string;
+    '--jp-gray-40': string;
+    '--jp-gray-50': string;
+    '--jp-gray-60': string;
+    '--jp-gray-70': string;
+    '--jp-gray-80': string;
+    '--jp-gray-90': string;
+    '--jp-gray-off': string;
+    '--jp-red-0': string;
+    '--jp-red-5': string;
+    '--jp-red-40': string;
+    '--jp-red-50': string;
+    '--jp-red-60': string;
+    '--jp-red-70': string;
+    '--jp-red-80': string;
+    '--jp-red': string;
+    '--jp-yellow-5': string;
+    '--jp-yellow-10': string;
+    '--jp-yellow-20': string;
+    '--jp-yellow-30': string;
+    '--jp-yellow-40': string;
+    '--jp-yellow-50': string;
+    '--jp-yellow-60': string;
+    '--jp-blue-20': string;
+    '--jp-blue-40': string;
+    '--jp-pink': string;
+    '--jp-green-0': string;
+    '--jp-green-5': string;
+    '--jp-green-10': string;
+    '--jp-green-20': string;
+    '--jp-green-30': string;
+    '--jp-green-40': string;
+    '--jp-green-50': string;
+    '--jp-green-60': string;
+    '--jp-green-70': string;
+    '--jp-green-80': string;
+    '--jp-green-90': string;
+    '--jp-green-100': string;
+    '--jp-green': string;
+    '--jp-green-primary': string;
+    '--jp-green-secondary': string;
+};
+export declare const borders: {
+    '--jp-border-radius': string;
+    '--jp-menu-border-height': string;
+    '--jp-underline-thickness': string;
+};
+export declare const spacing: {
+    '--spacing-base': string;
+};
+/**
+ * ThemeProvider React component.
+ *
+ * @param {ThemeProviderProps} props - Component properties.
+ * @return {React.ReactNode}        ThemeProvider component.
+ */
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export default ThemeProvider;

package/build/components/theme-provider/index.js

@@ -0,0 +1,129 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import styles from './globals.module.scss';
+export const typography = {
+    // Headline
+    '--font-headline-medium': '48px',
+    '--font-headline-small': '36px',
+    '--font-title-medium': '24px',
+    '--font-title-small': '20px',
+    '--font-body': '16px',
+    '--font-body-small': '14px',
+    '--font-body-extra-small': '12px',
+    // Deprecated
+    '--font-title-large': 'var(--font-headline-small)',
+    '--font-label': 'var(--font-body-extra-small)',
+};
+export const colors = {
+    '--jp-black': '#000000',
+    '--jp-black-80': '#2c3338',
+    // White
+    '--jp-white': '#ffffff',
+    '--jp-white-off': '#f9f9f6',
+    // Gray
+    '--jp-gray': '#dcdcde',
+    '--jp-gray-0': '#F6F7F7',
+    '--jp-gray-5': 'var(--jp-gray)',
+    '--jp-gray-10': '#C3C4C7',
+    '--jp-gray-20': '#A7AAAD',
+    '--jp-gray-40': '#787C82',
+    '--jp-gray-50': '#646970',
+    '--jp-gray-60': '#50575E',
+    '--jp-gray-70': '#3C434A',
+    '--jp-gray-80': '#2C3338',
+    '--jp-gray-90': '#1d2327',
+    '--jp-gray-off': '#e2e2df',
+    // Red
+    '--jp-red-0': '#F7EBEC',
+    '--jp-red-5': '#FACFD2',
+    '--jp-red-40': '#E65054',
+    '--jp-red-50': '#D63638',
+    '--jp-red-60': '#B32D2E',
+    '--jp-red-70': '#8A2424',
+    '--jp-red-80': '#691C1C',
+    '--jp-red': '#d63639',
+    // Yellow
+    '--jp-yellow-5': '#F5E6B3',
+    '--jp-yellow-10': '#F2CF75',
+    '--jp-yellow-20': '#F0C930',
+    '--jp-yellow-30': '#DEB100',
+    '--jp-yellow-40': '#C08C00',
+    '--jp-yellow-50': '#9D6E00',
+    '--jp-yellow-60': '#7D5600',
+    // Blue
+    '--jp-blue-20': '#68B3E8',
+    '--jp-blue-40': '#1689DB',
+    // Pink
+    '--jp-pink': '#C9356E',
+    // Green
+    '--jp-green-0': '#f0f2eb',
+    '--jp-green-5': '#d0e6b8',
+    '--jp-green-10': '#9dd977',
+    '--jp-green-20': '#64ca43',
+    '--jp-green-30': '#2fb41f',
+    '--jp-green-40': '#069e08',
+    '--jp-green-50': '#008710',
+    '--jp-green-60': '#007117',
+    '--jp-green-70': '#005b18',
+    '--jp-green-80': '#004515',
+    '--jp-green-90': '#003010',
+    '--jp-green-100': '#001c09',
+    '--jp-green': '#069e08',
+    '--jp-green-primary': 'var( --jp-green-40 )',
+    '--jp-green-secondary': 'var( --jp-green-30 )',
+};
+export const borders = {
+    '--jp-border-radius': '4px',
+    '--jp-menu-border-height': '1px',
+    '--jp-underline-thickness': '2px',
+};
+export const spacing = {
+    '--spacing-base': '8px',
+};
+const globalThemeInstances = {};
+const setup = (root, id, withGlobalStyles) => {
+    const tokens = { ...typography, ...colors, ...borders, ...spacing };
+    for (const key in tokens) {
+        root.style.setProperty(key, tokens[key]);
+    }
+    if (withGlobalStyles) {
+        root.classList.add(styles.global);
+    }
+    if (!id) {
+        return;
+    }
+    // Register theme provider instance.
+    globalThemeInstances[id] = {
+        provided: true,
+        root,
+    };
+};
+/**
+ * ThemeProvider React component.
+ *
+ * @param {ThemeProviderProps} props - Component properties.
+ * @return {React.ReactNode}        ThemeProvider component.
+ */
+const ThemeProvider = ({ children = null, targetDom, id, withGlobalStyles = true, }) => {
+    const themeWrapperRef = useRef();
+    // Check whether the theme provider instance is already registered.
+    const isAlreadyProvided = globalThemeInstances?.[id]?.provided;
+    useLayoutEffect(() => {
+        if (isAlreadyProvided) {
+            return;
+        }
+        if (targetDom) {
+            return setup(targetDom, id, withGlobalStyles);
+        }
+        if (!themeWrapperRef?.current) {
+            return;
+        }
+        setup(themeWrapperRef.current, id, withGlobalStyles);
+    }, [targetDom, themeWrapperRef, isAlreadyProvided, id, withGlobalStyles]);
+    // Do not wrap when the DOM element target is defined.
+    if (targetDom) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return _jsx("div", { ref: themeWrapperRef, children: children });
+};
+export default ThemeProvider;

package/build/components/theme-provider/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" resolution-mode="require"/>
+export type ThemeProviderProps = {
+    /**
+     * An optional id to register and identify the provider instance.
+     */
+    id?: string;
+    /**
+     * Target DOM element to store theme styles. Optional.
+     */
+    targetDom?: HTMLElement;
+    /**
+     * Content
+     */
+    children?: React.ReactNode;
+    /**
+     * Inser global/reset styles
+     */
+    withGlobalStyles?: boolean;
+};
+export type ThemeInstance = {
+    provided: boolean;
+    root: HTMLElement;
+};

package/build/components/theme-provider/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+/// <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

@@ -0,0 +1,56 @@
+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

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

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,30 @@
+/// <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;