@itwin/appui-react 4.0.0-dev.3 → 4.0.0-dev.6

package/lib/esm/appui-react/toolbar/PopupButton.js

@@ -0,0 +1,150 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Item
+ */
+import "./PopupButton.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ConditionalBooleanValue, SpecialKey } from "@itwin/appui-abstract";
+import { BadgeUtilities, Icon, withOnOutsideClick } from "@itwin/core-react";
+import { ExpandableItem, Item } from "@itwin/appui-layout-react";
+import { FrontstageManager } from "../frontstage/FrontstageManager";
+import { KeyboardShortcutManager } from "../keyboardshortcut/KeyboardShortcut";
+import { SyncUiEventDispatcher } from "../syncui/SyncUiEventDispatcher";
+import { UiFramework } from "../UiFramework";
+import { PropsHelper } from "../utils/PropsHelper";
+import { ToolbarDragInteractionContext } from "./DragInteraction";
+/* eslint-disable deprecation/deprecation */
+// cSpell:ignore popupbutton
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const DivWithOnOutsideClick = withOnOutsideClick((props) => (React.createElement("div", { ...props })), undefined, true);
+const isFunction = (node) => {
+    if (typeof node === "function")
+        return true;
+    return false;
+};
+/**
+ * Used to provide custom popup button in toolbar.
+ * @public
+ * @deprecated in 2.x. Use PopupItem in ToolbarWithOverflow or popupPanelNode in CustomItemDef
+ */
+export class PopupButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this._label = "";
+        this._componentUnmounting = false;
+        this._closeOnPanelOpened = true;
+        this._ref = React.createRef();
+        this._isMounted = false;
+        /** Minimizes the expandable component. */
+        this.minimize = () => {
+            if (this._isMounted)
+                this.setState({
+                    isPressed: false,
+                });
+        };
+        this._handleSyncUiEvent = (args) => {
+            // istanbul ignore if
+            if (this._componentUnmounting)
+                return;
+            let refreshState = false;
+            let newState = { ...this.state };
+            // istanbul ignore else
+            if (this.props.stateSyncIds && this.props.stateSyncIds.length > 0) // eslint-disable-line deprecation/deprecation
+                refreshState = this.props.stateSyncIds.some((value) => args.eventIds.has(value.toLowerCase())); // eslint-disable-line deprecation/deprecation
+            // istanbul ignore else
+            if (refreshState) {
+                // istanbul ignore else
+                if (this.props.stateFunc) // eslint-disable-line deprecation/deprecation
+                    newState = this.props.stateFunc(newState); // eslint-disable-line deprecation/deprecation
+                // istanbul ignore next
+                if ((this.state.isActive !== newState.isActive) || (this.state.isEnabled !== newState.isEnabled) || (this.state.isVisible !== newState.isVisible)) {
+                    if (this._isMounted)
+                        this.setState({ isActive: newState.isActive, isEnabled: newState.isEnabled, isVisible: newState.isVisible });
+                }
+            }
+        };
+        this._handleToolPanelOpenedEvent = () => {
+            if (!this._closeOnPanelOpened)
+                return;
+            this.minimize();
+        };
+        this._handleKeyDown = (e) => {
+            // istanbul ignore next
+            if (e.key === SpecialKey.Escape) {
+                this.minimize();
+                KeyboardShortcutManager.setFocusToHome();
+            }
+        };
+        this._handleClick = () => {
+            // istanbul ignore else
+            if (this._isMounted)
+                this.setState((prevState) => {
+                    const isPressed = !prevState.isPressed;
+                    return {
+                        isPressed,
+                    };
+                }, () => {
+                    const expand = !!this.state.isPressed;
+                    this._closeOnPanelOpened = false;
+                    expand && FrontstageManager.onToolPanelOpenedEvent.emit();
+                    this._closeOnPanelOpened = true;
+                    this.props.onExpanded && this.props.onExpanded(expand);
+                });
+        };
+        this._handleOutsideClick = (e) => {
+            this._ref.current && (e.target instanceof Node) && !this._ref.current.contains(e.target) && this.minimize();
+        };
+        if (props.label)
+            this._label = props.label;
+        // istanbul ignore else
+        else if (props.labelKey)
+            this._label = UiFramework.localization.getLocalizedString(props.labelKey);
+        this.state = {
+            isVisible: undefined !== props.isVisible ? props.isVisible : true,
+            isEnabled: undefined !== props.isEnabled ? props.isEnabled : true,
+            isActive: undefined !== props.isActive ? props.isActive : false,
+            isPressed: undefined !== props.isPressed ? props.isPressed : false,
+        };
+    }
+    get label() {
+        return PropsHelper.getStringFromSpec(this._label);
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        SyncUiEventDispatcher.onSyncUiEvent.addListener(this._handleSyncUiEvent);
+        FrontstageManager.onToolPanelOpenedEvent.addListener(this._handleToolPanelOpenedEvent);
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+        this._componentUnmounting = true;
+        SyncUiEventDispatcher.onSyncUiEvent.removeListener(this._handleSyncUiEvent);
+        FrontstageManager.onToolPanelOpenedEvent.addListener(this._handleToolPanelOpenedEvent);
+    }
+    /** Renders PopupButton */
+    render() {
+        if (!this.state.isVisible)
+            return null;
+        const icon = React.createElement(Icon, { iconSpec: this.props.iconSpec });
+        const badge = BadgeUtilities.getComponentForBadgeType(this.props.badgeType);
+        const { isDisabled, ...otherProps } = this.props;
+        return (React.createElement(ToolbarDragInteractionContext.Consumer, null, (isDragEnabled) => {
+            return (React.createElement(ExpandableItem, { ...otherProps, isDisabled: ConditionalBooleanValue.getValue(isDisabled), hideIndicator: isDragEnabled, panel: this.getExpandedContent() },
+                React.createElement("div", { ref: this._ref },
+                    React.createElement(Item, { badge: badge, icon: icon, onKeyDown: this._handleKeyDown, onClick: this._handleClick, onSizeKnown: this.props.onSizeKnown, title: this.label }))));
+        }));
+    }
+    /** Returns expanded content panel */
+    getExpandedContent() {
+        if (!this.state.isPressed)
+            return undefined;
+        const classNames = classnames("nz-toolbar-item-expandable-group-panel", this.props.noPadding && "uifw-popupbutton-noPadding");
+        return (React.createElement(DivWithOnOutsideClick, { className: classNames, onOutsideClick: this._handleOutsideClick }, isFunction(this.props.children) ? this.props.children({
+            closePanel: this.minimize,
+        }) : this.props.children));
+    }
+}
+//# sourceMappingURL=PopupButton.js.map

package/lib/esm/appui-react/toolbar/PopupButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupButton.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/PopupButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Item\r\n */\r\n\r\nimport \"./PopupButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ConditionalBooleanValue, ConditionalStringValue, SpecialKey, StringGetter } from \"@itwin/appui-abstract\";\r\nimport { BadgeUtilities, CommonProps, Icon, SizeProps, withOnOutsideClick } from \"@itwin/core-react\";\r\nimport { ExpandableItem, Item } from \"@itwin/appui-layout-react\";\r\nimport { FrontstageManager } from \"../frontstage/FrontstageManager\";\r\nimport { KeyboardShortcutManager } from \"../keyboardshortcut/KeyboardShortcut\";\r\nimport { BaseItemState } from \"../shared/ItemDefBase\";\r\nimport { ItemProps } from \"../shared/ItemProps\";\r\nimport { SyncUiEventArgs, SyncUiEventDispatcher } from \"../syncui/SyncUiEventDispatcher\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { PropsHelper } from \"../utils/PropsHelper\";\r\nimport { ToolbarDragInteractionContext } from \"./DragInteraction\";\r\n\r\n/* eslint-disable deprecation/deprecation */\r\n\r\n// cSpell:ignore popupbutton\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nconst DivWithOnOutsideClick = withOnOutsideClick((props: React.HTMLProps<HTMLDivElement>) => (<div {...props} />), undefined, true);\r\n\r\n/** Arguments of [[PopupButtonChildrenRenderProp]].\r\n * @public\r\n * @deprecated in 2.x. Use PopupItem in ToolbarWithOverflow or popupPanelNode in CustomItemDef\r\n */\r\nexport interface PopupButtonChildrenRenderPropArgs {\r\n  closePanel: () => void;\r\n}\r\n\r\n/** Type of [[PopupButtonProps.children]] when used as render prop.\r\n * @public\r\n * @deprecated in 2.x. Use PopupItem in ToolbarWithOverflow or popupPanelNode in CustomItemDef\r\n */\r\nexport type PopupButtonChildrenRenderProp = (args: PopupButtonChildrenRenderPropArgs) => React.ReactNode;\r\n\r\n/** Properties for the [[PopupButton]] React component\r\n * @public\r\n * @deprecated in 2.x. Use PopupItem in ToolbarWithOverflow or popupPanelNode in CustomItemDef\r\n */\r\nexport interface PopupButtonProps extends ItemProps, CommonProps {\r\n  children?: React.ReactNode | PopupButtonChildrenRenderProp;\r\n  onExpanded?: (expand: boolean) => void;\r\n  onSizeKnown?: (size: SizeProps) => void;\r\n  noPadding?: boolean;\r\n}\r\n\r\nconst isFunction = <T extends (...args: any) => any>(node: React.ReactNode): node is T => {\r\n  if (typeof node === \"function\")\r\n    return true;\r\n  return false;\r\n};\r\n\r\n/**\r\n * Used to provide custom popup button in toolbar.\r\n * @public\r\n * @deprecated in 2.x. Use PopupItem in ToolbarWithOverflow or popupPanelNode in CustomItemDef\r\n */\r\nexport class PopupButton extends React.Component<PopupButtonProps, BaseItemState> {\r\n  private _label: string | StringGetter | ConditionalStringValue = \"\";\r\n  private _componentUnmounting = false;\r\n  private _closeOnPanelOpened = true;\r\n  private _ref = React.createRef<HTMLDivElement>();\r\n  private _isMounted = false;\r\n\r\n  constructor(props: PopupButtonProps) {\r\n    super(props);\r\n\r\n    if (props.label)\r\n      this._label = props.label;\r\n    // istanbul ignore else\r\n    else if (props.labelKey)\r\n      this._label = UiFramework.localization.getLocalizedString(props.labelKey);\r\n\r\n    this.state = {\r\n      isVisible: undefined !== props.isVisible ? props.isVisible : true, // eslint-disable-line deprecation/deprecation\r\n      isEnabled: undefined !== props.isEnabled ? props.isEnabled : true, // eslint-disable-line deprecation/deprecation\r\n      isActive: undefined !== props.isActive ? props.isActive : false,\r\n      isPressed: undefined !== props.isPressed ? props.isPressed : false,\r\n    };\r\n  }\r\n\r\n  public get label(): string {\r\n    return PropsHelper.getStringFromSpec(this._label);\r\n  }\r\n\r\n  /** Minimizes the expandable component. */\r\n  public minimize = () => {\r\n    if (this._isMounted)\r\n      this.setState({\r\n        isPressed: false,\r\n      });\r\n  };\r\n\r\n  private _handleSyncUiEvent = (args: SyncUiEventArgs): void => {\r\n    // istanbul ignore if\r\n    if (this._componentUnmounting) return;\r\n\r\n    let refreshState = false;\r\n    let newState: BaseItemState = { ...this.state };\r\n\r\n    // istanbul ignore else\r\n    if (this.props.stateSyncIds && this.props.stateSyncIds.length > 0) // eslint-disable-line deprecation/deprecation\r\n      refreshState = this.props.stateSyncIds.some((value: string): boolean => args.eventIds.has(value.toLowerCase())); // eslint-disable-line deprecation/deprecation\r\n\r\n    // istanbul ignore else\r\n    if (refreshState) {\r\n      // istanbul ignore else\r\n      if (this.props.stateFunc) // eslint-disable-line deprecation/deprecation\r\n        newState = this.props.stateFunc(newState); // eslint-disable-line deprecation/deprecation\r\n      // istanbul ignore next\r\n      if ((this.state.isActive !== newState.isActive) || (this.state.isEnabled !== newState.isEnabled) || (this.state.isVisible !== newState.isVisible)) {\r\n        if (this._isMounted)\r\n          this.setState({ isActive: newState.isActive, isEnabled: newState.isEnabled, isVisible: newState.isVisible });\r\n      }\r\n    }\r\n  };\r\n\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    SyncUiEventDispatcher.onSyncUiEvent.addListener(this._handleSyncUiEvent);\r\n    FrontstageManager.onToolPanelOpenedEvent.addListener(this._handleToolPanelOpenedEvent);\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n    this._componentUnmounting = true;\r\n    SyncUiEventDispatcher.onSyncUiEvent.removeListener(this._handleSyncUiEvent);\r\n    FrontstageManager.onToolPanelOpenedEvent.addListener(this._handleToolPanelOpenedEvent);\r\n  }\r\n\r\n  private _handleToolPanelOpenedEvent = () => {\r\n    if (!this._closeOnPanelOpened)\r\n      return;\r\n    this.minimize();\r\n  };\r\n\r\n  private _handleKeyDown = (e: React.KeyboardEvent): void => {\r\n    // istanbul ignore next\r\n    if (e.key === SpecialKey.Escape) {\r\n      this.minimize();\r\n      KeyboardShortcutManager.setFocusToHome();\r\n    }\r\n  };\r\n\r\n  /** Renders PopupButton */\r\n  public override render() {\r\n    if (!this.state.isVisible)\r\n      return null;\r\n\r\n    const icon = <Icon iconSpec={this.props.iconSpec} />;\r\n    const badge = BadgeUtilities.getComponentForBadgeType(this.props.badgeType);\r\n    const { isDisabled, ...otherProps } = this.props;\r\n    return (\r\n      <ToolbarDragInteractionContext.Consumer>\r\n        {(isDragEnabled) => {\r\n          return (\r\n            <ExpandableItem\r\n              {...otherProps}\r\n              isDisabled={ConditionalBooleanValue.getValue(isDisabled)}\r\n              hideIndicator={isDragEnabled}\r\n              panel={this.getExpandedContent()}\r\n            >\r\n              <div ref={this._ref}>\r\n                <Item\r\n                  badge={badge}\r\n                  icon={icon}\r\n                  onKeyDown={this._handleKeyDown}\r\n                  onClick={this._handleClick}\r\n                  onSizeKnown={this.props.onSizeKnown}\r\n                  title={this.label}\r\n                />\r\n              </div>\r\n            </ExpandableItem>\r\n          );\r\n        }}\r\n      </ToolbarDragInteractionContext.Consumer>\r\n    );\r\n  }\r\n\r\n  /** Returns expanded content panel */\r\n  private getExpandedContent(): React.ReactNode {\r\n    if (!this.state.isPressed)\r\n      return undefined;\r\n\r\n    const classNames = classnames(\r\n      \"nz-toolbar-item-expandable-group-panel\",\r\n      this.props.noPadding && \"uifw-popupbutton-noPadding\",\r\n    );\r\n\r\n    return (\r\n      <DivWithOnOutsideClick\r\n        className={classNames}\r\n        onOutsideClick={this._handleOutsideClick}\r\n      >\r\n        {isFunction<PopupButtonChildrenRenderProp>(this.props.children) ? this.props.children({\r\n          closePanel: this.minimize,\r\n        }) : this.props.children}\r\n      </DivWithOnOutsideClick>\r\n    );\r\n  }\r\n\r\n  private _handleClick = () => {\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState((prevState) => {\r\n        const isPressed = !prevState.isPressed;\r\n        return {\r\n          isPressed,\r\n        };\r\n      }, () => {\r\n        const expand = !!this.state.isPressed;\r\n\r\n        this._closeOnPanelOpened = false;\r\n        expand && FrontstageManager.onToolPanelOpenedEvent.emit();\r\n        this._closeOnPanelOpened = true;\r\n\r\n        this.props.onExpanded && this.props.onExpanded(expand);\r\n      });\r\n  };\r\n\r\n  private _handleOutsideClick = (e: MouseEvent) => {\r\n    this._ref.current && (e.target instanceof Node) && !this._ref.current.contains(e.target) && this.minimize();\r\n  };\r\n}\r\n"]}

package/lib/esm/appui-react/toolbar/PopupButton.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/toolbar/item/expandable/group/Panel.scss";
+
+.uifw-popupbutton-noPadding {
+  padding: 0;
+}

package/lib/esm/appui-react/toolbar/ToolButton.d.ts

@@ -0,0 +1,31 @@
+/** @packageDocumentation
+ * @module Item
+ */
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import { BaseItemState } from "../shared/ItemDefBase";
+import { ToolItemProps } from "../shared/ItemProps";
+/** Properties for the [[ToolButton]] React Component.
+ * @deprecated in 3.5. Props of a deprecated component.
+ * @public
+ */
+export interface ToolButtonProps extends ToolItemProps, CommonProps {
+}
+/** Tool Button React Component.
+ * @deprecated in 3.5. Use [CommonToolbarItem]($appui-abstract) instead.
+ * @public
+ */
+export declare class ToolButton extends React.Component<ToolButtonProps, BaseItemState> {
+    private _componentUnmounting;
+    private _label;
+    /** @internal */
+    readonly state: Readonly<BaseItemState>;
+    constructor(props: ToolItemProps);
+    private _handleSyncUiEvent;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private _execute;
+    get label(): string;
+    render(): React.ReactNode;
+}
+//# sourceMappingURL=ToolButton.d.ts.map

package/lib/esm/appui-react/toolbar/ToolButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/ToolButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAkB,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAGtE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAMpD;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,WAAW;CAAI;AAEvE;;;GAGG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,aAAa,CAAC;IAC7E,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,MAAM,CAAsD;IAEpE,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;gBAE5C,KAAK,EAAE,aAAa;IAgBhC,OAAO,CAAC,kBAAkB,CA+BxB;IAEc,iBAAiB;IAIjB,oBAAoB;IAKpC,OAAO,CAAC,QAAQ,CASd;IAEF,IAAW,KAAK,IAAI,MAAM,CAEzB;IAEe,MAAM,IAAI,KAAK,CAAC,SAAS;CAwB1C"}

package/lib/esm/appui-react/toolbar/ToolButton.js

@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Item
+ */
+import * as React from "react";
+import { IModelApp } from "@itwin/core-frontend";
+import { BadgeUtilities, Icon } from "@itwin/core-react";
+import { getToolbarItemProps, Item } from "@itwin/appui-layout-react";
+import { FrontstageManager } from "../frontstage/FrontstageManager";
+import { SyncUiEventDispatcher, SyncUiEventId } from "../syncui/SyncUiEventDispatcher";
+import { UiFramework } from "../UiFramework";
+import { PropsHelper } from "../utils/PropsHelper";
+import { onEscapeSetFocusToHome } from "../hooks/useEscapeSetFocusToHome";
+/** Tool Button React Component.
+ * @deprecated in 3.5. Use [CommonToolbarItem]($appui-abstract) instead.
+ * @public
+ */
+export class ToolButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this._componentUnmounting = false;
+        this._label = "";
+        this._handleSyncUiEvent = (args) => {
+            // istanbul ignore if
+            if (this._componentUnmounting)
+                return;
+            let refreshState = false;
+            let newState = { ...this.state };
+            // since this is a tool button automatically monitor the activation of tools so the active state of the button is updated.
+            if (args.eventIds.has(SyncUiEventId.ToolActivated)) {
+                newState.isActive = this.props.toolId === FrontstageManager.activeToolId;
+                refreshState = true;
+            }
+            if (!refreshState && this.props.stateSyncIds && this.props.stateSyncIds.length > 0) // eslint-disable-line deprecation/deprecation
+                refreshState = this.props.stateSyncIds.some((value) => args.eventIds.has(value.toLowerCase())); // eslint-disable-line deprecation/deprecation
+            if (refreshState) {
+                if (this.props.stateFunc) // eslint-disable-line deprecation/deprecation
+                    newState = this.props.stateFunc(newState); // eslint-disable-line deprecation/deprecation
+                // istanbul ignore next
+                if ((this.state.isActive !== newState.isActive) ||
+                    ( /* istanbul ignore next */this.state.isEnabled !== newState.isEnabled) ||
+                    ( /* istanbul ignore next */this.state.isVisible !== newState.isVisible)) {
+                    this.setState({
+                        isActive: newState.isActive,
+                        isEnabled: newState.isEnabled,
+                        isVisible: newState.isVisible,
+                    });
+                }
+            }
+        };
+        this._execute = async () => {
+            if (this.props.execute) {
+                this.props.execute();
+            }
+            else {
+                const thisTool = IModelApp.tools.find(this.props.toolId);
+                // istanbul ignore next
+                if (thisTool)
+                    await (new thisTool()).run();
+            }
+        };
+        if (props.label)
+            this._label = props.label;
+        else if (props.labelKey)
+            this._label = UiFramework.localization.getLocalizedString(props.labelKey);
+        this.state = {
+            isVisible: undefined !== props.isVisible ? props.isVisible : true,
+            isEnabled: undefined !== props.isEnabled ? props.isEnabled : true,
+            isActive: undefined !== props.isActive ? props.isActive : false,
+            isPressed: undefined !== props.isPressed ? props.isPressed : false,
+        };
+    }
+    componentDidMount() {
+        SyncUiEventDispatcher.onSyncUiEvent.addListener(this._handleSyncUiEvent);
+    }
+    componentWillUnmount() {
+        this._componentUnmounting = true;
+        SyncUiEventDispatcher.onSyncUiEvent.removeListener(this._handleSyncUiEvent);
+    }
+    get label() {
+        return PropsHelper.getStringFromSpec(this._label);
+    }
+    render() {
+        if (!this.state.isVisible)
+            return null;
+        const icon = React.createElement(Icon, { iconSpec: this.props.iconSpec });
+        const toolbarItemProps = getToolbarItemProps(this.props);
+        const badge = BadgeUtilities.getComponentForBadgeType(this.props.badgeType);
+        return (React.createElement(Item // eslint-disable-line deprecation/deprecation
+        , { ...toolbarItemProps, className: this.props.className, style: this.props.style, isActive: this.state.isActive, isDisabled: !this.state.isEnabled, title: this.label, key: this.props.toolId, onClick: this._execute, onKeyDown: onEscapeSetFocusToHome, icon: icon, badge: badge }));
+    }
+}
+//# sourceMappingURL=ToolButton.js.map

package/lib/esm/appui-react/toolbar/ToolButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolButton.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/ToolButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Item\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { IModelApp, Tool } from \"@itwin/core-frontend\";\r\nimport { ConditionalStringValue, StringGetter, UiSyncEventArgs } from \"@itwin/appui-abstract\";\r\nimport { BadgeUtilities, CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { getToolbarItemProps, Item } from \"@itwin/appui-layout-react\";\r\nimport { FrontstageManager } from \"../frontstage/FrontstageManager\";\r\nimport { BaseItemState } from \"../shared/ItemDefBase\";\r\nimport { ToolItemProps } from \"../shared/ItemProps\";\r\nimport { SyncUiEventDispatcher, SyncUiEventId } from \"../syncui/SyncUiEventDispatcher\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { PropsHelper } from \"../utils/PropsHelper\";\r\nimport { onEscapeSetFocusToHome } from \"../hooks/useEscapeSetFocusToHome\";\r\n\r\n/** Properties for the [[ToolButton]] React Component.\r\n * @deprecated in 3.5. Props of a deprecated component.\r\n * @public\r\n */\r\nexport interface ToolButtonProps extends ToolItemProps, CommonProps { }\r\n\r\n/** Tool Button React Component.\r\n * @deprecated in 3.5. Use [CommonToolbarItem]($appui-abstract) instead.\r\n * @public\r\n */\r\nexport class ToolButton extends React.Component<ToolButtonProps, BaseItemState> { // eslint-disable-line deprecation/deprecation\r\n  private _componentUnmounting = false;\r\n  private _label: string | StringGetter | ConditionalStringValue = \"\";\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<BaseItemState>;\r\n\r\n  constructor(props: ToolItemProps) {\r\n    super(props);\r\n\r\n    if (props.label)\r\n      this._label = props.label;\r\n    else if (props.labelKey)\r\n      this._label = UiFramework.localization.getLocalizedString(props.labelKey);\r\n\r\n    this.state = {\r\n      isVisible: undefined !== props.isVisible ? props.isVisible : true, // eslint-disable-line deprecation/deprecation\r\n      isEnabled: undefined !== props.isEnabled ? props.isEnabled : true, // eslint-disable-line deprecation/deprecation\r\n      isActive: undefined !== props.isActive ? props.isActive : false,\r\n      isPressed: undefined !== props.isPressed ? props.isPressed : false,\r\n    };\r\n  }\r\n\r\n  private _handleSyncUiEvent = (args: UiSyncEventArgs): void => {\r\n    // istanbul ignore if\r\n    if (this._componentUnmounting) return;\r\n\r\n    let refreshState = false;\r\n    let newState: BaseItemState = { ...this.state };\r\n\r\n    // since this is a tool button automatically monitor the activation of tools so the active state of the button is updated.\r\n    if (args.eventIds.has(SyncUiEventId.ToolActivated)) {\r\n      newState.isActive = this.props.toolId === FrontstageManager.activeToolId;\r\n      refreshState = true;\r\n    }\r\n\r\n    if (!refreshState && this.props.stateSyncIds && this.props.stateSyncIds.length > 0) // eslint-disable-line deprecation/deprecation\r\n      refreshState = this.props.stateSyncIds.some((value: string): boolean => args.eventIds.has(value.toLowerCase())); // eslint-disable-line deprecation/deprecation\r\n\r\n    if (refreshState) {\r\n      if (this.props.stateFunc) // eslint-disable-line deprecation/deprecation\r\n        newState = this.props.stateFunc(newState); // eslint-disable-line deprecation/deprecation\r\n\r\n      // istanbul ignore next\r\n      if ((this.state.isActive !== newState.isActive) ||\r\n        ( /* istanbul ignore next */ this.state.isEnabled !== newState.isEnabled) ||\r\n        ( /* istanbul ignore next */ this.state.isVisible !== newState.isVisible)) {\r\n        this.setState({\r\n          isActive: newState.isActive,\r\n          isEnabled: newState.isEnabled,\r\n          isVisible: newState.isVisible,\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  public override componentDidMount() {\r\n    SyncUiEventDispatcher.onSyncUiEvent.addListener(this._handleSyncUiEvent);\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    this._componentUnmounting = true;\r\n    SyncUiEventDispatcher.onSyncUiEvent.removeListener(this._handleSyncUiEvent);\r\n  }\r\n\r\n  private _execute = async () => {\r\n    if (this.props.execute) {\r\n      this.props.execute();\r\n    } else {\r\n      const thisTool: typeof Tool | undefined = IModelApp.tools.find(this.props.toolId);\r\n      // istanbul ignore next\r\n      if (thisTool)\r\n        await (new thisTool()).run();\r\n    }\r\n  };\r\n\r\n  public get label(): string {\r\n    return PropsHelper.getStringFromSpec(this._label);\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    if (!this.state.isVisible)\r\n      return null;\r\n\r\n    const icon = <Icon iconSpec={this.props.iconSpec} />;\r\n    const toolbarItemProps = getToolbarItemProps(this.props);\r\n    const badge = BadgeUtilities.getComponentForBadgeType(this.props.badgeType);\r\n\r\n    return (\r\n      <Item // eslint-disable-line deprecation/deprecation\r\n        {...toolbarItemProps}\r\n        className={this.props.className}\r\n        style={this.props.style}\r\n        isActive={this.state.isActive}\r\n        isDisabled={!this.state.isEnabled}\r\n        title={this.label}\r\n        key={this.props.toolId}\r\n        onClick={this._execute}\r\n        onKeyDown={onEscapeSetFocusToHome}\r\n        icon={icon}\r\n        badge={badge}\r\n      />\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/appui-react/toolbar/Toolbar.d.ts

@@ -0,0 +1,55 @@
+/** @packageDocumentation
+ * @module Item
+ */
+import * as React from "react";
+import { CommonProps, NoChildrenProps, Orientation, Size } from "@itwin/core-react";
+import { Direction, ToolbarPanelAlignment } from "@itwin/appui-layout-react";
+import { ItemList } from "../shared/ItemMap";
+/** Properties of [[Toolbar]] component. An ancestor of this toolbar must provide the WidgetOpacityContext.
+ * @internal
+ */
+export interface ToolbarProps extends CommonProps, NoChildrenProps {
+    /** Items of the toolbar. */
+    items: ItemList;
+    /** Orientation of the toolbar. */
+    orientation: Orientation;
+    /** Logging and debugging Id */
+    toolbarId?: string;
+    /** Describes to which direction the history/panel items are expanded. Defaults to: [[Direction.Bottom]] */
+    expandsTo?: Direction;
+    /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
+    panelAlignment?: ToolbarPanelAlignment;
+    /** initial size */
+    initialSize?: Size;
+}
+/** State of [[Toolbar]] component.
+ * @internal
+ */
+interface ToolbarState {
+    width: number;
+    height: number;
+    items: React.ReactNode;
+}
+/** Toolbar React component.
+ * @internal
+ */
+export declare class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
+    private _dimension;
+    private _minToolbarSize;
+    private _isMounted;
+    constructor(props: ToolbarProps);
+    private get _toolbarId();
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: ToolbarProps, _prevState: ToolbarState): void;
+    private setCurrentStateValues;
+    private _processSyncUiEvent;
+    private _handleSyncUiEvent;
+    private layoutToolbarItems;
+    private generateToolbarItems;
+    private _onResize;
+    private hasVisibleItems;
+    render(): JSX.Element | null;
+}
+export {};
+//# sourceMappingURL=Toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAA8B,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAChH,OAAO,EAAE,SAAS,EAAyB,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAKpG,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,4BAA4B;IAC5B,KAAK,EAAE,QAAQ,CAAC;IAChB,kCAAkC;IAClC,WAAW,EAAE,WAAW,CAAC;IACzB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mBAAmB;IACnB,WAAW,CAAC,EAAE,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,qBAAa,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC;IACtE,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,eAAe,CAA+C;IACtE,OAAO,CAAC,UAAU,CAAS;gBACR,KAAK,EAAE,YAAY;IAkCtC,OAAO,KAAK,UAAU,GAErB;IAEe,iBAAiB;IAKjB,oBAAoB;IAKpB,kBAAkB,CAAC,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY;IAQpF,OAAO,CAAC,qBAAqB;IAiB7B,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,kBAAkB,CASxB;IAEF,OAAO,CAAC,kBAAkB;IAmF1B,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,SAAS,CAWf;IAEF,OAAO,CAAC,eAAe;IAUP,MAAM;CAwBvB"}

package/lib/esm/appui-react/toolbar/Toolbar.js

@@ -0,0 +1,236 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Item
+ */
+import * as React from "react";
+import { Logger } from "@itwin/core-bentley";
+import { Orientation, ResizableContainerObserver, Size } from "@itwin/core-react";
+import { Toolbar as NZ_Toolbar } from "@itwin/appui-layout-react";
+import { ActionButtonItemDef } from "../shared/ActionButtonItemDef";
+import { CustomItemDef } from "../shared/CustomItemDef";
+import { SyncUiEventDispatcher } from "../syncui/SyncUiEventDispatcher";
+import { UiFramework } from "../UiFramework";
+import { GroupItemDef } from "./GroupItem";
+/** Toolbar React component.
+ * @internal
+ */
+export class Toolbar extends React.Component {
+    constructor(props) {
+        super(props);
+        this._dimension = 0;
+        this._minToolbarSize = (ActionButtonItemDef.defaultButtonSize + 2);
+        this._isMounted = false;
+        this._handleSyncUiEvent = (args) => {
+            if (this._processSyncUiEvent(this.props.items, args)) {
+                setTimeout(() => {
+                    // if sync event changed number of displayable buttons layout the toolbar and re-render
+                    const items = this.generateToolbarItems(this.props.items, new Size(this.state.width, this.state.height));
+                    if (this._isMounted)
+                        this.setState({ items });
+                });
+            }
+        };
+        // istanbul ignore next - currently unable to replicate resizing in unit test
+        this._onResize = (width, height) => {
+            width = width !== null && width !== void 0 ? width : this._minToolbarSize;
+            height = height !== null && height !== void 0 ? height : this._minToolbarSize;
+            // do allow toolbar to go to a size that doesn't show at least one button;
+            if (width < this._minToolbarSize)
+                width = this._minToolbarSize;
+            if (height < this._minToolbarSize)
+                height = this._minToolbarSize;
+            if (this.state.width !== width || this.state.height !== height) {
+                const items = this.generateToolbarItems(this.props.items, new Size(width, height));
+                if (this._isMounted)
+                    this.setState({ width, height, items });
+            }
+        };
+        const itemList = this.props.items;
+        // Filter on GroupItemDef
+        itemList.forEach((item) => {
+            if (item instanceof GroupItemDef) {
+                // istanbul ignore else
+                if (!item.directionExplicit && this.props.expandsTo !== undefined) // eslint-disable-line deprecation/deprecation
+                    item.direction = this.props.expandsTo; // eslint-disable-line deprecation/deprecation
+            }
+        });
+        // pick a reasonable initial size, when zone layout occurs a resize event will trigger to adjust this size.
+        let width = (ActionButtonItemDef.defaultButtonSize + 2) * 3;
+        let height = width;
+        // istanbul ignore next
+        if (props.initialSize) {
+            width = props.initialSize.width;
+            height = props.initialSize.height;
+        }
+        const items = this.generateToolbarItems(this.props.items, new Size(width, height));
+        // let's set the default size big enough to hold a single button.
+        this.state = {
+            width,
+            height,
+            items,
+        };
+    }
+    get _toolbarId() {
+        return this.props.toolbarId ? this.props.toolbarId : "unknown";
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        SyncUiEventDispatcher.onSyncUiEvent.addListener(this._handleSyncUiEvent);
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+        SyncUiEventDispatcher.onSyncUiEvent.removeListener(this._handleSyncUiEvent);
+    }
+    componentDidUpdate(prevProps, _prevState) {
+        if (this.props.items !== prevProps.items) {
+            // if sync event changed number of displayable buttons layout the toolbar and re-render
+            const items = this.generateToolbarItems(this.props.items, new Size(this.state.width, this.state.height));
+            this.setState({ items });
+        }
+    }
+    setCurrentStateValues(item) {
+        // if a stateFunc is specified call it to get current state values
+        // istanbul ignore else
+        if (item.stateFunc) { // eslint-disable-line deprecation/deprecation
+            const itemState = item.stateFunc({
+                isVisible: item.isVisible, isEnabled: item.isEnabled, isPressed: item.isPressed, isActive: item.isActive, // eslint-disable-line deprecation/deprecation
+            });
+            item.isVisible = !!itemState.isVisible; // eslint-disable-line deprecation/deprecation
+            item.isEnabled = !!itemState.isEnabled; // eslint-disable-line deprecation/deprecation
+            item.isPressed = !!itemState.isPressed;
+            item.isActive = !!itemState.isActive;
+            return true;
+        }
+        // istanbul ignore next
+        return false;
+    }
+    _processSyncUiEvent(itemList, args) {
+        // istanbul ignore next
+        if (!itemList || 0 === itemList.length)
+            return false;
+        let returnValue = false;
+        // Review all the itemDefs to see if any are monitoring sync events in UiSyncEventArgs
+        for (const item of itemList) {
+            if (item.stateFunc && item.stateSyncIds && item.stateSyncIds.length > 0 && // eslint-disable-line deprecation/deprecation
+                item.stateSyncIds.some((value) => args.eventIds.has(value.toLowerCase()))) { // eslint-disable-line deprecation/deprecation
+                if (item instanceof GroupItemDef) {
+                    this.setCurrentStateValues(item);
+                    this._processSyncUiEvent(item.items, args);
+                }
+                else {
+                    this.setCurrentStateValues(item);
+                }
+                returnValue = true;
+            }
+            else {
+                // istanbul ignore next
+                if (item instanceof GroupItemDef) {
+                    if (this._processSyncUiEvent(item.items, args))
+                        returnValue = true;
+                }
+            }
+        }
+        return returnValue;
+    }
+    layoutToolbarItems(itemList) {
+        // istanbul ignore next -
+        if (0 === itemList.length)
+            return [];
+        Logger.logInfo(UiFramework.loggerCategory(this), `Available space for toolbar [${this._toolbarId}] = ${this._dimension}`);
+        const actionItems = new Array();
+        let itemDimensions = 0;
+        // Filter on ActionButtonItemDef
+        itemList.forEach((item) => {
+            // istanbul ignore else
+            if (item.isVisible) { // eslint-disable-line deprecation/deprecation
+                // istanbul ignore else
+                if (item instanceof ActionButtonItemDef) {
+                    actionItems.push(item);
+                }
+            }
+        });
+        // Populate the overflow button
+        let overflowItemDef;
+        if (actionItems.length > 1) {
+            // Get the item dimensions
+            actionItems.forEach((item) => {
+                const itemSize = item.getDimension(this.props.orientation) + 1;
+                itemDimensions += itemSize;
+                Logger.logTrace(UiFramework.loggerCategory(this), `  Item [${item.id ? item.id : /* istanbul ignore next */ item.label}] has a size of ${itemSize} cumulative size=${itemDimensions}.`);
+            });
+            Logger.logInfo(UiFramework.loggerCategory(this), `  Needed toolbar size [${this._toolbarId}] = ${itemDimensions}`);
+            // istanbul ignore next - currently unable to set size in unit test
+            const padding = 2; // used just to insure button will fall inside tool box
+            if (itemDimensions > (this._dimension - padding)) {
+                const overflowItems = [];
+                const lastItemIndex = actionItems.length - 1;
+                let singleItemSize = 0;
+                for (let index = lastItemIndex; index >= 0; index--) {
+                    // istanbul ignore next
+                    if (actionItems[index] instanceof CustomItemDef)
+                        continue;
+                    if (0 === singleItemSize)
+                        singleItemSize = actionItems[index].getDimension(this.props.orientation);
+                    const deletedItems = actionItems.splice(index, 1);
+                    // istanbul ignore else
+                    if (deletedItems.length === 1) {
+                        const item = deletedItems[0];
+                        overflowItems.unshift(item);
+                        Logger.logTrace(UiFramework.loggerCategory(this), `  * Item [${item.id ? item.id : /* istanbul ignore next */ item.label}] put into overflow items.`);
+                        let currentWidth = 0;
+                        actionItems.forEach((itemDef) => currentWidth += (itemDef.getDimension(this.props.orientation) + 1));
+                        itemDimensions = (currentWidth + singleItemSize);
+                        if (itemDimensions < (this._dimension - padding))
+                            break;
+                    }
+                }
+                overflowItemDef = new GroupItemDef({
+                    groupId: `overflow-group-${itemDimensions}-${actionItems.length}-${overflowItems.length}`,
+                    labelKey: "UiFramework:general.overflow",
+                    items: overflowItems,
+                    direction: this.props.expandsTo,
+                });
+                overflowItemDef.overflow = true;
+            }
+        }
+        // Populate the toolbar items
+        const toolbarItems = actionItems.map((item, index) => {
+            return item.toolbarReactNode(index);
+        });
+        // istanbul ignore next - currently unsure how to trigger sizing/resizing so overflow is never populated
+        if (overflowItemDef)
+            toolbarItems.push(overflowItemDef.toolbarReactNode()); // eslint-disable-line deprecation/deprecation
+        return toolbarItems;
+    }
+    generateToolbarItems(itemList, size) {
+        this._dimension = (this.props.orientation === Orientation.Horizontal ? size.width : size.height);
+        // istanbul ignore next - since sizing is not working in unit test size and dimension always set to default of 42
+        if (this._dimension < this._minToolbarSize)
+            this._dimension = this._minToolbarSize;
+        return this.layoutToolbarItems(itemList);
+    }
+    hasVisibleItems(items) {
+        for (const item of items) {
+            // istanbul ignore else
+            if (item && item.isVisible) // eslint-disable-line deprecation/deprecation
+                return true;
+        }
+        // istanbul ignore next
+        return false;
+    }
+    render() {
+        // istanbul ignore next
+        if (0 === this.props.items.length || !this.hasVisibleItems(this.props.items)) {
+            Logger.logTrace(UiFramework.loggerCategory(this), `--->  nothing to render for ${this._toolbarId} `);
+            return null;
+        }
+        Logger.logTrace(UiFramework.loggerCategory(this), `---> render ${this._toolbarId} `);
+        return (React.createElement(ResizableContainerObserver, { onResize: this._onResize },
+            React.createElement(NZ_Toolbar // eslint-disable-line deprecation/deprecation
+            , { style: this.props.style, className: this.props.className, expandsTo: this.props.expandsTo, panelAlignment: this.props.panelAlignment, items: React.createElement(React.Fragment, null, this.state.items) })));
+    }
+}
+//# sourceMappingURL=Toolbar.js.map