snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/composer/EmojiPicker/EmojiPickerDesktopDropdown.tsx

@@ -0,0 +1,81 @@
+import { Box, Tile } from '@rocket.chat/fuselage';
+import { useMergedRefs, usePosition } from '@rocket.chat/fuselage-hooks';
+import type { ReactNode, Ref, RefObject } from 'react';
+import { useMemo, useRef, forwardRef } from 'react';
+
+const getDropdownContainer = (descendant: HTMLElement | null) => {
+	for (let element = descendant ?? document.body; element !== document.body; element = element.parentElement ?? document.body) {
+		if (
+			getComputedStyle(element).transform !== 'none' ||
+			getComputedStyle(element).position === 'fixed' ||
+			getComputedStyle(element).willChange === 'transform'
+		) {
+			return element;
+		}
+	}
+
+	return document.body;
+};
+
+const useDropdownPosition = (reference: RefObject<HTMLElement | null>, target: RefObject<HTMLElement | null>) => {
+	const innerContainer = getDropdownContainer(reference.current);
+	const viewHeight = document.body.getBoundingClientRect().height;
+	const refTop = reference.current?.getBoundingClientRect().top ?? 0;
+	const targetHeight = target.current?.getBoundingClientRect().height || 0;
+
+	const placement = useMemo(() => {
+		if (refTop >= viewHeight / 2) {
+			return 'top-start';
+		}
+		return 'bottom-end';
+	}, [targetHeight, refTop]);
+
+	const maxHeight = useMemo(() => (placement === 'bottom-end' ? '482px' : `${refTop - 12}px`), [placement, refTop]);
+
+	const { style } = usePosition(reference as RefObject<HTMLElement>, target as RefObject<HTMLElement>, {
+		placement,
+		container: innerContainer,
+	});
+
+	return useMemo(() => {
+		return { ...style, maxHeight };
+	}, [style]);
+};
+
+export type EmojiPickerDesktopDropdownProps = {
+	children: ReactNode;
+	reference: RefObject<HTMLElement | null>;
+};
+
+/**
+ * @reference is the trigger element target
+ * @ref is the dropdown element target
+ *  */
+const EmojiPickerDesktopDropdown = forwardRef(function ToolboxDropdownDesktop(
+	{ reference, children }: EmojiPickerDesktopDropdownProps,
+	ref: Ref<HTMLElement>,
+) {
+	const targetRef = useRef<HTMLElement>(null);
+	const mergedRef = useMergedRefs(ref, targetRef);
+
+	const style = useDropdownPosition(reference, targetRef);
+
+	return (
+		<Tile
+			style={style}
+			ref={mergedRef}
+			elevation='2'
+			paddingInline='0'
+			paddingBlock='0'
+			display='flex'
+			flexDirection='column'
+			overflow='auto'
+		>
+			<Box flexShrink={1} paddingBlock={12}>
+				{children}
+			</Box>
+		</Tile>
+	);
+});
+
+export default EmojiPickerDesktopDropdown;