fix(): add guard to ensure that elements are not null to prevent null… (#4386)

* fix(): add guard to ensure that elements are not null to prevent null reference in boundingRect call

* fix(): add unit tests for getFloatingProps

---------

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>

Author: michaelmkraus

packages/components/src/utils/floating-components.spec.tsx

@@ -0,0 +1,74 @@
+Object.defineProperty(globalThis, 'window', {
+	value: {
+		innerHeight: 0,
+		innerWidth: 0
+	} as Partial<Window>,
+	writable: true
+});
+
+import { describe, it, expect } from 'vitest';
+import { getFloatingProps } from './floating-components';
+
+describe('getFloatingProps', () => {
+	it('calculates the dimensions correctly', () => {
+		const element = {
+			getBoundingClientRect: () => ({ height: 50, width: 80 })
+		} as HTMLElement;
+		const parent = {
+			getBoundingClientRect: () => ({
+				top: 10,
+				left: 20,
+				width: 200,
+				height: 100,
+				bottom: 110,
+				right: 220
+			})
+		} as HTMLElement;
+
+		const props = getFloatingProps(element, parent, 'center');
+		expect(props.childWidth).toBe(80);
+		expect(props.childHeight).toBe(50);
+		expect(props.top).toBe(10);
+		expect(props.left).toBe(20);
+		expect(props.width).toBe(200);
+		expect(props.height).toBe(100);
+		expect(props.bottom).toBe(110);
+		expect(props.right).toBe(220);
+	});
+
+	it('does not throw when element or parent is missing', () => {
+		expect(() =>
+			getFloatingProps(
+				null as unknown as HTMLElement,
+				{} as HTMLElement,
+				'top'
+			)
+		).not.toThrow();
+		expect(() =>
+			getFloatingProps(
+				{} as HTMLElement,
+				null as unknown as HTMLElement,
+				'left'
+			)
+		).not.toThrow();
+		expect(
+			getFloatingProps(
+				null as unknown as HTMLElement,
+				null as unknown as HTMLElement,
+				'bottom'
+			)
+		).toEqual({
+			bottom: 0,
+			childHeight: 0,
+			childWidth: 0,
+			correctedPlacement: 'bottom',
+			height: 0,
+			innerHeight: 0,
+			innerWidth: 0,
+			left: 0,
+			right: 0,
+			top: 0,
+			width: 0
+		});
+	});
+});

packages/components/src/utils/floating-components.ts

@@ -118,11 +118,27 @@ export const handleFixedDropdown = (
 	element.style.position = 'fixed';
 };
 
-const getFloatingProps = (
+export const getFloatingProps = (
 	element: HTMLElement,
 	parent: HTMLElement,
 	placement: string
 ) => {
+	if (!element || !parent) {
+		return {
+			top: 0,
+			bottom: 0,
+			right: 0,
+			height: 0,
+			width: 0,
+			left: 0,
+			childHeight: 0,
+			childWidth: 0,
+			correctedPlacement: placement,
+			innerWidth: window.innerWidth,
+			innerHeight: window.innerHeight
+		};
+	}
+
 	const childRect = element.getBoundingClientRect();
 	const { top, height, bottom, right, left, width } =
 		parent.getBoundingClientRect();