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

package/dist/cjs/SourcesCard/SourcesCard.js

@@ -10,21 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-// ============================================================================
-// Chatbot Main - Messages - Sources Card
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@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_1.default.useState(1);
-    const [isExpanded, setIsExpanded] = react_1.default.useState(false);
+    const [page, setPage] = (0, react_1.useState)(1);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
     const onToggle = (_event, isExpanded) => {
         setIsExpanded(isExpanded);
     };
@@ -34,41 +30,20 @@ const SourcesCard = (_a) => {
     };
     const renderTitle = (title) => {
         if (title) {
-            return react_1.default.createElement(react_core_1.Truncate, { content: title });
+            return (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: title });
         }
         return `Source ${page}`;
     };
-    return (react_1.default.createElement("div", { className: "pf-chatbot__source" },
-        react_1.default.createElement("span", null, (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural)),
-        react_1.default.createElement(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props),
-            react_1.default.createElement(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title" },
-                react_1.default.createElement(react_core_1.Button, { component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? react_1.default.createElement(react_icons_1.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_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body` }, sources[page - 1].hasShowMore ? (
-            // prevents extra VO announcements of button text - parent Message has aria-live
-            react_1.default.createElement("div", { "aria-live": "off" },
-                react_1.default.createElement(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2 }, sources[page - 1].body))) : (react_1.default.createElement("div", { className: "pf-chatbot__sources-card-body-text" }, sources[page - 1].body)))),
-            sources.length > 1 && (react_1.default.createElement(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container" },
-                react_1.default.createElement("div", { className: "pf-chatbot__sources-card-footer" },
-                    react_1.default.createElement("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel },
-                        react_1.default.createElement(react_core_1.Button, { variant: react_core_1.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_1.default.createElement(react_core_1.Icon, { iconSize: "lg" },
-                                react_1.default.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    react_1.default.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_1.default.createElement("span", { "aria-hidden": "true" },
-                            page,
-                            "/",
-                            sources.length),
-                        react_1.default.createElement(react_core_1.Button, { variant: react_core_1.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_1.default.createElement(react_core_1.Icon, { isInline: true, iconSize: "lg" },
-                                react_1.default.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    react_1.default.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 ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__source", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural) }), (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title", children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.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 && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
+                        // prevents extra VO announcements of button text - parent Message has aria-live
+                        (0, jsx_runtime_1.jsx)("div", { "aria-live": "off", children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) })), sources.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container", children: (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-footer", children: (0, jsx_runtime_1.jsxs)("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.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: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: "lg", children: (0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.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" }) }) }) }), (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": "true", children: [page, "/", sources.length] }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.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: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { isInline: true, iconSize: "lg", children: (0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.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" }) }) }) })] }) }) }))] }))] }));
 };
 exports.default = SourcesCard;

package/dist/cjs/SourcesCard/SourcesCard.test.js

@@ -12,149 +12,149 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 const SourcesCard_1 = __importDefault(require("./SourcesCard"));
 describe('SourcesCard', () => {
     it('should render card correctly if one source with only a link is passed in', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [{ link: '' }] }));
-        expect(react_2.screen.getByText('1 source')).toBeTruthy();
-        expect(react_2.screen.getByText('Source 1')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ link: '' }] }));
+        expect(react_1.screen.getByText('1 source')).toBeTruthy();
+        expect(react_1.screen.getByText('Source 1')).toBeTruthy();
         // no buttons or navigation when there is only 1 source
-        expect(react_2.screen.queryByRole('button')).toBeFalsy();
-        expect(react_2.screen.queryByText('1/1')).toBeFalsy();
+        expect(react_1.screen.queryByRole('button')).toBeFalsy();
+        expect(react_1.screen.queryByText('1/1')).toBeFalsy();
     });
     it('should render card correctly if one source with a title is passed in', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '' }] }));
-        expect(react_2.screen.getByText('1 source')).toBeTruthy();
-        expect(react_2.screen.getByText('How to make an apple pie')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '' }] }));
+        expect(react_1.screen.getByText('1 source')).toBeTruthy();
+        expect(react_1.screen.getByText('How to make an apple pie')).toBeTruthy();
     });
     it('should render card correctly if one source with a body is passed in', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [{ link: '', body: 'To make an apple pie, you must first...' }] }));
-        expect(react_2.screen.getByText('1 source')).toBeTruthy();
-        expect(react_2.screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ link: '', body: 'To make an apple pie, you must first...' }] }));
+        expect(react_1.screen.getByText('1 source')).toBeTruthy();
+        expect(react_1.screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
     });
     it('should render card correctly if one source with a title and body is passed in', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
-        expect(react_2.screen.getByText('1 source')).toBeTruthy();
-        expect(react_2.screen.getByText('How to make an apple pie')).toBeTruthy();
-        expect(react_2.screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
+        expect(react_1.screen.getByText('1 source')).toBeTruthy();
+        expect(react_1.screen.getByText('How to make an apple pie')).toBeTruthy();
+        expect(react_1.screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
     });
     it('should render multiple cards correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ] }));
-        expect(react_2.screen.getByText('2 sources')).toBeTruthy();
-        expect(react_2.screen.getByText('How to make an apple pie')).toBeTruthy();
-        expect(react_2.screen.getByText('1/2')).toBeTruthy();
-        react_2.screen.getByRole('button', { name: /Go to previous page/i });
-        react_2.screen.getByRole('button', { name: /Go to next page/i });
+        expect(react_1.screen.getByText('2 sources')).toBeTruthy();
+        expect(react_1.screen.getByText('How to make an apple pie')).toBeTruthy();
+        expect(react_1.screen.getByText('1/2')).toBeTruthy();
+        react_1.screen.getByRole('button', { name: /Go to previous page/i });
+        react_1.screen.getByRole('button', { name: /Go to next page/i });
     });
     it('should navigate between cards correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ] }));
-        expect(react_2.screen.getByText('How to make an apple pie')).toBeTruthy();
-        expect(react_2.screen.getByText('1/2')).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Go to next page/i }));
-        expect(react_2.screen.queryByText('How to make an apple pie')).toBeFalsy();
-        expect(react_2.screen.getByText('How to make cookies')).toBeTruthy();
-        expect(react_2.screen.getByText('2/2')).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
-        expect(react_2.screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
+        expect(react_1.screen.getByText('How to make an apple pie')).toBeTruthy();
+        expect(react_1.screen.getByText('1/2')).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to next page/i }));
+        expect(react_1.screen.queryByText('How to make an apple pie')).toBeFalsy();
+        expect(react_1.screen.getByText('How to make cookies')).toBeTruthy();
+        expect(react_1.screen.getByText('2/2')).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
+        expect(react_1.screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
     }));
     it('should apply className appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], className: "test" }));
-        const element = react_2.screen.getByRole('navigation');
+        const element = react_1.screen.getByRole('navigation');
         expect(element).toHaveClass('test');
     });
     it('should disable pagination appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], isDisabled: true }));
-        expect(react_2.screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
-        expect(react_2.screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
+        expect(react_1.screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
+        expect(react_1.screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
     });
     it('should render navigation aria label appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ] }));
-        expect(react_2.screen.getByRole('navigation', { name: /Pagination/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('navigation', { name: /Pagination/i })).toBeTruthy();
     });
     it('should change paginationAriaLabel appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], paginationAriaLabel: "Navegaci\u00F3n" }));
-        expect(react_2.screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy();
     });
     it('should change sourceWord appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '' }], sourceWord: 'fuente' }));
-        expect(react_2.screen.getByText('1 fuente')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '' }], sourceWord: 'fuente' }));
+        expect(react_1.screen.getByText('1 fuente')).toBeTruthy();
     });
     it('should sourceWordPlural appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], sourceWordPlural: 'fuentes' }));
-        expect(react_2.screen.getByText('2 fuentes')).toBeTruthy();
+        expect(react_1.screen.getByText('2 fuentes')).toBeTruthy();
     });
     it('should change toNextPageAriaLabel appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], toNextPageAriaLabel: "Pase a la siguiente p\u00E1gina" }));
-        expect(react_2.screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy();
     });
     it('should change toPreviousPageAriaLabel appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], toPreviousPageAriaLabel: "Presione para regresar a la p\u00E1gina anterior" }));
-        expect(react_2.screen.getByRole('button', { name: /Presione para regresar a la página anterior/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Presione para regresar a la página anterior/i })).toBeTruthy();
     });
     it('should call onNextClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], onNextClick: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Go to next page/i }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to next page/i }));
         expect(spy).toHaveBeenCalled();
     }));
     it('should call onPreviousClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], onPreviousClick: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Go to next page/i }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Go to previous page/i }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to next page/i }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to previous page/i }));
         expect(spy).toHaveBeenCalled();
     }));
     it('should call onSetPage appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], onSetPage: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Go to next page/i }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to next page/i }));
         expect(spy).toHaveBeenCalledTimes(1);
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Go to previous page/i }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to previous page/i }));
         expect(spy).toHaveBeenCalledTimes(2);
     }));
     it('should handle showMore appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 {
                     title: 'Getting started with Red Hat OpenShift',
                     link: '#',
@@ -172,6 +172,16 @@ describe('SourcesCard', () => {
                     body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
                 }
             ] }));
-        expect(react_2.screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
+        expect(react_1.screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
     }));
+    it('should call onClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', onClick: spy }] }));
+        yield user_event_1.default.click(react_1.screen.getByRole('link', { name: /How to make an apple pie/i }));
+        expect(spy).toHaveBeenCalled();
+    }));
+    it('should apply titleProps appropriately', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }] }));
+        expect(react_1.screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
+    });
 });

package/dist/cjs/TermsOfUse/TermsOfUse.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { ModalProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface TermsOfUseProps extends ModalProps {
@@ -31,6 +31,6 @@ export interface TermsOfUseProps extends ModalProps {
     /** Sets modal to compact styling. */
     isCompact?: boolean;
 }
-export declare const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps>;
-declare const TermsOfUse: React.ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TermsOfUseBase: FunctionComponent<TermsOfUseProps>;
+declare const TermsOfUse: import("react").ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default TermsOfUse;

package/dist/cjs/TermsOfUse/TermsOfUse.js

@@ -15,10 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TermsOfUseBase = void 0;
-// ============================================================================
-// Terms of Use Modal - Chatbot Modal Extension
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const Chatbot_1 = require("../Chatbot");
 const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
@@ -31,19 +29,9 @@ const TermsOfUseBase = (_a) => {
     const handleSecondaryAction = (_event) => {
         onSecondaryAction(_event);
     };
-    const modal = (react_1.default.createElement(ChatbotModal_1.default, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode }, props),
-        react_1.default.createElement("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef },
-            react_1.default.createElement(react_core_1.ModalHeader, { className: "pf-chatbot__terms-of-use--modal-header" },
-                react_1.default.createElement("div", { className: "pf-chatbot__terms-of-use--header" },
-                    !isCompact && image && altText && (react_1.default.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText })),
-                    react_1.default.createElement("h1", { className: "pf-chatbot__terms-of-use--title" }, title))),
-            react_1.default.createElement(react_core_1.ModalBody, { className: "pf-chatbot__terms-of-use--modal-body" },
-                react_1.default.createElement(react_core_1.Content, null, children)),
-            react_1.default.createElement(react_core_1.ModalFooter, { className: "pf-chatbot__terms-of-use--footer" },
-                react_1.default.createElement(react_core_1.Button, { isBlock: true, key: "terms-of-use-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg" }, primaryActionBtn),
-                react_1.default.createElement(react_core_1.Button, { isBlock: true, key: "terms-of-use-modal-secondary", variant: "secondary", onClick: handleSecondaryAction, size: "lg" }, secondaryActionBtn)))));
+    const modal = ((0, jsx_runtime_1.jsx)(ChatbotModal_1.default, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode }, props, { children: (0, jsx_runtime_1.jsxs)("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef, children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalHeader, { className: "pf-chatbot__terms-of-use--modal-header", children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__terms-of-use--header", children: [!isCompact && image && altText && ((0, jsx_runtime_1.jsx)("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText })), (0, jsx_runtime_1.jsx)("h1", { className: "pf-chatbot__terms-of-use--title", children: title })] }) }), (0, jsx_runtime_1.jsx)(react_core_1.ModalBody, { className: "pf-chatbot__terms-of-use--modal-body", children: (0, jsx_runtime_1.jsx)(react_core_1.Content, { children: children }) }), (0, jsx_runtime_1.jsxs)(react_core_1.ModalFooter, { className: "pf-chatbot__terms-of-use--footer", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg", children: primaryActionBtn }, "terms-of-use-modal-primary"), (0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "secondary", onClick: handleSecondaryAction, size: "lg", children: secondaryActionBtn }, "terms-of-use-modal-secondary")] })] }) })));
     return modal;
 };
 exports.TermsOfUseBase = TermsOfUseBase;
-const TermsOfUse = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(exports.TermsOfUseBase, Object.assign({ innerRef: ref }, props))));
+const TermsOfUse = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.TermsOfUseBase, Object.assign({ innerRef: ref }, props))));
 exports.default = TermsOfUse;

package/dist/cjs/TermsOfUse/TermsOfUse.test.js

@@ -12,8 +12,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const TermsOfUse_1 = __importDefault(require("./TermsOfUse"));
@@ -21,58 +21,56 @@ const react_core_1 = require("@patternfly/react-core");
 const handleModalToggle = jest.fn();
 const onPrimaryAction = jest.fn();
 const onSecondaryAction = jest.fn();
-const body = (react_1.default.createElement(react_core_1.Content, null,
-    react_1.default.createElement("h1", null, "Heading 1"),
-    react_1.default.createElement("p", null, "Legal text")));
+const body = ((0, jsx_runtime_1.jsxs)(react_core_1.Content, { children: [(0, jsx_runtime_1.jsx)("h1", { children: "Heading 1" }), (0, jsx_runtime_1.jsx)("p", { children: "Legal text" })] }));
 describe('TermsOfUse', () => {
     afterEach(() => {
         jest.clearAllMocks();
     });
     it('should render modal correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, ouiaId: "Terms" }, body));
-        expect(react_2.screen.getByRole('heading', { name: /Terms of use/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: /Accept/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: /Decline/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
-        expect(react_2.screen.getByText(/Legal text/i)).toBeTruthy();
-        expect(react_2.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
-        expect(react_2.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, ouiaId: "Terms", children: body }));
+        expect(react_1.screen.getByRole('heading', { name: /Terms of use/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Accept/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Decline/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+        expect(react_1.screen.getByText(/Legal text/i)).toBeTruthy();
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
     });
     it('should handle image and altText props', () => {
-        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, image: "./image.png", altText: "Test image" }, body));
-        expect(react_2.screen.getByRole('img')).toBeTruthy();
-        expect(react_2.screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, image: "./image.png", altText: "Test image", children: body }));
+        expect(react_1.screen.getByRole('img')).toBeTruthy();
+        expect(react_1.screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
     });
     it('should handle className prop', () => {
-        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, className: "test" }, body));
-        expect(react_2.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
-        expect(react_2.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
-        expect(react_2.screen.getByRole('dialog')).toHaveClass('test');
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, className: "test", children: body }));
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('test');
     });
     it('should handle title prop', () => {
-        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, title: "Updated title" }, body));
-        expect(react_2.screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
-        expect(react_2.screen.queryByRole('heading', { name: /Terms of use/i })).toBeFalsy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, title: "Updated title", children: body }));
+        expect(react_1.screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+        expect(react_1.screen.queryByRole('heading', { name: /Terms of use/i })).toBeFalsy();
     });
     it('should handle primary button prop', () => {
-        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, primaryActionBtn: "First" }, body));
-        expect(react_2.screen.getByRole('button', { name: /First/i })).toBeTruthy();
-        expect(react_2.screen.queryByRole('button', { name: /Accept/i })).toBeFalsy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, primaryActionBtn: "First", children: body }));
+        expect(react_1.screen.getByRole('button', { name: /First/i })).toBeTruthy();
+        expect(react_1.screen.queryByRole('button', { name: /Accept/i })).toBeFalsy();
     });
     it('should handle secondary button prop', () => {
-        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, secondaryActionBtn: "Second" }, body));
-        expect(react_2.screen.getByRole('button', { name: /Second/i })).toBeTruthy();
-        expect(react_2.screen.queryByRole('button', { name: /Deny/i })).toBeFalsy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, secondaryActionBtn: "Second", children: body }));
+        expect(react_1.screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+        expect(react_1.screen.queryByRole('button', { name: /Deny/i })).toBeFalsy();
     });
     it('should handle primary button click', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onPrimaryAction: onPrimaryAction, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle }, body));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Accept/i }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TermsOfUse_1.default, { isModalOpen: true, onPrimaryAction: onPrimaryAction, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Accept/i }));
         expect(onPrimaryAction).toHaveBeenCalledTimes(1);
         expect(handleModalToggle).toHaveBeenCalledTimes(1);
     }));
     it('should handle secondary button click', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle }, body));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Decline/i }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Decline/i }));
         expect(onSecondaryAction).toHaveBeenCalledTimes(1);
         expect(handleModalToggle).not.toHaveBeenCalled();
     }));

package/dist/cjs/index.d.ts

@@ -40,6 +40,8 @@ export { default as MessageBar } from './MessageBar';
 export * from './MessageBar';
 export { default as MessageBox } from './MessageBox';
 export * from './MessageBox';
+export { default as MessageDivider } from './MessageDivider';
+export * from './MessageDivider';
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';

package/dist/cjs/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tracking = exports.TermsOfUse = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.Settings = exports.ResponseActions = exports.PreviewAttachment = exports.MessageBox = exports.MessageBar = exports.Message = exports.LoadingMessage = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.Compare = exports.CodeModal = exports.ChatbotWelcomePrompt = exports.ChatbotToggle = exports.ChatbotPopover = exports.ChatbotModal = exports.ChatbotHeader = exports.ChatbotFooter = exports.ChatbotConversationHistoryNav = exports.ChatbotContent = exports.ChatbotAlert = exports.Chatbot = exports.AttachMenu = exports.AttachmentEdit = void 0;
+exports.tracking = exports.TermsOfUse = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.Settings = exports.ResponseActions = exports.PreviewAttachment = exports.MessageDivider = exports.MessageBox = exports.MessageBar = exports.Message = exports.LoadingMessage = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.Compare = exports.CodeModal = exports.ChatbotWelcomePrompt = exports.ChatbotToggle = exports.ChatbotPopover = exports.ChatbotModal = exports.ChatbotHeader = exports.ChatbotFooter = exports.ChatbotConversationHistoryNav = exports.ChatbotContent = exports.ChatbotAlert = exports.Chatbot = exports.AttachMenu = exports.AttachmentEdit = void 0;
 var AttachmentEdit_1 = require("./AttachmentEdit");
 Object.defineProperty(exports, "AttachmentEdit", { enumerable: true, get: function () { return __importDefault(AttachmentEdit_1).default; } });
 __exportStar(require("./AttachmentEdit"), exports);
@@ -82,6 +82,9 @@ __exportStar(require("./MessageBar"), exports);
 var MessageBox_1 = require("./MessageBox");
 Object.defineProperty(exports, "MessageBox", { enumerable: true, get: function () { return __importDefault(MessageBox_1).default; } });
 __exportStar(require("./MessageBox"), exports);
+var MessageDivider_1 = require("./MessageDivider");
+Object.defineProperty(exports, "MessageDivider", { enumerable: true, get: function () { return __importDefault(MessageDivider_1).default; } });
+__exportStar(require("./MessageDivider"), exports);
 var PreviewAttachment_1 = require("./PreviewAttachment");
 Object.defineProperty(exports, "PreviewAttachment", { enumerable: true, get: function () { return __importDefault(PreviewAttachment_1).default; } });
 __exportStar(require("./PreviewAttachment"), exports);