@itwin/appui-react 3.7.1 → 3.7.3

package/lib/cjs/appui-react/widgets/WidgetProps.js

@@ -1,10 +1,10 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Widget
- */
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=WidgetProps.js.map

package/lib/cjs/appui-react/widgets/WidgetProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetProps.js","sourceRoot":"","sources":["../../../../src/appui-react/widgets/WidgetProps.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG","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 Widget\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { AbstractWidgetProps } from \"@itwin/appui-abstract\";\r\nimport { IconProps } from \"@itwin/core-react\";\r\nimport { ConfigurableUiControlConstructor } from \"../configurableui/ConfigurableUiControl\";\r\n\r\n/** Properties for a [[Widget]] component.\r\n * @deprecated in 3.5. Props of a deprecated component.\r\n * @public\r\n */\r\nexport interface WidgetProps extends Omit<AbstractWidgetProps, \"getWidgetContent\">, IconProps { // eslint-disable-line deprecation/deprecation\r\n  /** if set, it is used to define a key that is used to look up a localized string. This value is used only if label is not explicitly set. */\r\n  labelKey?: string;\r\n  /** if set, it is used to define a key that is used to look up a localized string. This value is used only if tooltip is not explicitly set. */\r\n  tooltipKey?: string;\r\n  /** A [[WidgetControl]] providing information about the Widget. */\r\n  control?: ConfigurableUiControlConstructor;\r\n  /** A React component for the Widget. */\r\n  element?: React.ReactNode;\r\n  /** Control's class id */\r\n  classId?: string | ConfigurableUiControlConstructor;\r\n  /** @alpha */\r\n  preferredPanelSize?: \"fit-content\";\r\n}\r\n\r\n/** Properties of a Widget.\r\n * @beta\r\n */\r\nexport interface CommonWidgetProps extends Readonly<AbstractWidgetProps> { // eslint-disable-line deprecation/deprecation\r\n  /** Id used to uniquely identify the widget. */\r\n  readonly id: string;\r\n}\r\n"]}
+{"version":3,"file":"WidgetProps.js","sourceRoot":"","sources":["../../../../src/appui-react/widgets/WidgetProps.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { AbstractWidgetProps } from \"@itwin/appui-abstract\";\nimport { IconProps } from \"@itwin/core-react\";\nimport { ConfigurableUiControlConstructor } from \"../configurableui/ConfigurableUiControl\";\n\n/** Properties for a [[Widget]] component.\n * @deprecated in 3.5. Props of a deprecated component.\n * @public\n */\nexport interface WidgetProps extends Omit<AbstractWidgetProps, \"getWidgetContent\">, IconProps { // eslint-disable-line deprecation/deprecation\n  /** if set, it is used to define a key that is used to look up a localized string. This value is used only if label is not explicitly set. */\n  labelKey?: string;\n  /** if set, it is used to define a key that is used to look up a localized string. This value is used only if tooltip is not explicitly set. */\n  tooltipKey?: string;\n  /** A [[WidgetControl]] providing information about the Widget. */\n  control?: ConfigurableUiControlConstructor;\n  /** A React component for the Widget. */\n  element?: React.ReactNode;\n  /** Control's class id */\n  classId?: string | ConfigurableUiControlConstructor;\n  /** @alpha */\n  preferredPanelSize?: \"fit-content\";\n}\n\n/** Properties of a Widget.\n * @beta\n */\nexport interface CommonWidgetProps extends Readonly<AbstractWidgetProps> { // eslint-disable-line deprecation/deprecation\n  /** Id used to uniquely identify the widget. */\n  readonly id: string;\n}\n"]}

package/lib/cjs/appui-react/widgets/WidgetStack.d.ts

@@ -1,135 +1,135 @@
-/** @packageDocumentation
- * @module Widget
- */
-import * as React from "react";
-import { BadgeType, ConditionalStringValue, PointProps } from "@itwin/appui-abstract";
-import { CommonProps, RectangleProps } from "@itwin/core-react";
-import { DisabledResizeHandles, DraggedWidgetManagerProps, HorizontalAnchor, Tab, TabMode, VerticalAnchor, WidgetZoneId } from "@itwin/appui-layout-react";
-import { WidgetChangeHandler } from "../frontstage/FrontstageComposer";
-/** Properties for a [[WidgetStack]] Tab.
- * @internal
- */
-export interface WidgetTab {
-    readonly iconSpec?: string | ConditionalStringValue | React.ReactNode;
-    readonly title: string;
-    readonly badgeType?: BadgeType;
-}
-/** Properties for a Widget in a [[WidgetStack]].
- * @internal
- */
-export declare type WidgetTabs = {
-    readonly [id in WidgetZoneId]: ReadonlyArray<WidgetTab>;
-};
-/** Properties for the [[WidgetStack]] React component.
- * @internal
- */
-export interface WidgetStackProps extends CommonProps {
-    activeTabIndex: number;
-    disabledResizeHandles: DisabledResizeHandles | undefined;
-    draggedWidget: DraggedWidgetManagerProps | undefined;
-    fillZone: boolean;
-    getWidgetContentRef: (id: WidgetZoneId) => React.Ref<HTMLDivElement>;
-    horizontalAnchor: HorizontalAnchor;
-    isCollapsed: boolean;
-    isFloating: boolean;
-    isInStagePanel: boolean;
-    openWidgetId: WidgetZoneId | undefined;
-    verticalAnchor: VerticalAnchor;
-    widgetChangeHandler: WidgetChangeHandler;
-    widgets: ReadonlyArray<WidgetZoneId>;
-    widgetTabs: WidgetTabs;
-}
-/** Widget stack React component.
- * @internal
- */
-export declare class WidgetStack extends React.PureComponent<WidgetStackProps> {
-    private _widgetStack;
-    render(): React.ReactNode;
-    private _handleOnWidgetResize;
-    private _handleTabDragStart;
-    private _handleTabDragEnd;
-    private _handleTabClick;
-    private _handleTabDrag;
-}
-/** Properties for the [[WidgetStackTabs]] component.
- * @internal
- */
-export interface WidgetStackTabsProps {
-    activeTabIndex: number;
-    draggedWidget: DraggedWidgetManagerProps | undefined;
-    horizontalAnchor: HorizontalAnchor;
-    isCollapsed: boolean;
-    isProtruding: boolean;
-    onTabClick: (widgetId: WidgetZoneId, tabIndex: number) => void;
-    onTabDrag: (dragged: PointProps) => void;
-    onTabDragEnd: () => void;
-    onTabDragStart: (widgetId: WidgetZoneId, tabIndex: number, initialPosition: PointProps, firstTabBounds: RectangleProps) => void;
-    openWidgetId: WidgetZoneId | undefined;
-    verticalAnchor: VerticalAnchor;
-    widgets: ReadonlyArray<WidgetZoneId>;
-    widgetTabs: WidgetTabs;
-}
-/** Tabs of [[WidgetStack]] component.
- * @internal
- */
-export declare class WidgetStackTabs extends React.PureComponent<WidgetStackTabsProps> {
-    render(): React.ReactNode;
-}
-/** Properties for the [[WidgetStackTabGroup]] component.
- * @internal
- */
-export interface WidgetStackTabGroupProps {
-    activeTabIndex: number;
-    draggedWidget: DraggedWidgetManagerProps | undefined;
-    horizontalAnchor: HorizontalAnchor;
-    isCollapsed: boolean;
-    isProtruding: boolean;
-    isStacked: boolean;
-    onTabClick: (widgetId: WidgetZoneId, tabIndex: number) => void;
-    onTabDrag: (dragged: PointProps) => void;
-    onTabDragEnd: () => void;
-    onTabDragStart: (widgetId: WidgetZoneId, tabIndex: number, initialPosition: PointProps, firstTabBounds: RectangleProps) => void;
-    openWidgetId: WidgetZoneId | undefined;
-    tabs: ReadonlyArray<WidgetTab>;
-    verticalAnchor: VerticalAnchor;
-    widgetId: WidgetZoneId;
-}
-/** Widget tab group used in [[WidgetStackTabs]] component.
- * @internal
- */
-export declare class WidgetStackTabGroup extends React.PureComponent<WidgetStackTabGroupProps> {
-    private _firstTab;
-    render(): React.ReactNode;
-    private getTabHandleMode;
-    private _handleTabDragStart;
-    private _handleTabClick;
-}
-/** Properties for the [[WidgetStackTab]] component.
- * @internal
- */
-export interface WidgetStackTabProps {
-    horizontalAnchor: HorizontalAnchor;
-    iconSpec?: string | ConditionalStringValue | React.ReactNode;
-    index: number;
-    badgeType?: BadgeType;
-    isCollapsed: boolean;
-    isProtruding: boolean;
-    lastPosition: PointProps | undefined;
-    mode: TabMode;
-    onClick: (index: number) => void;
-    onDrag: (dragged: PointProps) => void;
-    onDragEnd: () => void;
-    onDragStart: (index: number, initialPosition: PointProps) => void;
-    tabRef?: React.Ref<Tab>;
-    title: string;
-    verticalAnchor: VerticalAnchor;
-}
-/** Tab used in [[WidgetStackTabGroup]] component.
- * @internal
- */
-export declare class WidgetStackTab extends React.PureComponent<WidgetStackTabProps> {
-    render(): React.ReactNode;
-    private _handleDragStart;
-    private _handleClick;
-}
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { BadgeType, ConditionalStringValue, PointProps } from "@itwin/appui-abstract";
+import { CommonProps, RectangleProps } from "@itwin/core-react";
+import { DisabledResizeHandles, DraggedWidgetManagerProps, HorizontalAnchor, Tab, TabMode, VerticalAnchor, WidgetZoneId } from "@itwin/appui-layout-react";
+import { WidgetChangeHandler } from "../frontstage/FrontstageComposer";
+/** Properties for a [[WidgetStack]] Tab.
+ * @internal
+ */
+export interface WidgetTab {
+    readonly iconSpec?: string | ConditionalStringValue | React.ReactNode;
+    readonly title: string;
+    readonly badgeType?: BadgeType;
+}
+/** Properties for a Widget in a [[WidgetStack]].
+ * @internal
+ */
+export declare type WidgetTabs = {
+    readonly [id in WidgetZoneId]: ReadonlyArray<WidgetTab>;
+};
+/** Properties for the [[WidgetStack]] React component.
+ * @internal
+ */
+export interface WidgetStackProps extends CommonProps {
+    activeTabIndex: number;
+    disabledResizeHandles: DisabledResizeHandles | undefined;
+    draggedWidget: DraggedWidgetManagerProps | undefined;
+    fillZone: boolean;
+    getWidgetContentRef: (id: WidgetZoneId) => React.Ref<HTMLDivElement>;
+    horizontalAnchor: HorizontalAnchor;
+    isCollapsed: boolean;
+    isFloating: boolean;
+    isInStagePanel: boolean;
+    openWidgetId: WidgetZoneId | undefined;
+    verticalAnchor: VerticalAnchor;
+    widgetChangeHandler: WidgetChangeHandler;
+    widgets: ReadonlyArray<WidgetZoneId>;
+    widgetTabs: WidgetTabs;
+}
+/** Widget stack React component.
+ * @internal
+ */
+export declare class WidgetStack extends React.PureComponent<WidgetStackProps> {
+    private _widgetStack;
+    render(): React.ReactNode;
+    private _handleOnWidgetResize;
+    private _handleTabDragStart;
+    private _handleTabDragEnd;
+    private _handleTabClick;
+    private _handleTabDrag;
+}
+/** Properties for the [[WidgetStackTabs]] component.
+ * @internal
+ */
+export interface WidgetStackTabsProps {
+    activeTabIndex: number;
+    draggedWidget: DraggedWidgetManagerProps | undefined;
+    horizontalAnchor: HorizontalAnchor;
+    isCollapsed: boolean;
+    isProtruding: boolean;
+    onTabClick: (widgetId: WidgetZoneId, tabIndex: number) => void;
+    onTabDrag: (dragged: PointProps) => void;
+    onTabDragEnd: () => void;
+    onTabDragStart: (widgetId: WidgetZoneId, tabIndex: number, initialPosition: PointProps, firstTabBounds: RectangleProps) => void;
+    openWidgetId: WidgetZoneId | undefined;
+    verticalAnchor: VerticalAnchor;
+    widgets: ReadonlyArray<WidgetZoneId>;
+    widgetTabs: WidgetTabs;
+}
+/** Tabs of [[WidgetStack]] component.
+ * @internal
+ */
+export declare class WidgetStackTabs extends React.PureComponent<WidgetStackTabsProps> {
+    render(): React.ReactNode;
+}
+/** Properties for the [[WidgetStackTabGroup]] component.
+ * @internal
+ */
+export interface WidgetStackTabGroupProps {
+    activeTabIndex: number;
+    draggedWidget: DraggedWidgetManagerProps | undefined;
+    horizontalAnchor: HorizontalAnchor;
+    isCollapsed: boolean;
+    isProtruding: boolean;
+    isStacked: boolean;
+    onTabClick: (widgetId: WidgetZoneId, tabIndex: number) => void;
+    onTabDrag: (dragged: PointProps) => void;
+    onTabDragEnd: () => void;
+    onTabDragStart: (widgetId: WidgetZoneId, tabIndex: number, initialPosition: PointProps, firstTabBounds: RectangleProps) => void;
+    openWidgetId: WidgetZoneId | undefined;
+    tabs: ReadonlyArray<WidgetTab>;
+    verticalAnchor: VerticalAnchor;
+    widgetId: WidgetZoneId;
+}
+/** Widget tab group used in [[WidgetStackTabs]] component.
+ * @internal
+ */
+export declare class WidgetStackTabGroup extends React.PureComponent<WidgetStackTabGroupProps> {
+    private _firstTab;
+    render(): React.ReactNode;
+    private getTabHandleMode;
+    private _handleTabDragStart;
+    private _handleTabClick;
+}
+/** Properties for the [[WidgetStackTab]] component.
+ * @internal
+ */
+export interface WidgetStackTabProps {
+    horizontalAnchor: HorizontalAnchor;
+    iconSpec?: string | ConditionalStringValue | React.ReactNode;
+    index: number;
+    badgeType?: BadgeType;
+    isCollapsed: boolean;
+    isProtruding: boolean;
+    lastPosition: PointProps | undefined;
+    mode: TabMode;
+    onClick: (index: number) => void;
+    onDrag: (dragged: PointProps) => void;
+    onDragEnd: () => void;
+    onDragStart: (index: number, initialPosition: PointProps) => void;
+    tabRef?: React.Ref<Tab>;
+    title: string;
+    verticalAnchor: VerticalAnchor;
+}
+/** Tab used in [[WidgetStackTabGroup]] component.
+ * @internal
+ */
+export declare class WidgetStackTab extends React.PureComponent<WidgetStackTabProps> {
+    render(): React.ReactNode;
+    private _handleDragStart;
+    private _handleClick;
+}
 //# sourceMappingURL=WidgetStack.d.ts.map

package/lib/cjs/appui-react/widgets/WidgetStack.js

@@ -1,138 +1,138 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Widget
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WidgetStackTab = exports.WidgetStackTabGroup = exports.WidgetStackTabs = exports.WidgetStack = void 0;
-const React = require("react");
-const core_react_1 = require("@itwin/core-react");
-const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const UiFramework_1 = require("../UiFramework");
-/** Widget stack React component.
- * @internal
- */
-class WidgetStack extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._widgetStack = React.createRef();
-        this._handleOnWidgetResize = (resizeBy, handle, filledHeightDiff) => {
-            this.props.widgetChangeHandler.handleResize(this.props.widgets[0], resizeBy, handle, filledHeightDiff);
-        };
-        // eslint-disable-next-line deprecation/deprecation
-        this._handleTabDragStart = (widgetId, tabIndex, initialPosition, firstTabBounds) => {
-            if (!this._widgetStack.current)
-                return;
-            const tabBounds = core_react_1.Rectangle.create(firstTabBounds);
-            const stackedWidgetBounds = core_react_1.Rectangle.create(this._widgetStack.current.getBounds());
-            const offsetToFirstTab = stackedWidgetBounds.topLeft().getOffsetTo(tabBounds.topLeft());
-            const isHorizontal = this.props.verticalAnchor === appui_layout_react_1.VerticalAnchor.BottomPanel || this.props.verticalAnchor === appui_layout_react_1.VerticalAnchor.TopPanel;
-            let widgetBounds;
-            if (isHorizontal)
-                widgetBounds = stackedWidgetBounds.offsetX(offsetToFirstTab.x);
-            else
-                widgetBounds = stackedWidgetBounds.offsetY(offsetToFirstTab.y);
-            this.props.widgetChangeHandler.handleTabDragStart(widgetId, tabIndex, initialPosition, widgetBounds);
-        };
-        this._handleTabDragEnd = () => {
-            this.props.widgetChangeHandler.handleTabDragEnd();
-        };
-        // eslint-disable-next-line deprecation/deprecation
-        this._handleTabClick = (widgetId, tabIndex) => {
-            this.props.widgetChangeHandler.handleTabClick(widgetId, tabIndex);
-        };
-        this._handleTabDrag = (dragged) => {
-            this.props.widgetChangeHandler.handleTabDrag(dragged);
-        };
-    }
-    render() {
-        const tabCount = this.props.widgets.reduce((acc, widgetId) => {
-            const tabs = this.props.widgetTabs[widgetId];
-            return acc + tabs.length;
-        }, 0);
-        if (tabCount === 0)
-            return null;
-        return (React.createElement(appui_layout_react_1.Stacked, { className: this.props.className, contentRef: this.props.openWidgetId ? this.props.getWidgetContentRef(this.props.openWidgetId) : undefined, disabledResizeHandles: this.props.disabledResizeHandles, fillZone: this.props.fillZone || this.props.isInStagePanel, horizontalAnchor: this.props.horizontalAnchor, isCollapsed: this.props.isCollapsed, isTabBarVisible: this.props.isInStagePanel, isDragged: !!this.props.draggedWidget, isFloating: this.props.isFloating, isOpen: !!this.props.openWidgetId, onMouseEnter: UiFramework_1.UiFramework.visibility.handleWidgetMouseEnter, onResize: this.props.isInStagePanel ? undefined : this._handleOnWidgetResize, ref: this._widgetStack, style: this.props.style, tabs: React.createElement(WidgetStackTabs, { activeTabIndex: this.props.activeTabIndex, draggedWidget: this.props.draggedWidget, horizontalAnchor: this.props.horizontalAnchor, isCollapsed: this.props.isCollapsed, isProtruding: !this.props.isInStagePanel, onTabClick: this._handleTabClick, onTabDrag: this._handleTabDrag, onTabDragEnd: this._handleTabDragEnd, onTabDragStart: this._handleTabDragStart, openWidgetId: this.props.openWidgetId, verticalAnchor: this.props.verticalAnchor, widgets: this.props.widgets, widgetTabs: this.props.widgetTabs }), verticalAnchor: this.props.verticalAnchor }));
-    }
-}
-exports.WidgetStack = WidgetStack;
-/** Tabs of [[WidgetStack]] component.
- * @internal
- */
-class WidgetStackTabs extends React.PureComponent {
-    render() {
-        let renderIndex = -1;
-        return this.props.widgets.map((widgetId) => {
-            const tabs = this.props.widgetTabs[widgetId];
-            if (tabs.length <= 0)
-                return null;
-            renderIndex++;
-            // istanbul ignore next
-            return (React.createElement(React.Fragment, { key: widgetId },
-                renderIndex < 1 ? undefined : React.createElement(appui_layout_react_1.TabSeparator, { isHorizontal: appui_layout_react_1.VerticalAnchorHelpers.isHorizontal(this.props.verticalAnchor) }),
-                React.createElement(WidgetStackTabGroup, { activeTabIndex: this.props.activeTabIndex, draggedWidget: this.props.draggedWidget, horizontalAnchor: this.props.horizontalAnchor, isCollapsed: this.props.isCollapsed, isProtruding: this.props.isProtruding, isStacked: this.props.widgets.length > 1, onTabClick: this.props.onTabClick, onTabDrag: this.props.onTabDrag, onTabDragEnd: this.props.onTabDragEnd, onTabDragStart: this.props.onTabDragStart, openWidgetId: this.props.openWidgetId, tabs: tabs, verticalAnchor: this.props.verticalAnchor, widgetId: widgetId })));
-        });
-    }
-}
-exports.WidgetStackTabs = WidgetStackTabs;
-/** Widget tab group used in [[WidgetStackTabs]] component.
- * @internal
- */
-class WidgetStackTabGroup extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._firstTab = React.createRef();
-        this._handleTabDragStart = (tabIndex, initialPosition) => {
-            if (!this._firstTab.current)
-                return;
-            const firstTabBounds = core_react_1.Rectangle.create(this._firstTab.current.getBounds()).toProps();
-            this.props.onTabDragStart(this.props.widgetId, tabIndex, initialPosition, firstTabBounds);
-        };
-        this._handleTabClick = (tabIndex) => {
-            this.props.onTabClick(this.props.widgetId, tabIndex);
-        };
-    }
-    render() {
-        const lastPosition = this.props.draggedWidget ? this.props.draggedWidget.lastPosition : undefined;
-        const isWidgetStackOpen = !!this.props.openWidgetId;
-        const isWidgetOpen = this.props.openWidgetId === this.props.widgetId;
-        const tabs = this.props.tabs.map((tab, index) => {
-            const mode = !isWidgetStackOpen ? appui_layout_react_1.TabMode.Closed : isWidgetOpen && this.props.activeTabIndex === index ? appui_layout_react_1.TabMode.Active : appui_layout_react_1.TabMode.Open;
-            return (React.createElement(WidgetStackTab, { horizontalAnchor: this.props.horizontalAnchor, iconSpec: tab.iconSpec, index: index, badgeType: tab.badgeType, isCollapsed: this.props.isCollapsed, isProtruding: this.props.isProtruding, key: `${this.props.widgetId}-${index}`, lastPosition: lastPosition, mode: mode, onClick: this._handleTabClick, onDrag: this.props.onTabDrag, onDragEnd: this.props.onTabDragEnd, onDragStart: this._handleTabDragStart, tabRef: index === 0 ? this._firstTab : undefined, title: tab.title, verticalAnchor: this.props.verticalAnchor }));
-        });
-        if (tabs.length > 1) {
-            return (React.createElement(appui_layout_react_1.TabGroup, { handle: this.getTabHandleMode(), horizontalAnchor: this.props.horizontalAnchor, isCollapsed: this.props.isCollapsed, verticalAnchor: this.props.verticalAnchor }, tabs));
-        }
-        return tabs;
-    }
-    getTabHandleMode() {
-        if (this.props.draggedWidget && this.props.draggedWidget.id === this.props.widgetId && this.props.draggedWidget.isUnmerge)
-            return appui_layout_react_1.HandleMode.Visible;
-        if (this.props.isStacked)
-            return appui_layout_react_1.HandleMode.Hovered;
-        return appui_layout_react_1.HandleMode.Timedout;
-    }
-}
-exports.WidgetStackTabGroup = WidgetStackTabGroup;
-/** Tab used in [[WidgetStackTabGroup]] component.
- * @internal
- */
-class WidgetStackTab extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._handleDragStart = (initialPosition) => {
-            this.props.onDragStart(this.props.index, initialPosition);
-        };
-        this._handleClick = () => {
-            this.props.onClick(this.props.index);
-        };
-    }
-    render() {
-        return (React.createElement(appui_layout_react_1.Tab, { badge: core_react_1.BadgeUtilities.getComponentForBadgeType(this.props.badgeType), horizontalAnchor: this.props.horizontalAnchor, isCollapsed: this.props.isCollapsed, isProtruding: this.props.isProtruding, lastPosition: this.props.lastPosition, mode: this.props.mode, onClick: this._handleClick, onDrag: this.props.onDrag, onDragEnd: this.props.onDragEnd, onDragStart: this._handleDragStart, ref: this.props.tabRef, title: this.props.title, verticalAnchor: this.props.verticalAnchor }, core_react_1.IconHelper.getIconReactNode(this.props.iconSpec)));
-    }
-}
-exports.WidgetStackTab = WidgetStackTab;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetStackTab = exports.WidgetStackTabGroup = exports.WidgetStackTabs = exports.WidgetStack = void 0;
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const UiFramework_1 = require("../UiFramework");
+/** Widget stack React component.
+ * @internal
+ */
+class WidgetStack extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._widgetStack = React.createRef();
+        this._handleOnWidgetResize = (resizeBy, handle, filledHeightDiff) => {
+            this.props.widgetChangeHandler.handleResize(this.props.widgets[0], resizeBy, handle, filledHeightDiff);
+        };
+        // eslint-disable-next-line deprecation/deprecation
+        this._handleTabDragStart = (widgetId, tabIndex, initialPosition, firstTabBounds) => {
+            if (!this._widgetStack.current)
+                return;
+            const tabBounds = core_react_1.Rectangle.create(firstTabBounds);
+            const stackedWidgetBounds = core_react_1.Rectangle.create(this._widgetStack.current.getBounds());
+            const offsetToFirstTab = stackedWidgetBounds.topLeft().getOffsetTo(tabBounds.topLeft());
+            const isHorizontal = this.props.verticalAnchor === appui_layout_react_1.VerticalAnchor.BottomPanel || this.props.verticalAnchor === appui_layout_react_1.VerticalAnchor.TopPanel;
+            let widgetBounds;
+            if (isHorizontal)
+                widgetBounds = stackedWidgetBounds.offsetX(offsetToFirstTab.x);
+            else
+                widgetBounds = stackedWidgetBounds.offsetY(offsetToFirstTab.y);
+            this.props.widgetChangeHandler.handleTabDragStart(widgetId, tabIndex, initialPosition, widgetBounds);
+        };
+        this._handleTabDragEnd = () => {
+            this.props.widgetChangeHandler.handleTabDragEnd();
+        };
+        // eslint-disable-next-line deprecation/deprecation
+        this._handleTabClick = (widgetId, tabIndex) => {
+            this.props.widgetChangeHandler.handleTabClick(widgetId, tabIndex);
+        };
+        this._handleTabDrag = (dragged) => {
+            this.props.widgetChangeHandler.handleTabDrag(dragged);
+        };
+    }
+    render() {
+        const tabCount = this.props.widgets.reduce((acc, widgetId) => {
+            const tabs = this.props.widgetTabs[widgetId];
+            return acc + tabs.length;
+        }, 0);
+        if (tabCount === 0)
+            return null;
+        return (React.createElement(appui_layout_react_1.Stacked, { className: this.props.className, contentRef: this.props.openWidgetId ? this.props.getWidgetContentRef(this.props.openWidgetId) : undefined, disabledResizeHandles: this.props.disabledResizeHandles, fillZone: this.props.fillZone || this.props.isInStagePanel, horizontalAnchor: this.props.horizontalAnchor, isCollapsed: this.props.isCollapsed, isTabBarVisible: this.props.isInStagePanel, isDragged: !!this.props.draggedWidget, isFloating: this.props.isFloating, isOpen: !!this.props.openWidgetId, onMouseEnter: UiFramework_1.UiFramework.visibility.handleWidgetMouseEnter, onResize: this.props.isInStagePanel ? undefined : this._handleOnWidgetResize, ref: this._widgetStack, style: this.props.style, tabs: React.createElement(WidgetStackTabs, { activeTabIndex: this.props.activeTabIndex, draggedWidget: this.props.draggedWidget, horizontalAnchor: this.props.horizontalAnchor, isCollapsed: this.props.isCollapsed, isProtruding: !this.props.isInStagePanel, onTabClick: this._handleTabClick, onTabDrag: this._handleTabDrag, onTabDragEnd: this._handleTabDragEnd, onTabDragStart: this._handleTabDragStart, openWidgetId: this.props.openWidgetId, verticalAnchor: this.props.verticalAnchor, widgets: this.props.widgets, widgetTabs: this.props.widgetTabs }), verticalAnchor: this.props.verticalAnchor }));
+    }
+}
+exports.WidgetStack = WidgetStack;
+/** Tabs of [[WidgetStack]] component.
+ * @internal
+ */
+class WidgetStackTabs extends React.PureComponent {
+    render() {
+        let renderIndex = -1;
+        return this.props.widgets.map((widgetId) => {
+            const tabs = this.props.widgetTabs[widgetId];
+            if (tabs.length <= 0)
+                return null;
+            renderIndex++;
+            // istanbul ignore next
+            return (React.createElement(React.Fragment, { key: widgetId },
+                renderIndex < 1 ? undefined : React.createElement(appui_layout_react_1.TabSeparator, { isHorizontal: appui_layout_react_1.VerticalAnchorHelpers.isHorizontal(this.props.verticalAnchor) }),
+                React.createElement(WidgetStackTabGroup, { activeTabIndex: this.props.activeTabIndex, draggedWidget: this.props.draggedWidget, horizontalAnchor: this.props.horizontalAnchor, isCollapsed: this.props.isCollapsed, isProtruding: this.props.isProtruding, isStacked: this.props.widgets.length > 1, onTabClick: this.props.onTabClick, onTabDrag: this.props.onTabDrag, onTabDragEnd: this.props.onTabDragEnd, onTabDragStart: this.props.onTabDragStart, openWidgetId: this.props.openWidgetId, tabs: tabs, verticalAnchor: this.props.verticalAnchor, widgetId: widgetId })));
+        });
+    }
+}
+exports.WidgetStackTabs = WidgetStackTabs;
+/** Widget tab group used in [[WidgetStackTabs]] component.
+ * @internal
+ */
+class WidgetStackTabGroup extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._firstTab = React.createRef();
+        this._handleTabDragStart = (tabIndex, initialPosition) => {
+            if (!this._firstTab.current)
+                return;
+            const firstTabBounds = core_react_1.Rectangle.create(this._firstTab.current.getBounds()).toProps();
+            this.props.onTabDragStart(this.props.widgetId, tabIndex, initialPosition, firstTabBounds);
+        };
+        this._handleTabClick = (tabIndex) => {
+            this.props.onTabClick(this.props.widgetId, tabIndex);
+        };
+    }
+    render() {
+        const lastPosition = this.props.draggedWidget ? this.props.draggedWidget.lastPosition : undefined;
+        const isWidgetStackOpen = !!this.props.openWidgetId;
+        const isWidgetOpen = this.props.openWidgetId === this.props.widgetId;
+        const tabs = this.props.tabs.map((tab, index) => {
+            const mode = !isWidgetStackOpen ? appui_layout_react_1.TabMode.Closed : isWidgetOpen && this.props.activeTabIndex === index ? appui_layout_react_1.TabMode.Active : appui_layout_react_1.TabMode.Open;
+            return (React.createElement(WidgetStackTab, { horizontalAnchor: this.props.horizontalAnchor, iconSpec: tab.iconSpec, index: index, badgeType: tab.badgeType, isCollapsed: this.props.isCollapsed, isProtruding: this.props.isProtruding, key: `${this.props.widgetId}-${index}`, lastPosition: lastPosition, mode: mode, onClick: this._handleTabClick, onDrag: this.props.onTabDrag, onDragEnd: this.props.onTabDragEnd, onDragStart: this._handleTabDragStart, tabRef: index === 0 ? this._firstTab : undefined, title: tab.title, verticalAnchor: this.props.verticalAnchor }));
+        });
+        if (tabs.length > 1) {
+            return (React.createElement(appui_layout_react_1.TabGroup, { handle: this.getTabHandleMode(), horizontalAnchor: this.props.horizontalAnchor, isCollapsed: this.props.isCollapsed, verticalAnchor: this.props.verticalAnchor }, tabs));
+        }
+        return tabs;
+    }
+    getTabHandleMode() {
+        if (this.props.draggedWidget && this.props.draggedWidget.id === this.props.widgetId && this.props.draggedWidget.isUnmerge)
+            return appui_layout_react_1.HandleMode.Visible;
+        if (this.props.isStacked)
+            return appui_layout_react_1.HandleMode.Hovered;
+        return appui_layout_react_1.HandleMode.Timedout;
+    }
+}
+exports.WidgetStackTabGroup = WidgetStackTabGroup;
+/** Tab used in [[WidgetStackTabGroup]] component.
+ * @internal
+ */
+class WidgetStackTab extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._handleDragStart = (initialPosition) => {
+            this.props.onDragStart(this.props.index, initialPosition);
+        };
+        this._handleClick = () => {
+            this.props.onClick(this.props.index);
+        };
+    }
+    render() {
+        return (React.createElement(appui_layout_react_1.Tab, { badge: core_react_1.BadgeUtilities.getComponentForBadgeType(this.props.badgeType), horizontalAnchor: this.props.horizontalAnchor, isCollapsed: this.props.isCollapsed, isProtruding: this.props.isProtruding, lastPosition: this.props.lastPosition, mode: this.props.mode, onClick: this._handleClick, onDrag: this.props.onDrag, onDragEnd: this.props.onDragEnd, onDragStart: this._handleDragStart, ref: this.props.tabRef, title: this.props.title, verticalAnchor: this.props.verticalAnchor }, core_react_1.IconHelper.getIconReactNode(this.props.iconSpec)));
+    }
+}
+exports.WidgetStackTab = WidgetStackTab;
 //# sourceMappingURL=WidgetStack.js.map