@itwin/appui-react 5.8.0 → 5.9.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log - @itwin/appui-react
 
+## 5.9.0
+
+### Minor Changes
+
+- 1be3f19: Bump the release tag of `useWidget` and `useWidgetDirection` hooks from `@alpha` to `@public`.
+- 6e9d137: Update `Toolbar` component to render a separator between items of different groups. This is a visual change based on the previous toolbar implementation.
+
+### Patch Changes
+
+- Updated dependencies [1be3f19]
+  - @itwin/imodel-components-react@5.9.0
+  - @itwin/components-react@5.9.0
+  - @itwin/core-react@5.9.0
+
 ## 5.8.0
 
 ### Minor Changes

package/lib/appui-react/hooks/useSafeContext.d.ts

@@ -0,0 +1,7 @@
+/** @packageDocumentation
+ * @module Hooks
+ */
+import * as React from "react";
+/** @internal */
+export declare function useSafeContext<C>(context: React.Context<C>): C & ({} | null);
+//# sourceMappingURL=useSafeContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeContext.d.ts","sourceRoot":"","sources":["../../../src/appui-react/hooks/useSafeContext.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,mBAQ1D"}

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

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Hooks
+ */
+import * as React from "react";
+/** @internal */
+export function useSafeContext(context) {
+    const value = React.useContext(context);
+    if (value === undefined) {
+        throw new Error(`${context.displayName || "Context"} is undefined`);
+    }
+    return value;
+}
+//# sourceMappingURL=useSafeContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeContext.js","sourceRoot":"","sources":["../../../src/appui-react/hooks/useSafeContext.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,gBAAgB;AAChB,MAAM,UAAU,cAAc,CAAI,OAAyB;IACzD,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAExC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CAAC,GAAG,OAAO,CAAC,WAAW,IAAI,SAAS,eAAe,CAAC,CAAC;IACtE,CAAC;IAED,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 *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Hooks\n */\n\nimport * as React from \"react\";\n\n/** @internal */\nexport function useSafeContext<C>(context: React.Context<C>) {\n  const value = React.useContext(context);\n\n  if (value === undefined) {\n    throw new Error(`${context.displayName || \"Context\"} is undefined`);\n  }\n\n  return value;\n}\n"]}

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

@@ -3,10 +3,10 @@
  */
 import * as React from "react";
 import type { ToolbarActionItem } from "../../toolbar/ToolbarItem.js";
-/** @internal */
-export interface ActionItemProps {
+interface ActionItemProps {
     item: ToolbarActionItem;
 }
 /** @internal */
 export declare const ActionItem: React.ForwardRefExoticComponent<ActionItemProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
 //# sourceMappingURL=ActionItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ActionItem.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/ActionItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAMtE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,gBAAgB;AAChB,eAAO,MAAM,UAAU,2FAkBtB,CAAC"}
+{"version":3,"file":"ActionItem.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/ActionItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAOtE,UAAU,eAAe;IACvB,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,gBAAgB;AAChB,eAAO,MAAM,UAAU,2FAkBtB,CAAC"}

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

@@ -10,9 +10,10 @@ import { ToolGroupOverflowContext } from "./OverflowButton.js";
 import { Item } from "./Item.js";
 import { GroupMenuItem } from "./GroupItem.js";
 import { ToolbarContext } from "./Toolbar.js";
+import { useSafeContext } from "../../hooks/useSafeContext.js";
 /** @internal */
 export const ActionItem = React.forwardRef(function ActionItem({ item }, ref) {
-    const { onItemExecuted } = React.useContext(ToolbarContext) ?? {};
+    const { onItemExecuted } = useSafeContext(ToolbarContext);
     const overflowContext = React.useContext(ToolGroupOverflowContext);
     if (overflowContext) {
         return React.createElement(GroupMenuItem, { item: item, onClose: overflowContext.onClose });

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

@@ -1 +1 @@
-{"version":3,"file":"ActionItem.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/ActionItem.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAO9C,gBAAgB;AAChB,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG;IAC/B,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;IAClE,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAwB,CAAC,CAAC;IACnE,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,CAAC,OAAO,GAAI,CAAC;IACzE,CAAC;IACD,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,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 type { ToolbarActionItem } from \"../../toolbar/ToolbarItem.js\";\nimport { ToolGroupOverflowContext } from \"./OverflowButton.js\";\nimport { Item } from \"./Item.js\";\nimport { GroupMenuItem } from \"./GroupItem.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\n\n/** @internal */\nexport interface ActionItemProps {\n  item: ToolbarActionItem;\n}\n\n/** @internal */\nexport const ActionItem = React.forwardRef<HTMLButtonElement, ActionItemProps>(\n  function ActionItem({ item }, ref) {\n    const { onItemExecuted } = React.useContext(ToolbarContext) ?? {};\n    const overflowContext = React.useContext(ToolGroupOverflowContext);\n    if (overflowContext) {\n      return <GroupMenuItem item={item} onClose={overflowContext.onClose} />;\n    }\n    return (\n      <Item\n        ref={ref}\n        item={item}\n        onClick={() => {\n          item.execute();\n          onItemExecuted?.(item);\n        }}\n      />\n    );\n  }\n);\n"]}
+{"version":3,"file":"ActionItem.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/ActionItem.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAM/D,gBAAgB;AAChB,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG;IAC/B,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1D,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAwB,CAAC,CAAC;IACnE,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,CAAC,OAAO,GAAI,CAAC;IACzE,CAAC;IACD,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,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 type { ToolbarActionItem } from \"../../toolbar/ToolbarItem.js\";\nimport { ToolGroupOverflowContext } from \"./OverflowButton.js\";\nimport { Item } from \"./Item.js\";\nimport { GroupMenuItem } from \"./GroupItem.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\nimport { useSafeContext } from \"../../hooks/useSafeContext.js\";\n\ninterface ActionItemProps {\n  item: ToolbarActionItem;\n}\n\n/** @internal */\nexport const ActionItem = React.forwardRef<HTMLButtonElement, ActionItemProps>(\n  function ActionItem({ item }, ref) {\n    const { onItemExecuted } = useSafeContext(ToolbarContext);\n    const overflowContext = React.useContext(ToolGroupOverflowContext);\n    if (overflowContext) {\n      return <GroupMenuItem item={item} onClose={overflowContext.onClose} />;\n    }\n    return (\n      <Item\n        ref={ref}\n        item={item}\n        onClick={() => {\n          item.execute();\n          onItemExecuted?.(item);\n        }}\n      />\n    );\n  }\n);\n"]}

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

@@ -3,10 +3,10 @@
  */
 import * as React from "react";
 import type { ToolbarCustomItem } from "../../toolbar/ToolbarItem.js";
-/** @internal */
-export interface CustomItemProps {
+interface CustomItemProps {
     item: ToolbarCustomItem;
 }
 /** @internal */
 export declare const CustomItem: React.ForwardRefExoticComponent<CustomItemProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
 //# sourceMappingURL=CustomItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CustomItem.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/CustomItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAOtE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,gBAAgB;AAChB,eAAO,MAAM,UAAU,2FA2BtB,CAAC"}
+{"version":3,"file":"CustomItem.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/CustomItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAQtE,UAAU,eAAe;IACvB,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,gBAAgB;AAChB,eAAO,MAAM,UAAU,2FA2BtB,CAAC"}

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

@@ -12,10 +12,11 @@ import { Item } from "./Item.js";
 import { GroupMenuItem, usePopoverPlacement } from "./GroupItem.js";
 import { ToolGroupOverflowContext } from "./OverflowButton.js";
 import { ToolbarContext } from "./Toolbar.js";
+import { useSafeContext } from "../../hooks/useSafeContext.js";
 /** @internal */
 export const CustomItem = React.forwardRef(function CustomItem({ item }, ref) {
     const placement = usePopoverPlacement();
-    const context = React.useContext(ToolbarContext);
+    const { setPopoverOpen } = useSafeContext(ToolbarContext);
     const overflowContext = React.useContext(ToolGroupOverflowContext);
     if (overflowContext) {
         return React.createElement(GroupMenuItem, { item: item, onClose: overflowContext.onClose });
@@ -25,7 +26,7 @@ export const CustomItem = React.forwardRef(function CustomItem({ item }, ref) {
                 React.createElement(MenuExtraContent, { key: 0 }, item.panelContent),
             ];
         }, placement: placement, onVisibleChange: (newVisible) => {
-            context?.setPopoverOpen(newVisible);
+            setPopoverOpen(newVisible);
         } },
         React.createElement(Item, { ref: ref, item: item },
             React.createElement(ExpandIndicator, null))));

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

@@ -1 +1 @@
-{"version":3,"file":"CustomItem.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/CustomItem.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAO9C,gBAAgB;AAChB,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG;IAC/B,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAC;IACxC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAwB,CAAC,CAAC;IAEnE,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,CAAC,OAAO,GAAI,CAAC;IACzE,CAAC;IACD,OAAO,CACL,oBAAC,YAAY,IACX,SAAS,EAAE,GAAG,EAAE;YACd,OAAO;gBACL,oBAAC,gBAAgB,IAAC,GAAG,EAAE,CAAC,IAAG,IAAI,CAAC,YAAY,CAAoB;aACjE,CAAC;QACJ,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,CAAC,UAAU,EAAE,EAAE;YAC9B,OAAO,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;QAED,oBAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI;YACxB,oBAAC,eAAe,OAAG,CACd,CACM,CAChB,CAAC;AACJ,CAAC,CACF,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, MenuExtraContent } from \"@itwin/itwinui-react\";\nimport type { ToolbarCustomItem } from \"../../toolbar/ToolbarItem.js\";\nimport { ExpandIndicator } from \"./ExpandIndicator.js\";\nimport { Item } from \"./Item.js\";\nimport { GroupMenuItem, usePopoverPlacement } from \"./GroupItem.js\";\nimport { ToolGroupOverflowContext } from \"./OverflowButton.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\n\n/** @internal */\nexport interface CustomItemProps {\n  item: ToolbarCustomItem;\n}\n\n/** @internal */\nexport const CustomItem = React.forwardRef<HTMLButtonElement, CustomItemProps>(\n  function CustomItem({ item }, ref) {\n    const placement = usePopoverPlacement();\n    const context = React.useContext(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={() => {\n          return [\n            <MenuExtraContent key={0}>{item.panelContent}</MenuExtraContent>,\n          ];\n        }}\n        placement={placement}\n        onVisibleChange={(newVisible) => {\n          context?.setPopoverOpen(newVisible);\n        }}\n      >\n        <Item ref={ref} item={item}>\n          <ExpandIndicator />\n        </Item>\n      </DropdownMenu>\n    );\n  }\n);\n"]}
+{"version":3,"file":"CustomItem.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/CustomItem.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAM/D,gBAAgB;AAChB,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG;IAC/B,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAC;IACxC,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1D,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAwB,CAAC,CAAC;IAEnE,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,CAAC,OAAO,GAAI,CAAC;IACzE,CAAC;IACD,OAAO,CACL,oBAAC,YAAY,IACX,SAAS,EAAE,GAAG,EAAE;YACd,OAAO;gBACL,oBAAC,gBAAgB,IAAC,GAAG,EAAE,CAAC,IAAG,IAAI,CAAC,YAAY,CAAoB;aACjE,CAAC;QACJ,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,CAAC,UAAU,EAAE,EAAE;YAC9B,cAAc,CAAC,UAAU,CAAC,CAAC;QAC7B,CAAC;QAED,oBAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI;YACxB,oBAAC,eAAe,OAAG,CACd,CACM,CAChB,CAAC;AACJ,CAAC,CACF,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, MenuExtraContent } from \"@itwin/itwinui-react\";\nimport type { ToolbarCustomItem } from \"../../toolbar/ToolbarItem.js\";\nimport { ExpandIndicator } from \"./ExpandIndicator.js\";\nimport { Item } from \"./Item.js\";\nimport { GroupMenuItem, usePopoverPlacement } from \"./GroupItem.js\";\nimport { ToolGroupOverflowContext } from \"./OverflowButton.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\nimport { useSafeContext } from \"../../hooks/useSafeContext.js\";\n\ninterface CustomItemProps {\n  item: ToolbarCustomItem;\n}\n\n/** @internal */\nexport const CustomItem = React.forwardRef<HTMLButtonElement, CustomItemProps>(\n  function CustomItem({ 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={() => {\n          return [\n            <MenuExtraContent key={0}>{item.panelContent}</MenuExtraContent>,\n          ];\n        }}\n        placement={placement}\n        onVisibleChange={(newVisible) => {\n          setPopoverOpen(newVisible);\n        }}\n      >\n        <Item ref={ref} item={item}>\n          <ExpandIndicator />\n        </Item>\n      </DropdownMenu>\n    );\n  }\n);\n"]}

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

@@ -4,14 +4,13 @@
 import * as React from "react";
 import type { ToolbarItem } from "../../toolbar/ToolbarItem.js";
 import { type ToolbarGroupItem } from "../../toolbar/ToolbarItem.js";
-/** @internal */
-export interface GroupItemProps {
+interface GroupItemProps {
     item: ToolbarGroupItem;
 }
 /** @internal */
 export declare const GroupItem: React.ForwardRefExoticComponent<GroupItemProps & React.RefAttributes<HTMLButtonElement>>;
 /** @internal */
-export declare function usePopoverPlacement(): "top-end" | "top-start" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | undefined;
+export declare function usePopoverPlacement(): "top-end" | "top-start" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start";
 interface GroupMenuItemProps {
     item: ToolbarItem;
     onClose?: () => void;

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;AAQtC,gBAAgB;AAChB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,gBAAgB,CAAC;CACxB;AAED,gBAAgB;AAChB,eAAO,MAAM,SAAS,0FAyBrB,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,mBAAmB,kIAKlC;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,4BAwClE"}
+{"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,4BAwClE"}

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

@@ -15,10 +15,11 @@ import { Item } from "./Item.js";
 import { Badge } from "./Badge.js";
 import { ToolGroupOverflowContext } from "./OverflowButton.js";
 import { ToolbarContext } from "./Toolbar.js";
+import { useSafeContext } from "../../hooks/useSafeContext.js";
 /** @internal */
 export const GroupItem = React.forwardRef(function GroupItem({ item }, ref) {
     const placement = usePopoverPlacement();
-    const context = React.useContext(ToolbarContext);
+    const { setPopoverOpen } = useSafeContext(ToolbarContext);
     const overflowContext = React.useContext(ToolGroupOverflowContext);
     if (overflowContext) {
         return React.createElement(GroupMenuItem, { item: item, onClose: overflowContext.onClose });
@@ -26,21 +27,19 @@ export const GroupItem = React.forwardRef(function GroupItem({ item }, ref) {
     return (React.createElement(DropdownMenu, { menuItems: (close) => {
             return toMenuItems(item, close);
         }, placement: placement, onVisibleChange: (newVisible) => {
-            context?.setPopoverOpen(newVisible);
+            setPopoverOpen(newVisible);
         } },
         React.createElement(Item, { item: item, ref: ref },
             React.createElement(ExpandIndicator, null))));
 });
 /** @internal */
 export function usePopoverPlacement() {
-    const context = React.useContext(ToolbarContext);
-    if (!context)
-        return undefined;
-    return `${context.expandsTo}-${context.panelAlignment}`;
+    const { expandsTo, panelAlignment } = useSafeContext(ToolbarContext);
+    return `${expandsTo}-${panelAlignment}`;
 }
 /** @internal */
 export function GroupMenuItem({ item, onClose }) {
-    const { onItemExecuted } = React.useContext(ToolbarContext) ?? {};
+    const { onItemExecuted } = useSafeContext(ToolbarContext);
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     const iconSpec = useConditionalProp(item.icon);
     const label = useConditionalProp(item.label);

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\";\n\n/** @internal */\nexport interface 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 context = React.useContext(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          context?.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 context = React.useContext(ToolbarContext);\n  if (!context) return undefined;\n\n  return `${context.expandsTo}-${context.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 } = React.useContext(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 isActive = useConditionalProp(item.isActive);\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      isSelected={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 * 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 isActive = useConditionalProp(item.isActive);\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      isSelected={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"]}

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

@@ -4,18 +4,16 @@
 import * as React from "react";
 import { IconButton } from "@itwin/itwinui-react";
 import type { ToolbarItem } from "../../toolbar/ToolbarItem.js";
-/** @internal */
-export interface ItemProps extends Partial<React.ComponentProps<typeof IconButton>> {
+interface ItemProps extends Partial<React.ComponentProps<typeof IconButton>> {
     item: ToolbarItem;
 }
 /** @internal */
 export declare const Item: React.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** @internal */
-export declare function useExpandsTo(): "top" | "left" | "right" | "bottom";
-/** @internal */
 export declare function useLabelProps(): {
-    readonly placement: "top" | "left" | "right" | "bottom";
+    readonly placement: "top" | "bottom" | "left" | "right";
     readonly visible: boolean;
     readonly onVisibleChange: React.Dispatch<React.SetStateAction<boolean>>;
 };
+export {};
 //# sourceMappingURL=Item.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Item.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAKhE,gBAAgB;AAChB,MAAM,WAAW,SACf,SAAQ,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;IACxD,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,gBAAgB;AAChB,eAAO,MAAM,IAAI,kGAgChB,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,YAAY,wCAM3B;AAED,gBAAgB;AAChB,wBAAgB,aAAa;;;;EAU5B"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Item.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAOhE,UAAU,SAAU,SAAQ,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;IAC1E,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,gBAAgB;AAChB,eAAO,MAAM,IAAI,kGAsChB,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,aAAa;;;;EAS5B"}

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

@@ -6,43 +6,39 @@
  * @module Toolbar
  */
 import * as React from "react";
-import { assert } from "@itwin/core-bentley";
 import { Icon } from "@itwin/core-react";
 import { IconButton } from "@itwin/itwinui-react";
 import { useConditionalProp } from "../../hooks/useConditionalProp.js";
 import { Badge } from "./Badge.js";
-import { ToolbarContext } from "./Toolbar.js";
+import { ToolbarContext, ToolbarItemContext } from "./Toolbar.js";
+import { useSafeContext } from "../../hooks/useSafeContext.js";
+import { Separator } from "./Separator.js";
 /** @internal */
 export const Item = React.forwardRef(function Item(props, ref) {
     const { item, ...other } = props;
+    const { renderSeparator } = useSafeContext(ToolbarItemContext);
     const label = useConditionalProp(item.label);
     const isDisabled = useConditionalProp(item.isDisabled);
     const isHidden = useConditionalProp(item.isHidden);
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     const iconSpec = useConditionalProp(item.icon);
     const labelProps = useLabelProps();
-    if (isHidden)
-        return null;
-    return (React.createElement(IconButton, { className: props.className, styleType: "borderless", disabled: isDisabled, isActive: item.isActive, label: label, labelProps: labelProps, style: props.style, ref: ref, "data-item-id": item.id, ...other },
-        item.iconNode ?? React.createElement(Icon, { iconSpec: iconSpec }),
-        React.createElement(Badge, { badge: item.badge, badgeKind: item.badgeKind }),
-        props.children));
+    return (React.createElement(React.Fragment, null,
+        isHidden ? undefined : (React.createElement(IconButton, { styleType: "borderless", disabled: isDisabled, isActive: item.isActive, label: label, labelProps: labelProps, style: props.style, ref: ref, "data-item-id": item.id, ...other },
+            item.iconNode ?? (
+            /* eslint-disable-next-line @typescript-eslint/no-deprecated */
+            React.createElement(Icon, { iconSpec: iconSpec })),
+            React.createElement(Badge, { badge: item.badge, badgeKind: item.badgeKind }),
+            props.children)),
+        renderSeparator && React.createElement(Separator, null)));
 });
 /** @internal */
-export function useExpandsTo() {
-    const context = React.useContext(ToolbarContext);
-    assert(!!context);
-    const { expandsTo } = context;
-    return expandsTo;
-}
-/** @internal */
 export function useLabelProps() {
-    const context = React.useContext(ToolbarContext);
+    const { popoverOpen, expandsTo } = useSafeContext(ToolbarContext);
     const [internalVisible, setInternalVisible] = React.useState(false);
-    const visible = context?.popoverOpen ? false : internalVisible;
-    const placement = useExpandsTo();
+    const visible = popoverOpen ? false : internalVisible;
     return {
-        placement,
+        placement: expandsTo,
         visible,
         onVisibleChange: setInternalVisible,
     };

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

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Item.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAQ9C,gBAAgB;AAChB,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACtB,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnD,4DAA4D;IAC5D,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,IAAI,QAAQ;QAAE,OAAO,IAAI,CAAC;IAC1B,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,GAAG,EAAE,GAAG,kBACM,IAAI,CAAC,EAAE,KACjB,KAAK;QAGR,IAAI,CAAC,QAAQ,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI;QAE9C,oBAAC,KAAK,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI;QACtD,KAAK,CAAC,QAAQ,CACJ,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB;AAChB,MAAM,UAAU,YAAY;IAC1B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAElB,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAC9B,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,aAAa;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAC/D,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,OAAO;QACL,SAAS;QACT,OAAO;QACP,eAAe,EAAE,kBAAkB;KAC3B,CAAC;AACb,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 { assert } from \"@itwin/core-bentley\";\nimport { Icon } from \"@itwin/core-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport type { ToolbarItem } from \"../../toolbar/ToolbarItem.js\";\nimport { useConditionalProp } from \"../../hooks/useConditionalProp.js\";\nimport { Badge } from \"./Badge.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\n\n/** @internal */\nexport interface ItemProps\n  extends Partial<React.ComponentProps<typeof IconButton>> {\n  item: ToolbarItem;\n}\n\n/** @internal */\nexport const Item = React.forwardRef<HTMLButtonElement, ItemProps>(\n  function Item(props, ref) {\n    const { item, ...other } = props;\n    const label = useConditionalProp(item.label);\n    const isDisabled = useConditionalProp(item.isDisabled);\n    const isHidden = useConditionalProp(item.isHidden);\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const iconSpec = useConditionalProp(item.icon);\n    const labelProps = useLabelProps();\n\n    if (isHidden) return null;\n    return (\n      <IconButton\n        className={props.className}\n        styleType=\"borderless\"\n        disabled={isDisabled}\n        isActive={item.isActive}\n        label={label}\n        labelProps={labelProps}\n        style={props.style}\n        ref={ref}\n        data-item-id={item.id}\n        {...other}\n      >\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        {item.iconNode ?? <Icon iconSpec={iconSpec} />}\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <Badge badge={item.badge} badgeKind={item.badgeKind} />\n        {props.children}\n      </IconButton>\n    );\n  }\n);\n\n/** @internal */\nexport function useExpandsTo() {\n  const context = React.useContext(ToolbarContext);\n  assert(!!context);\n\n  const { expandsTo } = context;\n  return expandsTo;\n}\n\n/** @internal */\nexport function useLabelProps() {\n  const context = React.useContext(ToolbarContext);\n  const [internalVisible, setInternalVisible] = React.useState(false);\n  const visible = context?.popoverOpen ? false : internalVisible;\n  const placement = useExpandsTo();\n  return {\n    placement,\n    visible,\n    onVisibleChange: setInternalVisible,\n  } as const;\n}\n"]}
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Item.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAM3C,gBAAgB;AAChB,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACtB,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnD,4DAA4D;IAC5D,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,OAAO,CACL;QACG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CACtB,oBAAC,UAAU,IACT,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,GAAG,EAAE,GAAG,kBACM,IAAI,CAAC,EAAE,KACjB,KAAK;YAER,IAAI,CAAC,QAAQ,IAAI;YAChB,+DAA+D;YAC/D,oBAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAC7B;YAED,oBAAC,KAAK,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI;YACtD,KAAK,CAAC,QAAQ,CACJ,CACd;QACA,eAAe,IAAI,oBAAC,SAAS,OAAG,CAChC,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB;AAChB,MAAM,UAAU,aAAa;IAC3B,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAClE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACtD,OAAO;QACL,SAAS,EAAE,SAAS;QACpB,OAAO;QACP,eAAe,EAAE,kBAAkB;KAC3B,CAAC;AACb,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 { Icon } from \"@itwin/core-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport type { ToolbarItem } from \"../../toolbar/ToolbarItem.js\";\nimport { useConditionalProp } from \"../../hooks/useConditionalProp.js\";\nimport { Badge } from \"./Badge.js\";\nimport { ToolbarContext, ToolbarItemContext } from \"./Toolbar.js\";\nimport { useSafeContext } from \"../../hooks/useSafeContext.js\";\nimport { Separator } from \"./Separator.js\";\n\ninterface ItemProps extends Partial<React.ComponentProps<typeof IconButton>> {\n  item: ToolbarItem;\n}\n\n/** @internal */\nexport const Item = React.forwardRef<HTMLButtonElement, ItemProps>(\n  function Item(props, ref) {\n    const { item, ...other } = props;\n    const { renderSeparator } = useSafeContext(ToolbarItemContext);\n    const label = useConditionalProp(item.label);\n    const isDisabled = useConditionalProp(item.isDisabled);\n    const isHidden = useConditionalProp(item.isHidden);\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const iconSpec = useConditionalProp(item.icon);\n    const labelProps = useLabelProps();\n\n    return (\n      <>\n        {isHidden ? undefined : (\n          <IconButton\n            styleType=\"borderless\"\n            disabled={isDisabled}\n            isActive={item.isActive}\n            label={label}\n            labelProps={labelProps}\n            style={props.style}\n            ref={ref}\n            data-item-id={item.id}\n            {...other}\n          >\n            {item.iconNode ?? (\n              /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n              <Icon iconSpec={iconSpec} />\n            )}\n            {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n            <Badge badge={item.badge} badgeKind={item.badgeKind} />\n            {props.children}\n          </IconButton>\n        )}\n        {renderSeparator && <Separator />}\n      </>\n    );\n  }\n);\n\n/** @internal */\nexport function useLabelProps() {\n  const { popoverOpen, expandsTo } = useSafeContext(ToolbarContext);\n  const [internalVisible, setInternalVisible] = React.useState(false);\n  const visible = popoverOpen ? false : internalVisible;\n  return {\n    placement: expandsTo,\n    visible,\n    onVisibleChange: setInternalVisible,\n  } as const;\n}\n"]}

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

@@ -2,7 +2,6 @@
  * @module Toolbar
  */
 import * as React from "react";
-/** @internal */
 interface ToolGroupOverflow {
     onClose?: () => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowButton.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/OverflowButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gBAAgB;AAChB,eAAO,MAAM,wBAAwB,8CAEzB,CAAC;AAEb,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,eAAO,MAAM,cAAc,+FAgCzB,CAAC"}
+{"version":3,"file":"OverflowButton.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/OverflowButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gBAAgB;AAChB,eAAO,MAAM,wBAAwB,8CAEzB,CAAC;AAEb,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,eAAO,MAAM,cAAc,+FAgCzB,CAAC"}

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

@@ -11,19 +11,20 @@ import { SvgMore } from "@itwin/itwinui-icons-react";
 import { useLabelProps } from "./Item.js";
 import { usePopoverPlacement } from "./GroupItem.js";
 import { ToolbarContext } from "./Toolbar.js";
+import { useSafeContext } from "../../hooks/useSafeContext.js";
 /** @internal */
 export const ToolGroupOverflowContext = React.createContext(undefined);
 /** @internal */
 export const OverflowButton = React.forwardRef(function OverflowButton(props, ref) {
     const placement = usePopoverPlacement();
     const labelProps = useLabelProps();
-    const context = React.useContext(ToolbarContext);
+    const { setPopoverOpen } = useSafeContext(ToolbarContext);
     return (React.createElement(DropdownMenu, { menuItems: (close) => {
             return [
                 React.createElement(OverflowMenu, { key: 0, onClose: close }, props.children),
             ];
         }, placement: placement, onVisibleChange: (newVisible) => {
-            context?.setPopoverOpen(newVisible);
+            setPopoverOpen(newVisible);
         } },
         React.createElement(IconButton, { ref: ref, label: "More", labelProps: labelProps, styleType: "borderless" },
             React.createElement(SvgMore, null))));

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;AAO9C,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,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAEjD,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,OAAO,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;QACtC,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\";\n\n/** @internal */\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 context = React.useContext(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        context?.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,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"]}

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

@@ -0,0 +1,8 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Separator.scss";
+import * as React from "react";
+/** @internal */
+export declare function Separator(): React.JSX.Element;
+//# sourceMappingURL=Separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Separator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,gBAAgB;AAChB,wBAAgB,SAAS,sBAWxB"}

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

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Separator.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ToolbarContext } from "./Toolbar.js";
+import { useSafeContext } from "../../hooks/useSafeContext.js";
+/** @internal */
+export function Separator() {
+    const context = useSafeContext(ToolbarContext);
+    const { orientation } = context;
+    return (React.createElement("div", { className: classnames("uifw-toolbar-newToolbars-separator", `uifw-${orientation}`) }));
+}
+//# sourceMappingURL=Separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Separator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,gBAAgB;AAChB,MAAM,UAAU,SAAS;IACvB,MAAM,OAAO,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAC/C,MAAM,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC;IAChC,OAAO,CACL,6BACE,SAAS,EAAE,UAAU,CACnB,oCAAoC,EACpC,QAAQ,WAAW,EAAE,CACtB,GACD,CACH,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 \"./Separator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ToolbarContext } from \"./Toolbar.js\";\nimport { useSafeContext } from \"../../hooks/useSafeContext.js\";\n\n/** @internal */\nexport function Separator() {\n  const context = useSafeContext(ToolbarContext);\n  const { orientation } = context;\n  return (\n    <div\n      className={classnames(\n        \"uifw-toolbar-newToolbars-separator\",\n        `uifw-${orientation}`\n      )}\n    />\n  );\n}\n"]}

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

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-separator {
+  display: none;
+
+  &.uifw-horizontal {
+    border-right: var(--iui-surface-border);
+    border-color: var(--_uifw-toolbar-border-color);
+  }
+
+  &.uifw-vertical {
+    border-bottom: var(--iui-surface-border);
+    border-color: var(--_uifw-toolbar-border-color);
+  }
+
+  &:has(~ button) {
+    button + & {
+      display: block;
+    }
+  }
+
+  @supports not selector(:has(~ *)) {
+    button + & {
+      // This will display the last separator if there are multiple separators at the end of the toolbar.
+      &:not(:last-child) {
+        display: block;
+      }
+    }
+  }
+}

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

@@ -4,9 +4,11 @@
 import "./Surface.scss";
 import * as React from "react";
 import { Surface as IUI_Surface } from "@itwin/itwinui-react";
-type SurfaceProps = React.ComponentProps<typeof IUI_Surface> & {
-    orientation: "horizontal" | "vertical";
-};
+import type { ToolbarContext } from "./Toolbar.js";
+type ToolbarContextProps = NonNullable<React.ContextType<typeof ToolbarContext>>;
+interface SurfaceProps extends React.ComponentProps<typeof IUI_Surface> {
+    orientation: ToolbarContextProps["orientation"];
+}
 /** @internal */
 export declare const Surface: React.ForwardRefExoticComponent<Omit<SurfaceProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Surface.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAY9D,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG;IAC7D,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;CACxC,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,OAAO,kGAiCnB,CAAC"}
+{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Surface.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAW9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,KAAK,mBAAmB,GAAG,WAAW,CACpC,KAAK,CAAC,WAAW,CAAC,OAAO,cAAc,CAAC,CACzC,CAAC;AAEF,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC;IACrE,WAAW,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;CACjD;AAED,gBAAgB;AAChB,eAAO,MAAM,OAAO,kGAiCnB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Surface.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Surface.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EACzB,OAAO,EACP,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAMtE,gBAAgB;AAChB,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,SAAS,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY;IACvE,MAAM,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,uBAAuB,EAAkB,CAAC;IAC1E,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IAExC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,GAAG,EAAE;QAChD,IAAI,eAAe,CAAC,eAAe;YAAE,OAAO,KAAK,CAAC;QAClD,IAAI,WAAW,CAAC,UAAU,CAAC,iBAAiB;YAAE,OAAO,IAAI,CAAC;QAC1D,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,gBAAgB;YAAE,OAAO,SAAS,CAAC;QACxC,OAAO,uBAAuB,CAAC,cAAc,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC;IACvC,MAAM,eAAe,GACnB,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC;IAEzE,OAAO,CACL,oBAAC,WAAW,OACN,IAAI,EACR,KAAK,EAAE;YACL,eAAe;YACf,GAAG,KAAK;SACT,EACD,SAAS,EAAE,UAAU,CACnB,4BAA4B,EAC5B,QAAQ,WAAW,EAAE,EACrB,SAAS,CACV,EACD,GAAG,EAAE,IAAI,GACT,CACH,CAAC;AACJ,CAAC,CACF,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 \"./Surface.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { Surface as IUI_Surface } from \"@itwin/itwinui-react\";\nimport {\n  calculateToolbarOpacity,\n  getToolbarBackgroundColor,\n  useRefs,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react/internal\";\nimport { UiFramework } from \"../../UiFramework.js\";\nimport { ProcessDetector } from \"@itwin/core-bentley\";\nimport { useConditionalValue } from \"../../hooks/useConditionalValue.js\";\nimport { SyncUiEventId } from \"../../syncui/SyncUiEventDispatcher.js\";\n\ntype SurfaceProps = React.ComponentProps<typeof IUI_Surface> & {\n  orientation: \"horizontal\" | \"vertical\";\n};\n\n/** @internal */\nexport const Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  function Surface({ className, style, orientation, ...rest }, forwardedRed) {\n    const { ref, proximityScale } = useWidgetOpacityContext<HTMLDivElement>();\n    const refs = useRefs(ref, forwardedRed);\n\n    const calculateOpacity = useConditionalValue(() => {\n      if (ProcessDetector.isMobileBrowser) return false;\n      if (UiFramework.visibility.snapWidgetOpacity) return true;\n      return false;\n    }, [SyncUiEventId.ShowHideManagerSettingChange]);\n    const opacity = React.useMemo(() => {\n      if (!calculateOpacity) return undefined;\n      return calculateToolbarOpacity(proximityScale);\n    }, [proximityScale, calculateOpacity]);\n    const backgroundColor =\n      opacity === undefined ? undefined : getToolbarBackgroundColor(opacity);\n\n    return (\n      <IUI_Surface\n        {...rest}\n        style={{\n          backgroundColor,\n          ...style,\n        }}\n        className={classnames(\n          \"uifw-toolbar-group-surface\",\n          `uifw-${orientation}`,\n          className\n        )}\n        ref={refs}\n      />\n    );\n  }\n);\n"]}
+{"version":3,"file":"Surface.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Surface.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EACzB,OAAO,EACP,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAWtE,gBAAgB;AAChB,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,SAAS,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY;IACvE,MAAM,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,uBAAuB,EAAkB,CAAC;IAC1E,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IAExC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,GAAG,EAAE;QAChD,IAAI,eAAe,CAAC,eAAe;YAAE,OAAO,KAAK,CAAC;QAClD,IAAI,WAAW,CAAC,UAAU,CAAC,iBAAiB;YAAE,OAAO,IAAI,CAAC;QAC1D,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,gBAAgB;YAAE,OAAO,SAAS,CAAC;QACxC,OAAO,uBAAuB,CAAC,cAAc,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC;IACvC,MAAM,eAAe,GACnB,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC;IAEzE,OAAO,CACL,oBAAC,WAAW,OACN,IAAI,EACR,KAAK,EAAE;YACL,eAAe;YACf,GAAG,KAAK;SACT,EACD,SAAS,EAAE,UAAU,CACnB,4BAA4B,EAC5B,QAAQ,WAAW,EAAE,EACrB,SAAS,CACV,EACD,GAAG,EAAE,IAAI,GACT,CACH,CAAC;AACJ,CAAC,CACF,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 \"./Surface.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { Surface as IUI_Surface } from \"@itwin/itwinui-react\";\nimport {\n  calculateToolbarOpacity,\n  getToolbarBackgroundColor,\n  useRefs,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react/internal\";\nimport { UiFramework } from \"../../UiFramework.js\";\nimport { ProcessDetector } from \"@itwin/core-bentley\";\nimport { useConditionalValue } from \"../../hooks/useConditionalValue.js\";\nimport { SyncUiEventId } from \"../../syncui/SyncUiEventDispatcher.js\";\nimport type { ToolbarContext } from \"./Toolbar.js\";\n\ntype ToolbarContextProps = NonNullable<\n  React.ContextType<typeof ToolbarContext>\n>;\n\ninterface SurfaceProps extends React.ComponentProps<typeof IUI_Surface> {\n  orientation: ToolbarContextProps[\"orientation\"];\n}\n\n/** @internal */\nexport const Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  function Surface({ className, style, orientation, ...rest }, forwardedRed) {\n    const { ref, proximityScale } = useWidgetOpacityContext<HTMLDivElement>();\n    const refs = useRefs(ref, forwardedRed);\n\n    const calculateOpacity = useConditionalValue(() => {\n      if (ProcessDetector.isMobileBrowser) return false;\n      if (UiFramework.visibility.snapWidgetOpacity) return true;\n      return false;\n    }, [SyncUiEventId.ShowHideManagerSettingChange]);\n    const opacity = React.useMemo(() => {\n      if (!calculateOpacity) return undefined;\n      return calculateToolbarOpacity(proximityScale);\n    }, [proximityScale, calculateOpacity]);\n    const backgroundColor =\n      opacity === undefined ? undefined : getToolbarBackgroundColor(opacity);\n\n    return (\n      <IUI_Surface\n        {...rest}\n        style={{\n          backgroundColor,\n          ...style,\n        }}\n        className={classnames(\n          \"uifw-toolbar-group-surface\",\n          `uifw-${orientation}`,\n          className\n        )}\n        ref={refs}\n      />\n    );\n  }\n);\n"]}

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

@@ -3,10 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .uifw-toolbar-group-surface {
+  --_uifw-toolbar-border-color: var(--iui-color-border-foreground);
+
   display: flex;
   width: fit-content;
   height: fit-content;
-  border-color: var(--iui-color-border-foreground);
+  border-color: var(--_uifw-toolbar-border-color);
   transition: border-color var(--iui-duration-1) ease;
   // TODO: needed due to opacity on toolbar container (since pointer events are disabled for center content).
   pointer-events: all;
@@ -26,7 +28,7 @@
 
   &:hover,
   &:focus-within {
-    border-color: var(--iui-color-border-foreground-hover);
+    --_uifw-toolbar-border-color: var(--iui-color-border-foreground-hover);
   }
 
   &:empty {