Fix undefined property access within StatusBarComposer component (#…

…1018) * Fix out of bounds array access in StatusBarComposer. * rush change
iTwin · Sep 10, 2024 · c976f03 · c976f03
1 parent c091fed
commit c976f03
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
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
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Fix `undefined` property access within `StatusBarComposer` component.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}
diff --git 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
@@ -12,3 +12,5 @@ import * as React from "react";
 export const StatusBarCornerComponentContext = React.createContext<
   "right-corner" | "left-corner" | undefined
 >(undefined);
+StatusBarCornerComponentContext.displayName =
+  "uifw:StatusBarCornerComponentContext";