@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/dist/cjs/ChatbotFooter/ChatbotFooternote.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");
 const ChatbotFootnote_1 = __importDefault(require("./ChatbotFootnote"));
 describe('ChatbotFooternote', () => {
     const onClick = jest.fn();
@@ -34,54 +34,54 @@ describe('ChatbotFooternote', () => {
         }
     };
     it('should render ChatbotFooternote', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotFootnote_1.default, { label: "Chatbot footer" }));
-        expect(react_2.screen.getByText('Chatbot footer')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotFootnote_1.default, { label: "Chatbot footer" }));
+        expect(react_1.screen.getByText('Chatbot footer')).toBeTruthy();
     });
     it('should render ChatbotFooternote with popover', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(ChatbotFootnote_1.default, { label: "Chatbot footer", popover: popoverProps }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotFootnote_1.default, { label: "Chatbot footer", popover: popoverProps }));
         // click on the footer button
-        (0, react_2.act)(() => {
-            react_2.fireEvent.click(react_2.screen.getByRole('button'));
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(react_1.screen.getByRole('button'));
         });
-        yield (0, react_2.waitFor)(() => {
+        yield (0, react_1.waitFor)(() => {
             // Check if the popover is visible and click on the cta button
-            react_2.screen.getByLabelText('More information');
-            react_2.screen.getByText('Verify accuracy');
-            react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Got it' }));
+            react_1.screen.getByLabelText('More information');
+            react_1.screen.getByText('Verify accuracy');
+            react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Got it' }));
             expect(onClick).toHaveBeenCalled();
         });
     }));
     it('should call onClick handler when popover cta button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(ChatbotFootnote_1.default, { label: "Chatbot footer", popover: popoverProps }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotFootnote_1.default, { label: "Chatbot footer", popover: popoverProps }));
         // click on the footer button
-        (0, react_2.act)(() => {
-            react_2.fireEvent.click(react_2.screen.getByRole('button'));
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(react_1.screen.getByRole('button'));
         });
-        yield (0, react_2.waitFor)(() => {
+        yield (0, react_1.waitFor)(() => {
             // Check if the popover is visible and click on the cta button
-            react_2.screen.getByLabelText('More information');
-            react_2.screen.getByText('Verify accuracy');
-            react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Got it' }));
+            react_1.screen.getByLabelText('More information');
+            react_1.screen.getByText('Verify accuracy');
+            react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Got it' }));
             expect(onClick).toHaveBeenCalled();
         });
     }));
     it('should close the popover when escape is pressed', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(ChatbotFootnote_1.default, { label: "Chatbot footer", popover: popoverProps }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotFootnote_1.default, { label: "Chatbot footer", popover: popoverProps }));
         // click on the footer button
-        (0, react_2.act)(() => {
-            react_2.fireEvent.click(react_2.screen.getByRole('button'));
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(react_1.screen.getByRole('button'));
         });
-        yield (0, react_2.waitFor)(() => {
+        yield (0, react_1.waitFor)(() => {
             // Check if the popover is visible and click on the cta button
-            react_2.screen.getByLabelText('More information');
-            react_2.screen.getByText('Verify accuracy');
+            react_1.screen.getByLabelText('More information');
+            react_1.screen.getByText('Verify accuracy');
         });
-        (0, react_2.act)(() => {
+        (0, react_1.act)(() => {
             // trigger escape to close the popover
-            react_2.fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+            react_1.fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
         });
-        yield (0, react_2.waitFor)(() => {
-            expect(react_2.screen.queryByText('Verify accuracy')).toBeFalsy();
+        yield (0, react_1.waitFor)(() => {
+            expect(react_1.screen.queryByText('Verify accuracy')).toBeFalsy();
         });
     }));
 });

package/dist/cjs/ChatbotFooter/ChatbotFootnote.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
 import { PopoverProps } from '@patternfly/react-core';
-export interface ChatbotFootnoteProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotFootnoteProps extends Omit<HTMLProps<HTMLDivElement>, 'popover'> {
     /** Label to show for the footnote */
     label: string;
     /** Config for the popover which opens up when footnote is clicked */
@@ -40,5 +40,5 @@ export interface ChatbotFootnotePopoverLink {
     /** URL for the Link */
     url: string;
 }
-export declare const ChatbotFootnote: React.FunctionComponent<ChatbotFootnoteProps>;
+export declare const ChatbotFootnote: FunctionComponent<ChatbotFootnoteProps>;
 export default ChatbotFootnote;

package/dist/cjs/ChatbotFooter/ChatbotFootnote.js

@@ -1,7 +1,4 @@
 "use strict";
-// ============================================================================
-// Chatbot Footer - Footnote
-// ============================================================================
 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)
@@ -18,7 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotFootnote = void 0;
-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");
 // Import Patternfly icons
@@ -30,27 +28,16 @@ const ChatbotFootnote = (_a) => {
     var _b, _c, _d, _e, _f;
     var { label, popover, className } = _a, props = __rest(_a, ["label", "popover", "className"]);
     // Popover visibility state
-    const [isVisible, setIsVisible] = react_1.default.useState(false);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
     // Define popover body content
-    const popoverBodyContent = (react_1.default.createElement(react_1.default.Fragment, null,
-        (popover === null || popover === void 0 ? void 0 : popover.bannerImage) && react_1.default.createElement("img", { src: popover.bannerImage.src, alt: popover.bannerImage.alt }),
-        react_1.default.createElement(react_core_1.Content, { component: react_core_1.ContentVariants.h3 }, popover === null || popover === void 0 ? void 0 : popover.title),
-        react_1.default.createElement(react_core_1.Content, { component: react_core_1.ContentVariants.p }, popover === null || popover === void 0 ? void 0 : popover.description)));
+    const popoverBodyContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(popover === null || popover === void 0 ? void 0 : popover.bannerImage) && (0, jsx_runtime_1.jsx)("img", { src: popover.bannerImage.src, alt: popover.bannerImage.alt }), (0, jsx_runtime_1.jsx)(react_core_1.Content, { component: react_core_1.ContentVariants.h3, children: popover === null || popover === void 0 ? void 0 : popover.title }), (0, jsx_runtime_1.jsx)(react_core_1.Content, { component: react_core_1.ContentVariants.p, children: popover === null || popover === void 0 ? void 0 : popover.description })] }));
     // Define popover footer content
-    const popoverFooterContent = (react_1.default.createElement(react_core_1.Flex, { gap: { default: 'gapSm' } },
-        (popover === null || popover === void 0 ? void 0 : popover.cta) && (react_1.default.createElement(react_core_1.Button, { variant: "secondary", onClick: () => {
-                var _a;
-                setIsVisible(false);
-                (_a = popover.cta) === null || _a === void 0 ? void 0 : _a.onClick();
-            } }, ((_b = popover.cta) === null || _b === void 0 ? void 0 : _b.label) || 'Dismiss')),
-        (popover === null || popover === void 0 ? void 0 : popover.link) && (react_1.default.createElement(react_core_1.Button, { variant: "link", component: "a", href: popover.link.url, target: "_blank", icon: react_1.default.createElement(external_link_alt_icon_1.ExternalLinkAltIcon, null), iconPosition: "end" }, popover.link.label))));
-    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__footnote ${className !== null && className !== void 0 ? className : ''}` }, props),
-        popover && (react_1.default.createElement(ChatbotPopover_1.default, Object.assign({ className: "pf-chatbot__popover--footnote", "aria-label": ((_c = popover.popoverProps) === null || _c === void 0 ? void 0 : _c['aria-label']) || 'More information', isVisible: isVisible, shouldOpen: (_event, _fn) => setIsVisible(true), shouldClose: (_event, _fn) => setIsVisible(false), bodyContent: popoverBodyContent, footerContent: popoverFooterContent, minWidth: ((_d = popover.popoverProps) === null || _d === void 0 ? void 0 : _d.minWidth) || '432', maxWidth: ((_e = popover.popoverProps) === null || _e === void 0 ? void 0 : _e.maxWidth) || '432', distance: ((_f = popover.popoverProps) === null || _f === void 0 ? void 0 : _f.distance) || 16, showClose: false }, popover.popoverProps),
-            react_1.default.createElement(react_core_1.Button, { variant: "link", size: "sm" },
-                label,
-                " ",
-                react_1.default.createElement(info_circle_icon_1.InfoCircleIcon, null)))),
-        !popover && react_1.default.createElement(react_core_1.Content, { component: react_core_1.ContentVariants.small }, label)));
+    const popoverFooterContent = ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, { gap: { default: 'gapSm' }, children: [(popover === null || popover === void 0 ? void 0 : popover.cta) && ((0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "secondary", onClick: () => {
+                    var _a;
+                    setIsVisible(false);
+                    (_a = popover.cta) === null || _a === void 0 ? void 0 : _a.onClick();
+                }, children: ((_b = popover.cta) === null || _b === void 0 ? void 0 : _b.label) || 'Dismiss' })), (popover === null || popover === void 0 ? void 0 : popover.link) && ((0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "link", component: "a", href: popover.link.url, target: "_blank", icon: (0, jsx_runtime_1.jsx)(external_link_alt_icon_1.ExternalLinkAltIcon, {}), iconPosition: "end", children: popover.link.label }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `pf-chatbot__footnote ${className !== null && className !== void 0 ? className : ''}` }, props, { children: [popover && ((0, jsx_runtime_1.jsx)(ChatbotPopover_1.default, Object.assign({ className: "pf-chatbot__popover--footnote", "aria-label": ((_c = popover.popoverProps) === null || _c === void 0 ? void 0 : _c['aria-label']) || 'More information', isVisible: isVisible, shouldOpen: (_event, _fn) => setIsVisible(true), shouldClose: (_event, _fn) => setIsVisible(false), bodyContent: popoverBodyContent, footerContent: popoverFooterContent, minWidth: ((_d = popover.popoverProps) === null || _d === void 0 ? void 0 : _d.minWidth) || '432', maxWidth: ((_e = popover.popoverProps) === null || _e === void 0 ? void 0 : _e.maxWidth) || '432', distance: ((_f = popover.popoverProps) === null || _f === void 0 ? void 0 : _f.distance) || 16, showClose: false }, popover.popoverProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Button, { variant: "link", size: "sm", children: [label, " ", (0, jsx_runtime_1.jsx)(info_circle_icon_1.InfoCircleIcon, {})] }) }))), !popover && (0, jsx_runtime_1.jsx)(react_core_1.Content, { component: react_core_1.ContentVariants.small, children: label })] })));
 };
 exports.ChatbotFootnote = ChatbotFootnote;
 exports.default = exports.ChatbotFootnote;

package/dist/cjs/ChatbotHeader/ChatbotHeader.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-export interface ChatbotHeaderProps extends React.HTMLProps<HTMLDivElement> {
+import type { HTMLProps, FunctionComponent } from 'react';
+export interface ChatbotHeaderProps extends HTMLProps<HTMLDivElement> {
     /** Content to be displayed in the chatbot header */
     children: React.ReactNode;
     /** Custom classname for the header component */
     className?: string;
 }
-export declare const ChatbotHeader: React.FunctionComponent<ChatbotHeaderProps>;
+export declare const ChatbotHeader: FunctionComponent<ChatbotHeaderProps>;
 export default ChatbotHeader;

package/dist/cjs/ChatbotHeader/ChatbotHeader.js

@@ -1,13 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotHeader = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
-const ChatbotHeader = ({ className, children }) => (react_1.default.createElement("div", { className: "pf-chatbot__header-container" },
-    react_1.default.createElement("div", { className: `pf-chatbot__header ${className !== null && className !== void 0 ? className : ''}` }, children),
-    react_1.default.createElement(react_core_1.Divider, { className: "pf-chatbot__header__divider" })));
+const ChatbotHeader = ({ className, children }) => ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__header-container", children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__header${className ? ` ${className}` : ''}`, children: children }), (0, jsx_runtime_1.jsx)(react_core_1.Divider, { className: "pf-chatbot__header__divider" })] }));
 exports.ChatbotHeader = ChatbotHeader;
 exports.default = exports.ChatbotHeader;

package/dist/cjs/ChatbotHeader/ChatbotHeader.test.js

@@ -3,16 +3,16 @@ 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 ChatbotHeader_1 = __importDefault(require("./ChatbotHeader"));
 describe('ChatbotHeader', () => {
     it('should render ChatbotHeader with children', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotHeader_1.default, null, "Chatbot Header"));
-        expect(react_2.screen.getByText('Chatbot Header')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeader_1.default, { children: "Chatbot Header" }));
+        expect(react_1.screen.getByText('Chatbot Header')).toBeTruthy();
     });
     it('should render ChatbotHeader with custom classname', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeader_1.default, { className: "custom-header-class" }, "Chatbot Content"));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeader_1.default, { className: "custom-header-class", children: "Chatbot Content" }));
         expect(container.querySelector('.custom-header-class')).toBeTruthy();
     });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderActions.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 export interface ChatbotHeaderActionsProps {
     /** Content to be displayed in the chatbot header */
     children: React.ReactNode;
     /** Custom classname for the header component */
     className?: string;
 }
-export declare const ChatbotHeaderActions: React.FunctionComponent<ChatbotHeaderActionsProps>;
+export declare const ChatbotHeaderActions: FunctionComponent<ChatbotHeaderActionsProps>;
 export default ChatbotHeaderActions;

package/dist/cjs/ChatbotHeader/ChatbotHeaderActions.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotHeaderActions = void 0;
-const react_1 = __importDefault(require("react"));
-const ChatbotHeaderActions = ({ className, children }) => react_1.default.createElement("div", { className: `pf-chatbot__actions ${className || ''}` }, children);
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ChatbotHeaderActions = ({ className, children }) => (0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__actions ${className || ''}`, children: children });
 exports.ChatbotHeaderActions = ChatbotHeaderActions;
 exports.default = exports.ChatbotHeaderActions;

package/dist/cjs/ChatbotHeader/ChatbotHeaderActions.test.js

@@ -3,16 +3,16 @@ 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 ChatbotHeaderActions_1 = __importDefault(require("./ChatbotHeaderActions"));
 describe('ChatbotHeaderActions', () => {
     it('should render ChatbotHeaderActions with children', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderActions_1.default, null, "Chatbot Header"));
-        expect(react_2.screen.getByText('Chatbot Header')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderActions_1.default, { children: "Chatbot Header" }));
+        expect(react_1.screen.getByText('Chatbot Header')).toBeTruthy();
     });
     it('should render ChatbotHeaderActions with custom classname', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderActions_1.default, { className: "custom-header-action-class" }, "Chatbot Content"));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderActions_1.default, { className: "custom-header-action-class", children: "Chatbot Content" }));
         expect(container.querySelector('.custom-header-action-class')).toBeTruthy();
     });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { TooltipProps } from '@patternfly/react-core';
-export interface ChatbotHeaderCloseButtonProps {
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ChatbotHeaderCloseButtonProps extends ButtonProps {
     /** Callback function for when button is clicked */
     onClick: () => void;
     /** Custom classname for the header component */
@@ -13,5 +12,7 @@ export interface ChatbotHeaderCloseButtonProps {
     innerRef?: React.Ref<HTMLButtonElement>;
     /** Content used in tooltip */
     tooltipContent?: string;
+    /** Sets button to compact styling. */
+    isCompact?: boolean;
 }
-export declare const ChatbotHeaderCloseButton: React.ForwardRefExoticComponent<ChatbotHeaderCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ChatbotHeaderCloseButton: import("react").ForwardRefExoticComponent<ChatbotHeaderCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js

@@ -1,16 +1,25 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotHeaderCloseButton = void 0;
-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 react_icons_1 = require("@patternfly/react-icons");
-const ChatbotHeaderCloseButtonBase = ({ className, onClick, tooltipProps, menuAriaLabel = 'Close', innerRef, tooltipContent = 'Close' }) => (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
-    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
-        // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, { className: "pf-chatbot__button--toggle-menu", variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: react_1.default.createElement(react_core_1.Icon, { size: "xl", isInline: true },
-                react_1.default.createElement(react_icons_1.CloseIcon, null)) }))));
-exports.ChatbotHeaderCloseButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotHeaderCloseButtonBase, Object.assign({ innerRef: ref }, props))));
+const ChatbotHeaderCloseButtonBase = (_a) => {
+    var { className, onClick, tooltipProps, menuAriaLabel = 'Close', innerRef, tooltipContent = 'Close', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__menu${className ? ` ${className}` : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+            // prevents VO announcements of both aria label and tooltip
+            aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(react_icons_1.CloseIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+};
+exports.ChatbotHeaderCloseButton = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ChatbotHeaderCloseButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.js

@@ -1,20 +1,22 @@
 "use strict";
-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 ChatbotHeaderCloseButton_1 = require("./ChatbotHeaderCloseButton");
+require("@testing-library/jest-dom");
 describe('ChatbotHeaderCloseButton', () => {
     it('should render ChatbotHeaderCloseButton', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderCloseButton_1.ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: jest.fn() }));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderCloseButton_1.ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: jest.fn() }));
         expect(container.querySelector('.custom-header-close-button')).toBeTruthy();
     });
     it('should call onClick handler when close button is pressed', () => {
         const onClick = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderCloseButton_1.ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: onClick }));
-        react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Close' }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderCloseButton_1.ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: onClick }));
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Close' }));
         expect(onClick).toHaveBeenCalled();
     });
+    it('should render button with isCompact', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderCloseButton_1.ChatbotHeaderCloseButton, { "data-testid": "close-button", onClick: jest.fn(), isCompact: true }));
+        expect(react_1.screen.getByTestId('close-button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 export interface ChatbotHeaderMainProps {
     /** Custom classname for the header component */
     className?: string;
     /** Menu and/or chatbot header components */
     children: React.ReactNode;
 }
-export declare const ChatbotHeaderMain: React.FunctionComponent<ChatbotHeaderMainProps>;
+export declare const ChatbotHeaderMain: FunctionComponent<ChatbotHeaderMainProps>;
 export default ChatbotHeaderMain;

package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotHeaderMain = void 0;
-const react_1 = __importDefault(require("react"));
-const ChatbotHeaderMain = ({ className, children }) => react_1.default.createElement("div", { className: `pf-chatbot__header-main ${className}` }, children);
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ChatbotHeaderMain = ({ className, children }) => ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__header-main${className ? ` ${className}` : ''}`, children: children }));
 exports.ChatbotHeaderMain = ChatbotHeaderMain;
 exports.default = exports.ChatbotHeaderMain;

package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.test.js

@@ -3,16 +3,16 @@ 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 ChatbotHeaderMain_1 = __importDefault(require("./ChatbotHeaderMain"));
 describe('ChatbotHeaderMain', () => {
     it('should render ChatbotHeaderMain with children', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderMain_1.default, null, "Chatbot Header Main"));
-        expect(react_2.screen.getByText('Chatbot Header Main')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderMain_1.default, { children: "Chatbot Header Main" }));
+        expect(react_1.screen.getByText('Chatbot Header Main')).toBeTruthy();
     });
     it('should render ChatbotHeaderMain with custom classname', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderMain_1.default, { className: "custom-header-class" }, "Chatbot Content"));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderMain_1.default, { className: "custom-header-class", children: "Chatbot Content" }));
         expect(container.querySelector('.custom-header-class')).toBeTruthy();
     });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { TooltipProps } from '@patternfly/react-core';
-export interface ChatbotHeaderMenuProps {
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ChatbotHeaderMenuProps extends ButtonProps {
     /** Callback function to attach to menu toggle on top right of chatbot header. */
     onMenuToggle: () => void;
     /** Custom classname for the header component */
@@ -13,5 +12,7 @@ export interface ChatbotHeaderMenuProps {
     innerRef?: React.Ref<HTMLButtonElement>;
     /** Content used in tooltip */
     tooltipContent?: string;
+    /** Sets menu to compact styling. */
+    isCompact?: boolean;
 }
-export declare const ChatbotHeaderMenu: React.ForwardRefExoticComponent<ChatbotHeaderMenuProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ChatbotHeaderMenu: import("react").ForwardRefExoticComponent<ChatbotHeaderMenuProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js

@@ -1,16 +1,28 @@
 "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 });
 exports.ChatbotHeaderMenu = void 0;
-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 bars_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/bars-icon"));
-const ChatbotHeaderMenuBase = ({ className, onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', innerRef, tooltipContent = 'Menu' }) => (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
-    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
-        // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, { className: "pf-chatbot__button--toggle-menu", variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: react_1.default.createElement(react_core_1.Icon, { size: "xl", isInline: true },
-                react_1.default.createElement(bars_icon_1.default, null)) }))));
-exports.ChatbotHeaderMenu = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotHeaderMenuBase, Object.assign({ innerRef: ref }, props))));
+const ChatbotHeaderMenuBase = (_a) => {
+    var { className, onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', innerRef, tooltipContent = 'Menu', isCompact } = _a, props = __rest(_a, ["className", "onMenuToggle", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__menu ${className}`, children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+            // prevents VO announcements of both aria label and tooltip
+            aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(bars_icon_1.default, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+};
+exports.ChatbotHeaderMenu = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ChatbotHeaderMenuBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.js

@@ -1,20 +1,22 @@
 "use strict";
-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 ChatbotHeaderMenu_1 = require("./ChatbotHeaderMenu");
+require("@testing-library/jest-dom");
 describe('ChatbotHeaderMenu', () => {
     it('should render ChatbotHeaderMenu with custom class', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderMenu_1.ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: jest.fn() }));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderMenu_1.ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: jest.fn() }));
         expect(container.querySelector('.custom-header-menu')).toBeTruthy();
     });
     it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
         const onMenuToggle = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderMenu_1.ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: onMenuToggle }));
-        react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Toggle menu' }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderMenu_1.ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: onMenuToggle }));
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Toggle menu' }));
         expect(onMenuToggle).toHaveBeenCalled();
     });
+    it('should handle isCompact', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderMenu_1.ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: jest.fn(), isCompact: true, "data-testid": "button" }));
+        expect(react_1.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { TooltipProps, DropdownProps } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+import { TooltipProps, DropdownProps, MenuToggleProps } from '@patternfly/react-core';
 export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, 'toggle'> {
     /** Content to be displayed in the chatbot header */
     children: React.ReactNode;
@@ -9,6 +9,10 @@ export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, '
     tooltipProps?: TooltipProps;
     /** Aria label for menu toggle */
     menuToggleAriaLabel?: string;
+    /** Sets menu to compact styling. */
+    isCompact?: boolean;
+    /** Additional props passed to toggle */
+    toggleProps?: MenuToggleProps;
 }
-export declare const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeaderOptionsDropdownProps>;
+export declare const ChatbotHeaderOptionsDropdown: FunctionComponent<ChatbotHeaderOptionsDropdownProps>;
 export default ChatbotHeaderOptionsDropdown;

package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.js

@@ -15,21 +15,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotHeaderOptionsDropdown = void 0;
-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 ellipsis_v_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"));
 const ChatbotHeaderOptionsDropdown = (_a) => {
-    var { className, children, onSelect, tooltipProps, menuToggleAriaLabel = 'Chatbot options' } = _a, props = __rest(_a, ["className", "children", "onSelect", "tooltipProps", "menuToggleAriaLabel"]);
-    const [isOptionsMenuOpen, setIsOptionsMenuOpen] = react_1.default.useState(false);
-    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: "Chatbot options", position: "bottom", 
+    var { className, children, onSelect, tooltipProps, menuToggleAriaLabel = 'Chatbot options', isCompact, toggleProps } = _a, props = __rest(_a, ["className", "children", "onSelect", "tooltipProps", "menuToggleAriaLabel", "isCompact", "toggleProps"]);
+    const [isOptionsMenuOpen, setIsOptionsMenuOpen] = (0, react_1.useState)(false);
+    const toggle = (toggleRef) => ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: "Chatbot options", position: "bottom", 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.MenuToggle, { className: "pf-chatbot__button--toggle-options", variant: "plain", "aria-label": menuToggleAriaLabel, ref: toggleRef, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
-                react_1.default.createElement(ellipsis_v_icon_1.default, null)), isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) })));
-    return (react_1.default.createElement(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__options ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
+        aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, Object.assign({ className: `pf-chatbot__button--toggle-options ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", "aria-label": menuToggleAriaLabel, ref: toggleRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(ellipsis_v_icon_1.default, {}) }), isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen), size: isCompact ? 'sm' : undefined }, toggleProps)) })));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__options ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
             onSelect && onSelect(e, value);
             setIsOptionsMenuOpen(false);
-        }, onOpenChange: (isOpen) => setIsOptionsMenuOpen(isOpen), popperProps: { position: 'right', preventOverflow: true, appendTo: 'inline' }, shouldFocusToggleOnSelect: true, shouldFocusFirstItemOnOpen: true, toggle: toggle }, props), children));
+        }, onOpenChange: (isOpen) => setIsOptionsMenuOpen(isOpen), popperProps: { position: 'right', preventOverflow: true, appendTo: 'inline' }, shouldFocusToggleOnSelect: true, shouldFocusFirstItemOnOpen: true, toggle: toggle }, props, { children: children })));
 };
 exports.ChatbotHeaderOptionsDropdown = ChatbotHeaderOptionsDropdown;
 exports.default = exports.ChatbotHeaderOptionsDropdown;

package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';