@patternfly/chatbot 1.0.0

package/dist/cjs/FilePreview/FilePreview.js

@@ -0,0 +1,26 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const Chatbot_1 = require("../Chatbot");
+const ChatbotModal_1 = __importDefault(require("../ChatbotModal"));
+const react_icons_1 = require("@patternfly/react-icons");
+const FilePreview = (_a) => {
+    var { isModalOpen, displayMode = Chatbot_1.ChatbotDisplayMode.default, children, fileName, isCompact, className, handleModalToggle, title = 'File preview', modalHeaderProps, modalBodyProps } = _a, props = __rest(_a, ["isModalOpen", "displayMode", "children", "fileName", "isCompact", "className", "handleModalToggle", "title", "modalHeaderProps", "modalBodyProps"]);
+    return ((0, jsx_runtime_1.jsxs)(ChatbotModal_1.default, Object.assign({ isOpen: isModalOpen, className: `pf-chatbot__file-preview-modal pf-chatbot__file-preview-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode, onClose: handleModalToggle, isCompact: isCompact }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalHeader, Object.assign({ title: title }, modalHeaderProps)), (0, jsx_runtime_1.jsxs)(react_core_1.ModalBody, Object.assign({ className: "pf-chatbot__file-preview-body" }, modalBodyProps, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.FileIcon, { className: "pf-chatbot__file-preview-icon" }), (0, jsx_runtime_1.jsx)("h2", { className: "pf-chatbot__file-preview-name", children: fileName }), children && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__file-preview-body", children: children })] }))] })));
+};
+exports.default = FilePreview;

package/dist/cjs/FilePreview/FilePreview.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/FilePreview/FilePreview.test.js

@@ -0,0 +1,97 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const FilePreview_1 = __importDefault(require("./FilePreview"));
+const Chatbot_1 = require("../Chatbot");
+const react_core_1 = require("@patternfly/react-core");
+describe('FilePreview', () => {
+    const defaultProps = {
+        isModalOpen: true,
+        handleModalToggle: jest.fn(),
+        fileName: 'test-file.txt',
+        children: 'File content preview'
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render with basic props', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps)));
+        expect(react_1.screen.getByText('File preview')).toBeInTheDocument();
+        expect(react_1.screen.getByText('test-file.txt')).toBeInTheDocument();
+    });
+    it('should render with custom title', () => {
+        const customTitle = 'Custom file preview title';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { title: customTitle })));
+        expect(react_1.screen.getByRole('heading', { name: customTitle })).toBeTruthy();
+    });
+    it('should handle modal toggle when closed', () => {
+        const mockToggle = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { isModalOpen: false, handleModalToggle: mockToggle })));
+        expect(react_1.screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    it('should apply default display mode class', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps)));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-chatbot__file-preview-modal--default');
+    });
+    it('should apply custom display mode class', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-chatbot__file-preview-modal--fullscreen');
+    });
+    it('should apply compact styling when isCompact is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { isCompact: true })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-m-compact');
+    });
+    it('should not apply compact styling when isCompact is false', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { isCompact: false })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).not.toHaveClass('pf-m-compact');
+    });
+    it('should apply custom className', () => {
+        const customClass = 'custom-file-preview';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { className: customClass })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveClass(customClass);
+    });
+    it('should pass through additional props to ChatbotModal', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { "data-testid": "file-preview-modal" })));
+        const modal = react_1.screen.getByTestId('file-preview-modal');
+        expect(modal).toBeInTheDocument();
+    });
+    it('should pass modalHeaderProps to ModalHeader', () => {
+        const modalHeaderProps = {
+            'data-testid': 'custom-header'
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { modalHeaderProps: modalHeaderProps })));
+        const header = react_1.screen.getByTestId('custom-header');
+        expect(header).toBeInTheDocument();
+    });
+    it('should pass modalBodyProps to ModalBody', () => {
+        const modalBodyProps = {
+            'data-testid': 'custom-body'
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { modalBodyProps: modalBodyProps })));
+        const body = react_1.screen.getByTestId('custom-body');
+        expect(body).toBeInTheDocument();
+    });
+    it('should pass ouiaId to ChatbotModal', () => {
+        const ouiaId = 'file-preview-ouia-id';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { ouiaId: ouiaId })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveAttribute('data-ouia-component-id', ouiaId);
+    });
+    it('should handle complex children', () => {
+        const complexChildren = ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { children: "File details" }), (0, jsx_runtime_1.jsx)("p", { children: "Size: 1.2 MB" }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { children: "Download" })] }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FilePreview_1.default, Object.assign({}, defaultProps, { children: complexChildren })));
+        expect(react_1.screen.getByRole('heading', { name: /File details/i })).toBeTruthy();
+        expect(react_1.screen.getByText('Size: 1.2 MB')).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Download/i })).toBeTruthy();
+    });
+});

package/dist/cjs/FilePreview/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FilePreview';
+export * from './FilePreview';

package/dist/cjs/FilePreview/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var FilePreview_1 = require("./FilePreview");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FilePreview_1).default; } });
+__exportStar(require("./FilePreview"), exports);

package/dist/cjs/ImagePreview/ImagePreview.d.ts

@@ -0,0 +1,53 @@
+import { ModalBodyProps, ModalHeaderProps } from '@patternfly/react-core';
+import { type FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import { ChatbotModalProps } from '../ChatbotModal';
+import { FileDetailsLabelProps } from '../FileDetailsLabel';
+export interface ImagePreviewProps extends Omit<ChatbotModalProps, 'children'> {
+    /** Class applied to modal */
+    className?: string;
+    /** Function that handles modal toggle */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title?: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
+    /** Additional props passed to modal header */
+    modalHeaderProps?: ModalHeaderProps;
+    /** Additional props passed to modal body */
+    modalBodyProps?: ModalBodyProps;
+    /** Images displayed in modal */
+    images: {
+        fileName: string;
+        fileSize?: string;
+        image: React.ReactNode;
+    }[];
+    /** Flag indicating if the pagination is disabled. */
+    isDisabled?: boolean;
+    /** Accessible label for the pagination component. */
+    paginationAriaLabel?: string;
+    /** Accessible label for the button which moves to the next page. */
+    toNextPageAriaLabel?: string;
+    /** Accessible label for the button which moves to the previous page. */
+    toPreviousPageAriaLabel?: string;
+    /** Function called when user clicks to navigate to next page. */
+    onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+    /** Function called when user clicks to navigate to previous page. */
+    onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+    /** Function called when page is changed. */
+    onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+    /** Callback function for when file details label close button is clicked */
+    onCloseFileDetailsLabel?: (event: React.MouseEvent, fileName: string, fileId?: string | number) => void;
+    /** Props passed to file details label */
+    fileDetailsLabelProps?: Omit<FileDetailsLabelProps, 'fileName'>;
+    /** Text shown in navigation */
+    paginationContent?: string;
+    /** Navigation progress announced to assistive devices. Should state the current page/image. */
+    screenreaderText?: string;
+}
+declare const ImagePreview: FunctionComponent<ImagePreviewProps>;
+export default ImagePreview;

package/dist/cjs/ImagePreview/ImagePreview.js

@@ -0,0 +1,47 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = require("react");
+const Chatbot_1 = require("../Chatbot");
+const ChatbotModal_1 = __importDefault(require("../ChatbotModal"));
+const FileDetailsLabel_1 = __importDefault(require("../FileDetailsLabel"));
+const react_icons_1 = require("@patternfly/react-icons");
+const ImagePreview = (_a) => {
+    var { isModalOpen, displayMode = Chatbot_1.ChatbotDisplayMode.default, isCompact, className, handleModalToggle, title = 'Preview images', modalHeaderProps, modalBodyProps, images, isDisabled, onSetPage, onPreviousClick, toNextPageAriaLabel = 'Go to next image', toPreviousPageAriaLabel = 'Go to previous image', onNextClick, paginationAriaLabel, onCloseFileDetailsLabel, fileDetailsLabelProps, paginationContent, screenreaderText } = _a, props = __rest(_a, ["isModalOpen", "displayMode", "isCompact", "className", "handleModalToggle", "title", "modalHeaderProps", "modalBodyProps", "images", "isDisabled", "onSetPage", "onPreviousClick", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "paginationAriaLabel", "onCloseFileDetailsLabel", "fileDetailsLabelProps", "paginationContent", "screenreaderText"]);
+    const [page, setPage] = (0, react_1.useState)(1);
+    const paginationText = paginationContent || `${page}/${images.length}`;
+    (0, react_1.useEffect)(() => {
+        if (images.length === 0 || page > images.length) {
+            setPage(1);
+        }
+    }, [images.length, page]);
+    const handleNewPage = (_evt, newPage) => {
+        setPage(newPage);
+        onSetPage && onSetPage(_evt, newPage);
+    };
+    return ((0, jsx_runtime_1.jsxs)(ChatbotModal_1.default, Object.assign({ isOpen: isModalOpen, className: `pf-chatbot__image-preview-modal pf-chatbot__image-preview-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode, onClose: handleModalToggle, isCompact: isCompact }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalHeader, Object.assign({ title: title }, modalHeaderProps)), (0, jsx_runtime_1.jsx)(react_core_1.ModalBody, Object.assign({ className: "pf-chatbot__image-preview-body" }, modalBodyProps, { children: images.length > 0 && images[page - 1] && ((0, jsx_runtime_1.jsxs)(react_core_1.Stack, { hasGutter: true, className: "pf-chatbot__image-preview-stack", children: [(0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(FileDetailsLabel_1.default, Object.assign({ fileName: images[page - 1].fileName, fileSize: images[page - 1].fileSize, hasTruncation: false, onClose: onCloseFileDetailsLabel, closeButtonIcon: (0, jsx_runtime_1.jsx)(react_icons_1.TrashIcon, {}) }, fileDetailsLabelProps)) }), (0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__image-preview-body", children: images[page - 1].image }) })] })) })), images.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.ModalFooter, { className: "pf-chatbot__image-preview-footer", children: (0, jsx_runtime_1.jsxs)("nav", { className: `pf-chatbot__image-preview-footer-buttons`, "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;
+                                handleNewPage(event, newPage);
+                                onPreviousClick && onPreviousClick(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.jsx)("span", { children: paginationText }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot-m-hidden", "aria-live": "polite", children: screenreaderText !== null && screenreaderText !== void 0 ? screenreaderText : `Image ${page} of ${images.length}` }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, isDisabled: isDisabled || page === images.length, "aria-label": toNextPageAriaLabel, "data-action": "next", onClick: (event) => {
+                                const newPage = page + 1 <= images.length ? page + 1 : images.length;
+                                handleNewPage(event, newPage);
+                                onNextClick && onNextClick(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 = ImagePreview;

package/dist/cjs/ImagePreview/ImagePreview.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/ImagePreview/ImagePreview.test.js

@@ -0,0 +1,225 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const ImagePreview_1 = __importDefault(require("./ImagePreview"));
+const Chatbot_1 = require("../Chatbot");
+const mockImages = [
+    {
+        fileName: 'image1.jpg',
+        fileSize: '2.5 MB',
+        image: (0, jsx_runtime_1.jsx)("img", { src: "", alt: "Test image 1" })
+    },
+    {
+        fileName: 'image2.png',
+        fileSize: '1.8 MB',
+        image: (0, jsx_runtime_1.jsx)("img", { src: "", alt: "Test image 2" })
+    },
+    {
+        fileName: 'image3.gif',
+        image: (0, jsx_runtime_1.jsx)("img", { src: "", alt: "Test image 3" })
+    }
+];
+const defaultProps = {
+    isModalOpen: true,
+    handleModalToggle: jest.fn(),
+    images: mockImages
+};
+describe('ImagePreview', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('renders modal when isModalOpen is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        expect(react_1.screen.getByRole('dialog')).toBeInTheDocument();
+    });
+    it('does not render modal when isModalOpen is false', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { isModalOpen: false })));
+        expect(react_1.screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    it('displays custom title when provided', () => {
+        const customTitle = 'Custom image preview';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { title: customTitle })));
+        expect(react_1.screen.getByRole('heading', { name: customTitle })).toBeInTheDocument();
+    });
+    it('displays default title when no title provided', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        expect(react_1.screen.getByRole('heading', { name: /Preview images/i })).toBeInTheDocument();
+    });
+    it('calls handleModalToggle when modal is closed', () => {
+        const mockHandleToggle = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { handleModalToggle: mockHandleToggle })));
+        const closeButton = react_1.screen.getByRole('button', { name: /close/i });
+        react_1.fireEvent.click(closeButton);
+        expect(mockHandleToggle).toHaveBeenCalledTimes(1);
+    });
+    it('displays first image by default', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        expect(react_1.screen.getByText('image1.jpg')).toBeInTheDocument();
+        expect(react_1.screen.getByText('2.5 MB')).toBeInTheDocument();
+        expect(react_1.screen.getByAltText('Test image 1')).toBeInTheDocument();
+    });
+    it('displays page counter correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        expect(react_1.screen.getByText('1/3')).toBeInTheDocument();
+    });
+    it('navigates to next image when next button is clicked', () => {
+        const mockOnNextClick = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { onNextClick: mockOnNextClick })));
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        react_1.fireEvent.click(nextButton);
+        expect(mockOnNextClick).toHaveBeenCalled();
+        expect(react_1.screen.getByText('2/3')).toBeInTheDocument();
+        expect(react_1.screen.getByText('image2.png')).toBeInTheDocument();
+    });
+    it('navigates to previous image when previous button is clicked', () => {
+        const mockOnPreviousClick = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { onPreviousClick: mockOnPreviousClick })));
+        // First go to page 2
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        react_1.fireEvent.click(nextButton);
+        // Then go back to page 1
+        const previousButton = react_1.screen.getByRole('button', { name: /Go to previous image/i });
+        react_1.fireEvent.click(previousButton);
+        expect(mockOnPreviousClick).toHaveBeenCalled();
+        expect(react_1.screen.getByText('1/3')).toBeInTheDocument();
+    });
+    it('calls onSetPage when page changes', () => {
+        const mockOnSetPage = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { onSetPage: mockOnSetPage })));
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        react_1.fireEvent.click(nextButton);
+        expect(mockOnSetPage).toHaveBeenCalledWith(expect.any(Object), 2);
+    });
+    it('disables previous button on first page', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        const previousButton = react_1.screen.getByRole('button', { name: /Go to previous image/i });
+        expect(previousButton).toBeDisabled();
+    });
+    it('disables next button on last page', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        // Navigate to last page
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        react_1.fireEvent.click(nextButton); // page 2
+        react_1.fireEvent.click(nextButton); // page 3
+        expect(nextButton).toBeDisabled();
+    });
+    it('disables both navigation buttons when isDisabled is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { isDisabled: true })));
+        const previousButton = react_1.screen.getByRole('button', { name: /Go to previous image/i });
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        expect(previousButton).toBeDisabled();
+        expect(nextButton).toBeDisabled();
+    });
+    it('uses custom aria labels for pagination', () => {
+        const customLabels = {
+            paginationAriaLabel: 'Custom pagination',
+            toPreviousPageAriaLabel: 'Go to previous image',
+            toNextPageAriaLabel: 'Go to next image'
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, customLabels)));
+        expect(react_1.screen.getByRole('navigation', { name: 'Custom pagination' })).toBeInTheDocument();
+        expect(react_1.screen.getByRole('button', { name: 'Go to previous image' })).toBeInTheDocument();
+        expect(react_1.screen.getByRole('button', { name: 'Go to next image' })).toBeInTheDocument();
+    });
+    it('renders with compact mode when isCompact is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { isCompact: true })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-m-compact');
+    });
+    it('applies custom className when provided', () => {
+        const customClassName = 'custom-image-preview';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { className: customClassName })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveClass(customClassName);
+    });
+    it('applies display mode class correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { displayMode: Chatbot_1.ChatbotDisplayMode.embedded })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-chatbot__image-preview-modal--embedded');
+    });
+    it('passes additional props to ChatbotModal', () => {
+        const modalClass = 'custom-modal-class';
+        const additionalProps = {
+            'data-testid': 'modal',
+            className: modalClass
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, additionalProps)));
+        const modal = react_1.screen.getByTestId('modal');
+        expect(modal).toBeInTheDocument();
+        expect(modal).toBeInTheDocument();
+        expect(modal).toHaveClass(modalClass);
+    });
+    it('passes modalHeaderProps correctly', () => {
+        const headerClass = 'custom-modal-header-class';
+        const headerProps = {
+            'data-testid': 'header',
+            className: headerClass
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { modalHeaderProps: headerProps })));
+        expect(react_1.screen.getByTestId('header')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('header')).toHaveClass(headerClass);
+    });
+    it('passes modalBodyProps correctly', () => {
+        const bodyClass = 'custom-modal-body-class';
+        const bodyProps = {
+            'data-testid': 'body',
+            className: bodyClass
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { modalBodyProps: bodyProps })));
+        expect(react_1.screen.getByTestId('body')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('body')).toHaveClass(bodyClass);
+    });
+    it('handles single image without pagination', () => {
+        const singleImage = [mockImages[0]];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { images: singleImage })));
+        expect(react_1.screen.queryByText('1/1')).not.toBeInTheDocument();
+        expect(react_1.screen.queryByRole('button', { name: /Go to previous image/i })).not.toBeInTheDocument();
+        expect(react_1.screen.queryByRole('button', { name: /Go to next image/i })).not.toBeInTheDocument();
+    });
+    it('calls onCloseFileDetailsLabel when file details close button is clicked', () => {
+        const mockOnClose = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { onCloseFileDetailsLabel: mockOnClose })));
+        const closeButton = react_1.screen.getByRole('button', { name: /Close image1.jpg/i });
+        react_1.fireEvent.click(closeButton);
+        expect(mockOnClose).toHaveBeenCalled();
+    });
+    it('passes fileDetailsLabelProps correctly to FileDetailsLabel', () => {
+        const customFileDetailsProps = {
+            'data-testid': 'custom-file-details'
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { fileDetailsLabelProps: customFileDetailsProps })));
+        expect(react_1.screen.getByTestId('custom-file-details')).toBeInTheDocument();
+    });
+    it('displays file details for current page when navigating', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        // Initially shows first image details
+        expect(react_1.screen.getByText('image1.jpg')).toBeInTheDocument();
+        expect(react_1.screen.getByText('2.5 MB')).toBeInTheDocument();
+        // Navigate to second page
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        react_1.fireEvent.click(nextButton);
+        // Should now show second image details
+        expect(react_1.screen.getByText('image2.png')).toBeInTheDocument();
+        expect(react_1.screen.getByText('1.8 MB')).toBeInTheDocument();
+        // Navigate to third page
+        react_1.fireEvent.click(nextButton);
+        // Should now show third image details (no file size)
+        expect(react_1.screen.getByText('image3.gif')).toBeInTheDocument();
+        expect(react_1.screen.queryByText(/MB/)).not.toBeInTheDocument();
+    });
+    it('sets hasTruncation to false on FileDetailsLabel', () => {
+        const longFileName = 'very-long-filename-that-would-normally-be-truncated-in-other-contexts.jpg';
+        const imageWithLongName = {
+            fileName: longFileName,
+            fileSize: '1.0 MB',
+            image: (0, jsx_runtime_1.jsx)("img", { src: "", alt: "Test image with long name" })
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { images: [imageWithLongName] })));
+        expect(react_1.screen.getByText(longFileName)).toBeInTheDocument();
+    });
+});

package/dist/cjs/ImagePreview/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ImagePreview';
+export * from './ImagePreview';

package/dist/cjs/ImagePreview/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ImagePreview_1 = require("./ImagePreview");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ImagePreview_1).default; } });
+__exportStar(require("./ImagePreview"), exports);

package/dist/cjs/LoadingMessage/LoadingMessage.d.ts

@@ -0,0 +1,6 @@
+import type { FunctionComponent } from 'react';
+export interface LoadingMessageProps {
+    icon?: React.ComponentType;
+}
+export declare const LoadingMessage: FunctionComponent<LoadingMessageProps>;
+export default LoadingMessage;

package/dist/cjs/LoadingMessage/LoadingMessage.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const robot_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/robot-icon"));
+const LoadingMessage = ({ icon: IconComponent = robot_icon_1.default }) => ((0, jsx_runtime_1.jsxs)(react_core_1.Split, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "lg", className: "pf-v6-u-mr-sm pf-v6-u-pt-md", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) }) }), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { className: "pf-u-background-color-200", children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-v6-u-display-flex pf-u-align-items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: "." }), (0, jsx_runtime_1.jsx)("div", { children: "." }), (0, jsx_runtime_1.jsx)("div", { children: "." })] }) })] }));
+exports.LoadingMessage = LoadingMessage;
+exports.default = exports.LoadingMessage;

package/dist/cjs/LoadingMessage/LoadingMessage.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/LoadingMessage/LoadingMessage.test.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const LoadingMessage_1 = __importDefault(require("./LoadingMessage"));
+describe('LoadingMessage', () => {
+    it('should render loading message', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(LoadingMessage_1.default, {}));
+        expect(container).toMatchSnapshot();
+    });
+    it('should render loading message correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(LoadingMessage_1.default, {}));
+        expect(react_1.screen.getAllByText('.')).toBeTruthy();
+        expect(react_1.screen.getAllByText('.')).toHaveLength(3);
+    });
+});

package/dist/cjs/LoadingMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './LoadingMessage';
+export * from './LoadingMessage';

package/dist/cjs/LoadingMessage/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var LoadingMessage_1 = require("./LoadingMessage");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(LoadingMessage_1).default; } });
+__exportStar(require("./LoadingMessage"), exports);