From c976f039abd1e132b77fc4c5e205470dd3fc3a24 Mon Sep 17 00:00:00 2001
From: GerardasB <10091419+GerardasB@users.noreply.github.com>
Date: Tue, 10 Sep 2024 17:23:45 +0300
Subject: [PATCH] Fix `undefined` property access within `StatusBarComposer`
 component (#1018)

* Fix out of bounds array access in StatusBarComposer.

* rush change
---
 .../appui-react/fix-999_2024-09-10-13-57.json     | 10 ++++++++++
 .../appui-react/statusbar/StatusBarComposer.tsx   | 15 +++++++--------
 .../statusbar/StatusBarCornerComponentContext.tsx |  2 ++
 3 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 common/changes/@itwin/appui-react/fix-999_2024-09-10-13-57.json

diff --git a/common/changes/@itwin/appui-react/fix-999_2024-09-10-13-57.json b/common/changes/@itwin/appui-react/fix-999_2024-09-10-13-57.json
new file mode 100644
index 00000000000..1e724d26052
--- /dev/null
+++ b/common/changes/@itwin/appui-react/fix-999_2024-09-10-13-57.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Fix `undefined` property access within `StatusBarComposer` component.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}
\ No newline at end of file
diff --git a/ui/appui-react/src/appui-react/statusbar/StatusBarComposer.tsx b/ui/appui-react/src/appui-react/statusbar/StatusBarComposer.tsx
index afc7157e878..36a650c5f0d 100644
--- a/ui/appui-react/src/appui-react/statusbar/StatusBarComposer.tsx
+++ b/ui/appui-react/src/appui-react/statusbar/StatusBarComposer.tsx
@@ -345,10 +345,10 @@ export function StatusBarComposer(props: StatusBarComposerProps) {
     const combinedItems = combineItems(defaultItems, addonItems);
     return sortItems(combinedItems);
   }, [defaultItems, addonItems]);
-  const itemsNotInOverflow = React.useMemo(() => {
-    return statusBarItems.filter(
-      (item) => !isItemInOverflow(item.id, overflown)
-    );
+  const notOverflown = React.useMemo(() => {
+    return statusBarItems
+      .filter((item) => !isItemInOverflow(item.id, overflown))
+      .map((item) => item.id);
   }, [overflown, statusBarItems]);
 
   const calculateOverflow = React.useCallback(() => {
@@ -440,10 +440,9 @@ export function StatusBarComposer(props: StatusBarComposerProps) {
           >
             <StatusBarCornerComponentContext.Provider
               value={
-                key === itemsNotInOverflow[0].id
+                key === notOverflown[0]
                   ? "left-corner"
-                  : (key ===
-                      itemsNotInOverflow[itemsNotInOverflow.length - 1].id &&
+                  : (key === notOverflown[notOverflown.length - 1] &&
                       overflown?.length === 0) ||
                     isItemInOverflow(key, overflown)
                   ? "right-corner"
@@ -462,7 +461,7 @@ export function StatusBarComposer(props: StatusBarComposerProps) {
         </DockedStatusBarEntry>
       );
     },
-    [handleEntryResize, itemsNotInOverflow, overflown]
+    [handleEntryResize, notOverflown, overflown]
   );
 
   const getSectionItems = React.useCallback(
diff --git a/ui/appui-react/src/appui-react/statusbar/StatusBarCornerComponentContext.tsx b/ui/appui-react/src/appui-react/statusbar/StatusBarCornerComponentContext.tsx
index 39749a72f44..6eb51a93c12 100644
--- a/ui/appui-react/src/appui-react/statusbar/StatusBarCornerComponentContext.tsx
+++ b/ui/appui-react/src/appui-react/statusbar/StatusBarCornerComponentContext.tsx
@@ -12,3 +12,5 @@ import * as React from "react";
 export const StatusBarCornerComponentContext = React.createContext<
   "right-corner" | "left-corner" | undefined
 >(undefined);
+StatusBarCornerComponentContext.displayName =
+  "uifw:StatusBarCornerComponentContext";