@itwin/appui-react 5.15.0 → 5.15.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log - @itwin/appui-react
 
+## 5.15.2
+
+### Patch Changes
+
+- 668df91: Fixed unnecessary overflow in `Toolbar` component.
+- 5ac8e40: Fixed `ToolbarComposer` component to highlight group items that contain toolbar items active via conditional value.
+- 5ac8e40: Fixed `Toolbar` component to correctly refresh conditional values when mounting nested items.
+  - @itwin/components-react@5.15.2
+  - @itwin/core-react@5.15.2
+  - @itwin/imodel-components-react@5.15.2
+
+## 5.15.1
+
+### Patch Changes
+
+- 655ca63: Removed height limit that caused vertical overflow in menu of `Toolbar` component.
+- Updated dependencies [b930ab8]
+- Updated dependencies [3781110]
+  - @itwin/imodel-components-react@5.15.1
+  - @itwin/components-react@5.15.1
+  - @itwin/core-react@5.15.1
+
 ## 5.15.0
 
 ### Minor Changes

package/lib/appui-react/hooks/useConditionalProp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConditionalProp.d.ts","sourceRoot":"","sources":["../../../src/appui-react/hooks/useConditionalProp.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAKH,qJAAqJ;AACrJ,UAAU,sBAAsB,CAAC,CAAC;IAChC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,KAAK,EAAE,CAAC,CAAC;CACV;AAED,uDAAuD;AACvD,KAAK,eAAe,CAAC,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAepE,gBAAgB;AAChB,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,iBA4BxE"}
+{"version":3,"file":"useConditionalProp.d.ts","sourceRoot":"","sources":["../../../src/appui-react/hooks/useConditionalProp.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAKH,qJAAqJ;AACrJ,UAAU,sBAAsB,CAAC,CAAC;IAChC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,KAAK,EAAE,CAAC,CAAC;CACV;AAED,uDAAuD;AACvD,KAAK,eAAe,CAAC,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAepE,gBAAgB;AAChB,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,iBAoCxE"}

package/lib/appui-react/hooks/useConditionalProp.js

@@ -5,7 +5,7 @@
 /** @packageDocumentation
  * @module Utilities
  */
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback, useRef, useSyncExternalStore } from "react";
 import { SyncUiEventDispatcher } from "../syncui/SyncUiEventDispatcher.js";
 /** Duck type the conditional. */
 function isConditionalValue(conditionalProp) {
@@ -17,6 +17,7 @@ function isConditionalValue(conditionalProp) {
 }
 /** @internal */
 export function useConditionalProp(conditionalProp) {
+    const refreshedRef = useRef(false);
     const subscribe = useCallback((onStoreChange) => {
         if (isConditionalValue(conditionalProp)) {
             return SyncUiEventDispatcher.onSyncUiEvent.addListener(({ eventIds }) => {
@@ -30,8 +31,13 @@ export function useConditionalProp(conditionalProp) {
         return () => { };
     }, [conditionalProp]);
     const getSnapshot = useCallback(() => {
-        if (isConditionalValue(conditionalProp))
+        if (isConditionalValue(conditionalProp)) {
+            if (!refreshedRef.current) {
+                conditionalProp.refresh();
+                refreshedRef.current = true;
+            }
             return conditionalProp.value;
+        }
         return conditionalProp;
     }, [conditionalProp]);
     return useSyncExternalStore(subscribe, getSnapshot);

package/lib/appui-react/hooks/useConditionalProp.js.map

@@ -1 +1 @@
-{"version":3,"file":"useConditionalProp.js","sourceRoot":"","sources":["../../../src/appui-react/hooks/useConditionalProp.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAY3E,iCAAiC;AACjC,SAAS,kBAAkB,CACzB,eAAmC;IAEnC,OAAO,CACL,OAAO,eAAe,KAAK,QAAQ;QACnC,eAAe;QACf,cAAc,IAAI,eAAe;QACjC,SAAS,IAAI,eAAe;QAC5B,OAAO,IAAI,eAAe,CAC3B,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,kBAAkB,CAAI,eAAmC;IACvE,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,aAAyB,EAAE,EAAE;QAC5B,IAAI,kBAAkB,CAAC,eAAe,CAAC,EAAE,CAAC;YACxC,OAAO,qBAAqB,CAAC,aAAa,CAAC,WAAW,CACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;gBACf,IACE,CAAC,qBAAqB,CAAC,kBAAkB,CACvC,QAAQ,EACR,eAAe,CAAC,YAAY,CAC7B;oBAED,OAAO;gBACT,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;oBAAE,OAAO;gBAEvC,aAAa,EAAE,CAAC;YAClB,CAAC,CACF,CAAC;QACJ,CAAC;QACD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,kBAAkB,CAAC,eAAe,CAAC;YAAE,OAAO,eAAe,CAAC,KAAK,CAAC;QACtE,OAAO,eAAe,CAAC;IACzB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IACtB,OAAO,oBAAoB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AACtD,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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Utilities\n */\n\nimport { useCallback, useSyncExternalStore } from \"react\";\nimport { SyncUiEventDispatcher } from \"../syncui/SyncUiEventDispatcher.js\";\n\n/** Defines a common interface for existing conditional value classes: `ConditionalBooleanValue`, `ConditionalStringValue`, `ConditionalIconItem`. */\ninterface CommonConditionalValue<T> {\n  syncEventIds: string[];\n  refresh: () => boolean;\n  value: T;\n}\n\n/** Type that is usually used in a conditional prop. */\ntype ConditionalProp<T> = CommonConditionalValue<T> | T | undefined;\n\n/** Duck type the conditional. */\nfunction isConditionalValue<T>(\n  conditionalProp: ConditionalProp<T>\n): conditionalProp is CommonConditionalValue<T> {\n  return (\n    typeof conditionalProp === \"object\" &&\n    conditionalProp &&\n    \"syncEventIds\" in conditionalProp &&\n    \"refresh\" in conditionalProp &&\n    \"value\" in conditionalProp\n  );\n}\n\n/** @internal */\nexport function useConditionalProp<T>(conditionalProp: ConditionalProp<T>) {\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      if (isConditionalValue(conditionalProp)) {\n        return SyncUiEventDispatcher.onSyncUiEvent.addListener(\n          ({ eventIds }) => {\n            if (\n              !SyncUiEventDispatcher.hasEventOfInterest(\n                eventIds,\n                conditionalProp.syncEventIds\n              )\n            )\n              return;\n            if (!conditionalProp.refresh()) return;\n\n            onStoreChange();\n          }\n        );\n      }\n      return () => {};\n    },\n    [conditionalProp]\n  );\n  const getSnapshot = useCallback(() => {\n    if (isConditionalValue(conditionalProp)) return conditionalProp.value;\n    return conditionalProp;\n  }, [conditionalProp]);\n  return useSyncExternalStore(subscribe, getSnapshot);\n}\n"]}
+{"version":3,"file":"useConditionalProp.js","sourceRoot":"","sources":["../../../src/appui-react/hooks/useConditionalProp.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAY3E,iCAAiC;AACjC,SAAS,kBAAkB,CACzB,eAAmC;IAEnC,OAAO,CACL,OAAO,eAAe,KAAK,QAAQ;QACnC,eAAe;QACf,cAAc,IAAI,eAAe;QACjC,SAAS,IAAI,eAAe;QAC5B,OAAO,IAAI,eAAe,CAC3B,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,kBAAkB,CAAI,eAAmC;IACvE,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,aAAyB,EAAE,EAAE;QAC5B,IAAI,kBAAkB,CAAC,eAAe,CAAC,EAAE,CAAC;YACxC,OAAO,qBAAqB,CAAC,aAAa,CAAC,WAAW,CACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;gBACf,IACE,CAAC,qBAAqB,CAAC,kBAAkB,CACvC,QAAQ,EACR,eAAe,CAAC,YAAY,CAC7B;oBAED,OAAO;gBACT,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;oBAAE,OAAO;gBAEvC,aAAa,EAAE,CAAC;YAClB,CAAC,CACF,CAAC;QACJ,CAAC;QACD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,kBAAkB,CAAC,eAAe,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;gBAC1B,eAAe,CAAC,OAAO,EAAE,CAAC;gBAC1B,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC9B,CAAC;YAED,OAAO,eAAe,CAAC,KAAK,CAAC;QAC/B,CAAC;QACD,OAAO,eAAe,CAAC;IACzB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IACtB,OAAO,oBAAoB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AACtD,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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Utilities\n */\n\nimport { useCallback, useRef, useSyncExternalStore } from \"react\";\nimport { SyncUiEventDispatcher } from \"../syncui/SyncUiEventDispatcher.js\";\n\n/** Defines a common interface for existing conditional value classes: `ConditionalBooleanValue`, `ConditionalStringValue`, `ConditionalIconItem`. */\ninterface CommonConditionalValue<T> {\n  syncEventIds: string[];\n  refresh: () => boolean;\n  value: T;\n}\n\n/** Type that is usually used in a conditional prop. */\ntype ConditionalProp<T> = CommonConditionalValue<T> | T | undefined;\n\n/** Duck type the conditional. */\nfunction isConditionalValue<T>(\n  conditionalProp: ConditionalProp<T>\n): conditionalProp is CommonConditionalValue<T> {\n  return (\n    typeof conditionalProp === \"object\" &&\n    conditionalProp &&\n    \"syncEventIds\" in conditionalProp &&\n    \"refresh\" in conditionalProp &&\n    \"value\" in conditionalProp\n  );\n}\n\n/** @internal */\nexport function useConditionalProp<T>(conditionalProp: ConditionalProp<T>) {\n  const refreshedRef = useRef(false);\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      if (isConditionalValue(conditionalProp)) {\n        return SyncUiEventDispatcher.onSyncUiEvent.addListener(\n          ({ eventIds }) => {\n            if (\n              !SyncUiEventDispatcher.hasEventOfInterest(\n                eventIds,\n                conditionalProp.syncEventIds\n              )\n            )\n              return;\n            if (!conditionalProp.refresh()) return;\n\n            onStoreChange();\n          }\n        );\n      }\n      return () => {};\n    },\n    [conditionalProp]\n  );\n  const getSnapshot = useCallback(() => {\n    if (isConditionalValue(conditionalProp)) {\n      if (!refreshedRef.current) {\n        conditionalProp.refresh();\n        refreshedRef.current = true;\n      }\n\n      return conditionalProp.value;\n    }\n    return conditionalProp;\n  }, [conditionalProp]);\n  return useSyncExternalStore(subscribe, getSnapshot);\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarComposer.d.ts","sourceRoot":"","sources":["../../../src/appui-react/toolbar/ToolbarComposer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAIV,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAGL,kBAAkB,EAClB,YAAY,EACb,MAAM,kBAAkB,CAAC;AA4J1B;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,+EAA+E;IAC/E,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,8FAA8F;IAC9F,KAAK,EAAE,YAAY,CAAC;IACpB,2BAA2B;IAC3B,WAAW,EAAE,kBAAkB,CAAC;IAChC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED;;;;GAIG;AAEH,wBAAgB,eAAe,CAAC,KAAK,EAAE,sBAAsB,qBAwC5D;AAwBD,gBAAgB;AAChB,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,WAAW,EAAE,EACpB,aAAa,EAAE,MAAM,EAAE,iBA4BxB"}
+{"version":3,"file":"ToolbarComposer.d.ts","sourceRoot":"","sources":["../../../src/appui-react/toolbar/ToolbarComposer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAIV,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAGL,kBAAkB,EAClB,YAAY,EACb,MAAM,kBAAkB,CAAC;AA8J1B;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,+EAA+E;IAC/E,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,8FAA8F;IAC9F,KAAK,EAAE,YAAY,CAAC;IACpB,2BAA2B;IAC3B,WAAW,EAAE,kBAAkB,CAAC;IAChC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED;;;;GAIG;AAEH,wBAAgB,eAAe,CAAC,KAAK,EAAE,sBAAsB,qBA4C5D;AAqED,gBAAgB;AAChB,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,WAAW,EAAE,EACpB,aAAa,EAAE,MAAM,EAAE,iBA4BxB"}

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

@@ -15,6 +15,8 @@ import { isToolbarActionItem, isToolbarGroupItem, ToolbarOrientation, ToolbarUsa
 import { Toolbar } from "./Toolbar.js";
 import { useActiveStageProvidedToolbarItems } from "./useActiveStageProvidedToolbarItems.js";
 import { useActiveToolId } from "../hooks/useActiveToolId.js";
+import { ConditionalBooleanValue } from "../shared/ConditionalValue.js";
+import { SyncUiEventDispatcher } from "../syncui/SyncUiEventDispatcher.js";
 function addItemToSpecifiedParentGroup(items, groupChildren) {
     const outItems = [];
     for (const toolbarItem of items) {
@@ -138,9 +140,13 @@ export function ToolbarComposer(props) {
     }, [props.items, addonItems]);
     const activeToolId = useActiveToolId();
     const activeItemIds = React.useMemo(() => activeItemIdsProp ?? (activeToolId ? [activeToolId] : []), [activeItemIdsProp, activeToolId]);
+    const activeConditionalItemIds = useActiveConditionalItemIds(allItems);
     const items = React.useMemo(() => {
-        return updateActiveItems(allItems, activeItemIds);
-    }, [allItems, activeItemIds]);
+        return updateActiveItems(allItems, [
+            ...activeItemIds,
+            ...activeConditionalItemIds,
+        ]);
+    }, [allItems, activeItemIds, activeConditionalItemIds]);
     const isDragEnabled = React.useContext(ToolbarDragInteractionContext);
     const useProximityOpacity = useProximityOpacitySetting();
     const snapWidgetOpacity = useSnapWidgetOpacitySetting();
@@ -165,6 +171,46 @@ function toPanelAlignment(orientation, usage) {
         return ToolbarPanelAlignment.End;
     return ToolbarPanelAlignment.Start;
 }
+function useActiveConditionalItemIds(items) {
+    const [activeItemIds, setActiveItemIds] = React.useState([]);
+    const conditionalItems = React.useMemo(() => {
+        const conditionals = [];
+        const stack = [...items];
+        while (stack.length > 0) {
+            const current = stack.pop();
+            if (current.isActiveCondition)
+                conditionals.push(current);
+            if (isToolbarGroupItem(current)) {
+                for (const child of current.items) {
+                    stack.push(child);
+                }
+            }
+        }
+        return conditionals;
+    }, [items]);
+    React.useEffect(() => {
+        return SyncUiEventDispatcher.onSyncUiEvent.addListener((args) => {
+            const newActiveIds = [];
+            for (const item of conditionalItems) {
+                ConditionalBooleanValue.refreshValue(item.isActiveCondition, args.eventIds);
+                const isActive = ConditionalBooleanValue.getValue(item.isActiveCondition);
+                if (isActive)
+                    newActiveIds.push(item.id);
+            }
+            setActiveItemIds(newActiveIds);
+        });
+    }, [conditionalItems]);
+    React.useEffect(() => {
+        const newActiveIds = [];
+        for (const item of conditionalItems) {
+            const isActive = ConditionalBooleanValue.getValue(item.isActiveCondition);
+            if (isActive)
+                newActiveIds.push(item.id);
+        }
+        setActiveItemIds(newActiveIds);
+    }, [conditionalItems]);
+    return activeItemIds;
+}
 /** @internal */
 export function updateActiveItems(items, activeItemIds) {
     return produce(items, (draft) => {
@@ -175,7 +221,7 @@ export function updateActiveItems(items, activeItemIds) {
             const isActive = activeItemIds.includes(current.id);
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             current.isActive = isActive;
-            if ("items" in current) {
+            if (isToolbarGroupItem(current)) {
                 for (const child of current.items) {
                     stack.push([child, [...ancestors, current]]);
                 }

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarComposer.js","sourceRoot":"","sources":["../../../src/appui-react/toolbar/ToolbarComposer.tsx"],"names":[],"mappings":"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","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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { produce } from \"immer\";\nimport {\n  Direction,\n  ToolbarOpacitySetting,\n  ToolbarPanelAlignment,\n} from \"@itwin/components-react\";\nimport { Logger, ProcessDetector } from \"@itwin/core-bentley\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { ToolbarDragInteractionContext } from \"./DragInteraction.js\";\nimport type {\n  CommonToolbarItem,\n  ToolbarActionItem,\n  ToolbarGroupItem,\n  ToolbarItem,\n} from \"./ToolbarItem.js\";\nimport {\n  isToolbarActionItem,\n  isToolbarGroupItem,\n  ToolbarOrientation,\n  ToolbarUsage,\n} from \"./ToolbarItem.js\";\nimport { Toolbar } from \"./Toolbar.js\";\nimport { useActiveStageProvidedToolbarItems } from \"./useActiveStageProvidedToolbarItems.js\";\nimport { useActiveToolId } from \"../hooks/useActiveToolId.js\";\n\nfunction addItemToSpecifiedParentGroup<T extends ToolbarItem>(\n  items: readonly T[],\n  groupChildren: Array<ToolbarActionItem | ToolbarGroupItem>\n): T[] {\n  const outItems: T[] = [];\n  for (const toolbarItem of items) {\n    if (!isToolbarGroupItem(toolbarItem)) {\n      outItems.push(toolbarItem);\n      continue;\n    }\n\n    const newChildren = addItemToSpecifiedParentGroup(\n      toolbarItem.items,\n      groupChildren\n    );\n    const foundIndices: number[] = [];\n\n    groupChildren.forEach((entry, index) => {\n      if (entry.parentGroupItemId === toolbarItem.id) {\n        foundIndices.push(index);\n      }\n    });\n\n    if (foundIndices.length) {\n      // process in reverse order so groupChildren can be reduced as we find matches\n      foundIndices\n        .sort((a, b) => a - b)\n        .reverse()\n        .forEach((foundIndex) => {\n          newChildren.push(groupChildren[foundIndex]);\n          groupChildren.splice(foundIndex);\n        });\n    }\n\n    outItems.push({ ...toolbarItem, items: newChildren });\n  }\n  return outItems;\n}\n\nfunction cloneGroup(inGroup: ToolbarGroupItem): ToolbarGroupItem {\n  const childItems: Array<ToolbarActionItem | ToolbarGroupItem> = [];\n  inGroup.items.forEach((item) => {\n    if (isToolbarGroupItem(item)) childItems.push(cloneGroup(item));\n    else childItems.push(item);\n  });\n\n  const clonedGroup = { ...inGroup, items: childItems };\n  return clonedGroup;\n}\n\nfunction getItemSortValue(item: ToolbarItem) {\n  const groupValue = undefined === item.groupPriority ? 0 : item.groupPriority;\n  return groupValue * 10000 + item.itemPriority;\n}\n\nfunction sortItems(items: ReadonlyArray<ToolbarItem>): ToolbarItem[] {\n  return [...items]\n    .sort((a, b) => getItemSortValue(a) - getItemSortValue(b))\n    .map((i) => {\n      if (isToolbarGroupItem(i)) {\n        return { ...i, items: sortItems(i.items) };\n      }\n      return i;\n    });\n}\n\n/**\n * Create a forEach handler that will add every element of an array of ToolbarItems\n * to a list of items that can then be replaced in its proper place, ensuring that\n * the same item, from different list, is not added multiple times.\n * @param items Output list of items\n * @param groupChildren Output list of group children to redistribute.\n * @returns Array<ToolbarItem>.forEach handler.\n */\nfunction addIfNotDuplicate(\n  items: ToolbarItem[],\n  groupChildren: (ToolbarActionItem | ToolbarGroupItem)[]\n): (value: ToolbarItem) => void {\n  return (srcItem: ToolbarItem) => {\n    if (-1 === items.findIndex((item) => item.id === srcItem.id)) {\n      // if the default item is a group that an addon may insert into copy it so we don't mess with original\n      const toolbarItem = isToolbarGroupItem(srcItem)\n        ? cloneGroup(srcItem)\n        : srcItem;\n      if (\n        (isToolbarGroupItem(toolbarItem) || isToolbarActionItem(toolbarItem)) &&\n        toolbarItem.parentGroupItemId\n      )\n        groupChildren.push(toolbarItem);\n      else items.push(toolbarItem);\n    }\n  };\n}\n\n/** local function to combine items from Stage and from Extensions */\nfunction combineItems(\n  defaultItems: ReadonlyArray<ToolbarItem>,\n  addonItems: ReadonlyArray<ToolbarItem>\n): ToolbarItem[] {\n  let items: ToolbarItem[] = [];\n  const groupChildren: Array<ToolbarActionItem | ToolbarGroupItem> = [];\n\n  defaultItems.forEach(addIfNotDuplicate(items, groupChildren));\n  addonItems.forEach(addIfNotDuplicate(items, groupChildren));\n\n  // if an item from an addon has specified a parent group then try to find it and insert it.  If no parent is found, add item at root level.\n  if (groupChildren.length) {\n    items = addItemToSpecifiedParentGroup(items, groupChildren);\n\n    groupChildren.forEach((toolbarItem) => {\n      Logger.logWarning(\n        \"ToolbarComposer\",\n        `Requested Parent Group [${toolbarItem.parentGroupItemId!}] not found, so item [${\n          toolbarItem.id\n        }] is added directly to toolbar.`\n      );\n      items.push(toolbarItem);\n    });\n  }\n\n  return sortItems(items);\n}\n\nconst useProximityOpacitySetting = () => {\n  const [proximityOpacity, setProximityOpacity] = React.useState(\n    UiFramework.visibility.useProximityOpacity // eslint-disable-line @typescript-eslint/no-deprecated\n  );\n\n  React.useEffect(() => {\n    UiFramework.onUiVisibilityChanged.addListener(\n      () => setProximityOpacity(UiFramework.visibility.useProximityOpacity) // eslint-disable-line @typescript-eslint/no-deprecated\n    );\n  }, []);\n\n  return proximityOpacity;\n};\n\nconst useSnapWidgetOpacitySetting = () => {\n  const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(\n    UiFramework.visibility.snapWidgetOpacity\n  );\n\n  React.useEffect(() => {\n    UiFramework.onUiVisibilityChanged.addListener(() =>\n      setSnapWidgetOpacity(UiFramework.visibility.snapWidgetOpacity)\n    );\n  }, []);\n\n  return snapWidgetOpacity;\n};\n\n/** Properties for the [[ToolbarComposer]] React components\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof ToolbarComposer>`\n */\nexport interface ExtensibleToolbarProps {\n  /** Toolbar items to be displayed in addition to the provided toolbar items. */\n  items: ToolbarItem[];\n  /** Toolbar usage based on which additional toolbar items are added from UI item providers. */\n  usage: ToolbarUsage;\n  /** Toolbar orientation. */\n  orientation: ToolbarOrientation;\n  /** Describes the ids of active toolbar items.\n   * By default only the toolbar item with id that matches the active `Tool` id is active.\n   * @note Property {@link CommonToolbarItem.isActiveCondition} takes precedence when determining the active state of a toolbar item.\n   */\n  activeItemIds?: string[];\n}\n\n/**\n * Toolbar that is populated and maintained by UI item providers.\n * @note Overrides {@link CommonToolbarItem.isActive} property based on the active tool id, unless {@link ExtensibleToolbarProps.activeItemIds} is specified.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function ToolbarComposer(props: ExtensibleToolbarProps) {\n  const { usage, orientation, activeItemIds: activeItemIdsProp } = props;\n\n  // process items from addon UI providers\n  const addonItems = useActiveStageProvidedToolbarItems(usage, orientation);\n\n  const allItems = React.useMemo(() => {\n    return combineItems(props.items, addonItems);\n  }, [props.items, addonItems]);\n\n  const activeToolId = useActiveToolId();\n  const activeItemIds = React.useMemo(\n    () => activeItemIdsProp ?? (activeToolId ? [activeToolId] : []),\n    [activeItemIdsProp, activeToolId]\n  );\n  const items = React.useMemo(() => {\n    return updateActiveItems(allItems, activeItemIds);\n  }, [allItems, activeItemIds]);\n\n  const isDragEnabled = React.useContext(ToolbarDragInteractionContext);\n  const useProximityOpacity = useProximityOpacitySetting();\n  const snapWidgetOpacity = useSnapWidgetOpacitySetting();\n\n  const expandsTo = toExpandsTo(orientation, usage);\n  const panelAlignment = toPanelAlignment(orientation, usage);\n  return (\n    <Toolbar\n      enableOverflow={true}\n      expandsTo={expandsTo}\n      panelAlignment={panelAlignment}\n      items={items}\n      useDragInteraction={isDragEnabled}\n      toolbarOpacitySetting={\n        (useProximityOpacity || snapWidgetOpacity) &&\n        !ProcessDetector.isMobileBrowser\n          ? ToolbarOpacitySetting.Proximity\n          : ToolbarOpacitySetting.Defaults\n      }\n    />\n  );\n}\n\nfunction toExpandsTo(orientation: ToolbarOrientation, usage: ToolbarUsage) {\n  if (orientation === ToolbarOrientation.Vertical) {\n    if (usage === ToolbarUsage.ViewNavigation) return Direction.Left;\n    return Direction.Right;\n  }\n\n  return Direction.Bottom;\n}\n\nfunction toPanelAlignment(\n  orientation: ToolbarOrientation,\n  usage: ToolbarUsage\n) {\n  if (\n    orientation === ToolbarOrientation.Horizontal &&\n    usage === ToolbarUsage.ViewNavigation\n  )\n    return ToolbarPanelAlignment.End;\n\n  return ToolbarPanelAlignment.Start;\n}\n\n/** @internal */\nexport function updateActiveItems(\n  items: ToolbarItem[],\n  activeItemIds: 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 = activeItemIds.includes(current.id);\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\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        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        ancestor.isActive = true;\n      }\n    }\n  });\n}\n"]}
+{"version":3,"file":"ToolbarComposer.js","sourceRoot":"","sources":["../../../src/appui-react/toolbar/ToolbarComposer.tsx"],"names":[],"mappings":"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","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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { produce } from \"immer\";\nimport {\n  Direction,\n  ToolbarOpacitySetting,\n  ToolbarPanelAlignment,\n} from \"@itwin/components-react\";\nimport { Logger, ProcessDetector } from \"@itwin/core-bentley\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { ToolbarDragInteractionContext } from \"./DragInteraction.js\";\nimport type {\n  CommonToolbarItem,\n  ToolbarActionItem,\n  ToolbarGroupItem,\n  ToolbarItem,\n} from \"./ToolbarItem.js\";\nimport {\n  isToolbarActionItem,\n  isToolbarGroupItem,\n  ToolbarOrientation,\n  ToolbarUsage,\n} from \"./ToolbarItem.js\";\nimport { Toolbar } from \"./Toolbar.js\";\nimport { useActiveStageProvidedToolbarItems } from \"./useActiveStageProvidedToolbarItems.js\";\nimport { useActiveToolId } from \"../hooks/useActiveToolId.js\";\nimport { ConditionalBooleanValue } from \"../shared/ConditionalValue.js\";\nimport { SyncUiEventDispatcher } from \"../syncui/SyncUiEventDispatcher.js\";\n\nfunction addItemToSpecifiedParentGroup<T extends ToolbarItem>(\n  items: readonly T[],\n  groupChildren: Array<ToolbarActionItem | ToolbarGroupItem>\n): T[] {\n  const outItems: T[] = [];\n  for (const toolbarItem of items) {\n    if (!isToolbarGroupItem(toolbarItem)) {\n      outItems.push(toolbarItem);\n      continue;\n    }\n\n    const newChildren = addItemToSpecifiedParentGroup(\n      toolbarItem.items,\n      groupChildren\n    );\n    const foundIndices: number[] = [];\n\n    groupChildren.forEach((entry, index) => {\n      if (entry.parentGroupItemId === toolbarItem.id) {\n        foundIndices.push(index);\n      }\n    });\n\n    if (foundIndices.length) {\n      // process in reverse order so groupChildren can be reduced as we find matches\n      foundIndices\n        .sort((a, b) => a - b)\n        .reverse()\n        .forEach((foundIndex) => {\n          newChildren.push(groupChildren[foundIndex]);\n          groupChildren.splice(foundIndex);\n        });\n    }\n\n    outItems.push({ ...toolbarItem, items: newChildren });\n  }\n  return outItems;\n}\n\nfunction cloneGroup(inGroup: ToolbarGroupItem): ToolbarGroupItem {\n  const childItems: Array<ToolbarActionItem | ToolbarGroupItem> = [];\n  inGroup.items.forEach((item) => {\n    if (isToolbarGroupItem(item)) childItems.push(cloneGroup(item));\n    else childItems.push(item);\n  });\n\n  const clonedGroup = { ...inGroup, items: childItems };\n  return clonedGroup;\n}\n\nfunction getItemSortValue(item: ToolbarItem) {\n  const groupValue = undefined === item.groupPriority ? 0 : item.groupPriority;\n  return groupValue * 10000 + item.itemPriority;\n}\n\nfunction sortItems(items: ReadonlyArray<ToolbarItem>): ToolbarItem[] {\n  return [...items]\n    .sort((a, b) => getItemSortValue(a) - getItemSortValue(b))\n    .map((i) => {\n      if (isToolbarGroupItem(i)) {\n        return { ...i, items: sortItems(i.items) };\n      }\n      return i;\n    });\n}\n\n/**\n * Create a forEach handler that will add every element of an array of ToolbarItems\n * to a list of items that can then be replaced in its proper place, ensuring that\n * the same item, from different list, is not added multiple times.\n * @param items Output list of items\n * @param groupChildren Output list of group children to redistribute.\n * @returns Array<ToolbarItem>.forEach handler.\n */\nfunction addIfNotDuplicate(\n  items: ToolbarItem[],\n  groupChildren: (ToolbarActionItem | ToolbarGroupItem)[]\n): (value: ToolbarItem) => void {\n  return (srcItem: ToolbarItem) => {\n    if (-1 === items.findIndex((item) => item.id === srcItem.id)) {\n      // if the default item is a group that an addon may insert into copy it so we don't mess with original\n      const toolbarItem = isToolbarGroupItem(srcItem)\n        ? cloneGroup(srcItem)\n        : srcItem;\n      if (\n        (isToolbarGroupItem(toolbarItem) || isToolbarActionItem(toolbarItem)) &&\n        toolbarItem.parentGroupItemId\n      )\n        groupChildren.push(toolbarItem);\n      else items.push(toolbarItem);\n    }\n  };\n}\n\n/** local function to combine items from Stage and from Extensions */\nfunction combineItems(\n  defaultItems: ReadonlyArray<ToolbarItem>,\n  addonItems: ReadonlyArray<ToolbarItem>\n): ToolbarItem[] {\n  let items: ToolbarItem[] = [];\n  const groupChildren: Array<ToolbarActionItem | ToolbarGroupItem> = [];\n\n  defaultItems.forEach(addIfNotDuplicate(items, groupChildren));\n  addonItems.forEach(addIfNotDuplicate(items, groupChildren));\n\n  // if an item from an addon has specified a parent group then try to find it and insert it.  If no parent is found, add item at root level.\n  if (groupChildren.length) {\n    items = addItemToSpecifiedParentGroup(items, groupChildren);\n\n    groupChildren.forEach((toolbarItem) => {\n      Logger.logWarning(\n        \"ToolbarComposer\",\n        `Requested Parent Group [${toolbarItem.parentGroupItemId!}] not found, so item [${\n          toolbarItem.id\n        }] is added directly to toolbar.`\n      );\n      items.push(toolbarItem);\n    });\n  }\n\n  return sortItems(items);\n}\n\nconst useProximityOpacitySetting = () => {\n  const [proximityOpacity, setProximityOpacity] = React.useState(\n    UiFramework.visibility.useProximityOpacity // eslint-disable-line @typescript-eslint/no-deprecated\n  );\n\n  React.useEffect(() => {\n    UiFramework.onUiVisibilityChanged.addListener(\n      () => setProximityOpacity(UiFramework.visibility.useProximityOpacity) // eslint-disable-line @typescript-eslint/no-deprecated\n    );\n  }, []);\n\n  return proximityOpacity;\n};\n\nconst useSnapWidgetOpacitySetting = () => {\n  const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(\n    UiFramework.visibility.snapWidgetOpacity\n  );\n\n  React.useEffect(() => {\n    UiFramework.onUiVisibilityChanged.addListener(() =>\n      setSnapWidgetOpacity(UiFramework.visibility.snapWidgetOpacity)\n    );\n  }, []);\n\n  return snapWidgetOpacity;\n};\n\n/** Properties for the [[ToolbarComposer]] React components\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof ToolbarComposer>`\n */\nexport interface ExtensibleToolbarProps {\n  /** Toolbar items to be displayed in addition to the provided toolbar items. */\n  items: ToolbarItem[];\n  /** Toolbar usage based on which additional toolbar items are added from UI item providers. */\n  usage: ToolbarUsage;\n  /** Toolbar orientation. */\n  orientation: ToolbarOrientation;\n  /** Describes the ids of active toolbar items.\n   * By default only the toolbar item with id that matches the active `Tool` id is active.\n   * @note Property {@link CommonToolbarItem.isActiveCondition} takes precedence when determining the active state of a toolbar item.\n   */\n  activeItemIds?: string[];\n}\n\n/**\n * Toolbar that is populated and maintained by UI item providers.\n * @note Overrides {@link CommonToolbarItem.isActive} property based on the active tool id, unless {@link ExtensibleToolbarProps.activeItemIds} is specified.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function ToolbarComposer(props: ExtensibleToolbarProps) {\n  const { usage, orientation, activeItemIds: activeItemIdsProp } = props;\n\n  // process items from addon UI providers\n  const addonItems = useActiveStageProvidedToolbarItems(usage, orientation);\n\n  const allItems = React.useMemo(() => {\n    return combineItems(props.items, addonItems);\n  }, [props.items, addonItems]);\n\n  const activeToolId = useActiveToolId();\n  const activeItemIds = React.useMemo(\n    () => activeItemIdsProp ?? (activeToolId ? [activeToolId] : []),\n    [activeItemIdsProp, activeToolId]\n  );\n  const activeConditionalItemIds = useActiveConditionalItemIds(allItems);\n  const items = React.useMemo(() => {\n    return updateActiveItems(allItems, [\n      ...activeItemIds,\n      ...activeConditionalItemIds,\n    ]);\n  }, [allItems, activeItemIds, activeConditionalItemIds]);\n\n  const isDragEnabled = React.useContext(ToolbarDragInteractionContext);\n  const useProximityOpacity = useProximityOpacitySetting();\n  const snapWidgetOpacity = useSnapWidgetOpacitySetting();\n\n  const expandsTo = toExpandsTo(orientation, usage);\n  const panelAlignment = toPanelAlignment(orientation, usage);\n  return (\n    <Toolbar\n      enableOverflow={true}\n      expandsTo={expandsTo}\n      panelAlignment={panelAlignment}\n      items={items}\n      useDragInteraction={isDragEnabled}\n      toolbarOpacitySetting={\n        (useProximityOpacity || snapWidgetOpacity) &&\n        !ProcessDetector.isMobileBrowser\n          ? ToolbarOpacitySetting.Proximity\n          : ToolbarOpacitySetting.Defaults\n      }\n    />\n  );\n}\n\nfunction toExpandsTo(orientation: ToolbarOrientation, usage: ToolbarUsage) {\n  if (orientation === ToolbarOrientation.Vertical) {\n    if (usage === ToolbarUsage.ViewNavigation) return Direction.Left;\n    return Direction.Right;\n  }\n\n  return Direction.Bottom;\n}\n\nfunction toPanelAlignment(\n  orientation: ToolbarOrientation,\n  usage: ToolbarUsage\n) {\n  if (\n    orientation === ToolbarOrientation.Horizontal &&\n    usage === ToolbarUsage.ViewNavigation\n  )\n    return ToolbarPanelAlignment.End;\n\n  return ToolbarPanelAlignment.Start;\n}\n\nfunction useActiveConditionalItemIds(items: ToolbarItem[]) {\n  const [activeItemIds, setActiveItemIds] = React.useState<string[]>([]);\n  const conditionalItems = React.useMemo(() => {\n    const conditionals: ToolbarItem[] = [];\n    const stack = [...items];\n    while (stack.length > 0) {\n      const current = stack.pop()!;\n      if (current.isActiveCondition) conditionals.push(current);\n\n      if (isToolbarGroupItem(current)) {\n        for (const child of current.items) {\n          stack.push(child);\n        }\n      }\n    }\n    return conditionals;\n  }, [items]);\n  React.useEffect(() => {\n    return SyncUiEventDispatcher.onSyncUiEvent.addListener((args) => {\n      const newActiveIds: string[] = [];\n      for (const item of conditionalItems) {\n        ConditionalBooleanValue.refreshValue(\n          item.isActiveCondition,\n          args.eventIds\n        );\n\n        const isActive = ConditionalBooleanValue.getValue(\n          item.isActiveCondition\n        );\n        if (isActive) newActiveIds.push(item.id);\n      }\n      setActiveItemIds(newActiveIds);\n    });\n  }, [conditionalItems]);\n  React.useEffect(() => {\n    const newActiveIds: string[] = [];\n    for (const item of conditionalItems) {\n      const isActive = ConditionalBooleanValue.getValue(item.isActiveCondition);\n      if (isActive) newActiveIds.push(item.id);\n    }\n    setActiveItemIds(newActiveIds);\n  }, [conditionalItems]);\n  return activeItemIds;\n}\n\n/** @internal */\nexport function updateActiveItems(\n  items: ToolbarItem[],\n  activeItemIds: 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 = activeItemIds.includes(current.id);\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      current.isActive = isActive;\n\n      if (isToolbarGroupItem(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        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        ancestor.isActive = true;\n      }\n    }\n  });\n}\n"]}

package/lib/appui-react/toolbar/new-toolbars/GroupItem.d.ts

@@ -1,7 +1,9 @@
 /** @packageDocumentation
  * @module Toolbar
  */
+import "./GroupItem.scss";
 import * as React from "react";
+import { DropdownMenu } from "@itwin/itwinui-react";
 import type { ToolbarItem } from "../../toolbar/ToolbarItem.js";
 import { type ToolbarGroupItem } from "../../toolbar/ToolbarItem.js";
 interface GroupItemProps {
@@ -17,5 +19,8 @@ interface GroupMenuItemProps {
 }
 /** @internal */
 export declare function GroupMenuItem({ item, onClose }: GroupMenuItemProps): React.JSX.Element | null;
+type ToolbarMenuProps = React.ComponentProps<typeof DropdownMenu>;
+/** @internal */
+export declare const ToolbarMenu: React.ForwardRefExoticComponent<React.PropsWithoutRef<ToolbarMenuProps> & React.RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=GroupItem.d.ts.map

package/lib/appui-react/toolbar/new-toolbars/GroupItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupItem.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/GroupItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,8BAA8B,CAAC;AAStC,UAAU,cAAc;IACtB,IAAI,EAAE,gBAAgB,CAAC;CACxB;AAED,gBAAgB;AAChB,eAAO,MAAM,SAAS,0FAyBrB,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,mBAAmB,sHAGlC;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gBAAgB;AAChB,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,kBAAkB,4BAyClE"}
+{"version":3,"file":"GroupItem.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/GroupItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAA8B,MAAM,sBAAsB,CAAC;AAChF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,8BAA8B,CAAC;AAStC,UAAU,cAAc;IACtB,IAAI,EAAE,gBAAgB,CAAC;CACxB;AAED,gBAAgB;AAChB,eAAO,MAAM,SAAS,0FAyBrB,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,mBAAmB,sHAGlC;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gBAAgB;AAChB,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,kBAAkB,4BA6ClE;AAkBD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAElE,gBAAgB;AAChB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,yBAAyB,CACvD,KAAK,CAAC,eAAe,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAe7E,CAAC"}

package/lib/appui-react/toolbar/new-toolbars/GroupItem.js

@@ -5,6 +5,8 @@
 /** @packageDocumentation
  * @module Toolbar
  */
+import "./GroupItem.scss";
+import classnames from "classnames";
 import * as React from "react";
 import { Icon } from "@itwin/core-react";
 import { DropdownMenu, MenuExtraContent, MenuItem } from "@itwin/itwinui-react";
@@ -24,7 +26,7 @@ export const GroupItem = React.forwardRef(function GroupItem({ item }, ref) {
     if (overflowContext) {
         return React.createElement(GroupMenuItem, { item: item, onClose: overflowContext.onClose });
     }
-    return (React.createElement(DropdownMenu, { menuItems: (close) => {
+    return (React.createElement(ToolbarMenu, { menuItems: (close) => {
             return toMenuItems(item, close);
         }, placement: placement, onVisibleChange: (newVisible) => {
             setPopoverOpen(newVisible);
@@ -53,13 +55,13 @@ export function GroupMenuItem({ item, onClose }) {
     const startIcon = item.iconNode ? (React.createElement(React.Fragment, null, item.iconNode)) : (
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     React.createElement(Icon, { iconSpec: iconSpec }));
-    return (React.createElement(MenuItem, { startIcon: startIcon, disabled: isDisabled, subMenuItems: subMenuItems, onClick: () => {
-            if (isToolbarActionItem(item)) {
+    return (React.createElement(MenuItem, { className: "uifw-toolbar-newToolbars-groupItem_menuItem", startIcon: startIcon, disabled: isDisabled, subMenuItems: subMenuItems, onClick: isToolbarActionItem(item)
+            ? () => {
                 item.execute();
                 onItemExecuted?.(item);
                 onClose?.();
             }
-        }, 
+            : undefined, 
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         isSelected: isActiveCondition ?? item.isActive, "data-item-id": item.id },
         React.createElement(Badge, { badge: item.badge, badgeKind: item.badgeKind }),
@@ -78,4 +80,8 @@ function toMenuItems(item, onClose) {
     }
     return [];
 }
+/** @internal */
+export const ToolbarMenu = React.forwardRef(function DropdownMenu1(props, ref) {
+    return (React.createElement(DropdownMenu, { ...props, className: classnames("uifw-toolbar-newToolbars-groupItem_menu", props.className), ref: ref }));
+});
 //# sourceMappingURL=GroupItem.js.map

package/lib/appui-react/toolbar/new-toolbars/GroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/GroupItem.tsx"],"names":[],"mappings":"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","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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { DropdownMenu, MenuExtraContent, MenuItem } from \"@itwin/itwinui-react\";\nimport type { ToolbarItem } from \"../../toolbar/ToolbarItem.js\";\nimport {\n  isToolbarActionItem,\n  isToolbarCustomItem,\n  isToolbarGroupItem,\n  type ToolbarGroupItem,\n} from \"../../toolbar/ToolbarItem.js\";\nimport { useConditionalProp } from \"../../hooks/useConditionalProp.js\";\nimport { ExpandIndicator } from \"./ExpandIndicator.js\";\nimport { Item } from \"./Item.js\";\nimport { Badge } from \"./Badge.js\";\nimport { ToolGroupOverflowContext } from \"./OverflowButton.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\nimport { useSafeContext } from \"../../hooks/useSafeContext.js\";\n\ninterface GroupItemProps {\n  item: ToolbarGroupItem;\n}\n\n/** @internal */\nexport const GroupItem = React.forwardRef<HTMLButtonElement, GroupItemProps>(\n  function GroupItem({ item }, ref) {\n    const placement = usePopoverPlacement();\n    const { setPopoverOpen } = useSafeContext(ToolbarContext);\n    const overflowContext = React.useContext(ToolGroupOverflowContext);\n\n    if (overflowContext) {\n      return <GroupMenuItem item={item} onClose={overflowContext.onClose} />;\n    }\n    return (\n      <DropdownMenu\n        menuItems={(close) => {\n          return toMenuItems(item, close);\n        }}\n        placement={placement}\n        onVisibleChange={(newVisible) => {\n          setPopoverOpen(newVisible);\n        }}\n      >\n        <Item item={item} ref={ref}>\n          <ExpandIndicator />\n        </Item>\n      </DropdownMenu>\n    );\n  }\n);\n\n/** @internal */\nexport function usePopoverPlacement() {\n  const { expandsTo, panelAlignment } = useSafeContext(ToolbarContext);\n  return `${expandsTo}-${panelAlignment}` as const;\n}\n\ninterface GroupMenuItemProps {\n  item: ToolbarItem;\n  onClose?: () => void;\n}\n\n/** @internal */\nexport function GroupMenuItem({ item, onClose }: GroupMenuItemProps) {\n  const { onItemExecuted } = useSafeContext(ToolbarContext);\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const iconSpec = useConditionalProp(item.icon);\n  const label = useConditionalProp(item.label);\n  const isDisabled = useConditionalProp(item.isDisabled);\n  const isHidden = useConditionalProp(item.isHidden);\n  const isActiveCondition = useConditionalProp(item.isActiveCondition);\n\n  if (isHidden) {\n    return null;\n  }\n\n  const subMenuItems = isDisabled ? undefined : toMenuItems(item, onClose);\n  const startIcon = item.iconNode ? (\n    <>{item.iconNode}</>\n  ) : (\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    <Icon iconSpec={iconSpec} />\n  );\n  return (\n    <MenuItem\n      startIcon={startIcon}\n      disabled={isDisabled}\n      subMenuItems={subMenuItems}\n      onClick={() => {\n        if (isToolbarActionItem(item)) {\n          item.execute();\n          onItemExecuted?.(item);\n          onClose?.();\n        }\n      }}\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      isSelected={isActiveCondition ?? item.isActive}\n      data-item-id={item.id}\n    >\n      {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n      <Badge badge={item.badge} badgeKind={item.badgeKind} />\n      {label}\n    </MenuItem>\n  );\n}\n\nfunction toMenuItems(item: ToolbarItem, onClose?: () => void) {\n  if (isToolbarGroupItem(item)) {\n    return item.items.map((groupItem) => {\n      return (\n        <GroupMenuItem key={groupItem.id} item={groupItem} onClose={onClose} />\n      );\n    });\n  }\n  if (isToolbarCustomItem(item)) {\n    return [\n      <MenuExtraContent key={item.id}>{item.panelContent}</MenuExtraContent>,\n    ];\n  }\n  return [];\n}\n"]}
+{"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/GroupItem.tsx"],"names":[],"mappings":"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","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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./GroupItem.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { DropdownMenu, MenuExtraContent, MenuItem } from \"@itwin/itwinui-react\";\nimport type { ToolbarItem } from \"../../toolbar/ToolbarItem.js\";\nimport {\n  isToolbarActionItem,\n  isToolbarCustomItem,\n  isToolbarGroupItem,\n  type ToolbarGroupItem,\n} from \"../../toolbar/ToolbarItem.js\";\nimport { useConditionalProp } from \"../../hooks/useConditionalProp.js\";\nimport { ExpandIndicator } from \"./ExpandIndicator.js\";\nimport { Item } from \"./Item.js\";\nimport { Badge } from \"./Badge.js\";\nimport { ToolGroupOverflowContext } from \"./OverflowButton.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\nimport { useSafeContext } from \"../../hooks/useSafeContext.js\";\n\ninterface GroupItemProps {\n  item: ToolbarGroupItem;\n}\n\n/** @internal */\nexport const GroupItem = React.forwardRef<HTMLButtonElement, GroupItemProps>(\n  function GroupItem({ item }, ref) {\n    const placement = usePopoverPlacement();\n    const { setPopoverOpen } = useSafeContext(ToolbarContext);\n    const overflowContext = React.useContext(ToolGroupOverflowContext);\n\n    if (overflowContext) {\n      return <GroupMenuItem item={item} onClose={overflowContext.onClose} />;\n    }\n    return (\n      <ToolbarMenu\n        menuItems={(close) => {\n          return toMenuItems(item, close);\n        }}\n        placement={placement}\n        onVisibleChange={(newVisible) => {\n          setPopoverOpen(newVisible);\n        }}\n      >\n        <Item item={item} ref={ref}>\n          <ExpandIndicator />\n        </Item>\n      </ToolbarMenu>\n    );\n  }\n);\n\n/** @internal */\nexport function usePopoverPlacement() {\n  const { expandsTo, panelAlignment } = useSafeContext(ToolbarContext);\n  return `${expandsTo}-${panelAlignment}` as const;\n}\n\ninterface GroupMenuItemProps {\n  item: ToolbarItem;\n  onClose?: () => void;\n}\n\n/** @internal */\nexport function GroupMenuItem({ item, onClose }: GroupMenuItemProps) {\n  const { onItemExecuted } = useSafeContext(ToolbarContext);\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const iconSpec = useConditionalProp(item.icon);\n  const label = useConditionalProp(item.label);\n  const isDisabled = useConditionalProp(item.isDisabled);\n  const isHidden = useConditionalProp(item.isHidden);\n  const isActiveCondition = useConditionalProp(item.isActiveCondition);\n\n  if (isHidden) {\n    return null;\n  }\n\n  const subMenuItems = isDisabled ? undefined : toMenuItems(item, onClose);\n  const startIcon = item.iconNode ? (\n    <>{item.iconNode}</>\n  ) : (\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    <Icon iconSpec={iconSpec} />\n  );\n\n  return (\n    <MenuItem\n      className=\"uifw-toolbar-newToolbars-groupItem_menuItem\"\n      startIcon={startIcon}\n      disabled={isDisabled}\n      subMenuItems={subMenuItems}\n      onClick={\n        isToolbarActionItem(item)\n          ? () => {\n              item.execute();\n              onItemExecuted?.(item);\n              onClose?.();\n            }\n          : undefined\n      }\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      isSelected={isActiveCondition ?? item.isActive}\n      data-item-id={item.id}\n    >\n      {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n      <Badge badge={item.badge} badgeKind={item.badgeKind} />\n      {label}\n    </MenuItem>\n  );\n}\n\nfunction toMenuItems(item: ToolbarItem, onClose?: () => void) {\n  if (isToolbarGroupItem(item)) {\n    return item.items.map((groupItem) => {\n      return (\n        <GroupMenuItem key={groupItem.id} item={groupItem} onClose={onClose} />\n      );\n    });\n  }\n  if (isToolbarCustomItem(item)) {\n    return [\n      <MenuExtraContent key={item.id}>{item.panelContent}</MenuExtraContent>,\n    ];\n  }\n  return [];\n}\n\ntype ToolbarMenuProps = React.ComponentProps<typeof DropdownMenu>;\n\n/** @internal */\nexport const ToolbarMenu: React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<ToolbarMenuProps> & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<HTMLDivElement, ToolbarMenuProps>(function DropdownMenu1(\n  props,\n  ref\n) {\n  return (\n    <DropdownMenu\n      {...props}\n      className={classnames(\n        \"uifw-toolbar-newToolbars-groupItem_menu\",\n        props.className\n      )}\n      ref={ref}\n    />\n  );\n});\n"]}

package/lib/appui-react/toolbar/new-toolbars/GroupItem.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-newToolbars-groupItem_menu,
+// Can not customize iTwinUI submenu directly, so we use :has() to workaround it.
+[role="menu"]:has(.uifw-toolbar-newToolbars-groupItem_menuItem) {
+  --iui-menu-max-height: 100%;
+}

package/lib/appui-react/toolbar/new-toolbars/OverflowButton.js

@@ -6,10 +6,10 @@
  * @module Toolbar
  */
 import * as React from "react";
-import { DropdownMenu, IconButton } from "@itwin/itwinui-react";
+import { IconButton } from "@itwin/itwinui-react";
 import { SvgMore } from "@itwin/itwinui-icons-react";
 import { useLabelProps } from "./Item.js";
-import { usePopoverPlacement } from "./GroupItem.js";
+import { ToolbarMenu, usePopoverPlacement } from "./GroupItem.js";
 import { ToolbarContext } from "./Toolbar.js";
 import { useSafeContext } from "../../hooks/useSafeContext.js";
 /** @internal */
@@ -19,7 +19,7 @@ export const OverflowButton = React.forwardRef(function OverflowButton(props, re
     const placement = usePopoverPlacement();
     const labelProps = useLabelProps();
     const { setPopoverOpen } = useSafeContext(ToolbarContext);
-    return (React.createElement(DropdownMenu, { menuItems: (close) => {
+    return (React.createElement(ToolbarMenu, { menuItems: (close) => {
             return [
                 React.createElement(OverflowMenu, { key: 0, onClose: close }, props.children),
             ];

package/lib/appui-react/toolbar/new-toolbars/OverflowButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowButton.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/OverflowButton.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAM/D,gBAAgB;AAChB,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAEzD,SAAS,CAAC,CAAC;AAMb,gBAAgB;AAChB,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAE1D,OAAO,CACL,oBAAC,YAAY,IACX,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,OAAO;gBACL,oBAAC,YAAY,IAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,IACjC,KAAK,CAAC,QAAQ,CACF;aAChB,CAAC;QACJ,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,CAAC,UAAU,EAAE,EAAE;YAC9B,cAAc,CAAC,UAAU,CAAC,CAAC;QAC7B,CAAC;QAED,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,MAAM,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAC,YAAY;YAEtB,oBAAC,OAAO,OAAG,CACA,CACA,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAOH,SAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAqB;IAC5D,OAAO,CACL,oBAAC,wBAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAClD,QAAQ,CACyB,CACrC,CAAC;AACJ,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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { DropdownMenu, IconButton } from \"@itwin/itwinui-react\";\nimport { SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { useLabelProps } from \"./Item.js\";\nimport { usePopoverPlacement } from \"./GroupItem.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\nimport { useSafeContext } from \"../../hooks/useSafeContext.js\";\n\ninterface ToolGroupOverflow {\n  onClose?: () => void;\n}\n\n/** @internal */\nexport const ToolGroupOverflowContext = React.createContext<\n  ToolGroupOverflow | undefined\n>(undefined);\n\ninterface OverflowButtonProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport const OverflowButton = React.forwardRef<\n  HTMLButtonElement,\n  OverflowButtonProps\n>(function OverflowButton(props, ref) {\n  const placement = usePopoverPlacement();\n  const labelProps = useLabelProps();\n  const { setPopoverOpen } = useSafeContext(ToolbarContext);\n\n  return (\n    <DropdownMenu\n      menuItems={(close) => {\n        return [\n          <OverflowMenu key={0} onClose={close}>\n            {props.children}\n          </OverflowMenu>,\n        ];\n      }}\n      placement={placement}\n      onVisibleChange={(newVisible) => {\n        setPopoverOpen(newVisible);\n      }}\n    >\n      <IconButton\n        ref={ref}\n        label=\"More\"\n        labelProps={labelProps}\n        styleType=\"borderless\"\n      >\n        <SvgMore />\n      </IconButton>\n    </DropdownMenu>\n  );\n});\n\ninterface OverflowMenuProps {\n  children?: React.ReactNode;\n  onClose?: () => void;\n}\n\nfunction OverflowMenu({ children, onClose }: OverflowMenuProps) {\n  return (\n    <ToolGroupOverflowContext.Provider value={{ onClose }}>\n      {children}\n    </ToolGroupOverflowContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"OverflowButton.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/OverflowButton.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAM/D,gBAAgB;AAChB,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAEzD,SAAS,CAAC,CAAC;AAMb,gBAAgB;AAChB,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAE1D,OAAO,CACL,oBAAC,WAAW,IACV,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,OAAO;gBACL,oBAAC,YAAY,IAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,IACjC,KAAK,CAAC,QAAQ,CACF;aAChB,CAAC;QACJ,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,CAAC,UAAU,EAAE,EAAE;YAC9B,cAAc,CAAC,UAAU,CAAC,CAAC;QAC7B,CAAC;QAED,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,MAAM,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAC,YAAY;YAEtB,oBAAC,OAAO,OAAG,CACA,CACD,CACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAOH,SAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAqB;IAC5D,OAAO,CACL,oBAAC,wBAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAClD,QAAQ,CACyB,CACrC,CAAC;AACJ,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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { useLabelProps } from \"./Item.js\";\nimport { ToolbarMenu, usePopoverPlacement } from \"./GroupItem.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\nimport { useSafeContext } from \"../../hooks/useSafeContext.js\";\n\ninterface ToolGroupOverflow {\n  onClose?: () => void;\n}\n\n/** @internal */\nexport const ToolGroupOverflowContext = React.createContext<\n  ToolGroupOverflow | undefined\n>(undefined);\n\ninterface OverflowButtonProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport const OverflowButton = React.forwardRef<\n  HTMLButtonElement,\n  OverflowButtonProps\n>(function OverflowButton(props, ref) {\n  const placement = usePopoverPlacement();\n  const labelProps = useLabelProps();\n  const { setPopoverOpen } = useSafeContext(ToolbarContext);\n\n  return (\n    <ToolbarMenu\n      menuItems={(close) => {\n        return [\n          <OverflowMenu key={0} onClose={close}>\n            {props.children}\n          </OverflowMenu>,\n        ];\n      }}\n      placement={placement}\n      onVisibleChange={(newVisible) => {\n        setPopoverOpen(newVisible);\n      }}\n    >\n      <IconButton\n        ref={ref}\n        label=\"More\"\n        labelProps={labelProps}\n        styleType=\"borderless\"\n      >\n        <SvgMore />\n      </IconButton>\n    </ToolbarMenu>\n  );\n});\n\ninterface OverflowMenuProps {\n  children?: React.ReactNode;\n  onClose?: () => void;\n}\n\nfunction OverflowMenu({ children, onClose }: OverflowMenuProps) {\n  return (\n    <ToolGroupOverflowContext.Provider value={{ onClose }}>\n      {children}\n    </ToolGroupOverflowContext.Provider>\n  );\n}\n"]}

package/lib/appui-react/toolbar/new-toolbars/useOverflow.js

@@ -19,9 +19,9 @@ export const useOverflow = (allItems, orientation, getItemSize, getOverflowSize)
         setCalculate(true);
     }
     React.useLayoutEffect(() => {
-        setCalculate(false);
         if (!calculate)
             return;
+        setCalculate(false);
         const containerSize = containerSizeRef.current
             ? getLength(containerSizeRef.current, orientation)
             : undefined;

package/lib/appui-react/toolbar/new-toolbars/useOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflow.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/useOverflow.tsx"],"names":[],"mappings":"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","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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { useResizeObserver } from \"@itwin/core-react/internal\";\nimport type { SizeProps } from \"../../utils/SizeProps.js\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\n/** @internal */\nexport const useOverflow = <\n  TContainer extends HTMLElement,\n  TComponent extends HTMLElement\n>(\n  allItems: ReadonlyArray<string>,\n  orientation: Orientation,\n  getItemSize: (item: string) => SizeProps,\n  getOverflowSize: () => SizeProps\n) => {\n  const [visible, setVisible] = React.useState(allItems.length);\n  const [calculate, setCalculate] = React.useState(false);\n  const containerSizeRef = React.useRef<SizeProps>();\n  const componentSizeRef = React.useRef<SizeProps>();\n\n  const [prevOrientation, setPrevOrientation] = React.useState(orientation);\n  if (prevOrientation !== orientation) {\n    setPrevOrientation(orientation);\n    setCalculate(true);\n  }\n\n  React.useLayoutEffect(() => {\n    setCalculate(false);\n    if (!calculate) return;\n\n    const containerSize = containerSizeRef.current\n      ? getLength(containerSizeRef.current, orientation)\n      : undefined;\n    if (containerSize === undefined) return;\n\n    const componentSize = componentSizeRef.current\n      ? getLength(componentSizeRef.current, orientation)\n      : undefined;\n    if (componentSize === undefined) return;\n\n    const itemSizes = allItems.map((item) => {\n      const size = getItemSize(item);\n      return getLength(size, orientation);\n    });\n    const overflowSize = getLength(getOverflowSize(), orientation);\n\n    const otherSize = itemSizes.reduce((acc, size) => acc + size, 0);\n    if (otherSize < containerSize) {\n      // No overflow.\n      setVisible(itemSizes.length);\n      return;\n    }\n\n    if (overflowSize >= containerSize) {\n      // Render only overflow.\n      setVisible(0);\n      return;\n    }\n\n    let totalSize = overflowSize;\n    let newVisible = 0;\n    for (const size of itemSizes) {\n      totalSize += size;\n      if (totalSize >= containerSize) {\n        break;\n      }\n      newVisible++;\n    }\n    setVisible(newVisible);\n  }, [calculate, allItems, getItemSize, getOverflowSize, orientation]);\n  const containerRoRef = useResizeObserver<TContainer>(\n    React.useCallback(\n      (width: number, height: number) => {\n        const length = containerSizeRef.current\n          ? getLength(containerSizeRef.current, orientation)\n          : undefined;\n        containerSizeRef.current = { width, height };\n        const newLength = getLength(containerSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n  const componentRoRef = useResizeObserver<TComponent>(\n    React.useCallback(\n      (width: number, height: number) => {\n        const length = componentSizeRef.current\n          ? getLength(componentSizeRef.current, orientation)\n          : undefined;\n        componentSizeRef.current = { width, height };\n        const newLength = getLength(componentSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n\n  const overflow = calculate || visible < allItems.length;\n  const visibleItems = calculate ? allItems.length : visible;\n  return [containerRoRef, componentRoRef, visibleItems, overflow] as const;\n};\n\nfunction getLength(\n  size: { width: number; height: number },\n  orientation: Orientation\n) {\n  return orientation === \"horizontal\" ? size.width : size.height;\n}\n"]}
+{"version":3,"file":"useOverflow.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/useOverflow.tsx"],"names":[],"mappings":"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","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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { useResizeObserver } from \"@itwin/core-react/internal\";\nimport type { SizeProps } from \"../../utils/SizeProps.js\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\n/** @internal */\nexport const useOverflow = <\n  TContainer extends HTMLElement,\n  TComponent extends HTMLElement\n>(\n  allItems: ReadonlyArray<string>,\n  orientation: Orientation,\n  getItemSize: (item: string) => SizeProps,\n  getOverflowSize: () => SizeProps\n) => {\n  const [visible, setVisible] = React.useState(allItems.length);\n  const [calculate, setCalculate] = React.useState(false);\n  const containerSizeRef = React.useRef<SizeProps>();\n  const componentSizeRef = React.useRef<SizeProps>();\n\n  const [prevOrientation, setPrevOrientation] = React.useState(orientation);\n  if (prevOrientation !== orientation) {\n    setPrevOrientation(orientation);\n    setCalculate(true);\n  }\n\n  React.useLayoutEffect(() => {\n    if (!calculate) return;\n    setCalculate(false);\n\n    const containerSize = containerSizeRef.current\n      ? getLength(containerSizeRef.current, orientation)\n      : undefined;\n    if (containerSize === undefined) return;\n\n    const componentSize = componentSizeRef.current\n      ? getLength(componentSizeRef.current, orientation)\n      : undefined;\n    if (componentSize === undefined) return;\n\n    const itemSizes = allItems.map((item) => {\n      const size = getItemSize(item);\n      return getLength(size, orientation);\n    });\n    const overflowSize = getLength(getOverflowSize(), orientation);\n\n    const otherSize = itemSizes.reduce((acc, size) => acc + size, 0);\n    if (otherSize < containerSize) {\n      // No overflow.\n      setVisible(itemSizes.length);\n      return;\n    }\n\n    if (overflowSize >= containerSize) {\n      // Render only overflow.\n      setVisible(0);\n      return;\n    }\n\n    let totalSize = overflowSize;\n    let newVisible = 0;\n    for (const size of itemSizes) {\n      totalSize += size;\n      if (totalSize >= containerSize) {\n        break;\n      }\n      newVisible++;\n    }\n    setVisible(newVisible);\n  }, [calculate, allItems, getItemSize, getOverflowSize, orientation]);\n  const containerRoRef = useResizeObserver<TContainer>(\n    React.useCallback(\n      (width: number, height: number) => {\n        const length = containerSizeRef.current\n          ? getLength(containerSizeRef.current, orientation)\n          : undefined;\n        containerSizeRef.current = { width, height };\n        const newLength = getLength(containerSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n  const componentRoRef = useResizeObserver<TComponent>(\n    React.useCallback(\n      (width: number, height: number) => {\n        const length = componentSizeRef.current\n          ? getLength(componentSizeRef.current, orientation)\n          : undefined;\n        componentSizeRef.current = { width, height };\n        const newLength = getLength(componentSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n\n  const overflow = calculate || visible < allItems.length;\n  const visibleItems = calculate ? allItems.length : visible;\n  return [containerRoRef, componentRoRef, visibleItems, overflow] as const;\n};\n\nfunction getLength(\n  size: { width: number; height: number },\n  orientation: Orientation\n) {\n  return orientation === \"horizontal\" ? size.width : size.height;\n}\n"]}

package/lib/cjs/appui-react/toolbar/new-toolbars/GroupItem.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-newToolbars-groupItem_menu,
+// Can not customize iTwinUI submenu directly, so we use :has() to workaround it.
+[role="menu"]:has(.uifw-toolbar-newToolbars-groupItem_menuItem) {
+  --iui-menu-max-height: 100%;
+}

package/lib/esm/appui-react/toolbar/new-toolbars/GroupItem.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-newToolbars-groupItem_menu,
+// Can not customize iTwinUI submenu directly, so we use :has() to workaround it.
+[role="menu"]:has(.uifw-toolbar-newToolbars-groupItem_menuItem) {
+  --iui-menu-max-height: 100%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.15.0",
+  "version": "5.15.2",
   "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.15.0",
-    "@itwin/core-react": "5.15.0",
-    "@itwin/imodel-components-react": "5.15.0"
+    "@itwin/components-react": "5.15.2",
+    "@itwin/core-react": "5.15.2",
+    "@itwin/imodel-components-react": "5.15.2"
   },
   "devDependencies": {
     "@itwin/appui-abstract": "^5.1.0",
@@ -91,9 +91,9 @@
     "typescript": "~5.6.2",
     "upath": "^2.0.1",
     "vitest": "^3.0.6",
-    "@itwin/components-react": "5.15.0",
-    "@itwin/core-react": "5.15.0",
-    "@itwin/imodel-components-react": "5.15.0"
+    "@itwin/components-react": "5.15.2",
+    "@itwin/core-react": "5.15.2",
+    "@itwin/imodel-components-react": "5.15.2"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.8.0",