Merge branch 'develop' into default-browser-fix

Author: Rohit3523

app/containers/UIKit/Actions.tsx

@@ -1,22 +1,44 @@
 import React, { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
 import { BlockContext } from '@rocket.chat/ui-kit';
 
 import Button from '../Button';
 import I18n from '../../i18n';
 import { type IActions } from './interfaces';
 
+const styles = StyleSheet.create({
+	hidden: {
+		overflow: 'hidden',
+		height: 0
+	}
+});
+
 export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
 	const [showMoreVisible, setShowMoreVisible] = useState(() => elements && elements.length > 5);
-	const renderedElements = showMoreVisible ? elements?.slice(0, 5) : elements;
 
+	const shouldShowMore = elements && elements.length > 5;
+	const maxVisible = 5;
+
+	if (!elements || !parser) {
+		return null;
+	}
+
+	// Always render all elements to maintain consistent hook calls
+	// This ensures hooks are always called in the same order
+	// Use View wrapper to conditionally hide elements instead of conditionally rendering
 	return (
 		<>
-			<>
-				{renderedElements
-					? renderedElements?.map(element => parser?.renderActions({ blockId, appId, ...element }, BlockContext.ACTION, parser))
-					: null}
-			</>
-			{showMoreVisible && <Button title={I18n.t('Show_more')} onPress={() => setShowMoreVisible(false)} />}
+			{elements.map((element, index) => {
+				const isVisible = !showMoreVisible || index < maxVisible;
+				const component = parser.renderActions({ blockId, appId, ...element }, BlockContext.ACTION, parser);
+				// Always render the component, but hide it with styles if needed
+				return (
+					<View key={element.actionId || `action-${index}`} style={!isVisible ? styles.hidden : undefined}>
+						{component}
+					</View>
+				);
+			})}
+			{shouldShowMore && showMoreVisible && <Button title={I18n.t('Show_more')} onPress={() => setShowMoreVisible(false)} />}
 		</>
 	);
 };

app/containers/UIKit/UiKitModal.stories.tsx

@@ -470,6 +470,116 @@ export const ModalActions = () =>
 	]);
 ModalActions.storyName = 'Modal - Actions';
 
+export const ModalActionsWithShowMore = () =>
+	UiKitModal([
+		{
+			type: 'section',
+			text: {
+				type: 'mrkdwn',
+				text: '*Actions with Show More* 🚀\n\nThis modal demonstrates the "Show more" functionality. The actions block has 8 buttons, but only the first 5 are visible initially. Click "Show more" to reveal all buttons.'
+			}
+		},
+		{
+			type: 'divider'
+		},
+		{
+			type: 'actions',
+			blockId: 'actions-show-more',
+			elements: [
+				{
+					type: 'button',
+					text: {
+						type: 'plain_text',
+						text: 'Primary Action',
+						emoji: false
+					},
+					style: 'primary',
+					actionId: 'action_1',
+					value: 'action1'
+				},
+				{
+					type: 'button',
+					text: {
+						type: 'plain_text',
+						text: 'Secondary',
+						emoji: false
+					},
+					actionId: 'action_2',
+					value: 'action2'
+				},
+				{
+					type: 'button',
+					text: {
+						type: 'plain_text',
+						text: 'Danger Action',
+						emoji: false
+					},
+					style: 'danger',
+					actionId: 'action_3',
+					value: 'action3'
+				},
+				{
+					type: 'button',
+					text: {
+						type: 'plain_text',
+						text: 'Button 4',
+						emoji: false
+					},
+					actionId: 'action_4',
+					value: 'action4'
+				},
+				{
+					type: 'button',
+					text: {
+						type: 'plain_text',
+						text: 'Button 5',
+						emoji: false
+					},
+					actionId: 'action_5',
+					value: 'action5'
+				},
+				{
+					type: 'button',
+					text: {
+						type: 'plain_text',
+						text: 'Button 6 - Hidden',
+						emoji: false
+					},
+					actionId: 'action_6',
+					value: 'action6'
+				},
+				{
+					type: 'button',
+					text: {
+						type: 'plain_text',
+						text: 'Button 7 - Hidden',
+						emoji: false
+					},
+					actionId: 'action_7',
+					value: 'action7'
+				},
+				{
+					type: 'button',
+					text: {
+						type: 'plain_text',
+						text: 'Button 8 - Hidden',
+						emoji: false
+					},
+					actionId: 'action_8',
+					value: 'action8'
+				}
+			]
+		},
+		{
+			type: 'section',
+			text: {
+				type: 'mrkdwn',
+				text: 'This actions block has *8 buttons* but only shows *5* initially. Click "Show more" to see all buttons!'
+			}
+		}
+	]);
+ModalActionsWithShowMore.storyName = 'Modal - Actions with Show More';
+
 export const ModalContextsDividers = () =>
 	UiKitModal([
 		{