@patternfly/chatbot 2.2.0-prerelease.11 → 2.2.0-prerelease.13

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js

@@ -13,7 +13,9 @@ 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 ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label }) => {
     const [isOpen, setIsOpen] = react_1.default.useState(false);
-    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom" },
+    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom", 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" },
         react_1.default.createElement(react_core_1.MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": label !== null && label !== void 0 ? label : 'Conversation options', ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), role: "menuitem" },
             react_1.default.createElement(ellipsis_v_icon_1.default, null))));
     return (react_1.default.createElement(react_core_1.Dropdown, { className: `pf-chatbot__selections ${menuClassName !== null && menuClassName !== void 0 ? menuClassName : ''}`, isOpen: isOpen, onSelect: (props) => {

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js

@@ -8,7 +8,9 @@ const react_1 = __importDefault(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" }, tooltipProps),
+    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))));

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js

@@ -8,7 +8,9 @@ const react_1 = __importDefault(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" }, tooltipProps),
+    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))));

package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.js

@@ -21,7 +21,9 @@ const ellipsis_v_icon_1 = __importDefault(require("@patternfly/react-icons/dist/
 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" }, tooltipProps),
+    const toggle = (toggleRef) => (react_1.default.createElement(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) => {

package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js

@@ -21,7 +21,9 @@ const ChatbotHeaderSelectorDropdown = (_a) => {
     var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Chatbot selector', menuToggleAriaLabel } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel"]);
     const [isOptionsMenuOpen, setIsOptionsMenuOpen] = react_1.default.useState(false);
     const [defaultAriaLabel, setDefaultAriaLabel] = react_1.default.useState('Chatbot selector');
-    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom" }, tooltipProps),
+    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom", 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         react_1.default.createElement(react_core_1.MenuToggle, { variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) }, value)));
     return (react_1.default.createElement(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__selections ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
             onSelect && onSelect(e, value);

package/dist/cjs/ChatbotToggle/ChatbotToggle.js

@@ -28,7 +28,9 @@ const ChatbotToggleBase = (_a) => {
     // Configure icon
     const closedIcon = ClosedToggleIcon ? react_1.default.createElement(ClosedToggleIcon, null) : react_1.default.createElement(ChatIcon, null);
     const icon = isChatbotVisible ? react_1.default.createElement(angle_down_icon_1.default, { "data-testid": openIconTestId }) : closedIcon;
-    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipLabel }, tooltipProps),
+    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipLabel, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`, variant: "plain", "aria-label": toggleButtonLabel || `${tooltipLabel} toggle`, onClick: onToggleChatbot, "aria-expanded": isChatbotVisible, icon: react_1.default.createElement(react_core_1.Icon, { isInline: true }, icon), ref: innerRef }, props))));
 };
 const ChatbotToggle = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotToggleBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/Message/Message.d.ts

@@ -4,6 +4,8 @@ import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
 import { QuickStart, QuickstartAction } from './QuickStarts/types';
 import QuickResponse from './QuickResponse/QuickResponse';
+import { UserFeedbackProps } from './UserFeedback/UserFeedback';
+import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -57,6 +59,10 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     quickResponses?: QuickResponse[];
     /** Props for quick responses container */
     quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Props for user feedback card */
+    userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
+    /** Props for user feedback response */
+    userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
     /** Whether avatar is round */
     hasRoundAvatar?: boolean;
     /** Any additional props applied to the avatar, for additional customization  */
@@ -74,6 +80,11 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
         onClick?: () => void;
         action?: QuickstartAction;
     };
+    /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
+    isLiveRegion?: boolean;
+    /** Ref applied to message  */
+    innerRef?: React.Ref<HTMLDivElement>;
 }
-export declare const Message: React.FunctionComponent<MessageProps>;
+export declare const MessageBase: React.FunctionComponent<MessageProps>;
+declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Message;

package/dist/cjs/Message/Message.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Message = void 0;
+exports.MessageBase = void 0;
 const react_1 = __importDefault(require("react"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
@@ -33,8 +33,10 @@ const UnorderedListMessage_1 = __importDefault(require("./ListMessage/UnorderedL
 const OrderedListMessage_1 = __importDefault(require("./ListMessage/OrderedListMessage"));
 const QuickStartTile_1 = __importDefault(require("./QuickStarts/QuickStartTile"));
 const QuickResponse_1 = __importDefault(require("./QuickResponse/QuickResponse"));
-const Message = (_a) => {
-    var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts"]);
+const UserFeedback_1 = __importDefault(require("./UserFeedback/UserFeedback"));
+const UserFeedbackComplete_1 = __importDefault(require("./UserFeedback/UserFeedbackComplete"));
+const MessageBase = (_a) => {
+    var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef"]);
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
         const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
@@ -44,7 +46,7 @@ const Message = (_a) => {
     // Keep timestamps consistent between Timestamp component and aria-label
     const date = new Date();
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
-    return (react_1.default.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}` }, props),
+    return (react_1.default.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
         react_1.default.createElement(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
         react_1.default.createElement("div", { className: "pf-chatbot__message-contents" },
             react_1.default.createElement("div", { className: "pf-chatbot__message-meta" },
@@ -64,6 +66,8 @@ const Message = (_a) => {
                     !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
                     quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
                     !isLoading && actions && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),
+                    userFeedbackForm && react_1.default.createElement(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
+                    userFeedbackComplete && react_1.default.createElement(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
                     !isLoading && quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
                 attachments && (react_1.default.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
                     var _a;
@@ -71,5 +75,6 @@ const Message = (_a) => {
                         react_1.default.createElement(FileDetailsLabel_1.default, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId })));
                 })))))));
 };
-exports.Message = Message;
-exports.default = exports.Message;
+exports.MessageBase = MessageBase;
+const Message = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(exports.MessageBase, Object.assign({ innerRef: ref }, props))));
+exports.default = Message;

package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts

@@ -3,13 +3,15 @@ import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
 export interface QuickResponse extends Omit<LabelProps, 'children'> {
     content: string;
     id: string;
-    onClick: () => void;
+    onClick?: () => void;
 }
 export interface QuickResponseProps {
     /** Props for quick responses */
     quickResponses: QuickResponse[];
     /** Props for quick responses container */
     quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Callback when a response is clicked; used in feedback cards */
+    onSelect?: (id: string) => void;
 }
 export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
 export default QuickResponse;

package/dist/cjs/Message/QuickResponse/QuickResponse.js

@@ -18,11 +18,12 @@ exports.QuickResponse = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
-const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 } }) => {
+const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
     const [selectedQuickResponse, setSelectedQuickResponse] = react_1.default.useState();
     const handleQuickResponseClick = (id, onClick) => {
         setSelectedQuickResponse(id);
         onClick && onClick();
+        onSelect && onSelect(id);
     };
     return (react_1.default.createElement(react_core_1.LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className}` }, quickResponseContainerProps), quickResponses.map((_a) => {
         var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);

package/dist/cjs/Message/UserFeedback/CloseButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ButtonProps } from '@patternfly/react-core';
+export interface CloseButtonProps extends ButtonProps {
+    /** Callback function for when close button is clicked */
+    onClose?: () => void;
+    /** Aria-label for button */
+    ariaLabel?: string;
+}
+declare const CloseButton: React.FunctionComponent<CloseButtonProps>;
+export default CloseButton;

package/dist/cjs/Message/UserFeedback/CloseButton.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// ============================================================================
+// Chatbot Main - Messages - Close Button
+// ============================================================================
+const react_1 = __importDefault(require("react"));
+// Import PatternFly components
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const CloseButton = ({ onClose, ariaLabel }) => (react_1.default.createElement(react_core_1.Button, { variant: "plain", onClick: onClose, icon: react_1.default.createElement(react_icons_1.CloseIcon, null), "aria-label": ariaLabel }));
+exports.default = CloseButton;

package/dist/cjs/Message/UserFeedback/UserFeedback.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { CardProps, LabelGroupProps, OUIAProps } from '@patternfly/react-core';
+import QuickResponse from '../QuickResponse/QuickResponse';
+export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProps {
+    /** Additional classes for the pagination navigation container. */
+    className?: string;
+    /** Quick responses a user can select */
+    quickResponses?: QuickResponse[];
+    /** Props for quick responses container */
+    quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Whether form includes text area */
+    hasTextArea?: boolean;
+    /** Placeholder of text area */
+    textAreaPlaceholder?: string;
+    /** Aria label for text area */
+    textAreaAriaLabel?: string;
+    /** Callback function for when text area changes */
+    onTextAreaChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+    /** Callback function for when form is submitted */
+    onSubmit: (selectedResponse?: string, additionalFeedback?: string) => void;
+    /** Callback function for when close button is clicked */
+    onClose: () => void;
+    /** Aria label for close button */
+    closeButtonAriaLabel?: string;
+    /** Label for the English word "Submit." */
+    submitWord?: string;
+    /** Label for the English word "Cancel." */
+    cancelWord?: string;
+    /** Uniquely identifies the card. */
+    id?: string;
+    /** The heading level to use, default is h1 */
+    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Whether to focus card on load */
+    focusOnLoad?: boolean;
+    /** Timestamp passed in by Message for more context in aria announcements */
+    timestamp?: string;
+}
+declare const UserFeedback: React.FunctionComponent<UserFeedbackProps>;
+export default UserFeedback;

package/dist/cjs/Message/UserFeedback/UserFeedback.js

@@ -0,0 +1,55 @@
+"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 });
+// ============================================================================
+// Chatbot Main - Messages - Feedback Card
+// ============================================================================
+const react_1 = __importDefault(require("react"));
+// Import PatternFly components
+const react_core_1 = require("@patternfly/react-core");
+const QuickResponse_1 = __importDefault(require("../QuickResponse/QuickResponse"));
+const CloseButton_1 = __importDefault(require("./CloseButton"));
+const UserFeedback = (_a) => {
+    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, cancelWord = 'Cancel' } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "cancelWord"]);
+    const [selectedResponse, setSelectedResponse] = react_1.default.useState();
+    const [value, setValue] = react_1.default.useState('');
+    const divRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        var _a;
+        if (focusOnLoad) {
+            (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, []);
+    return (
+    /* card does not have ref forwarding; hence wrapper div */
+    react_1.default.createElement("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title },
+        react_1.default.createElement(react_core_1.Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
+            react_1.default.createElement(react_core_1.CardHeader, { actions: {
+                    actions: react_1.default.createElement(CloseButton_1.default, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
+                } },
+                react_1.default.createElement(HeadingLevel, { className: "pf-chatbot__feedback-card-title" }, title)),
+            react_1.default.createElement(react_core_1.CardBody, null,
+                react_1.default.createElement(react_core_1.Form, { className: "pf-chatbot__feedback-card-form" },
+                    quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id) })),
+                    hasTextArea && (react_1.default.createElement(react_core_1.TextArea, { value: value, onChange: (_event, value) => {
+                            setValue(value);
+                            onTextAreaChange && onTextAreaChange(_event, value);
+                        }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" })),
+                    react_1.default.createElement(react_core_1.ActionGroup, null,
+                        react_1.default.createElement(react_core_1.Button, { onClick: () => onSubmit(selectedResponse, value) }, submitWord),
+                        react_1.default.createElement(react_core_1.Button, { variant: "link", onClick: onClose }, cancelWord)))))));
+};
+exports.default = UserFeedback;

package/dist/cjs/Message/UserFeedback/UserFeedback.test.d.ts

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

package/dist/cjs/Message/UserFeedback/UserFeedback.test.js

@@ -0,0 +1,146 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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");
+require("@testing-library/jest-dom");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const UserFeedback_1 = __importDefault(require("./UserFeedback"));
+const MOCK_RESPONSES = [
+    { id: '1', content: 'Helpful information', onClick: () => alert('Clicked helpful information') },
+    { id: '2', content: 'Easy to understand', onClick: () => alert('Clicked easy to understand') },
+    { id: '3', content: 'Resolved my issue', onClick: () => alert('Clicked resolved my issue') }
+];
+describe('UserFeedback', () => {
+    it('should render correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, timestamp: "12/12/12" }));
+        expect(react_2.screen.getByRole('heading', { name: /Why did you choose this rating?/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('list', { name: 'Quick feedback for message received at 12/12/12' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Helpful information/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Easy to understand/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Resolved my issue/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+        expect(react_2.screen.queryByRole('textbox', { name: /Provide optional additional feedback/i })).toBeFalsy();
+    });
+    it('should render different title correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, title: "Thanks! Why?" }));
+        expect(react_2.screen.getByText('Thanks! Why?')).toBeTruthy();
+    });
+    it('should render different submit button text correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, submitWord: "Give feedback" }));
+        expect(react_2.screen.getByRole('button', { name: /Give feedback/i })).toBeTruthy();
+    });
+    it('should render text area correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
+        expect(react_2.screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toBeTruthy();
+    });
+    it('should call onTextAreaChange correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, onTextAreaChange: spy }));
+        const textbox = react_2.screen.getByRole('textbox', { name: /Provide optional additional feedback/i });
+        yield user_event_1.default.type(textbox, 'test');
+        expect(spy).toHaveBeenCalledTimes(4);
+    }));
+    it('should render different placeholder correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, textAreaPlaceholder: "Provide any other information" }));
+        expect(react_2.screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toHaveAttribute('placeholder', 'Provide any other information');
+    });
+    it('should render different text area label correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, textAreaAriaLabel: "Provide more details" }));
+        expect(react_2.screen.getByRole('textbox', { name: /Provide more details/i })).toBeTruthy();
+    });
+    it('should handle onClose correctly when close button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, onClose: spy, timestamp: "12/12/12" }));
+        const closeButton = react_2.screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' });
+        expect(closeButton).toBeTruthy();
+        yield user_event_1.default.click(closeButton);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to change close button aria label', () => {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, onClose: spy, closeButtonAriaLabel: "Ima button" }));
+        expect(react_2.screen.getByRole('button', { name: /Ima button/i })).toBeTruthy();
+    });
+    it('should handle onClose correctly when cancel button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, onClose: spy, timestamp: "12/12/12" }));
+        const cancelButton = react_2.screen.getByRole('button', { name: 'Cancel' });
+        expect(cancelButton).toBeTruthy();
+        yield user_event_1.default.click(cancelButton);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should change cancel word correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, onClose: jest.fn, cancelWord: "Exit", timestamp: "12/12/12" }));
+        expect(react_2.screen.getByRole('button', { name: 'Exit' })).toBeTruthy();
+    });
+    it('should handle className', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, className: "test", "data-testid": "card" }));
+        expect(react_2.screen.getByTestId('card')).toHaveClass('test');
+    }));
+    it('should apply id', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, id: "test", "data-testid": "card" }));
+        expect(react_2.screen.getByTestId('card').parentElement).toHaveAttribute('id', 'test');
+    }));
+    it('should handle submit correctly when nothing is selected', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Submit/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(undefined, '');
+    }));
+    it('should handle submit correctly when item is selected', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Easy to understand/i }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Submit/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith('2', '');
+    }));
+    it('should handle submit correctly when there is just text input', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
+        yield user_event_1.default.type(react_2.screen.getByRole('textbox', { name: /Provide optional additional feedback/i }), 'What a great experience!');
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Submit/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(undefined, 'What a great experience!');
+    }));
+    it('should handle submit correctly when item is selected and there is text input', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Easy to understand/i }));
+        yield user_event_1.default.type(react_2.screen.getByRole('textbox', { name: /Provide optional additional feedback/i }), 'What a great experience!');
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Submit/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith('2', 'What a great experience!');
+    }));
+    it('should default title heading level to h1', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES }));
+        expect(react_2.screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i })).toBeTruthy();
+    });
+    it('should be able to change title heading level', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, headingLevel: "h6" }));
+        expect(react_2.screen.getByRole('heading', { level: 6, name: /Why did you choose this rating?/i })).toBeTruthy();
+    });
+    it('should focus on load by default', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card" }));
+        expect(react_2.screen.getByTestId('card').parentElement).toHaveFocus();
+    });
+    it('should not focus on load if focusOnLoad = false', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", focusOnLoad: false }));
+        expect(react_2.screen.getByTestId('card').parentElement).not.toHaveFocus();
+    });
+});

package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { CardProps, OUIAProps } from '@patternfly/react-core';
+export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAProps {
+    /** Additional classes for the pagination navigation container. */
+    className?: string;
+    /** Substitute for the English phrase "Thank you". */
+    title?: string;
+    /** Substitute for the English phrase "You have successfully sent your feedback! Thank you for responding." */
+    body?: string | React.ReactNode;
+    /** Callback function for when close button is clicked */
+    onClose?: () => void;
+    /** Aria label for close button */
+    closeButtonAriaLabel?: string;
+    /** Function to be executed on timeout. Relevant when the timeout prop is set. */
+    onTimeout?: () => void;
+    /** If set to true, the timeout is 8000 milliseconds. If a number is provided, card will
+     * be dismissed after that amount of time in milliseconds.
+     */
+    timeout?: number | boolean;
+    /** If the user hovers over the card and `timeout` expires, this is how long to wait
+     * before finally dismissing the alert.
+     */
+    timeoutAnimation?: number;
+    /** Callback for when mouse hovers over card */
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Callback for when mouse stops hovering over card */
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Value to overwrite the randomly generated data-ouia-component-id.*/
+    ouiaId?: number | string;
+    /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+    ouiaSafe?: boolean;
+    /** Flag to indicate if the card is in a live region. */
+    isLiveRegion?: boolean;
+    /** Uniquely identifies the completion card. */
+    id?: string;
+    /** Whether to focus card on load */
+    focusOnLoad?: boolean;
+    /** Timestamp passed in by Message for more context in aria announcements */
+    timestamp?: string;
+}
+declare const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps>;
+export default UserFeedbackComplete;