diff --git a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx index 257a1cee..3d54feaa 100644 --- a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx +++ b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx @@ -1,5 +1,5 @@ import type { Ref, FunctionComponent } from 'react'; -import { forwardRef } from 'react'; +import { forwardRef, useEffect, useMemo, useRef, useState } from 'react'; import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; @@ -30,21 +30,43 @@ const ChatbotHeaderMenuBase: FunctionComponent = ({ tooltipContent = 'Chat history menu', isCompact, ...props -}: ChatbotHeaderMenuProps) => ( -
- +}: ChatbotHeaderMenuProps) => { + const [isDrawerAnimating, setIsDrawerAnimating] = useState(false); + // I'd like to use a prop here later if this works + const drawerState = props['aria-expanded']; + const isDrawerOpen = drawerState === true; + const prevDrawerStateRef = useRef(isDrawerOpen); + const buttonRef = useRef(null); + + useEffect(() => { + if (drawerState !== undefined) { + const wasDrawerOpen = prevDrawerStateRef.current === true; + const isDrawerClosing = wasDrawerOpen && !isDrawerOpen; + + setIsDrawerAnimating(true); + const timeout = setTimeout(() => { + setIsDrawerAnimating(false); + + if (isDrawerClosing) { + requestAnimationFrame(() => { + buttonRef.current?.focus(); + }); + } + }, 350); + + prevDrawerStateRef.current = isDrawerOpen; + return () => clearTimeout(timeout); + } + }, [drawerState, isDrawerOpen]); + + const button = useMemo( + () => (
-); + ), + // eslint-disable-next-line react-hooks/exhaustive-deps + [isCompact, menuAriaLabel, onMenuToggle, innerRef, buttonRef] + ); + + return ( +
+ {isDrawerAnimating ? ( + button + ) : ( + + {button} + + )} +
+ ); +}; export const ChatbotHeaderMenu = forwardRef((props: ChatbotHeaderMenuProps, ref: Ref) => (