@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

package/dist/esm/ResponseActions/ResponseActions.js

@@ -9,17 +9,43 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
-import { ExternalLinkAltIcon, VolumeUpIcon, OutlinedThumbsUpIcon, OutlinedThumbsDownIcon, OutlinedCopyIcon } from '@patternfly/react-icons';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ExternalLinkAltIcon, VolumeUpIcon, OutlinedThumbsUpIcon, OutlinedThumbsDownIcon, OutlinedCopyIcon, DownloadIcon, PencilAltIcon } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 export const ResponseActions = ({ actions }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-    const [activeButton, setActiveButton] = React.useState();
-    const { positive, negative, copy, share, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "share", "listen"]);
-    const responseActions = React.useRef(null);
-    React.useEffect(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+    const [activeButton, setActiveButton] = useState();
+    const [clickStatePersisted, setClickStatePersisted] = useState(false);
+    useEffect(() => {
+        // Define the order of precedence for checking initial `isClicked`
+        const actionPrecedence = ['positive', 'negative', 'copy', 'edit', 'share', 'download', 'listen'];
+        let initialActive;
+        // Check predefined actions first based on precedence
+        for (const actionName of actionPrecedence) {
+            const actionProp = actions[actionName];
+            if (actionProp === null || actionProp === void 0 ? void 0 : actionProp.isClicked) {
+                initialActive = actionName;
+                break;
+            }
+        }
+        // If no predefined action was initially clicked, check additionalActions
+        if (!initialActive) {
+            const clickedActionName = Object.keys(additionalActions).find((actionName) => { var _a; return !actionPrecedence.includes(actionName) && ((_a = additionalActions[actionName]) === null || _a === void 0 ? void 0 : _a.isClicked); });
+            initialActive = clickedActionName;
+        }
+        if (initialActive) {
+            // Click state is explicitly controlled by consumer.
+            setClickStatePersisted(true);
+        }
+        setActiveButton(initialActive);
+    }, [actions]);
+    const { positive, negative, copy, edit, share, download, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "edit", "share", "download", "listen"]);
+    const responseActions = useRef(null);
+    useEffect(() => {
         const handleClickOutside = (e) => {
-            if (responseActions.current && !responseActions.current.contains(e.target)) {
+            if (responseActions.current && !responseActions.current.contains(e.target) && !clickStatePersisted) {
                 setActiveButton(undefined);
             }
         };
@@ -27,20 +53,15 @@ export const ResponseActions = ({ actions }) => {
         return () => {
             window.removeEventListener('click', handleClickOutside);
         };
-    }, []);
+    }, [clickStatePersisted]);
     const handleClick = (e, id, onClick) => {
+        setClickStatePersisted(false);
         setActiveButton(id);
         onClick && onClick(e);
     };
-    return (React.createElement("div", { ref: responseActions, className: "pf-chatbot__response-actions" },
-        positive && (React.createElement(ResponseActionButton, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_c = positive.tooltipContent) !== null && _c !== void 0 ? _c : 'Good response', clickedTooltipContent: (_d = positive.clickedTooltipContent) !== null && _d !== void 0 ? _d : 'Response recorded', tooltipProps: positive.tooltipProps, icon: React.createElement(OutlinedThumbsUpIcon, null), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] })),
-        negative && (React.createElement(ResponseActionButton, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_g = negative.tooltipContent) !== null && _g !== void 0 ? _g : 'Bad response', clickedTooltipContent: (_h = negative.clickedTooltipContent) !== null && _h !== void 0 ? _h : 'Response recorded', tooltipProps: negative.tooltipProps, icon: React.createElement(OutlinedThumbsDownIcon, null), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] })),
-        copy && (React.createElement(ResponseActionButton, { ariaLabel: (_j = copy.ariaLabel) !== null && _j !== void 0 ? _j : 'Copy', clickedAriaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_l = copy.tooltipContent) !== null && _l !== void 0 ? _l : 'Copy', clickedTooltipContent: (_m = copy.clickedTooltipContent) !== null && _m !== void 0 ? _m : 'Copied', tooltipProps: copy.tooltipProps, icon: React.createElement(OutlinedCopyIcon, null), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] })),
-        share && (React.createElement(ResponseActionButton, { ariaLabel: (_o = share.ariaLabel) !== null && _o !== void 0 ? _o : 'Share', clickedAriaLabel: (_p = share.ariaLabel) !== null && _p !== void 0 ? _p : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_q = share.tooltipContent) !== null && _q !== void 0 ? _q : 'Share', clickedTooltipContent: (_r = share.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Shared', tooltipProps: share.tooltipProps, icon: React.createElement(ExternalLinkAltIcon, null), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] })),
-        listen && (React.createElement(ResponseActionButton, { ariaLabel: (_s = listen.ariaLabel) !== null && _s !== void 0 ? _s : 'Listen', clickedAriaLabel: (_t = listen.ariaLabel) !== null && _t !== void 0 ? _t : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_u = listen.tooltipContent) !== null && _u !== void 0 ? _u : 'Listen', clickedTooltipContent: (_v = listen.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Listening', tooltipProps: listen.tooltipProps, icon: React.createElement(VolumeUpIcon, null), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] })),
-        Object.keys(additionalActions).map((action) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            return (React.createElement(ResponseActionButton, { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, clickedAriaLabel: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.clickedAriaLabel, onClick: (e) => { var _a; return handleClick(e, action, (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.onClick); }, className: (_c = additionalActions[action]) === null || _c === void 0 ? void 0 : _c.className, isDisabled: (_d = additionalActions[action]) === null || _d === void 0 ? void 0 : _d.isDisabled, tooltipContent: (_e = additionalActions[action]) === null || _e === void 0 ? void 0 : _e.tooltipContent, tooltipProps: (_f = additionalActions[action]) === null || _f === void 0 ? void 0 : _f.tooltipProps, clickedTooltipContent: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.clickedTooltipContent, icon: (_h = additionalActions[action]) === null || _h === void 0 ? void 0 : _h.icon, isClicked: activeButton === action, ref: (_j = additionalActions[action]) === null || _j === void 0 ? void 0 : _j.ref, "aria-expanded": (_k = additionalActions[action]) === null || _k === void 0 ? void 0 : _k['aria-expanded'], "aria-controls": (_l = additionalActions[action]) === null || _l === void 0 ? void 0 : _l['aria-controls'] }));
-        })));
+    return (_jsxs("div", { ref: responseActions, className: "pf-chatbot__response-actions", children: [positive && (_jsx(ResponseActionButton, Object.assign({}, positive, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_c = positive.tooltipContent) !== null && _c !== void 0 ? _c : 'Good response', clickedTooltipContent: (_d = positive.clickedTooltipContent) !== null && _d !== void 0 ? _d : 'Response recorded', tooltipProps: positive.tooltipProps, icon: _jsx(OutlinedThumbsUpIcon, {}), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && (_jsx(ResponseActionButton, Object.assign({}, negative, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_g = negative.tooltipContent) !== null && _g !== void 0 ? _g : 'Bad response', clickedTooltipContent: (_h = negative.clickedTooltipContent) !== null && _h !== void 0 ? _h : 'Response recorded', tooltipProps: negative.tooltipProps, icon: _jsx(OutlinedThumbsDownIcon, {}), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && (_jsx(ResponseActionButton, Object.assign({}, copy, { ariaLabel: (_j = copy.ariaLabel) !== null && _j !== void 0 ? _j : 'Copy', clickedAriaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_l = copy.tooltipContent) !== null && _l !== void 0 ? _l : 'Copy', clickedTooltipContent: (_m = copy.clickedTooltipContent) !== null && _m !== void 0 ? _m : 'Copied', tooltipProps: copy.tooltipProps, icon: _jsx(OutlinedCopyIcon, {}), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] }))), edit && (_jsx(ResponseActionButton, Object.assign({}, edit, { ariaLabel: (_o = edit.ariaLabel) !== null && _o !== void 0 ? _o : 'Edit', clickedAriaLabel: (_p = edit.ariaLabel) !== null && _p !== void 0 ? _p : 'Editing', onClick: (e) => handleClick(e, 'edit', edit.onClick), className: edit.className, isDisabled: edit.isDisabled, tooltipContent: (_q = edit.tooltipContent) !== null && _q !== void 0 ? _q : 'Edit ', clickedTooltipContent: (_r = edit.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Editing', tooltipProps: edit.tooltipProps, icon: _jsx(PencilAltIcon, {}), isClicked: activeButton === 'edit', ref: edit.ref, "aria-expanded": edit['aria-expanded'], "aria-controls": edit['aria-controls'] }))), share && (_jsx(ResponseActionButton, Object.assign({}, share, { ariaLabel: (_s = share.ariaLabel) !== null && _s !== void 0 ? _s : 'Share', clickedAriaLabel: (_t = share.ariaLabel) !== null && _t !== void 0 ? _t : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_u = share.tooltipContent) !== null && _u !== void 0 ? _u : 'Share', clickedTooltipContent: (_v = share.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Shared', tooltipProps: share.tooltipProps, icon: _jsx(ExternalLinkAltIcon, {}), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] }))), download && (_jsx(ResponseActionButton, Object.assign({}, download, { ariaLabel: (_w = download.ariaLabel) !== null && _w !== void 0 ? _w : 'Download', clickedAriaLabel: (_x = download.ariaLabel) !== null && _x !== void 0 ? _x : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_y = download.tooltipContent) !== null && _y !== void 0 ? _y : 'Download', clickedTooltipContent: (_z = download.clickedTooltipContent) !== null && _z !== void 0 ? _z : 'Downloaded', tooltipProps: download.tooltipProps, icon: _jsx(DownloadIcon, {}), isClicked: activeButton === 'download', ref: download.ref, "aria-expanded": download['aria-expanded'], "aria-controls": download['aria-controls'] }))), listen && (_jsx(ResponseActionButton, Object.assign({}, listen, { ariaLabel: (_0 = listen.ariaLabel) !== null && _0 !== void 0 ? _0 : 'Listen', clickedAriaLabel: (_1 = listen.ariaLabel) !== null && _1 !== void 0 ? _1 : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_2 = listen.tooltipContent) !== null && _2 !== void 0 ? _2 : 'Listen', clickedTooltipContent: (_3 = listen.clickedTooltipContent) !== null && _3 !== void 0 ? _3 : 'Listening', tooltipProps: listen.tooltipProps, icon: _jsx(VolumeUpIcon, {}), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] }))), Object.keys(additionalActions).map((action) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                return (_createElement(ResponseActionButton, Object.assign({}, additionalActions[action], { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, clickedAriaLabel: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.clickedAriaLabel, onClick: (e) => { var _a; return handleClick(e, action, (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.onClick); }, className: (_c = additionalActions[action]) === null || _c === void 0 ? void 0 : _c.className, isDisabled: (_d = additionalActions[action]) === null || _d === void 0 ? void 0 : _d.isDisabled, tooltipContent: (_e = additionalActions[action]) === null || _e === void 0 ? void 0 : _e.tooltipContent, tooltipProps: (_f = additionalActions[action]) === null || _f === void 0 ? void 0 : _f.tooltipProps, clickedTooltipContent: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.clickedTooltipContent, icon: (_h = additionalActions[action]) === null || _h === void 0 ? void 0 : _h.icon, isClicked: activeButton === action, ref: (_j = additionalActions[action]) === null || _j === void 0 ? void 0 : _j.ref, "aria-expanded": (_k = additionalActions[action]) === null || _k === void 0 ? void 0 : _k['aria-expanded'], "aria-controls": (_l = additionalActions[action]) === null || _l === void 0 ? void 0 : _l['aria-controls'] })));
+            })] }));
 };
 export default ResponseActions;

package/dist/esm/ResponseActions/ResponseActions.test.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ResponseActions from './ResponseActions';
@@ -18,6 +18,7 @@ const ALL_ACTIONS = [
     { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
     { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
     { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
+    { type: 'edit', label: 'Edit', clickedLabel: 'Editing' },
     { type: 'share', label: 'Share', clickedLabel: 'Shared' },
     { type: 'listen', label: 'Listen', clickedLabel: 'Listening' }
 ];
@@ -29,7 +30,7 @@ const CUSTOM_ACTIONS = [
             onClick: jest.fn(),
             tooltipContent: 'Regenerate',
             clickedTooltipContent: 'Regenerated',
-            icon: React.createElement(RedoIcon, null)
+            icon: _jsx(RedoIcon, {})
         },
         download: {
             ariaLabel: 'Download',
@@ -37,34 +38,47 @@ const CUSTOM_ACTIONS = [
             onClick: jest.fn(),
             tooltipContent: 'Download',
             clickedTooltipContent: 'Downloaded',
-            icon: React.createElement(DownloadIcon, null)
+            icon: _jsx(DownloadIcon, {})
         },
         info: {
             ariaLabel: 'Info',
             onClick: jest.fn(),
             tooltipContent: 'Info',
-            icon: React.createElement(InfoCircleIcon, null)
+            icon: _jsx(InfoCircleIcon, {})
         }
     }
 ];
+const ALL_ACTIONS_DATA_TEST = [
+    { type: 'positive', label: 'Good response', dataTestId: 'positive' },
+    { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
+    { type: 'copy', label: 'Copy', dataTestId: 'copy' },
+    { type: 'edit', label: 'Edit', dataTestId: 'edit' },
+    { type: 'share', label: 'Share', dataTestId: 'share' },
+    { type: 'download', label: 'Download', dataTestId: 'download' },
+    { type: 'listen', label: 'Listen', dataTestId: 'listen' }
+];
 describe('ResponseActions', () => {
     afterEach(() => {
         jest.clearAllMocks();
     });
     it('should handle click within group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(ResponseActions, { actions: {
+        render(_jsx(ResponseActions, { actions: {
                 positive: { onClick: jest.fn() },
                 negative: { onClick: jest.fn() },
                 copy: { onClick: jest.fn() },
+                edit: { onClick: jest.fn() },
                 share: { onClick: jest.fn() },
+                download: { onClick: jest.fn() },
                 listen: { onClick: jest.fn() }
             } }));
         const goodBtn = screen.getByRole('button', { name: 'Good response' });
         const badBtn = screen.getByRole('button', { name: 'Bad response' });
         const copyBtn = screen.getByRole('button', { name: 'Copy' });
+        const editBtn = screen.getByRole('button', { name: 'Edit' });
         const shareBtn = screen.getByRole('button', { name: 'Share' });
+        const downloadBtn = screen.getByRole('button', { name: 'Download' });
         const listenBtn = screen.getByRole('button', { name: 'Listen' });
-        const buttons = [goodBtn, badBtn, copyBtn, shareBtn, listenBtn];
+        const buttons = [goodBtn, badBtn, copyBtn, editBtn, shareBtn, downloadBtn, listenBtn];
         buttons.forEach((button) => {
             expect(button).toBeTruthy();
         });
@@ -83,7 +97,7 @@ describe('ResponseActions', () => {
     }));
     it('should handle click outside of group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         // using message just so we have something outside the group that's rendered
-        render(React.createElement(Message, { name: "Bot", role: "bot", avatar: "", content: "I updated your account with those settings. You're ready to set up your first dashboard!", actions: {
+        render(_jsx(Message, { name: "Bot", role: "bot", avatar: "", content: "I updated your account with those settings. You're ready to set up your first dashboard!", actions: {
                 positive: {},
                 negative: {}
             } }));
@@ -101,23 +115,83 @@ describe('ResponseActions', () => {
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     }));
+    it('should handle isClicked prop within group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(ResponseActions, { actions: {
+                positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+                negative: { 'data-testid': 'negative-btn', onClick: jest.fn() }
+            } }));
+        expect(screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should set "listen" button as active if its `isClicked` is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(ResponseActions, { actions: {
+                positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: false },
+                negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: false },
+                listen: { 'data-testid': 'listen-btn', onClick: jest.fn(), isClicked: true }
+            } }));
+        expect(screen.getByTestId('listen-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(screen.getByTestId('positive-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should prioritize "positive" when both "positive" and "negative" are set to clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(ResponseActions, { actions: {
+                positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+                negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: true }
+            } }));
+        // Positive button should take precendence
+        expect(screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should set an additional action button as active if it is initially clicked and no predefined are clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const [additionalActions] = CUSTOM_ACTIONS;
+        const customActions = Object.assign({ positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false }, negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: false } }, Object.keys(additionalActions).reduce((acc, actionKey) => {
+            acc[actionKey] = Object.assign(Object.assign({}, additionalActions[actionKey]), { 'data-testid': actionKey, isClicked: actionKey === 'regenerate' });
+            return acc;
+        }, {}));
+        render(_jsx(ResponseActions, { actions: customActions }));
+        Object.keys(customActions).forEach((actionKey) => {
+            if (actionKey === 'regenerate') {
+                expect(screen.getByTestId(actionKey)).toHaveClass('pf-chatbot__button--response-action-clicked');
+            }
+            else {
+                // Other actions should not have clicked class
+                expect(screen.getByTestId(actionKey)).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+            }
+        });
+    }));
+    it('should activate the clicked button and deactivate any previously active button', () => __awaiter(void 0, void 0, void 0, function* () {
+        const actions = {
+            positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false },
+            negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: true }
+        };
+        render(_jsx(ResponseActions, { actions: actions }));
+        const negativeBtn = screen.getByTestId('negative');
+        const positiveBtn = screen.getByTestId('positive');
+        // negative button is initially clicked
+        expect(negativeBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(positiveBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(positiveBtn);
+        // positive button should now have the clicked class
+        expect(positiveBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(negativeBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
     it('should render buttons correctly', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
-            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
+            render(_jsx(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
             expect(screen.getByRole('button', { name: label })).toBeTruthy();
         });
     });
     it('should be able to call onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label }) {
             const spy = jest.fn();
-            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: spy } } }));
+            render(_jsx(ResponseActions, { actions: { [type]: { onClick: spy } } }));
             yield userEvent.click(screen.getByRole('button', { name: label }));
             expect(spy).toHaveBeenCalledTimes(1);
         }));
     }));
     it('should swap clicked and non-clicked aria labels on click', () => __awaiter(void 0, void 0, void 0, function* () {
         ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label, clickedLabel }) {
-            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
+            render(_jsx(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
             expect(screen.getByRole('button', { name: label })).toBeTruthy();
             yield userEvent.click(screen.getByRole('button', { name: label }));
             expect(screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
@@ -125,7 +199,7 @@ describe('ResponseActions', () => {
     }));
     it('should swap clicked and non-clicked tooltips on click', () => __awaiter(void 0, void 0, void 0, function* () {
         ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label, clickedLabel }) {
-            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
+            render(_jsx(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
             expect(screen.getByRole('button', { name: label })).toBeTruthy();
             yield userEvent.click(screen.getByRole('button', { name: label }));
             expect(screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
@@ -136,39 +210,49 @@ describe('ResponseActions', () => {
             { type: 'positive', ariaLabel: 'Thumbs up' },
             { type: 'negative', ariaLabel: 'Thumbs down' },
             { type: 'copy', ariaLabel: 'Copy the message' },
+            { type: 'edit', ariaLabel: 'Edit this message' },
             { type: 'share', ariaLabel: 'Share it with friends' },
+            { type: 'download', ariaLabel: 'Download your cool message' },
             { type: 'listen', ariaLabel: 'Listen up' }
         ];
         actions.forEach(({ type, ariaLabel }) => {
-            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn(), ariaLabel } } }));
+            render(_jsx(ResponseActions, { actions: { [type]: { onClick: jest.fn(), ariaLabel } } }));
             expect(screen.getByRole('button', { name: ariaLabel })).toBeTruthy();
         });
     });
     it('should be able to disable buttons', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
-            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn(), isDisabled: true } } }));
+            render(_jsx(ResponseActions, { actions: { [type]: { onClick: jest.fn(), isDisabled: true } } }));
             expect(screen.getByRole('button', { name: label })).toBeDisabled();
         });
     });
     it('should be able to add class to buttons', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
-            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn(), className: 'test' } } }));
+            render(_jsx(ResponseActions, { actions: { [type]: { onClick: jest.fn(), className: 'test' } } }));
             expect(screen.getByRole('button', { name: label })).toHaveClass('test');
         });
     });
+    it('should be able to add custom attributes to buttons', () => {
+        ALL_ACTIONS_DATA_TEST.forEach(({ type, dataTestId }) => {
+            render(_jsx(ResponseActions, { actions: { [type]: { onClick: jest.fn(), 'data-testid': dataTestId } } }));
+            expect(screen.getByTestId(dataTestId)).toBeTruthy();
+        });
+    });
     it('should be able to add custom actions', () => {
         CUSTOM_ACTIONS.forEach((action) => {
             const key = Object.keys(action)[0];
-            render(React.createElement(ResponseActions, { actions: {
+            render(_jsx(ResponseActions, { actions: {
                     [key]: {
                         tooltipContent: action[key].tooltipContent,
                         onClick: action[key].onClick,
                         // doing this just because it's easier to test without a regex for the button name
                         ariaLabel: action[key].ariaLabel.toLowerCase(),
-                        icon: action[key].icon
+                        icon: action[key].icon,
+                        'data-testid': action[key]
                     }
                 } }));
             expect(screen.getByRole('button', { name: key })).toBeTruthy();
+            expect(screen.getByTestId(action[key])).toBeTruthy();
         });
     });
 });

package/dist/esm/Settings/SettingsForm.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 export interface SettingsFormProps {
     /** Class applied to form container */
     className?: string;
@@ -11,5 +11,5 @@ export interface SettingsFormProps {
     /** Sets form to compact styling. */
     isCompact?: boolean;
 }
-export declare const SettingsForm: React.FunctionComponent<SettingsFormProps>;
+export declare const SettingsForm: FunctionComponent<SettingsFormProps>;
 export default SettingsForm;

package/dist/esm/Settings/SettingsForm.js

@@ -9,12 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SettingsForm = (_a) => {
     var { className, fields = [], isCompact } = _a, props = __rest(_a, ["className", "fields", "isCompact"]);
-    return (React.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}` }, props),
-        React.createElement("form", { className: "pf-chatbot__settings-form" }, fields.map((field) => (React.createElement("div", { className: "pf-chatbot__settings-form-row", key: field.label },
-            React.createElement("label", { className: "pf-chatbot__settings-label", htmlFor: field.id }, field.label),
-            field.field))))));
+    return (_jsx("div", Object.assign({ className: `pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}` }, props, { children: _jsx("form", { className: "pf-chatbot__settings-form", children: fields.map((field) => (_jsxs("div", { className: "pf-chatbot__settings-form-row", children: [_jsx("label", { className: "pf-chatbot__settings-label", htmlFor: field.id, children: field.label }), field.field] }, field.label))) }) })));
 };
 export default SettingsForm;

package/dist/esm/Settings/SettingsForm.test.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@patternfly/react-core';
 import { render, screen } from '@testing-library/react';
 import { SettingsForm } from './SettingsForm';
 import '@testing-library/jest-dom';
 describe('SettingsForm', () => {
     it('should render settingsForm with custom classname', () => {
-        const { container } = render(React.createElement(SettingsForm, { className: "custom-settings" }));
+        const { container } = render(_jsx(SettingsForm, { className: "custom-settings" }));
         expect(container.querySelector('.custom-settings')).toBeTruthy();
     });
     it('should render settingsForm with fields', () => {
@@ -13,10 +13,10 @@ describe('SettingsForm', () => {
             {
                 id: 'archived-chat',
                 label: 'Archive chat',
-                field: (React.createElement(Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+                field: (_jsx(Button, { id: "archived-chat", variant: "secondary", children: "Archive chat" }))
             }
         ];
-        render(React.createElement(SettingsForm, { fields: fields }));
+        render(_jsx(SettingsForm, { fields: fields }));
         expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
     });
     it('should render settingsForm with isCompact', () => {
@@ -24,10 +24,10 @@ describe('SettingsForm', () => {
             {
                 id: 'archived-chat',
                 label: 'Archive chat',
-                field: (React.createElement(Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+                field: (_jsx(Button, { id: "archived-chat", variant: "secondary", children: "Archive chat" }))
             }
         ];
-        render(React.createElement(SettingsForm, { "data-testid": "settings-form", fields: fields, isCompact: true }));
+        render(_jsx(SettingsForm, { "data-testid": "settings-form", fields: fields, isCompact: true }));
         expect(screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
     });
 });

package/dist/esm/SourceDetailsMenuItem/SourceDetailsMenuItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivElement> {
     /** Icon */
     icon: React.ReactNode;
@@ -7,5 +7,5 @@ export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivEleme
     /** Description of source */
     type?: string;
 }
-export declare const SourceDetailsMenuItem: React.FunctionComponent<SourceDetailsMenuItemProps>;
+export declare const SourceDetailsMenuItem: FunctionComponent<SourceDetailsMenuItemProps>;
 export default SourceDetailsMenuItem;

package/dist/esm/SourceDetailsMenuItem/SourceDetailsMenuItem.js

@@ -9,16 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, Flex, Stack, StackItem } from '@patternfly/react-core';
 export const SourceDetailsMenuItem = (_a) => {
     var { icon, name, type } = _a, props = __rest(_a, ["icon", "name", "type"]);
-    return (React.createElement(Flex, Object.assign({ className: "pf-chatbot__source-details", gap: { default: 'gapSm' } }, props),
-        React.createElement(Flex, { justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' } },
-            React.createElement(Icon, { className: "pf-chatbot__source-details-icon" }, icon)),
-        React.createElement(Stack, { className: "pf-chatbot__source-details-text" },
-            React.createElement(StackItem, null,
-                React.createElement("span", { className: "pf-chatbot__source-details-heading" }, name)),
-            type && React.createElement(StackItem, { className: "pf-chatbot__source-details-subhead" }, type))));
+    return (_jsxs(Flex, Object.assign({ className: "pf-chatbot__source-details", gap: { default: 'gapSm' } }, props, { children: [_jsx(Flex, { justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' }, children: _jsx(Icon, { className: "pf-chatbot__source-details-icon", children: icon }) }), _jsxs(Stack, { className: "pf-chatbot__source-details-text", children: [_jsx(StackItem, { children: _jsx("span", { className: "pf-chatbot__source-details-heading", children: name }) }), type && _jsx(StackItem, { className: "pf-chatbot__source-details-subhead", children: type })] })] })));
 };
 export default SourceDetailsMenuItem;

package/dist/esm/SourcesCard/SourcesCard.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CardProps } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+import { ButtonProps, CardProps } from '@patternfly/react-core';
 export interface SourcesCardProps extends CardProps {
     /** Additional classes for the pagination navigation container. */
     className?: string;
@@ -11,11 +11,20 @@ export interface SourcesCardProps extends CardProps {
     paginationAriaLabel?: string;
     /** Content rendered inside the paginated card */
     sources: {
+        /** Title of sources card */
         title?: string;
+        /** Link to source */
         link: string;
+        /** Body of sources card */
         body?: React.ReactNode | string;
+        /** Whether link is external */
         isExternal?: boolean;
+        /** Whether sources card is expandable */
         hasShowMore?: boolean;
+        /** onClick event applied to the title of the Sources card */
+        onClick?: React.MouseEventHandler<HTMLButtonElement>;
+        /** Any additional props applied to the title of the Sources card  */
+        titleProps?: ButtonProps;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;
@@ -36,5 +45,5 @@ export interface SourcesCardProps extends CardProps {
     /** Label for English words "show less" */
     showLessWords?: string;
 }
-declare const SourcesCard: React.FunctionComponent<SourcesCardProps>;
+declare const SourcesCard: FunctionComponent<SourcesCardProps>;
 export default SourcesCard;

package/dist/esm/SourcesCard/SourcesCard.js

@@ -9,17 +9,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Main - Messages - Sources Card
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 // Import PatternFly components
 import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, ExpandableSection, ExpandableSectionVariant, Icon, pluralize, Truncate } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 const SourcesCard = (_a) => {
+    var _b;
     var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
-    const [page, setPage] = React.useState(1);
-    const [isExpanded, setIsExpanded] = React.useState(false);
+    const [page, setPage] = useState(1);
+    const [isExpanded, setIsExpanded] = useState(false);
     const onToggle = (_event, isExpanded) => {
         setIsExpanded(isExpanded);
     };
@@ -29,41 +28,20 @@ const SourcesCard = (_a) => {
     };
     const renderTitle = (title) => {
         if (title) {
-            return React.createElement(Truncate, { content: title });
+            return _jsx(Truncate, { content: title });
         }
         return `Source ${page}`;
     };
-    return (React.createElement("div", { className: "pf-chatbot__source" },
-        React.createElement("span", null, pluralize(sources.length, sourceWord, sourceWordPlural)),
-        React.createElement(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props),
-            React.createElement(CardTitle, { className: "pf-chatbot__sources-card-title" },
-                React.createElement(Button, { component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? React.createElement(ExternalLinkSquareAltIcon, null) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined }, renderTitle(sources[page - 1].title))),
-            sources[page - 1].body && (React.createElement(CardBody, { className: `pf-chatbot__sources-card-body` }, sources[page - 1].hasShowMore ? (
-            // prevents extra VO announcements of button text - parent Message has aria-live
-            React.createElement("div", { "aria-live": "off" },
-                React.createElement(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2 }, sources[page - 1].body))) : (React.createElement("div", { className: "pf-chatbot__sources-card-body-text" }, sources[page - 1].body)))),
-            sources.length > 1 && (React.createElement(CardFooter, { className: "pf-chatbot__sources-card-footer-container" },
-                React.createElement("div", { className: "pf-chatbot__sources-card-footer" },
-                    React.createElement("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel },
-                        React.createElement(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
-                                const newPage = page >= 1 ? page - 1 : 1;
-                                onPreviousClick && onPreviousClick(event, newPage);
-                                handleNewPage(event, newPage);
-                            }, "aria-label": toPreviousPageAriaLabel },
-                            React.createElement(Icon, { iconSize: "lg" },
-                                React.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    React.createElement("path", { d: "M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" })))),
-                        React.createElement("span", { "aria-hidden": "true" },
-                            page,
-                            "/",
-                            sources.length),
-                        React.createElement(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === sources.length, "aria-label": toNextPageAriaLabel, "data-action": "next", onClick: (event) => {
-                                const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
-                                onNextClick && onNextClick(event, newPage);
-                                handleNewPage(event, newPage);
-                            } },
-                            React.createElement(Icon, { isInline: true, iconSize: "lg" },
-                                React.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    React.createElement("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" })))))))))));
+    return (_jsxs("div", { className: "pf-chatbot__source", children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, { className: "pf-chatbot__sources-card-title", children: _jsx(Button, Object.assign({ component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? _jsx(ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title) })) }), sources[page - 1].body && (_jsx(CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
+                        // prevents extra VO announcements of button text - parent Message has aria-live
+                        _jsx("div", { "aria-live": "off", children: _jsx(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : (_jsx("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) })), sources.length > 1 && (_jsx(CardFooter, { className: "pf-chatbot__sources-card-footer-container", children: _jsx("div", { className: "pf-chatbot__sources-card-footer", children: _jsxs("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [_jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
+                                            const newPage = page >= 1 ? page - 1 : 1;
+                                            onPreviousClick && onPreviousClick(event, newPage);
+                                            handleNewPage(event, newPage);
+                                        }, "aria-label": toPreviousPageAriaLabel, children: _jsx(Icon, { iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" }) }) }) }), _jsxs("span", { "aria-hidden": "true", children: [page, "/", sources.length] }), _jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === sources.length, "aria-label": toNextPageAriaLabel, "data-action": "next", onClick: (event) => {
+                                            const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
+                                            onNextClick && onNextClick(event, newPage);
+                                            handleNewPage(event, newPage);
+                                        }, children: _jsx(Icon, { isInline: true, iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))] }))] }));
 };
 export default SourcesCard;