[FIX] Channel actions not working when reduce motion is active (#19638)

client/sidebar/Item/Condensed.js

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
+import { usePrefersReducedMotion } from '../hooks/usePrefersReducedMotion';
+
 const Condensed = React.memo(({
 	icon,
 	title = '',
@@ -17,9 +19,13 @@ const Condensed = React.memo(({
 }) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
+	const isReduceMotionEnabled = usePrefersReducedMotion();
+
 	const handleMenu = useMutableCallback((e) => {
 		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
 	});
+	const handleMenuEvent = { [isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu };
+
 	return <Sidebar.Item {...props} href={href} clickable={!!href}>
 		{avatar && <Sidebar.Item.Avatar>
 			{ avatar }
@@ -28,7 +34,7 @@ const Condensed = React.memo(({
 			{ icon }
 			<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>{title}</Sidebar.Item.Title>
 			{badges}
-			{menu && <Sidebar.Item.Menu onTransitionEnd={handleMenu}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
+			{menu && <Sidebar.Item.Menu {...handleMenuEvent}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
 		</Sidebar.Item.Content>
 		{ actions && <Sidebar.Item.Container>
 			{<Sidebar.Item.Actions>

client/sidebar/Item/Extended.js

@@ -3,6 +3,7 @@ import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import { useShortTimeAgo } from '../../hooks/useTimeAgo';
+import { usePrefersReducedMotion } from '../hooks/usePrefersReducedMotion';
 
 const Extended = React.memo(({
 	icon,
@@ -23,10 +24,14 @@ const Extended = React.memo(({
 	const formatDate = useShortTimeAgo();
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
+	const isReduceMotionEnabled = usePrefersReducedMotion();
+
 	const handleMenu = useMutableCallback((e) => {
 		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
 	});
 
+	const handleMenuEvent = { [isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu };
+
 	return <Sidebar.Item aria-selected={selected} selected={selected} highlighted={unread} {...props} href={href} clickable={!!href}>
 		{ avatar && <Sidebar.Item.Avatar>
 			{ avatar }
@@ -44,7 +49,7 @@ const Extended = React.memo(({
 					{ subtitle }
 				</Sidebar.Item.Subtitle>
 				<Sidebar.Item.Badge>{ badges }</Sidebar.Item.Badge>
-				{menu && <Sidebar.Item.Menu onTransitionEnd={handleMenu}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
+				{menu && <Sidebar.Item.Menu {...handleMenuEvent}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
 			</Sidebar.Item.Wrapper>
 		</Sidebar.Item.Content>
 		{ actions && <Sidebar.Item.Container>

client/sidebar/Item/Medium.js

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
+import { usePrefersReducedMotion } from '../hooks/usePrefersReducedMotion';
+
 const Medium = React.memo(({
 	icon,
 	title = '',
@@ -17,9 +19,13 @@ const Medium = React.memo(({
 }) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
+	const isReduceMotionEnabled = usePrefersReducedMotion();
+
 	const handleMenu = useMutableCallback((e) => {
 		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
 	});
+	const handleMenuEvent = { [isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu };
+
 	return <Sidebar.Item {...props} href={href} clickable={!!href}>
 		{avatar && <Sidebar.Item.Avatar>
 			{ avatar }
@@ -28,7 +34,7 @@ const Medium = React.memo(({
 			{ icon }
 			<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>{title}</Sidebar.Item.Title>
 			{badges}
-			{menu && <Sidebar.Item.Menu onTransitionEnd={handleMenu}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
+			{menu && <Sidebar.Item.Menu {...handleMenuEvent}>{menuVisibility ? menu() : <ActionButton square ghost mini rcx-sidebar-item__menu icon='kebab' />}</Sidebar.Item.Menu>}
 		</Sidebar.Item.Content>
 		{ actions && <Sidebar.Item.Container>
 			{<Sidebar.Item.Actions>

client/sidebar/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,4 @@
+import { useMediaQueries } from '@rocket.chat/fuselage-hooks';
+
+
+export const usePrefersReducedMotion = () => useMediaQueries('(prefers-reduced-motion: reduce)')[0];