fix(ChatbotConversationHistoryNav): Allow additional props on dropdown

Dropdown did not accept additional props like id, etc. This made it difficult to add things like custom focus. This allows props to be passed down to the tooltip, toggle, and dropdown. Also updated pin demo to show focus functionality.

Author: rebeccaalpert

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithPin.tsx

@@ -40,13 +40,21 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
   const [pinnedConversations, setPinnedConversations] = useState<Set<string>>(new Set());
   const displayMode = ChatbotDisplayMode.embedded;
 
+  const focusItem = (conversationId: string) => {
+    setTimeout(() => {
+      document.getElementById(`conversation-options-${conversationId}`)?.focus();
+    }, 100);
+  };
+
   const handlePinToggle = (conversationId: string) => {
     setPinnedConversations((prev) => {
       const newPinned = new Set(prev);
       if (newPinned.has(conversationId)) {
         newPinned.delete(conversationId);
+        focusItem(conversationId);
       } else {
         newPinned.add(conversationId);
+        focusItem(conversationId);
       }
       return newPinned;
     });
@@ -88,8 +96,10 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
         if (pinnedConversations.has(conv.id)) {
           pinnedItems.push({
             ...conv,
+            label: `Conversation options for ${conv.text}`,
             menuItems: createMenuItems(conv.id),
-            icon: <ThumbtackIcon />
+            icon: <ThumbtackIcon />,
+            toggleProps: { id: `conversation-options-${conv.id}` }
           });
         }
       });
@@ -106,7 +116,9 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
         .filter((conv) => !pinnedConversations.has(conv.id))
         .map((conv) => ({
           ...conv,
-          menuItems: createMenuItems(conv.id)
+          label: `Conversation options for ${conv.text}`,
+          menuItems: createMenuItems(conv.id),
+          toggleProps: { id: `conversation-options-${conv.id}` }
         }));
 
       if (unpinnedConversations.length > 0) {

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -1,12 +1,20 @@
 // ============================================================================
 // Chatbot Header - Chatbot Conversation History Nav
 // ============================================================================
-import type { MouseEvent, FunctionComponent, Ref } from 'react';
+import type { FunctionComponent, Ref } from 'react';
 
 import { useState } from 'react';
 
 // Import PatternFly components
-import { MenuToggleElement, Tooltip, MenuToggle, Dropdown, DropdownProps } from '@patternfly/react-core';
+import {
+  MenuToggleElement,
+  Tooltip,
+  MenuToggle,
+  Dropdown,
+  DropdownProps,
+  MenuToggleProps,
+  TooltipProps
+} from '@patternfly/react-core';
 
 import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -19,13 +27,22 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+  /** Additional props passed down to toggle component */
+  toggleProps?: MenuToggleProps;
+  /** Additional props passed down to tooltip component */
+  tooltipProps?: TooltipProps;
+  /** Additional props passed down to dropdown component */
+  dropdownProps?: DropdownProps;
 }
 
 export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
   menuItems,
   menuClassName,
   onSelect,
-  label
+  label,
+  tooltipProps,
+  toggleProps,
+  dropdownProps
 }: ChatbotConversationHistoryDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -36,6 +53,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
       position="bottom"
       // prevents VO announcements of both aria label and tooltip
       aria="none"
+      {...tooltipProps}
     >
       <MenuToggle
         className="pf-chatbot__history-actions"
@@ -45,6 +63,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
         isExpanded={isOpen}
         onClick={() => setIsOpen(!isOpen)}
         role="menuitem"
+        {...toggleProps}
       >
         <EllipsisIcon />
       </MenuToggle>
@@ -64,6 +83,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
       shouldFocusToggleOnSelect
       shouldFocusFirstItemOnOpen
       toggle={toggle}
+      {...dropdownProps}
     >
       {menuItems}
     </Dropdown>

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -32,7 +32,10 @@ import {
   DrawerActionsProps,
   DrawerCloseButtonProps,
   DrawerPanelBodyProps,
-  SkeletonProps
+  SkeletonProps,
+  MenuToggleProps,
+  TooltipProps,
+  DropdownProps
 } from '@patternfly/react-core';
 
 import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
@@ -60,6 +63,12 @@ export interface Conversation {
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
   /** Additional props passed to conversation menu item */
   additionalProps?: MenuItemProps;
+  /** Additional props passed down to toggle component */
+  toggleProps?: MenuToggleProps;
+  /** Additional props passed down to tooltip component */
+  tooltipProps?: TooltipProps;
+  /** Additional props passed down to dropdown component */
+  dropdownProps?: DropdownProps;
 }
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Function called to toggle drawer */
@@ -175,6 +184,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
                 onSelect={conversation.onSelect}
                 menuItems={conversation.menuItems}
                 label={conversation.label}
+                toggleProps={conversation.toggleProps}
+                tooltipProps={conversation.tooltipProps}
+                dropdownProps={conversation.dropdownProps}
               />
             )
           }