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

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

@@ -1,14 +1,11 @@
 /** @packageDocumentation
  * @module Item
  */
-import * as React from "react";
-import { BadgeType, ConditionalStringValue, OnItemExecutedFunc, StringGetter } from "@itwin/appui-abstract";
-import { CommonProps, IconSpec, SizeProps } from "@itwin/core-react";
-import { Direction } from "@itwin/appui-layout-react";
+import { ConditionalStringValue, OnItemExecutedFunc, StringGetter } from "@itwin/appui-abstract";
 import { ActionButtonItemDef } from "../shared/ActionButtonItemDef";
 import { AnyItemDef } from "../shared/AnyItemDef";
 import { GroupItemProps } from "../shared/GroupItemProps";
-import { BaseItemState, ItemDefBase } from "../shared/ItemDefBase";
+import { ItemDefBase } from "../shared/ItemDefBase";
 /** An Item that opens a group of items.
  * @public
  */
@@ -16,12 +13,8 @@ export declare class GroupItemDef extends ActionButtonItemDef {
     private static _sId;
     static groupIdPrefix: string;
     groupId: string;
-    /** @deprecated in 3.6.  Used in UI1.0 only. */
-    direction: Direction;
     itemsInColumn: number;
     items: AnyItemDef[];
-    /** @deprecated in 3.6. Used in UI1.0 only. */
-    directionExplicit: boolean;
     defaultActiveItemId?: string;
     /** @internal */
     overflow: boolean;
@@ -41,89 +34,5 @@ export declare class GroupItemDef extends ActionButtonItemDef {
     getItemByIndex(index: number): ItemDefBase | undefined;
     get itemCount(): number;
     execute(): void;
-    /** @deprecated in 3.6. Used in UI1.0 only. */
-    toolbarReactNode(index?: number): React.ReactNode;
 }
-interface ToolGroupItem {
-    iconSpec?: IconSpec;
-    label: string;
-    trayId?: string;
-    badgeType?: BadgeType;
-}
-interface ToolGroupTray {
-    title: string;
-    items: Map<string, ToolGroupItem>;
-    groupItemDef: GroupItemDef;
-}
-declare type ToolGroupTrayMap = Map<string, ToolGroupTray>;
-interface GroupItemComponentProps extends CommonProps {
-    groupItemDef: GroupItemDef;
-    onSizeKnown?: (size: SizeProps) => void;
-}
-interface GroupItemState extends BaseItemState {
-    activeItemId: string;
-    activeToolId: string;
-    groupItemDef: GroupItemDef;
-    trayId: string;
-    backTrays: ReadonlyArray<string>;
-    trays: ToolGroupTrayMap;
-}
-/** Group Item React component.
- * @internal
- */
-export declare class GroupItem extends React.Component<GroupItemComponentProps, GroupItemState> {
-    /** @internal */
-    readonly state: Readonly<GroupItemState>;
-    private _componentUnmounting;
-    private _childSyncIds?;
-    private _childRefreshRequired;
-    private _trayIndex;
-    private _closeOnPanelOpened;
-    private _ref;
-    constructor(props: GroupItemComponentProps);
-    private _loadChildSyncIds;
-    private _handleSyncUiEvent;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    shouldComponentUpdate(nextProps: GroupItemComponentProps, nextState: GroupItemState): boolean;
-    private getGroupItemState;
-    private resetTrayId;
-    private generateTrayId;
-    private processGroupItemDef;
-    componentDidUpdate(prevProps: GroupItemComponentProps, _prevState: GroupItemState): void;
-    private get _tray();
-    private getTray;
-    private _handleKeyDown;
-    render(): React.ReactNode;
-    private _handleOpenPanel;
-    private _handleClick;
-    private _handleDragInteractionClick;
-    private _handleOverflowClick;
-    private _handleDragInteractionOutsideClick;
-    private _handleOutsideClick;
-    private _handleToolActivatedEvent;
-    private _handleToolPanelOpenedEvent;
-    private closeGroupButton;
-    private handleToolGroupItemClicked;
-    private getGroupTray;
-    getItemById(id: string): ItemDefBase | undefined;
-    private _handleBack;
-    private _handleExpanderClick;
-}
-/** Properties for the [[GroupButton]] React component
- * @deprecated in 3.5. Props of a deprecated component.
- * @public
- */
-export interface GroupButtonProps extends GroupItemProps, CommonProps {
-}
-/** Group Button React component
- * @deprecated in 3.5. Use [GroupButton]($appui-abstract) instead.
- * @public
- */
-export declare function GroupButton(props: GroupButtonProps): JSX.Element;
-/** @internal */
-export declare const getFirstItem: (groupItemDef: GroupItemDef) => AnyItemDef | undefined;
-/** @internal */
-export declare const getFirstItemId: (groupItemDef: GroupItemDef) => string;
-export {};
 //# sourceMappingURL=GroupItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GroupItem.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/GroupItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GroupItem.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/GroupItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAQpD;;GAEG;AACH,qBAAa,YAAa,SAAQ,mBAAmB;IACnD,OAAO,CAAC,MAAM,CAAC,IAAI,CAAK;IACxB,OAAc,aAAa,SAAY;IAEhC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAEpC,gBAAgB;IACT,QAAQ,EAAE,OAAO,CAAS;IAEjC,OAAO,CAAC,SAAS,CAAY;IAC7B,OAAO,CAAC,QAAQ,CAAW;IAC3B,OAAO,CAAC,WAAW,CAAsD;gBAE7D,cAAc,EAAE,cAAc,EAAE,cAAc,CAAC,EAAE,kBAAkB;IAiB/E,IAAW,EAAE,IAAI,MAAM,CAEtB;IAED,gCAAgC;IAChC,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED;;OAEG;IACI,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,sBAAsB;IAI/D,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;IAcnC,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS;IAIhD,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS;IAI7D,IAAW,SAAS,IAAI,MAAM,CAE7B;IAEe,OAAO,IAAI,IAAI;CAEhC"}

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

@@ -5,28 +5,9 @@
 /** @packageDocumentation
  * @module Item
  */
-import classnames from "classnames";
-import * as React from "react";
-import { Logger } from "@itwin/core-bentley";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { BadgeUtilities, Icon, withOnOutsideClick } from "@itwin/core-react";
-import { Direction, ExpandableItem, GroupColumn, GroupTool, GroupToolExpander, Item, NestedGroup as NestedToolGroupComponent, ToolbarDirectionContext, Group as ToolGroupComponent, withDragInteraction, } from "@itwin/appui-layout-react";
-import { ToolGroupPanelContext } from "../frontstage/FrontstageComposer";
-import { FrontstageManager } from "../frontstage/FrontstageManager";
-import { KeyboardShortcutManager } from "../keyboardshortcut/KeyboardShortcut";
 import { ActionButtonItemDef } from "../shared/ActionButtonItemDef";
-import { ItemDefBase } from "../shared/ItemDefBase";
 import { ItemList, ItemMap } from "../shared/ItemMap";
-import { SyncUiEventDispatcher } from "../syncui/SyncUiEventDispatcher";
-import { UiFramework } from "../UiFramework";
 import { PropsHelper } from "../utils/PropsHelper";
-import { ToolbarDragInteractionContext } from "./DragInteraction";
-// eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation
-const ToolGroup = withOnOutsideClick(ToolGroupComponent, undefined, false);
-// eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation
-const NestedToolGroup = withOnOutsideClick(NestedToolGroupComponent, undefined, false);
-// eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation
-const ItemWithDragInteraction = withDragInteraction(Item);
 // -----------------------------------------------------------------------------
 // GroupItemDef class
 // -----------------------------------------------------------------------------
@@ -46,10 +27,8 @@ export class GroupItemDef extends ActionButtonItemDef {
             GroupItemDef._sId++;
             this.groupId = GroupItemDef.groupIdPrefix + GroupItemDef._sId;
         }
-        this.directionExplicit = (groupItemProps.direction !== undefined); // eslint-disable-line deprecation/deprecation
-        this.direction = (groupItemProps.direction !== undefined) ? groupItemProps.direction : Direction.Bottom; // eslint-disable-line deprecation/deprecation
         this.itemsInColumn = (groupItemProps.itemsInColumn !== undefined) ? groupItemProps.itemsInColumn : 7;
-        this._panelLabel = PropsHelper.getStringSpec(groupItemProps.panelLabel, groupItemProps.panelLabelKey); // eslint-disable-line deprecation/deprecation
+        this._panelLabel = PropsHelper.getStringSpec(groupItemProps.panelLabel, groupItemProps.panelLabelKey);
         this.items = groupItemProps.items;
         this.defaultActiveItemId = groupItemProps.defaultActiveItemId;
     }
@@ -88,373 +67,7 @@ export class GroupItemDef extends ActionButtonItemDef {
     }
     execute() {
     }
-    /** @deprecated in 3.6. Used in UI1.0 only. */
-    toolbarReactNode(index) {
-        this.resolveItems();
-        const key = this.getKey(index);
-        return (React.createElement(GroupItem, { groupItemDef: this, key: key, onSizeKnown: this.handleSizeKnown }));
-    }
 }
 GroupItemDef._sId = 0;
 GroupItemDef.groupIdPrefix = "Group-";
-/** Group Item React component.
- * @internal
- */
-export class GroupItem extends React.Component {
-    constructor(props) {
-        super(props);
-        this._componentUnmounting = false;
-        this._childRefreshRequired = false;
-        this._trayIndex = 0;
-        this._closeOnPanelOpened = true;
-        this._ref = React.createRef();
-        this._handleSyncUiEvent = (args) => {
-            // istanbul ignore next
-            if (this._componentUnmounting)
-                return;
-            let refreshState = false;
-            // istanbul ignore else
-            if (this._childSyncIds && this._childSyncIds.size > 0)
-                if ([...this._childSyncIds].some((value) => args.eventIds.has(value.toLowerCase())))
-                    this._childRefreshRequired = true; // this is cleared when render occurs
-            let newState = { ...this.state };
-            if (this.props.groupItemDef.stateSyncIds && this.props.groupItemDef.stateSyncIds.length > 0) // eslint-disable-line deprecation/deprecation
-                refreshState = this.props.groupItemDef.stateSyncIds.some((value) => args.eventIds.has(value.toLowerCase())); // eslint-disable-line deprecation/deprecation
-            if (refreshState || this._childRefreshRequired) {
-                if (this.props.groupItemDef.stateFunc) // eslint-disable-line deprecation/deprecation
-                    newState = this.props.groupItemDef.stateFunc(newState); // eslint-disable-line deprecation/deprecation
-                // istanbul ignore else
-                if ((this.state.isActive !== newState.isActive) || (this.state.isEnabled !== newState.isEnabled) || (this.state.isVisible !== newState.isVisible)
-                    || this._childRefreshRequired) {
-                    this.setState({ isActive: newState.isActive, isEnabled: newState.isEnabled, isVisible: newState.isVisible, isPressed: newState.isPressed });
-                }
-            }
-        };
-        this._handleKeyDown = (e) => {
-            // istanbul ignore else
-            if (e.key === SpecialKey.Escape) {
-                this.closeGroupButton();
-                KeyboardShortcutManager.setFocusToHome();
-            }
-        };
-        this._handleOpenPanel = () => {
-            this.setState({
-                isPressed: true,
-            });
-            this._closeOnPanelOpened = false;
-            FrontstageManager.onToolPanelOpenedEvent.emit();
-            this._closeOnPanelOpened = true;
-        };
-        this._handleClick = () => {
-            this.setState((prevState) => ({
-                isPressed: !prevState.isPressed,
-            }));
-        };
-        this._handleDragInteractionClick = () => {
-            const activeItem = this.getItemById(this.state.activeItemId);
-            activeItem && activeItem instanceof ActionButtonItemDef && activeItem.execute();
-        };
-        this._handleOverflowClick = () => {
-            this.setState((prevState) => {
-                const isPressed = !prevState.isPressed;
-                return {
-                    isPressed,
-                };
-            }, () => {
-                this._closeOnPanelOpened = false;
-                !!this.state.isPressed && FrontstageManager.onToolPanelOpenedEvent.emit();
-                this._closeOnPanelOpened = true;
-            });
-        };
-        this._handleDragInteractionOutsideClick = (e) => {
-            if (this.props.groupItemDef.overflow) {
-                this._ref.current && (e.target instanceof Node) && !this._ref.current.contains(e.target) && this.closeGroupButton();
-                return;
-            }
-            this.closeGroupButton();
-        };
-        this._handleOutsideClick = (e) => {
-            this._ref.current && (e.target instanceof Node) && !this._ref.current.contains(e.target) && this.closeGroupButton();
-        };
-        this._handleToolActivatedEvent = ({ toolId }) => {
-            this.setState({
-                activeToolId: toolId,
-            });
-        };
-        this._handleToolPanelOpenedEvent = () => {
-            // istanbul ignore else
-            if (!this._closeOnPanelOpened)
-                return;
-            // istanbul ignore next
-            this.closeGroupButton();
-        };
-        this._handleBack = () => {
-            this.setState((prevState) => {
-                const trayId = prevState.backTrays.length > 0 ? prevState.backTrays[prevState.backTrays.length - 1] : prevState.trayId;
-                const backTrays = prevState.backTrays.slice(0, -1);
-                return {
-                    trayId,
-                    backTrays,
-                };
-            });
-        };
-        this._handleExpanderClick = (trayId) => {
-            this.setState((prevState) => {
-                return {
-                    trayId,
-                    backTrays: [...prevState.backTrays, prevState.trayId],
-                };
-            });
-        };
-        this._loadChildSyncIds(props);
-        const state = this.getGroupItemState(this.props);
-        const activeItemId = this.props.groupItemDef.defaultActiveItemId !== undefined ? this.props.groupItemDef.defaultActiveItemId : getFirstItemId(this.props.groupItemDef);
-        this.state = {
-            ...state,
-            activeItemId,
-        };
-    }
-    _loadChildSyncIds(props) {
-        // istanbul ignore else
-        if (props.groupItemDef && props.groupItemDef.items.length > 0) {
-            props.groupItemDef.items.forEach((itemDef) => {
-                const item = itemDef;
-                if (item.stateSyncIds.length > 0) { // eslint-disable-line deprecation/deprecation
-                    if (undefined === this._childSyncIds)
-                        this._childSyncIds = new Set();
-                    item.stateSyncIds.forEach((value) => this._childSyncIds.add(value)); // eslint-disable-line deprecation/deprecation
-                }
-            });
-        }
-    }
-    componentDidMount() {
-        SyncUiEventDispatcher.onSyncUiEvent.addListener(this._handleSyncUiEvent);
-        FrontstageManager.onToolActivatedEvent.addListener(this._handleToolActivatedEvent);
-        FrontstageManager.onToolPanelOpenedEvent.addListener(this._handleToolPanelOpenedEvent);
-    }
-    componentWillUnmount() {
-        this._componentUnmounting = true;
-        SyncUiEventDispatcher.onSyncUiEvent.removeListener(this._handleSyncUiEvent);
-        FrontstageManager.onToolActivatedEvent.removeListener(this._handleToolActivatedEvent);
-        FrontstageManager.onToolPanelOpenedEvent.removeListener(this._handleToolPanelOpenedEvent);
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (!PropsHelper.isShallowEqual(nextState, this.state))
-            return true;
-        if (!PropsHelper.isShallowEqual(nextProps, this.props))
-            return true;
-        // istanbul ignore else
-        if (this._childRefreshRequired) {
-            this._childRefreshRequired = false;
-            return true;
-        }
-        // istanbul ignore next
-        return false;
-    }
-    getGroupItemState(props) {
-        const groupItemDef = props.groupItemDef;
-        // Separate into trays
-        const trays = new Map();
-        const trayId = this.resetTrayId();
-        this.processGroupItemDef(groupItemDef, trayId, trays);
-        return {
-            activeToolId: FrontstageManager.activeToolId,
-            groupItemDef,
-            isEnabled: groupItemDef.isEnabled,
-            isPressed: groupItemDef.isPressed,
-            isVisible: groupItemDef.isVisible,
-            trayId,
-            backTrays: [],
-            trays,
-        };
-    }
-    resetTrayId() {
-        this._trayIndex = 1;
-        return `tray-${this._trayIndex}`;
-    }
-    generateTrayId() {
-        return `tray-${this._trayIndex}`;
-    }
-    processGroupItemDef(groupItemDef, trayId, trays) {
-        // Separate into column items
-        const items = new Map();
-        for (let itemIndex = 0; itemIndex < groupItemDef.itemCount; itemIndex++) {
-            const item = groupItemDef.getItemByIndex(itemIndex);
-            if (item instanceof GroupItemDef) {
-                item.resolveItems();
-                this._trayIndex++;
-                const itemTrayId = this.generateTrayId();
-                const groupItem = {
-                    iconSpec: item.iconSpec, label: item.label, trayId: itemTrayId,
-                    badgeType: item.badgeType,
-                };
-                items.set(item.id, groupItem);
-                this.processGroupItemDef(item, itemTrayId, trays);
-            }
-            else {
-                items.set(item.id, item);
-            }
-        }
-        trays.set(trayId, {
-            items,
-            title: groupItemDef.panelLabel ? groupItemDef.panelLabel : groupItemDef.tooltip,
-            groupItemDef,
-        });
-    }
-    componentDidUpdate(prevProps, _prevState) {
-        if (this.props !== prevProps) {
-            // istanbul ignore next
-            if (this.props.groupItemDef !== prevProps.groupItemDef)
-                Logger.logTrace(UiFramework.loggerCategory(this), `Different GroupItemDef for same groupId of ${this.state.groupItemDef.groupId}`);
-            this.setState((_, props) => this.getGroupItemState(props));
-        }
-    }
-    get _tray() {
-        const tray = this.state.trays.get(this.state.trayId);
-        // istanbul ignore next
-        if (!tray)
-            throw new RangeError();
-        return tray;
-    }
-    getTray(trayId) {
-        const tray = this.state.trays.get(trayId);
-        // istanbul ignore next
-        if (!tray)
-            throw new RangeError();
-        return tray;
-    }
-    render() {
-        if (!this.state.isVisible)
-            return null;
-        const activeItem = this.getItemById(this.state.activeItemId);
-        if (!activeItem)
-            return null;
-        const { groupItemDef, className, ...props } = this.props;
-        const classNames = classnames(className, groupItemDef.overflow && "nz-toolbar-item-overflow");
-        const badge = BadgeUtilities.getComponentForBadgeType(groupItemDef.badgeType);
-        return (React.createElement(ToolbarDirectionContext.Consumer, null, (direction) => (React.createElement(ToolbarDragInteractionContext.Consumer, null, (dragInteraction) => (React.createElement(ExpandableItem // eslint-disable-line deprecation/deprecation
-        , { ...props, className: classNames, key: this.state.groupItemDef.id, panel: this.getGroupTray(dragInteraction) }, dragInteraction ?
-            (React.createElement("div", { ref: this._ref },
-                React.createElement(ItemWithDragInteraction, { badge: badge, className: groupItemDef.overflow ? "nz-ellipsis-icon" : undefined, direction: direction, icon: React.createElement(Icon, { iconSpec: groupItemDef.overflow ? "nz-ellipsis" : activeItem.iconSpec }), isActive: groupItemDef.overflow ? false : this.state.activeToolId === this.state.activeItemId, isDisabled: !this.state.isEnabled, onClick: groupItemDef.overflow ? this._handleOverflowClick : this._handleDragInteractionClick, onKeyDown: this._handleKeyDown, onOpenPanel: this._handleOpenPanel, onSizeKnown: this.props.onSizeKnown, title: groupItemDef.overflow ? groupItemDef.label : activeItem.label }))) :
-            (React.createElement("div", { ref: this._ref },
-                React.createElement(Item // eslint-disable-line deprecation/deprecation
-                , { badge: badge, className: groupItemDef.overflow ? "nz-ellipsis-icon" : undefined, icon: React.createElement(Icon, { iconSpec: groupItemDef.overflow ? "nz-ellipsis" : groupItemDef.iconSpec }), isDisabled: !this.state.isEnabled, onClick: this._handleClick, onKeyDown: this._handleKeyDown, onSizeKnown: this.props.onSizeKnown, title: this.state.groupItemDef.label })))))))));
-    }
-    closeGroupButton() {
-        const trayId = this.resetTrayId();
-        this.setState({
-            isPressed: false,
-            trayId,
-            backTrays: [],
-        });
-    }
-    handleToolGroupItemClicked(trayKey, itemKey) {
-        const trayId = this.resetTrayId();
-        this.setState({
-            activeItemId: itemKey,
-            isPressed: false,
-            trayId,
-            backTrays: [],
-        }, () => {
-            const tray = this.getTray(trayKey);
-            const childItem = tray.groupItemDef.getItemById(itemKey);
-            childItem && childItem instanceof ActionButtonItemDef && childItem.execute();
-        });
-    }
-    getGroupTray(dragInteraction) {
-        if (!this.state.isPressed)
-            return undefined;
-        return (React.createElement(ToolGroupPanelContext.Consumer, null, (activateOnPointerUp) => {
-            const tray = this._tray;
-            const itemsInColumn = tray.groupItemDef.itemsInColumn;
-            const items = [...tray.items.keys()];
-            activateOnPointerUp = activateOnPointerUp && dragInteraction;
-            // Divide items equally between columns.
-            const numberOfColumns = Math.ceil(items.length / itemsInColumn);
-            const numberItemsInColumn = Math.ceil(items.length / numberOfColumns);
-            const columnToItems = items.reduce((acc, item, index) => {
-                const columnIndex = Math.floor(index / numberItemsInColumn);
-                if (columnIndex >= acc.length) {
-                    return [
-                        ...acc,
-                        [item],
-                    ];
-                }
-                return [
-                    ...acc.slice(0, columnIndex),
-                    [
-                        ...acc[columnIndex],
-                        item,
-                    ],
-                    ...acc.slice(columnIndex + 1),
-                ];
-            }, []);
-            const columns = (columnToItems.map((columnItems, columnIndex) => React.createElement(GroupColumn, { key: columnIndex },
-                " ",
-                columnItems.map((itemKey) => {
-                    const item = tray.items.get(itemKey);
-                    const icon = React.createElement(Icon, { iconSpec: item.iconSpec });
-                    let isVisible = true;
-                    let isActive = itemKey === this.state.activeToolId;
-                    let isEnabled = true;
-                    const badge = BadgeUtilities.getComponentForBadgeType(item.badgeType);
-                    if (item instanceof ItemDefBase) {
-                        isVisible = item.isVisible; // eslint-disable-line deprecation/deprecation
-                        isEnabled = item.isEnabled; // eslint-disable-line deprecation/deprecation
-                        if (item.stateFunc) { // eslint-disable-line deprecation/deprecation
-                            const newState = item.stateFunc({ isVisible, isActive, isEnabled }); // eslint-disable-line deprecation/deprecation
-                            isVisible = undefined !== newState.isVisible ? newState.isVisible : /* istanbul ignore next */ isVisible;
-                            isEnabled = undefined !== newState.isEnabled ? newState.isEnabled : /* istanbul ignore next */ isEnabled;
-                            isActive = undefined !== newState.isActive ? newState.isActive : /* istanbul ignore next */ isActive;
-                        }
-                    }
-                    const trayId = item.trayId;
-                    if (trayId) {
-                        return (isVisible &&
-                            React.createElement(GroupToolExpander, { isDisabled: !isEnabled, key: itemKey, label: item.label, icon: icon, badge: badge, onClick: () => this._handleExpanderClick(trayId), onPointerUp: activateOnPointerUp ? () => this._handleExpanderClick(trayId) : undefined }));
-                    }
-                    return (isVisible &&
-                        React.createElement(GroupTool, { isDisabled: !isEnabled, isActive: isActive, key: itemKey, label: item.label, onClick: () => this.handleToolGroupItemClicked(this.state.trayId, itemKey), onPointerUp: activateOnPointerUp ? () => this.handleToolGroupItemClicked(this.state.trayId, itemKey) : undefined, icon: icon, badge: badge }));
-                }))));
-            if (this.state.backTrays.length > 0)
-                return (React.createElement(NestedToolGroup, { columns: columns, onBack: this._handleBack, onBackPointerUp: activateOnPointerUp ? this._handleBack : undefined, onOutsideClick: dragInteraction ? this._handleDragInteractionOutsideClick : this._handleOutsideClick, title: tray.title }));
-            return (React.createElement(ToolGroup, { columns: columns, onOutsideClick: dragInteraction ? this._handleDragInteractionOutsideClick : this._handleOutsideClick, title: tray.title }));
-        }));
-    }
-    getItemById(id) {
-        for (const [, tray] of this.state.trays) {
-            const item = tray.groupItemDef.getItemById(id);
-            if (item)
-                return item;
-        }
-        return undefined;
-    }
-}
-/** Group Button React component
- * @deprecated in 3.5. Use [GroupButton]($appui-abstract) instead.
- * @public
- */
-export function GroupButton(props) {
-    const groupItemDef = new GroupItemDef(props);
-    groupItemDef.resolveItems();
-    return (React.createElement(GroupItem, { ...props, groupItemDef: groupItemDef, key: groupItemDef.id }));
-}
-/** @internal */
-export const getFirstItem = (groupItemDef) => {
-    for (const item of groupItemDef.items) {
-        if (item instanceof GroupItemDef) {
-            const firstItem = getFirstItem(item);
-            if (firstItem)
-                return firstItem;
-            continue;
-        }
-        return item;
-    }
-    return undefined;
-};
-/** @internal */
-export const getFirstItemId = (groupItemDef) => {
-    const item = getFirstItem(groupItemDef);
-    return item ? item.id : "";
-};
 //# sourceMappingURL=GroupItem.js.map