@itwin/appui-react 5.7.0 → 5.9.0

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 {

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":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAS/D,gBAAgB;AAChB,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IACzE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IACvE,MAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEvD,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,CACxC,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;QACpB,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3C,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACzB,OAAO,GAAG,CAAC;IACb,CAAC,EACD,IAAI,GAAG,EAAE,CACV,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAuB,IAAI,GAAG,EAAE,CAAC,CAAC;IAC/D,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAE1D,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;QACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,OAAO;YAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;QAE7C,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAEpD,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa;YAAE,OAAO,WAAW,CAAC;QAEvC,OAAO;YACL,KAAK,EAAE,WAAW,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK;YAC9C,MAAM,EAAE,WAAW,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM;SAClD,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,OAAO;YAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;QAC7C,OAAO,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,CAAC,GAC9D,WAAW,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC;IAEvE,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;IAC9D,MAAM,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IACxD,OAAO,CACL,6BACE,SAAS,EAAE,UAAU,CACnB,wCAAwC,EACxC,QAAQ,WAAW,EAAE,EACrB,QAAQ,cAAc,EAAE,EACxB,SAAS,CACV,EACD,GAAG,EAAE,YAAY;QAEjB,oBAAC,OAAO,IAAC,WAAW,EAAE,WAAW,EAAE,GAAG,EAAE,YAAY,KAAM,KAAK;YAC5D,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;gBACrC,IAAI,CAAC,KAAK,CAAC,cAAc,CAA8B,KAAK,CAAC;oBAC3D,OAAO,KAAK,CAAC;gBACf,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC/B,GAAG,EAAE,CAAC,EAAkB,EAAE,EAAE;wBAC1B,IAAI,CAAC,EAAE,EAAE,CAAC;4BACR,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;4BAC9B,OAAO;wBACT,CAAC;wBACD,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACjC,CAAC;iBACF,CAAC,CAAC;YACL,CAAC,CAAC;YACD,cAAc,IAAI,CACjB,oBAAC,cAAc,IAAC,GAAG,EAAE,WAAW,IAC7B,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CACtB,CAClB,CACO,CACN,CACP,CAAC;AACJ,CAAC;AAED,gGAAgG;AAChG,SAAS,gBAAgB,CAAC,WAAoB;IAC5C,MAAM,YAAY,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IACjD,IAAI,CAAC,YAAY;QAAE,OAAO,SAAS,CAAC;IAEpC,wCAAwC;IACxC,IAAI,WAAW,CAAC,WAAW,CAAC;QAAE,OAAO,SAAS,CAAC;IAE/C,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS;QAAE,OAAO,SAAS,CAAC;IAEjC,OAAO,SAAS,CAAC,qBAAqB,EAAE,CAAC;AAC3C,CAAC;AAED,yDAAyD;AACzD,SAAS,cAAc,CAAC,WAAoB;IAC1C,MAAM,IAAI,GAAG,WAAW,CAAC,sBAAsB,CAAC;IAChD,IAAI,IAAI,EAAE,OAAO,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IAC7C,OAAO,IAAI,CAAC;AACd,CAAC;AAED,mEAAmE;AACnE,SAAS,WAAW,CAAC,WAAoB;IACvC,IAAI,EAAE,GAAG,WAAW,CAAC,kBAAkB,CAAC;IACxC,OAAO,EAAE,EAAE,CAAC;QACV,IAAI,EAAE,CAAC,OAAO,KAAK,QAAQ,IAAI,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;YAC/D,OAAO,KAAK,CAAC;QACf,CAAC;QACD,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC;IAC7B,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,4EAA4E;AAC5E,SAAS,YAAY,CAAC,WAAoB;IACxC,IAAI,EAAE,GAAG,WAAW,CAAC,kBAAkB,CAAC;IACxC,OAAO,EAAE,EAAE,CAAC;QACV,IAAI,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,oCAAoC,CAAC,EAAE,CAAC;YAChE,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC;IAC7B,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,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 \"./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;