@itwin/appui-react 5.9.1 → 5.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log - @itwin/appui-react
 
+## 5.10.0
+
+### Minor Changes
+
+- bdfb8fe: Updated `ToolbarComposer` component to highlight group items that contain an active toolbar item.
+
+### Patch Changes
+
+- @itwin/components-react@5.10.0
+- @itwin/core-react@5.10.0
+- @itwin/imodel-components-react@5.10.0
+
 ## 5.9.1
 
 ### Patch Changes

package/lib/appui-react/toolbar/useActiveToolIdSynchedItems.d.ts

@@ -1,11 +1,11 @@
 import type { BeEvent } from "@itwin/core-bentley";
-type ActiveToolIdSynchedItem<T> = {
+interface Item {
     id: string;
     isActive?: boolean;
-} | {
-    id: string;
+}
+type ActiveToolIdSynchedItem<T> = Item | (Item & {
     items: T[];
-};
+});
 interface ActiveToolIdSynchedHost {
     activeToolId: string;
     onToolActivatedEvent: BeEvent<(args: {
@@ -20,6 +20,6 @@ interface ActiveToolIdSynchedHost {
  * @returns Up to date itemsToSynch.
  * @internal
  */
-export declare function useActiveToolIdSynchedItems<T extends ActiveToolIdSynchedItem<T>>(itemsToSynch: readonly T[], syncHost: ActiveToolIdSynchedHost): T[];
+export declare function useActiveToolIdSynchedItems<T extends ActiveToolIdSynchedItem<T>>(itemsToSynch: T[], syncHost: ActiveToolIdSynchedHost): T[];
 export {};
 //# sourceMappingURL=useActiveToolIdSynchedItems.d.ts.map

package/lib/appui-react/toolbar/useActiveToolIdSynchedItems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useActiveToolIdSynchedItems.d.ts","sourceRoot":"","sources":["../../../src/appui-react/toolbar/useActiveToolIdSynchedItems.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAEnD,KAAK,uBAAuB,CAAC,CAAC,IAC1B;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAClC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,CAAC,EAAE,CAAA;CAAE,CAAC;AAE/B,UAAU,uBAAuB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC,CAAC;CACnE;AAiDD;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CACzC,CAAC,SAAS,uBAAuB,CAAC,CAAC,CAAC,EACpC,YAAY,EAAE,SAAS,CAAC,EAAE,EAAE,QAAQ,EAAE,uBAAuB,GAAG,CAAC,EAAE,CAapE"}
+{"version":3,"file":"useActiveToolIdSynchedItems.d.ts","sourceRoot":"","sources":["../../../src/appui-react/toolbar/useActiveToolIdSynchedItems.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAGnD,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,uBAAuB,CAAC,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,GAAG;IAAE,KAAK,EAAE,CAAC,EAAE,CAAA;CAAE,CAAC,CAAC;AAEjE,UAAU,uBAAuB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC,CAAC;CACnE;AAgCD;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CACzC,CAAC,SAAS,uBAAuB,CAAC,CAAC,CAAC,EACpC,YAAY,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,uBAAuB,GAAG,CAAC,EAAE,CAW3D"}

package/lib/appui-react/toolbar/useActiveToolIdSynchedItems.js

@@ -3,41 +3,29 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
-/**
- * Recursively checks if the item with the current id of "toolId" is
- * the only active tool.
- * @param items list of items to validate
- * @param toolId toolId to check
- * @returns true if any item "isActive" must change.
- */
-function mustRefresh(items, toolId) {
-    return items.some((item) => {
-        if ("items" in item) {
-            return mustRefresh(item.items, toolId);
+import { produce } from "immer";
+function updateActiveItems(items, toolId) {
+    return produce(items, (draft) => {
+        // Iterative DFS with ancestor backtracking.
+        const stack = draft.map((item) => [item, []]);
+        while (stack.length > 0) {
+            const [current, ancestors] = stack.pop();
+            const isActive = current.id === toolId;
+            current.isActive = isActive;
+            if ("items" in current) {
+                for (const child of current.items) {
+                    stack.push([child, [...ancestors, current]]);
+                }
+            }
+            if (!isActive)
+                continue;
+            // Mark ancestors of active item as active.
+            for (const ancestor of ancestors) {
+                ancestor.isActive = true;
+            }
         }
-        return ((item.isActive && item.id !== toolId) ||
-            (!item.isActive && item.id === toolId));
     });
 }
-/**
- * Recursively updates the isActive for the tools and only activate
- * the one with the id equal to toolId.
- * @param items list of items to update
- * @param toolId toolId to check
- * @returns updated list of items
- */
-function refreshItems(items, toolId) {
-    return items.map((item) => "items" in item
-        ? {
-            ...item,
-            isActive: item.id === toolId,
-            items: refreshItems(item.items, toolId),
-        }
-        : {
-            ...item,
-            isActive: item.id === toolId,
-        });
-}
 /**
  * Synch the provided items to only show the item with id === activeToolId to be
  * active, as determined by the UiFramework.frontstages.activeToolId.
@@ -47,11 +35,11 @@ function refreshItems(items, toolId) {
  * @internal
  */
 export function useActiveToolIdSynchedItems(itemsToSynch, syncHost) {
-    const [items, setItems] = React.useState(() => refreshItems(itemsToSynch, syncHost.activeToolId));
+    const [items, setItems] = React.useState(() => updateActiveItems(itemsToSynch, syncHost.activeToolId));
     React.useEffect(() => {
-        setItems(refreshItems(itemsToSynch, syncHost.activeToolId));
+        setItems(updateActiveItems(itemsToSynch, syncHost.activeToolId));
         return syncHost.onToolActivatedEvent.addListener(({ toolId }) => {
-            setItems((current) => mustRefresh(current, toolId) ? refreshItems(current, toolId) : current);
+            setItems((current) => updateActiveItems(current, toolId));
         });
     }, [itemsToSynch, syncHost.activeToolId, syncHost.onToolActivatedEvent]);
     return items;

package/lib/appui-react/toolbar/useActiveToolIdSynchedItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"useActiveToolIdSynchedItems.js","sourceRoot":"","sources":["../../../src/appui-react/toolbar/useActiveToolIdSynchedItems.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;;;;;GAMG;AACH,SAAS,WAAW,CAClB,KAAmB,EACnB,MAAc;IAEd,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;QACzB,IAAI,OAAO,IAAI,IAAI,EAAE,CAAC;YACpB,OAAO,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACzC,CAAC;QACD,OAAO,CACL,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC;YACrC,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CACvC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;;;;;GAMG;AACH,SAAS,YAAY,CACnB,KAAmB,EACnB,MAAc;IAEd,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACxB,OAAO,IAAI,IAAI;QACb,CAAC,CAAC;YACE,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,MAAM;YAC5B,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC;SACxC;QACH,CAAC,CAAC;YACE,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,MAAM;SAC7B,CACN,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,2BAA2B,CAEzC,YAA0B,EAAE,QAAiC;IAC7D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAM,GAAG,EAAE,CACjD,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,YAAY,CAAC,CAClD,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC;QAC5D,OAAO,QAAQ,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;YAC9D,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CACnB,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CACvE,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC;IACzE,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport type { BeEvent } from \"@itwin/core-bentley\";\n\ntype ActiveToolIdSynchedItem<T> =\n  | { id: string; isActive?: boolean }\n  | { id: string; items: T[] };\n\ninterface ActiveToolIdSynchedHost {\n  activeToolId: string;\n  onToolActivatedEvent: BeEvent<(args: { toolId: string }) => void>;\n}\n\n/**\n * Recursively checks if the item with the current id of \"toolId\" is\n * the only active tool.\n * @param items list of items to validate\n * @param toolId toolId to check\n * @returns true if any item \"isActive\" must change.\n */\nfunction mustRefresh<T extends ActiveToolIdSynchedItem<T>>(\n  items: readonly T[],\n  toolId: string\n): boolean {\n  return items.some((item) => {\n    if (\"items\" in item) {\n      return mustRefresh(item.items, toolId);\n    }\n    return (\n      (item.isActive && item.id !== toolId) ||\n      (!item.isActive && item.id === toolId)\n    );\n  });\n}\n\n/**\n * Recursively updates the isActive for the tools and only activate\n * the one with the id equal to toolId.\n * @param items list of items to update\n * @param toolId toolId to check\n * @returns updated list of items\n */\nfunction refreshItems<T extends ActiveToolIdSynchedItem<T>>(\n  items: readonly T[],\n  toolId: string\n): T[] {\n  return items.map((item) =>\n    \"items\" in item\n      ? {\n          ...item,\n          isActive: item.id === toolId,\n          items: refreshItems(item.items, toolId),\n        }\n      : {\n          ...item,\n          isActive: item.id === toolId,\n        }\n  );\n}\n\n/**\n * Synch the provided items to only show the item with id === activeToolId to be\n * active, as determined by the UiFramework.frontstages.activeToolId.\n * @param itemsToSynch List of items to keep in synch.\n * @param syncHost Source of information to synch to (UiFramework.frontstages)\n * @returns Up to date itemsToSynch.\n * @internal\n */\nexport function useActiveToolIdSynchedItems<\n  T extends ActiveToolIdSynchedItem<T>\n>(itemsToSynch: readonly T[], syncHost: ActiveToolIdSynchedHost): T[] {\n  const [items, setItems] = React.useState<T[]>(() =>\n    refreshItems(itemsToSynch, syncHost.activeToolId)\n  );\n  React.useEffect(() => {\n    setItems(refreshItems(itemsToSynch, syncHost.activeToolId));\n    return syncHost.onToolActivatedEvent.addListener(({ toolId }) => {\n      setItems((current) =>\n        mustRefresh(current, toolId) ? refreshItems(current, toolId) : current\n      );\n    });\n  }, [itemsToSynch, syncHost.activeToolId, syncHost.onToolActivatedEvent]);\n  return items;\n}\n"]}
+{"version":3,"file":"useActiveToolIdSynchedItems.js","sourceRoot":"","sources":["../../../src/appui-react/toolbar/useActiveToolIdSynchedItems.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAchC,SAAS,iBAAiB,CACxB,KAAU,EACV,MAAc;IAEd,OAAO,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;QAC9B,4CAA4C;QAC5C,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,EAAkB,CAAU,CAAC,CAAC;QAEvE,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxB,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,GAAG,EAAG,CAAC;YAE1C,MAAM,QAAQ,GAAG,OAAO,CAAC,EAAE,KAAK,MAAM,CAAC;YACvC,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC;YAE5B,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;gBACvB,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;oBAClC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;gBAC/C,CAAC;YACH,CAAC;YAED,IAAI,CAAC,QAAQ;gBAAE,SAAS;YAExB,2CAA2C;YAC3C,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;gBACjC,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,2BAA2B,CAEzC,YAAiB,EAAE,QAAiC;IACpD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAM,GAAG,EAAE,CACjD,iBAAiB,CAAC,YAAY,EAAE,QAAQ,CAAC,YAAY,CAAC,CACvD,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,iBAAiB,CAAC,YAAY,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC;QACjE,OAAO,QAAQ,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;YAC9D,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC;IACzE,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport type { BeEvent } from \"@itwin/core-bentley\";\nimport { produce } from \"immer\";\n\ninterface Item {\n  id: string;\n  isActive?: boolean;\n}\n\ntype ActiveToolIdSynchedItem<T> = Item | (Item & { items: T[] });\n\ninterface ActiveToolIdSynchedHost {\n  activeToolId: string;\n  onToolActivatedEvent: BeEvent<(args: { toolId: string }) => void>;\n}\n\nfunction updateActiveItems<T extends ActiveToolIdSynchedItem<T>>(\n  items: T[],\n  toolId: string\n) {\n  return produce(items, (draft) => {\n    // Iterative DFS with ancestor backtracking.\n    const stack = draft.map((item) => [item, [] as typeof draft] as const);\n\n    while (stack.length > 0) {\n      const [current, ancestors] = stack.pop()!;\n\n      const isActive = current.id === toolId;\n      current.isActive = isActive;\n\n      if (\"items\" in current) {\n        for (const child of current.items) {\n          stack.push([child, [...ancestors, current]]);\n        }\n      }\n\n      if (!isActive) continue;\n\n      // Mark ancestors of active item as active.\n      for (const ancestor of ancestors) {\n        ancestor.isActive = true;\n      }\n    }\n  });\n}\n\n/**\n * Synch the provided items to only show the item with id === activeToolId to be\n * active, as determined by the UiFramework.frontstages.activeToolId.\n * @param itemsToSynch List of items to keep in synch.\n * @param syncHost Source of information to synch to (UiFramework.frontstages)\n * @returns Up to date itemsToSynch.\n * @internal\n */\nexport function useActiveToolIdSynchedItems<\n  T extends ActiveToolIdSynchedItem<T>\n>(itemsToSynch: T[], syncHost: ActiveToolIdSynchedHost): T[] {\n  const [items, setItems] = React.useState<T[]>(() =>\n    updateActiveItems(itemsToSynch, syncHost.activeToolId)\n  );\n  React.useEffect(() => {\n    setItems(updateActiveItems(itemsToSynch, syncHost.activeToolId));\n    return syncHost.onToolActivatedEvent.addListener(({ toolId }) => {\n      setItems((current) => updateActiveItems(current, toolId));\n    });\n  }, [itemsToSynch, syncHost.activeToolId, syncHost.onToolActivatedEvent]);\n  return items;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.9.1",
+  "version": "5.10.0",
   "description": "A react component library for AppUI framework",
   "type": "module",
   "types": "./lib/appui-react.d.ts",
@@ -45,9 +45,9 @@
     "react-dom": "^18.0.0",
     "react-redux": "^7.2.2 || ^8.0.0 || ^9.0.0",
     "redux": "^4.1.0 || ^5.0.0",
-    "@itwin/components-react": "5.9.1",
-    "@itwin/core-react": "5.9.1",
-    "@itwin/imodel-components-react": "5.9.1"
+    "@itwin/components-react": "5.10.0",
+    "@itwin/core-react": "5.10.0",
+    "@itwin/imodel-components-react": "5.10.0"
   },
   "devDependencies": {
     "@itwin/appui-abstract": "rc",
@@ -91,9 +91,9 @@
     "typescript": "~5.6.2",
     "upath": "^2.0.1",
     "vitest": "^3.0.6",
-    "@itwin/imodel-components-react": "5.9.1",
-    "@itwin/core-react": "5.9.1",
-    "@itwin/components-react": "5.9.1"
+    "@itwin/components-react": "5.10.0",
+    "@itwin/core-react": "5.10.0",
+    "@itwin/imodel-components-react": "5.10.0"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.8.0",