@itwin/appui-react 5.8.0 → 5.9.0

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

@@ -9,10 +9,5 @@ interface ToolGroupProps extends CommonProps {
 }
 /** @internal */
 export declare function ToolGroup({ children, className, ...props }: ToolGroupProps): React.JSX.Element;
-export declare namespace ToolGroup {
-    var ActionItem: React.ForwardRefExoticComponent<import("./ActionItem.js").ActionItemProps & React.RefAttributes<HTMLButtonElement>>;
-    var GroupItem: React.ForwardRefExoticComponent<import("./GroupItem.js").GroupItemProps & React.RefAttributes<HTMLButtonElement>>;
-    var CustomItem: React.ForwardRefExoticComponent<import("./CustomItem.js").CustomItemProps & React.RefAttributes<HTMLButtonElement>>;
-}
 export {};
 //# sourceMappingURL=ToolGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolGroup.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/ToolGroup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWrD,UAAU,cAAe,SAAQ,WAAW;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,gBAAgB;AAChB,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAoE1E;yBApEe,SAAS"}
+{"version":3,"file":"ToolGroup.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/ToolGroup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AASrD,UAAU,cAAe,SAAQ,WAAW;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,gBAAgB;AAChB,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBA0E1E"}

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

@@ -8,20 +8,15 @@
 import "./ToolGroup.scss";
 import classnames from "classnames";
 import * as React from "react";
-import { ActionItem } from "./ActionItem.js";
-import { GroupItem } from "./GroupItem.js";
-import { CustomItem } from "./CustomItem.js";
 import { OverflowButton } from "./OverflowButton.js";
 import { useOverflow } from "./useOverflow.js";
 import { getChildKey } from "../../layout/tool-settings/Docked.js";
 import { ToolbarContext } from "./Toolbar.js";
 import { Surface } from "./Surface.js";
+import { useSafeContext } from "../../hooks/useSafeContext.js";
 /** @internal */
 export function ToolGroup({ children, className, ...props }) {
-    const context = React.useContext(ToolbarContext);
-    const expandsTo = context?.expandsTo ?? "bottom";
-    const panelAlignment = context?.panelAlignment ?? "start";
-    const orientation = getOrientation(expandsTo);
+    const { panelAlignment, orientation } = useSafeContext(ToolbarContext);
     const childrenArray = React.Children.toArray(children);
     const keyToChildMap = childrenArray.reduce((acc, child, index) => {
         const childKey = getChildKey(child, index);
@@ -35,7 +30,14 @@ export function ToolGroup({ children, className, ...props }) {
         const element = itemRefs.current.get(item);
         if (!element)
             return { width: 0, height: 0 };
-        return element.getBoundingClientRect();
+        const elementSize = element.getBoundingClientRect();
+        const separatorSize = getSeparatorSize(element);
+        if (!separatorSize)
+            return elementSize;
+        return {
+            width: elementSize.width + separatorSize.width,
+            height: elementSize.height + separatorSize.height,
+        };
     }, []);
     const getOverflowSize = React.useCallback(() => {
         const element = overflowRef.current;
@@ -64,17 +66,46 @@ export function ToolGroup({ children, className, ...props }) {
             }),
             renderOverflow && (React.createElement(OverflowButton, { ref: overflowRef }, overflown.map(([_, child]) => child))))));
 }
-ToolGroup.ActionItem = ActionItem;
-ToolGroup.GroupItem = GroupItem;
-ToolGroup.CustomItem = CustomItem;
-function getOrientation(expandsTo) {
-    switch (expandsTo) {
-        case "left":
-        case "right":
-            return "vertical";
-        case "top":
-        case "bottom":
-            return "horizontal";
+// First item in the group reserves space for the separator to correctly calculate the overflow.
+function getSeparatorSize(toolbarItem) {
+    const firstInGroup = isFirstInGroup(toolbarItem);
+    if (!firstInGroup)
+        return undefined;
+    // Last group does not have a separator.
+    if (isLastGroup(toolbarItem))
+        return undefined;
+    const separator = getSeparator(toolbarItem);
+    if (!separator)
+        return undefined;
+    return separator.getBoundingClientRect();
+}
+// Returns if the toolbar item is the first in its group.
+function isFirstInGroup(toolbarItem) {
+    const prev = toolbarItem.previousElementSibling;
+    if (prev?.tagName === "BUTTON")
+        return false;
+    return true;
+}
+// Returns if the toolbar item is in the last group of the toolbar.
+function isLastGroup(toolbarItem) {
+    let el = toolbarItem.nextElementSibling;
+    while (el) {
+        if (el.tagName === "BUTTON" && el.hasAttribute("data-item-id")) {
+            return false;
+        }
+        el = el.nextElementSibling;
+    }
+    return true;
+}
+// Returns the first separator element after the toolbar item, if it exists.
+function getSeparator(toolbarItem) {
+    let el = toolbarItem.nextElementSibling;
+    while (el) {
+        if (el.classList.contains("uifw-toolbar-newToolbars-separator")) {
+            return el;
+        }
+        el = el.nextElementSibling;
     }
+    return undefined;
 }
 //# sourceMappingURL=ToolGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolGroup.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/ToolGroup.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 \"./ToolGroup.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { ActionItem } from \"./ActionItem.js\";\nimport { GroupItem } from \"./GroupItem.js\";\nimport { CustomItem } from \"./CustomItem.js\";\nimport { OverflowButton } from \"./OverflowButton.js\";\nimport { useOverflow } from \"./useOverflow.js\";\nimport { getChildKey } from \"../../layout/tool-settings/Docked.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\nimport { Surface } from \"./Surface.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\ninterface ToolGroupProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\ntype Child = ReturnType<typeof React.Children.toArray>[0];\n\n/** @internal */\nexport function ToolGroup({ children, className, ...props }: ToolGroupProps) {\n  const context = React.useContext(ToolbarContext);\n  const expandsTo = context?.expandsTo ?? \"bottom\";\n  const panelAlignment = context?.panelAlignment ?? \"start\";\n  const orientation = getOrientation(expandsTo);\n  const childrenArray = React.Children.toArray(children);\n\n  const keyToChildMap = childrenArray.reduce<Map<string, Child>>(\n    (acc, child, index) => {\n      const childKey = getChildKey(child, index);\n      acc.set(childKey, child);\n      return acc;\n    },\n    new Map()\n  );\n  const childrenKeys = Array.from(keyToChildMap.keys());\n  const itemRefs = React.useRef<Map<string, Element>>(new Map());\n  const overflowRef = React.useRef<HTMLButtonElement>(null);\n\n  const getItemSize = React.useCallback((item: string) => {\n    const element = itemRefs.current.get(item);\n    if (!element) return { width: 0, height: 0 };\n    return element.getBoundingClientRect();\n  }, []);\n  const getOverflowSize = React.useCallback(() => {\n    const element = overflowRef.current;\n    if (!element) return { width: 0, height: 0 };\n    return element.getBoundingClientRect();\n  }, []);\n\n  const [containerRef, componentRef, visibleCount, renderOverflow] =\n    useOverflow(childrenKeys, orientation, getItemSize, getOverflowSize);\n\n  const keyToChildEntries = Array.from(keyToChildMap.entries());\n  const visibleChildren = keyToChildEntries.slice(0, visibleCount);\n  const overflown = keyToChildEntries.slice(visibleCount);\n  return (\n    <div\n      className={classnames(\n        \"uifw-toolbar-group-toolGroup_container\",\n        `uifw-${orientation}`,\n        `uifw-${panelAlignment}`,\n        className\n      )}\n      ref={containerRef}\n    >\n      <Surface orientation={orientation} ref={componentRef} {...props}>\n        {visibleChildren.map(([item, child]) => {\n          if (!React.isValidElement<{ ref: React.Ref<Element> }>(child))\n            return child;\n          return React.cloneElement(child, {\n            ref: (el: Element | null) => {\n              if (!el) {\n                itemRefs.current.delete(item);\n                return;\n              }\n              itemRefs.current.set(item, el);\n            },\n          });\n        })}\n        {renderOverflow && (\n          <OverflowButton ref={overflowRef}>\n            {overflown.map(([_, child]) => child)}\n          </OverflowButton>\n        )}\n      </Surface>\n    </div>\n  );\n}\n\nToolGroup.ActionItem = ActionItem;\nToolGroup.GroupItem = GroupItem;\nToolGroup.CustomItem = CustomItem;\n\ntype ToolbarContextProps = React.ContextType<typeof ToolbarContext>;\n\nfunction getOrientation(\n  expandsTo: NonNullable<ToolbarContextProps>[\"expandsTo\"]\n) {\n  switch (expandsTo) {\n    case \"left\":\n    case \"right\":\n      return \"vertical\";\n    case \"top\":\n    case \"bottom\":\n      return \"horizontal\";\n  }\n}\n"]}
+{"version":3,"file":"ToolGroup.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/ToolGroup.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 \"./ToolGroup.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { OverflowButton } from \"./OverflowButton.js\";\nimport { useOverflow } from \"./useOverflow.js\";\nimport { getChildKey } from \"../../layout/tool-settings/Docked.js\";\nimport { ToolbarContext } from \"./Toolbar.js\";\nimport { Surface } from \"./Surface.js\";\nimport { useSafeContext } from \"../../hooks/useSafeContext.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\ninterface ToolGroupProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\ntype Child = ReturnType<typeof React.Children.toArray>[0];\n\n/** @internal */\nexport function ToolGroup({ children, className, ...props }: ToolGroupProps) {\n  const { panelAlignment, orientation } = useSafeContext(ToolbarContext);\n  const childrenArray = React.Children.toArray(children);\n\n  const keyToChildMap = childrenArray.reduce<Map<string, Child>>(\n    (acc, child, index) => {\n      const childKey = getChildKey(child, index);\n      acc.set(childKey, child);\n      return acc;\n    },\n    new Map()\n  );\n  const childrenKeys = Array.from(keyToChildMap.keys());\n  const itemRefs = React.useRef<Map<string, Element>>(new Map());\n  const overflowRef = React.useRef<HTMLButtonElement>(null);\n\n  const getItemSize = React.useCallback((item: string) => {\n    const element = itemRefs.current.get(item);\n    if (!element) return { width: 0, height: 0 };\n\n    const elementSize = element.getBoundingClientRect();\n\n    const separatorSize = getSeparatorSize(element);\n    if (!separatorSize) return elementSize;\n\n    return {\n      width: elementSize.width + separatorSize.width,\n      height: elementSize.height + separatorSize.height,\n    };\n  }, []);\n  const getOverflowSize = React.useCallback(() => {\n    const element = overflowRef.current;\n    if (!element) return { width: 0, height: 0 };\n    return element.getBoundingClientRect();\n  }, []);\n\n  const [containerRef, componentRef, visibleCount, renderOverflow] =\n    useOverflow(childrenKeys, orientation, getItemSize, getOverflowSize);\n\n  const keyToChildEntries = Array.from(keyToChildMap.entries());\n  const visibleChildren = keyToChildEntries.slice(0, visibleCount);\n  const overflown = keyToChildEntries.slice(visibleCount);\n  return (\n    <div\n      className={classnames(\n        \"uifw-toolbar-group-toolGroup_container\",\n        `uifw-${orientation}`,\n        `uifw-${panelAlignment}`,\n        className\n      )}\n      ref={containerRef}\n    >\n      <Surface orientation={orientation} ref={componentRef} {...props}>\n        {visibleChildren.map(([item, child]) => {\n          if (!React.isValidElement<{ ref: React.Ref<Element> }>(child))\n            return child;\n          return React.cloneElement(child, {\n            ref: (el: Element | null) => {\n              if (!el) {\n                itemRefs.current.delete(item);\n                return;\n              }\n              itemRefs.current.set(item, el);\n            },\n          });\n        })}\n        {renderOverflow && (\n          <OverflowButton ref={overflowRef}>\n            {overflown.map(([_, child]) => child)}\n          </OverflowButton>\n        )}\n      </Surface>\n    </div>\n  );\n}\n\n// First item in the group reserves space for the separator to correctly calculate the overflow.\nfunction getSeparatorSize(toolbarItem: Element) {\n  const firstInGroup = isFirstInGroup(toolbarItem);\n  if (!firstInGroup) return undefined;\n\n  // Last group does not have a separator.\n  if (isLastGroup(toolbarItem)) return undefined;\n\n  const separator = getSeparator(toolbarItem);\n  if (!separator) return undefined;\n\n  return separator.getBoundingClientRect();\n}\n\n// Returns if the toolbar item is the first in its group.\nfunction isFirstInGroup(toolbarItem: Element) {\n  const prev = toolbarItem.previousElementSibling;\n  if (prev?.tagName === \"BUTTON\") return false;\n  return true;\n}\n\n// Returns if the toolbar item is in the last group of the toolbar.\nfunction isLastGroup(toolbarItem: Element) {\n  let el = toolbarItem.nextElementSibling;\n  while (el) {\n    if (el.tagName === \"BUTTON\" && el.hasAttribute(\"data-item-id\")) {\n      return false;\n    }\n    el = el.nextElementSibling;\n  }\n  return true;\n}\n\n// Returns the first separator element after the toolbar item, if it exists.\nfunction getSeparator(toolbarItem: Element) {\n  let el = toolbarItem.nextElementSibling;\n  while (el) {\n    if (el.classList.contains(\"uifw-toolbar-newToolbars-separator\")) {\n      return el;\n    }\n    el = el.nextElementSibling;\n  }\n  return undefined;\n}\n"]}

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

@@ -19,8 +19,13 @@ export declare function Toolbar({ items, expandsTo, panelAlignment, onItemExecut
 interface ToolbarContextProps extends Pick<Required<ToolbarProps>, "expandsTo" | "panelAlignment">, Pick<ToolbarProps, "onItemExecuted"> {
     popoverOpen: boolean;
     setPopoverOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    orientation: "horizontal" | "vertical";
 }
 /** @internal */
 export declare const ToolbarContext: React.Context<ToolbarContextProps | undefined>;
+/** @internal */
+export declare const ToolbarItemContext: React.Context<{
+    renderSeparator: boolean;
+} | undefined>;
 export {};
 //# sourceMappingURL=Toolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAOhE,OAAO,KAAK,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAErE,oDAAoD;AACpD,KAAK,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;AAEpE,UAAU,YAAa,SAAQ,oBAAoB;IACjD,4CAA4C;IAC5C,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,gJAAgJ;IAChJ,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAClC;AAED,gBAAgB;AAChB,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAoB,EACpB,cAAwB,EACxB,cAAc,GACf,EAAE,YAAY,qBA+Bd;AAED,UAAU,mBACR,SAAQ,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,CAAC,EAClE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC;IACtC,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC/D;AAED,gBAAgB;AAChB,eAAO,MAAM,cAAc,gDAEf,CAAC"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAOhE,OAAO,KAAK,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAKrE,oDAAoD;AACpD,KAAK,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;AAEpE,UAAU,YAAa,SAAQ,oBAAoB;IACjD,4CAA4C;IAC5C,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,gJAAgJ;IAChJ,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAClC;AAED,gBAAgB;AAChB,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAoB,EACpB,cAAwB,EACxB,cAAc,GACf,EAAE,YAAY,qBA0Cd;AA2BD,UAAU,mBACR,SAAQ,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,CAAC,EAClE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC;IACtC,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;CACxC;AAED,gBAAgB;AAChB,eAAO,MAAM,cAAc,gDAEf,CAAC;AAGb,gBAAgB;AAChB,eAAO,MAAM,kBAAkB;qBAER,OAAO;cAGlB,CAAC"}

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

@@ -8,30 +8,63 @@
 import * as React from "react";
 import { isToolbarActionItem, isToolbarCustomItem, isToolbarGroupItem, } from "../../toolbar/ToolbarItem.js";
 import { ToolGroup } from "./ToolGroup.js";
+import { ActionItem } from "./ActionItem.js";
+import { GroupItem } from "./GroupItem.js";
+import { CustomItem } from "./CustomItem.js";
 /** @internal */
 export function Toolbar({ items, expandsTo = "bottom", panelAlignment = "start", onItemExecuted, }) {
     const [popoverOpen, setPopoverOpen] = React.useState(false);
+    const orientation = getOrientation(expandsTo);
     return (React.createElement(ToolbarContext.Provider, { value: React.useMemo(() => ({
             expandsTo,
+            orientation,
             panelAlignment,
             popoverOpen,
             setPopoverOpen,
             onItemExecuted,
-        }), [expandsTo, panelAlignment, popoverOpen, setPopoverOpen, onItemExecuted]) },
-        React.createElement(ToolGroup, null, items.map((item) => {
-            if (isToolbarActionItem(item)) {
-                return React.createElement(ToolGroup.ActionItem, { key: item.id, item: item });
-            }
-            if (isToolbarGroupItem(item)) {
-                return React.createElement(ToolGroup.GroupItem, { key: item.id, item: item });
-            }
-            if (isToolbarCustomItem(item)) {
-                return React.createElement(ToolGroup.CustomItem, { key: item.id, item: item });
-            }
-            return null;
+        }), [
+            expandsTo,
+            orientation,
+            panelAlignment,
+            popoverOpen,
+            setPopoverOpen,
+            onItemExecuted,
+        ]) },
+        React.createElement(ToolGroup, null, items.map((item, index) => {
+            const nextItem = items.length > index + 1 ? items[index + 1] : undefined;
+            const renderSeparator = nextItem
+                ? item.groupPriority !== nextItem.groupPriority
+                : false;
+            return (React.createElement(ItemRenderer, { key: item.id, item: item, renderSeparator: renderSeparator }));
         }))));
 }
+const ItemRenderer = React.forwardRef(function ItemRenderer({ item, renderSeparator }, forwardedRef) {
+    let itemElement;
+    if (isToolbarActionItem(item)) {
+        itemElement = React.createElement(ActionItem, { ref: forwardedRef, item: item });
+    }
+    if (isToolbarGroupItem(item)) {
+        itemElement = React.createElement(GroupItem, { ref: forwardedRef, item: item });
+    }
+    if (isToolbarCustomItem(item)) {
+        itemElement = React.createElement(CustomItem, { ref: forwardedRef, item: item });
+    }
+    return (React.createElement(ToolbarItemContext.Provider, { value: { renderSeparator } }, itemElement));
+});
 /** @internal */
 export const ToolbarContext = React.createContext(undefined);
 ToolbarContext.displayName = "uifw:ToolbarContext";
+/** @internal */
+export const ToolbarItemContext = React.createContext(undefined);
+ToolbarContext.displayName = "uifw:ToolbarContext";
+function getOrientation(expandsTo) {
+    switch (expandsTo) {
+        case "left":
+        case "right":
+            return "vertical";
+        case "top":
+        case "bottom":
+            return "horizontal";
+    }
+}
 //# sourceMappingURL=Toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Toolbar.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAe3C,gBAAgB;AAChB,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,cAAc,GAAG,OAAO,EACxB,cAAc,GACD;IACb,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,OAAO,CACL,oBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE,KAAK,CAAC,OAAO,CAClB,GAAG,EAAE,CAAC,CAAC;YACL,SAAS;YACT,cAAc;YACd,WAAW;YACX,cAAc;YACd,cAAc;SACf,CAAC,EACF,CAAC,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,CAAC,CACzE;QAED,oBAAC,SAAS,QACP,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAClB,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,OAAO,oBAAC,SAAS,CAAC,UAAU,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;YAC5D,CAAC;YACD,IAAI,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC7B,OAAO,oBAAC,SAAS,CAAC,SAAS,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;YAC3D,CAAC;YACD,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,OAAO,oBAAC,SAAS,CAAC,UAAU,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;YAC5D,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CACQ,CACY,CAC3B,CAAC;AACJ,CAAC;AASD,gBAAgB;AAChB,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAE/C,SAAS,CAAC,CAAC;AACb,cAAc,CAAC,WAAW,GAAG,qBAAqB,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 { ToolbarItem } from \"../../toolbar/ToolbarItem.js\";\nimport {\n  isToolbarActionItem,\n  isToolbarCustomItem,\n  isToolbarGroupItem,\n} from \"../../toolbar/ToolbarItem.js\";\nimport { ToolGroup } from \"./ToolGroup.js\";\nimport type { ToolbarProps as OldToolbarProps } from \"../Toolbar.js\";\n\n/** These exist for backwards compatibility only. */\ntype ToolbarInternalProps = Pick<OldToolbarProps, \"onItemExecuted\">;\n\ninterface ToolbarProps extends ToolbarInternalProps {\n  /** Definitions for items of the toolbar. */\n  items: ToolbarItem[];\n  /** Describes direction to which the panels are expanded. Orientation of the toolbar is determined based on this prop. Defaults to `bottom`.  */\n  expandsTo?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /** Describes how panels are aligned. Defaults to `start`. */\n  panelAlignment?: \"start\" | \"end\";\n}\n\n/** @internal */\nexport function Toolbar({\n  items,\n  expandsTo = \"bottom\",\n  panelAlignment = \"start\",\n  onItemExecuted,\n}: ToolbarProps) {\n  const [popoverOpen, setPopoverOpen] = React.useState(false);\n  return (\n    <ToolbarContext.Provider\n      value={React.useMemo(\n        () => ({\n          expandsTo,\n          panelAlignment,\n          popoverOpen,\n          setPopoverOpen,\n          onItemExecuted,\n        }),\n        [expandsTo, panelAlignment, popoverOpen, setPopoverOpen, onItemExecuted]\n      )}\n    >\n      <ToolGroup>\n        {items.map((item) => {\n          if (isToolbarActionItem(item)) {\n            return <ToolGroup.ActionItem key={item.id} item={item} />;\n          }\n          if (isToolbarGroupItem(item)) {\n            return <ToolGroup.GroupItem key={item.id} item={item} />;\n          }\n          if (isToolbarCustomItem(item)) {\n            return <ToolGroup.CustomItem key={item.id} item={item} />;\n          }\n          return null;\n        })}\n      </ToolGroup>\n    </ToolbarContext.Provider>\n  );\n}\n\ninterface ToolbarContextProps\n  extends Pick<Required<ToolbarProps>, \"expandsTo\" | \"panelAlignment\">,\n    Pick<ToolbarProps, \"onItemExecuted\"> {\n  popoverOpen: boolean;\n  setPopoverOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\n/** @internal */\nexport const ToolbarContext = React.createContext<\n  ToolbarContextProps | undefined\n>(undefined);\nToolbarContext.displayName = \"uifw:ToolbarContext\";\n"]}
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/Toolbar.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 type { ToolbarItem } from \"../../toolbar/ToolbarItem.js\";\nimport {\n  isToolbarActionItem,\n  isToolbarCustomItem,\n  isToolbarGroupItem,\n} from \"../../toolbar/ToolbarItem.js\";\nimport { ToolGroup } from \"./ToolGroup.js\";\nimport type { ToolbarProps as OldToolbarProps } from \"../Toolbar.js\";\nimport { ActionItem } from \"./ActionItem.js\";\nimport { GroupItem } from \"./GroupItem.js\";\nimport { CustomItem } from \"./CustomItem.js\";\n\n/** These exist for backwards compatibility only. */\ntype ToolbarInternalProps = Pick<OldToolbarProps, \"onItemExecuted\">;\n\ninterface ToolbarProps extends ToolbarInternalProps {\n  /** Definitions for items of the toolbar. */\n  items: ToolbarItem[];\n  /** Describes direction to which the panels are expanded. Orientation of the toolbar is determined based on this prop. Defaults to `bottom`.  */\n  expandsTo?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /** Describes how panels are aligned. Defaults to `start`. */\n  panelAlignment?: \"start\" | \"end\";\n}\n\n/** @internal */\nexport function Toolbar({\n  items,\n  expandsTo = \"bottom\",\n  panelAlignment = \"start\",\n  onItemExecuted,\n}: ToolbarProps) {\n  const [popoverOpen, setPopoverOpen] = React.useState(false);\n  const orientation = getOrientation(expandsTo);\n  return (\n    <ToolbarContext.Provider\n      value={React.useMemo(\n        () => ({\n          expandsTo,\n          orientation,\n          panelAlignment,\n          popoverOpen,\n          setPopoverOpen,\n          onItemExecuted,\n        }),\n        [\n          expandsTo,\n          orientation,\n          panelAlignment,\n          popoverOpen,\n          setPopoverOpen,\n          onItemExecuted,\n        ]\n      )}\n    >\n      <ToolGroup>\n        {items.map((item, index) => {\n          const nextItem =\n            items.length > index + 1 ? items[index + 1] : undefined;\n          const renderSeparator = nextItem\n            ? item.groupPriority !== nextItem.groupPriority\n            : false;\n          return (\n            <ItemRenderer\n              key={item.id}\n              item={item}\n              renderSeparator={renderSeparator}\n            />\n          );\n        })}\n      </ToolGroup>\n    </ToolbarContext.Provider>\n  );\n}\n\ninterface ItemRendererProps {\n  item: ToolbarItem;\n  renderSeparator: boolean;\n}\n\nconst ItemRenderer = React.forwardRef<HTMLButtonElement, ItemRendererProps>(\n  function ItemRenderer({ item, renderSeparator }, forwardedRef) {\n    let itemElement: React.JSX.Element | undefined;\n    if (isToolbarActionItem(item)) {\n      itemElement = <ActionItem ref={forwardedRef} item={item} />;\n    }\n    if (isToolbarGroupItem(item)) {\n      itemElement = <GroupItem ref={forwardedRef} item={item} />;\n    }\n    if (isToolbarCustomItem(item)) {\n      itemElement = <CustomItem ref={forwardedRef} item={item} />;\n    }\n    return (\n      <ToolbarItemContext.Provider value={{ renderSeparator }}>\n        {itemElement}\n      </ToolbarItemContext.Provider>\n    );\n  }\n);\n\ninterface ToolbarContextProps\n  extends Pick<Required<ToolbarProps>, \"expandsTo\" | \"panelAlignment\">,\n    Pick<ToolbarProps, \"onItemExecuted\"> {\n  popoverOpen: boolean;\n  setPopoverOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  orientation: \"horizontal\" | \"vertical\";\n}\n\n/** @internal */\nexport const ToolbarContext = React.createContext<\n  ToolbarContextProps | undefined\n>(undefined);\nToolbarContext.displayName = \"uifw:ToolbarContext\";\n\n/** @internal */\nexport const ToolbarItemContext = React.createContext<\n  | {\n      renderSeparator: boolean;\n    }\n  | undefined\n>(undefined);\nToolbarContext.displayName = \"uifw:ToolbarContext\";\n\nfunction getOrientation(expandsTo: ToolbarContextProps[\"expandsTo\"]) {\n  switch (expandsTo) {\n    case \"left\":\n    case \"right\":\n      return \"vertical\";\n    case \"top\":\n    case \"bottom\":\n      return \"horizontal\";\n  }\n}\n"]}

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

@@ -43,12 +43,12 @@ export const useOverflow = (allItems, orientation, getItemSize, getOverflowSize)
             setVisible(itemSizes.length);
             return;
         }
-        let totalSize = overflowSize;
-        if (totalSize >= containerSize) {
+        if (overflowSize >= containerSize) {
             // Render only overflow.
             setVisible(0);
             return;
         }
+        let totalSize = overflowSize;
         let newVisible = 0;
         for (const size of itemSizes) {
             totalSize += size;

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    let totalSize = overflowSize;\n    if (totalSize >= containerSize) {\n      // Render only overflow.\n      setVisible(0);\n      return;\n    }\n\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    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"]}

package/lib/appui-react/widget-panels/useWidgetDirection.d.ts

@@ -3,7 +3,7 @@
  */
 /** Returns widget direction.
  * I.e. "horizontal" when widget is in bottom/top stage panel.
- * @alpha
+ * @public
  */
 export declare function useWidgetDirection(): "horizontal" | "vertical";
 //# sourceMappingURL=useWidgetDirection.d.ts.map

package/lib/appui-react/widget-panels/useWidgetDirection.js

@@ -13,7 +13,7 @@ import { isHorizontalPanelSide } from "../layout/widget-panels/Panel.js";
 import { TabIdContext } from "../layout/widget/ContentRenderer.js";
 /** Returns widget direction.
  * I.e. "horizontal" when widget is in bottom/top stage panel.
- * @alpha
+ * @public
  */
 export function useWidgetDirection() {
     const tabId = React.useContext(TabIdContext);

package/lib/appui-react/widget-panels/useWidgetDirection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWidgetDirection.js","sourceRoot":"","sources":["../../../src/appui-react/widget-panels/useWidgetDirection.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChB,OAAO,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACjD,IACE,WAAW;YACX,MAAM,IAAI,WAAW;YACrB,qBAAqB,CAAC,WAAW,CAAC,IAAI,CAAC,EACvC,CAAC;YACD,OAAO,YAAY,CAAC;QACtB,CAAC;QACD,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC,CAAC;AACL,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 Widget\n */\n\nimport { assert } from \"@itwin/core-bentley\";\nimport * as React from \"react\";\nimport { useLayout } from \"../layout/base/LayoutStore.js\";\nimport { getTabLocation } from \"../layout/state/TabLocation.js\";\nimport { isHorizontalPanelSide } from \"../layout/widget-panels/Panel.js\";\nimport { TabIdContext } from \"../layout/widget/ContentRenderer.js\";\n\n/** Returns widget direction.\n * I.e. \"horizontal\" when widget is in bottom/top stage panel.\n * @alpha\n */\nexport function useWidgetDirection(): \"horizontal\" | \"vertical\" {\n  const tabId = React.useContext(TabIdContext);\n  assert(!!tabId);\n  return useLayout((state) => {\n    const tabLocation = getTabLocation(state, tabId);\n    if (\n      tabLocation &&\n      \"side\" in tabLocation &&\n      isHorizontalPanelSide(tabLocation.side)\n    ) {\n      return \"horizontal\";\n    }\n    return \"vertical\";\n  });\n}\n"]}
+{"version":3,"file":"useWidgetDirection.js","sourceRoot":"","sources":["../../../src/appui-react/widget-panels/useWidgetDirection.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChB,OAAO,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACjD,IACE,WAAW;YACX,MAAM,IAAI,WAAW;YACrB,qBAAqB,CAAC,WAAW,CAAC,IAAI,CAAC,EACvC,CAAC;YACD,OAAO,YAAY,CAAC;QACtB,CAAC;QACD,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC,CAAC;AACL,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 Widget\n */\n\nimport { assert } from \"@itwin/core-bentley\";\nimport * as React from \"react\";\nimport { useLayout } from \"../layout/base/LayoutStore.js\";\nimport { getTabLocation } from \"../layout/state/TabLocation.js\";\nimport { isHorizontalPanelSide } from \"../layout/widget-panels/Panel.js\";\nimport { TabIdContext } from \"../layout/widget/ContentRenderer.js\";\n\n/** Returns widget direction.\n * I.e. \"horizontal\" when widget is in bottom/top stage panel.\n * @public\n */\nexport function useWidgetDirection(): \"horizontal\" | \"vertical\" {\n  const tabId = React.useContext(TabIdContext);\n  assert(!!tabId);\n  return useLayout((state) => {\n    const tabLocation = getTabLocation(state, tabId);\n    if (\n      tabLocation &&\n      \"side\" in tabLocation &&\n      isHorizontalPanelSide(tabLocation.side)\n    ) {\n      return \"horizontal\";\n    }\n    return \"vertical\";\n  });\n}\n"]}

package/lib/appui-react/widgets/useWidget.d.ts

@@ -1,8 +1,12 @@
+/** @packageDocumentation
+ * @module Widget
+ */
 import type { WidgetState } from "./WidgetState.js";
 /** Hook that returns information about the Widget in the current context.
+ * @note This hook must be used within a widget.
  * @returns object that contains the WidgetLocation, WidgetState, and
  * the ability to set the state of the widget.
- * @alpha
+ * @public
  */
 export declare function useWidget(): {
     /** State of the Widget */

package/lib/appui-react/widgets/useWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWidget.d.ts","sourceRoot":"","sources":["../../../src/appui-react/widgets/useWidget.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD;;;;GAIG;AACH,wBAAgB,SAAS;IA0CrB,0BAA0B;;IAE1B,sEAAsE;;IAEtE;;OAEG;4BAbW,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC;EAgBxD"}
+{"version":3,"file":"useWidget.d.ts","sourceRoot":"","sources":["../../../src/appui-react/widgets/useWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAeH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD;;;;;GAKG;AACH,wBAAgB,SAAS;IA0CrB,0BAA0B;;IAE1B,sEAAsE;;IAEtE;;OAEG;4BAbW,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC;EAgBxD"}

package/lib/appui-react/widgets/useWidget.js

@@ -2,6 +2,9 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
 import { assert } from "@itwin/core-bentley";
 import * as React from "react";
 import { useActiveFrontstageDef } from "../frontstage/FrontstageDef.js";
@@ -10,9 +13,10 @@ import { getTabLocation, isFloatingTabLocation, isPanelTabLocation, isPopoutTabL
 import { TabIdContext } from "../layout/widget/ContentRenderer.js";
 import { useWidgetDef } from "../widget-panels/Content.js";
 /** Hook that returns information about the Widget in the current context.
+ * @note This hook must be used within a widget.
  * @returns object that contains the WidgetLocation, WidgetState, and
  * the ability to set the state of the widget.
- * @alpha
+ * @public
  */
 export function useWidget() {
     const tabId = React.useContext(TabIdContext);

package/lib/appui-react/widgets/useWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWidget.js","sourceRoot":"","sources":["../../../src/appui-react/widgets/useWidget.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D;;;;GAIG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAEhB,MAAM,UAAU,GAAG,sBAAsB,EAAE,CAAC;IAE5C,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAErB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEpB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAExD,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,yBAAyB,CAAC,qCAAqC,CAAC,WAAW,CAChF,GAAG,EAAE;YACH,IAAI,SAAS;gBAAE,OAAO,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAClD,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,yBAAyB,CAAC,qCAAqC,CAAC,WAAW,CAChF,GAAG,EAAE;YACH,iBAAiB,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;QACrD,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,WAAoD,EAAE,EAAE;QACvD,SAAS,EAAE,cAAc,CAAC,WAA0B,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO;QACL,0BAA0B;QAC1B,KAAK;QACL,sEAAsE;QACtE,cAAc;QACd;;WAEG;QACH,QAAQ,EAAE,cAAc;KACzB,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,aAAqB,EAAE,UAAyB;IACpE,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACnC,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IAE5E,IAAI,WAAW,EAAE,CAAC;QAChB,IAAI,qBAAqB,CAAC,WAAW,CAAC,EAAE,CAAC;YACvC,OAAO,UAAU,CAAC;QACpB,CAAC;QAED,IAAI,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;YACrC,OAAO,QAAQ,CAAC;QAClB,CAAC;QAED,IAAI,kBAAkB,CAAC,WAAW,CAAC,EAAE,CAAC;YACpC,OAAO,QAAQ,CAAC;QAClB,CAAC;IACH,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,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\nimport { assert } from \"@itwin/core-bentley\";\nimport * as React from \"react\";\nimport type { FrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport { InternalFrontstageManager } from \"../frontstage/InternalFrontstageManager.js\";\nimport {\n  getTabLocation,\n  isFloatingTabLocation,\n  isPanelTabLocation,\n  isPopoutTabLocation,\n} from \"../layout/state/TabLocation.js\";\nimport { TabIdContext } from \"../layout/widget/ContentRenderer.js\";\nimport { useWidgetDef } from \"../widget-panels/Content.js\";\nimport type { WidgetState } from \"./WidgetState.js\";\n\n/** Hook that returns information about the Widget in the current context.\n * @returns object that contains the WidgetLocation, WidgetState, and\n * the ability to set the state of the widget.\n * @alpha\n */\nexport function useWidget() {\n  const tabId = React.useContext(TabIdContext);\n  assert(!!tabId);\n\n  const frontstage = useActiveFrontstageDef();\n\n  assert(!!frontstage);\n\n  const widgetDef = useWidgetDef();\n\n  assert(!!widgetDef);\n\n  const [widgetLocation, setWidgetLocation] = React.useState<\n    \"docked\" | \"floating\" | \"popout\"\n  >(findLocation(tabId, frontstage));\n\n  const [state, setState] = React.useState(widgetDef.state);\n\n  React.useEffect(() => {\n    return InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(\n      () => {\n        if (widgetDef) return setState(widgetDef.state);\n      }\n    );\n  }, [frontstage, widgetDef]);\n\n  React.useEffect(() => {\n    return InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(\n      () => {\n        setWidgetLocation(findLocation(tabId, frontstage));\n      }\n    );\n  }, [frontstage, tabId]);\n\n  const setWidgetState = React.useCallback(\n    (widgetState: Omit<WidgetState, WidgetState.Floating>) => {\n      widgetDef?.setWidgetState(widgetState as WidgetState);\n    },\n    [widgetDef]\n  );\n\n  return {\n    /** State of the Widget */\n    state,\n    /** Where the widget is located (\"docked\" | \"popout\" | \"floating\"). */\n    widgetLocation,\n    /** Set widget to different state\n     * @param WidgetState that you want to set the widget to.\n     */\n    setState: setWidgetState,\n  };\n}\n\nfunction findLocation(locationTabId: string, frontstage: FrontstageDef) {\n  assert(!!frontstage.nineZoneState);\n  const tabLocation = getTabLocation(frontstage.nineZoneState, locationTabId);\n\n  if (tabLocation) {\n    if (isFloatingTabLocation(tabLocation)) {\n      return \"floating\";\n    }\n\n    if (isPopoutTabLocation(tabLocation)) {\n      return \"popout\";\n    }\n\n    if (isPanelTabLocation(tabLocation)) {\n      return \"docked\";\n    }\n  }\n\n  return \"floating\";\n}\n"]}
+{"version":3,"file":"useWidget.js","sourceRoot":"","sources":["../../../src/appui-react/widgets/useWidget.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D;;;;;GAKG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAEhB,MAAM,UAAU,GAAG,sBAAsB,EAAE,CAAC;IAE5C,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAErB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEpB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAExD,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,yBAAyB,CAAC,qCAAqC,CAAC,WAAW,CAChF,GAAG,EAAE;YACH,IAAI,SAAS;gBAAE,OAAO,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAClD,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,yBAAyB,CAAC,qCAAqC,CAAC,WAAW,CAChF,GAAG,EAAE;YACH,iBAAiB,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;QACrD,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,WAAoD,EAAE,EAAE;QACvD,SAAS,EAAE,cAAc,CAAC,WAA0B,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO;QACL,0BAA0B;QAC1B,KAAK;QACL,sEAAsE;QACtE,cAAc;QACd;;WAEG;QACH,QAAQ,EAAE,cAAc;KACzB,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,aAAqB,EAAE,UAAyB;IACpE,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACnC,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IAE5E,IAAI,WAAW,EAAE,CAAC;QAChB,IAAI,qBAAqB,CAAC,WAAW,CAAC,EAAE,CAAC;YACvC,OAAO,UAAU,CAAC;QACpB,CAAC;QAED,IAAI,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;YACrC,OAAO,QAAQ,CAAC;QAClB,CAAC;QAED,IAAI,kBAAkB,CAAC,WAAW,CAAC,EAAE,CAAC;YACpC,OAAO,QAAQ,CAAC;QAClB,CAAC;IACH,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,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 Widget\n */\n\nimport { assert } from \"@itwin/core-bentley\";\nimport * as React from \"react\";\nimport type { FrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport { InternalFrontstageManager } from \"../frontstage/InternalFrontstageManager.js\";\nimport {\n  getTabLocation,\n  isFloatingTabLocation,\n  isPanelTabLocation,\n  isPopoutTabLocation,\n} from \"../layout/state/TabLocation.js\";\nimport { TabIdContext } from \"../layout/widget/ContentRenderer.js\";\nimport { useWidgetDef } from \"../widget-panels/Content.js\";\nimport type { WidgetState } from \"./WidgetState.js\";\n\n/** Hook that returns information about the Widget in the current context.\n * @note This hook must be used within a widget.\n * @returns object that contains the WidgetLocation, WidgetState, and\n * the ability to set the state of the widget.\n * @public\n */\nexport function useWidget() {\n  const tabId = React.useContext(TabIdContext);\n  assert(!!tabId);\n\n  const frontstage = useActiveFrontstageDef();\n\n  assert(!!frontstage);\n\n  const widgetDef = useWidgetDef();\n\n  assert(!!widgetDef);\n\n  const [widgetLocation, setWidgetLocation] = React.useState<\n    \"docked\" | \"floating\" | \"popout\"\n  >(findLocation(tabId, frontstage));\n\n  const [state, setState] = React.useState(widgetDef.state);\n\n  React.useEffect(() => {\n    return InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(\n      () => {\n        if (widgetDef) return setState(widgetDef.state);\n      }\n    );\n  }, [frontstage, widgetDef]);\n\n  React.useEffect(() => {\n    return InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(\n      () => {\n        setWidgetLocation(findLocation(tabId, frontstage));\n      }\n    );\n  }, [frontstage, tabId]);\n\n  const setWidgetState = React.useCallback(\n    (widgetState: Omit<WidgetState, WidgetState.Floating>) => {\n      widgetDef?.setWidgetState(widgetState as WidgetState);\n    },\n    [widgetDef]\n  );\n\n  return {\n    /** State of the Widget */\n    state,\n    /** Where the widget is located (\"docked\" | \"popout\" | \"floating\"). */\n    widgetLocation,\n    /** Set widget to different state\n     * @param WidgetState that you want to set the widget to.\n     */\n    setState: setWidgetState,\n  };\n}\n\nfunction findLocation(locationTabId: string, frontstage: FrontstageDef) {\n  assert(!!frontstage.nineZoneState);\n  const tabLocation = getTabLocation(frontstage.nineZoneState, locationTabId);\n\n  if (tabLocation) {\n    if (isFloatingTabLocation(tabLocation)) {\n      return \"floating\";\n    }\n\n    if (isPopoutTabLocation(tabLocation)) {\n      return \"popout\";\n    }\n\n    if (isPanelTabLocation(tabLocation)) {\n      return \"docked\";\n    }\n  }\n\n  return \"floating\";\n}\n"]}

package/lib/cjs/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/cjs/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 {

package/lib/esm/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/esm/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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "description": "A react component library for AppUI framework",
   "type": "module",
   "types": "./lib/appui-react.d.ts",
@@ -45,9 +45,9 @@
     "react-dom": "^18.0.0",
     "react-redux": "^7.2.2 || ^8.0.0 || ^9.0.0",
     "redux": "^4.1.0 || ^5.0.0",
-    "@itwin/components-react": "5.8.0",
-    "@itwin/core-react": "5.8.0",
-    "@itwin/imodel-components-react": "5.8.0"
+    "@itwin/components-react": "5.9.0",
+    "@itwin/core-react": "5.9.0",
+    "@itwin/imodel-components-react": "5.9.0"
   },
   "devDependencies": {
     "@itwin/appui-abstract": "rc",
@@ -60,7 +60,7 @@
     "@itwin/core-quantity": "rc",
     "@itwin/ecschema-metadata": "rc",
     "@itwin/eslint-plugin": "5.1.0",
-    "@itwin/itwinui-react": "^3.17.0",
+    "@itwin/itwinui-react": "^3.18.3",
     "@itwin/webgl-compatibility": "rc",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
@@ -91,9 +91,9 @@
     "typescript": "~5.6.2",
     "upath": "^2.0.1",
     "vitest": "^3.0.6",
-    "@itwin/core-react": "5.8.0",
-    "@itwin/components-react": "5.8.0",
-    "@itwin/imodel-components-react": "5.8.0"
+    "@itwin/core-react": "5.9.0",
+    "@itwin/components-react": "5.9.0",
+    "@itwin/imodel-components-react": "5.9.0"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.8.0",