From 20260a9a271d680efc5be82d2a04ed731782e001 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Mon, 27 Jul 2026 12:21:55 +0200
Subject: [PATCH] chore: Use getOptionalElementWidth in top navigation for
 better type safety

---
 src/top-navigation/use-top-navigation.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/top-navigation/use-top-navigation.ts b/src/top-navigation/use-top-navigation.ts
index 8943eac0fa..4845e30724 100644
--- a/src/top-navigation/use-top-navigation.ts
+++ b/src/top-navigation/use-top-navigation.ts
@@ -96,8 +96,7 @@ export function useTopNavigation({ identity, search, utilities }: UseTopNavigati
       fullIdentityWidth: getOptionalElementWidth(virtualRef.current, `.${styles.identity}`),
       titleWidth: getOptionalElementWidth(virtualRef.current, `.${styles.title}`),
       searchSlotWidth: getOptionalElementWidth(virtualRef.current, `.${styles.search}`),
-      searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special="search"]')!.getBoundingClientRect()
-        .width,
+      searchUtilityWidth: getOptionalElementWidth(virtualRef.current, '[data-utility-special="search"]'),
       utilitiesLeftPadding: parseFloat(
         getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)!).paddingLeft || '0px'
       ),
@@ -107,9 +106,7 @@ export function useTopNavigation({ identity, search, utilities }: UseTopNavigati
       utilityWithoutLabelWidths: Array.prototype.slice
         .call(virtualRef.current.querySelectorAll(`[data-utility-hide="true"]`))
         .map((element: Element) => element.getBoundingClientRect().width),
-      menuTriggerUtilityWidth: virtualRef.current
-        .querySelector('[data-utility-special="menu-trigger"]')!
-        .getBoundingClientRect().width,
+      menuTriggerUtilityWidth: getOptionalElementWidth(virtualRef.current, '[data-utility-special="menu-trigger"]'),
     };
     setResponsiveState(determineBestResponsiveState(responsiveStates, sizeConfiguration));
   }, [responsiveStates, hasSearch]);