@itwin/appui-react 4.14.0 → 4.14.2

package/lib/cjs/appui-react/feedback/ElementTooltip.js

@@ -8,17 +8,18 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElementTooltip = exports.ElementTooltipChangedEvent = void 0;
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
+require("./ElementTooltip.scss");
 const classnames_1 = require("classnames");
 const React = require("react");
-const Tooltip_1 = require("../layout/popup/Tooltip");
+const ReactDOM = require("react-dom");
+const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const Tooltip_1 = require("../layout/popup/Tooltip");
 /** ElementTooltip Changed Event class.
  * @public
  * @deprecated in 4.13.x. This class should not be used by applications to instantiate objects.
  */
-// eslint-disable-next-line deprecation/deprecation
 class ElementTooltipChangedEvent extends appui_abstract_1.UiEvent {
 }
 exports.ElementTooltipChangedEvent = ElementTooltipChangedEvent;
@@ -26,7 +27,6 @@ exports.ElementTooltipChangedEvent = ElementTooltipChangedEvent;
  * @public
  */
 class ElementTooltip extends React.Component {
-    // eslint-disable-next-line deprecation/deprecation
     static get onElementTooltipChangedEvent() {
         return ElementTooltip._elementTooltipChangedEvent;
     }
@@ -44,7 +44,6 @@ class ElementTooltip extends React.Component {
             pt,
             options,
         });
-        el.ownerDocument.addEventListener("mousemove", ElementTooltip._handleMouseMove);
     }
     static hideTooltip() {
         ElementTooltip._isTooltipVisible = false;
@@ -61,89 +60,54 @@ class ElementTooltip extends React.Component {
         if (halt && ElementTooltip._isTooltipVisible)
             ElementTooltip.hideTooltip();
     }
-    constructor(props) {
-        super(props);
-        this._size = {
-            height: 0,
-            width: 0,
-        };
-        /** @internal */
-        this.state = {
-            message: "",
-            isVisible: false,
-            position: {
-                x: 0,
-                y: 0,
-            },
-        };
-        this._handleElementTooltipChangedEvent = (args // eslint-disable-line deprecation/deprecation
-        ) => {
-            this._element = args.el;
-            this._position = args.pt;
-            this.setState({
-                isVisible: args.isTooltipVisible,
-                message: args.message,
-            });
-            this.updatePosition();
-        };
-        this._handleSizeChanged = (size) => {
-            this._size = size;
-            this.updatePosition();
-        };
-    }
     render() {
-        if (!this.state.isVisible)
-            return null;
-        const className = (0, classnames_1.default)("uifw-element-tooltip", this.props.className);
-        return (React.createElement("div", { className: "uifw-element-tooltip-container" },
-            React.createElement(Tooltip_1.Tooltip, { className: className, style: this.props.style, position: this.state.position, onSizeChanged: this._handleSizeChanged },
-                React.createElement(core_react_1.MessageRenderer, { message: this.state.message }))));
-    }
-    componentDidMount() {
-        ElementTooltip.onElementTooltipChangedEvent.addListener(this._handleElementTooltipChangedEvent);
+        return React.createElement(ElementTooltipComponent, null);
     }
-    componentWillUnmount() {
-        ElementTooltip.onElementTooltipChangedEvent.removeListener(this._handleElementTooltipChangedEvent);
-    }
-    static _handleMouseMove(event) {
-        const el = event.currentTarget;
-        /* Only monitor mouse movement when an ElementTooltip is open. */
-        if ((el && ElementTooltip._isTooltipHalted) ||
-            !ElementTooltip._isTooltipVisible) {
-            el.removeEventListener("mousemove", ElementTooltip._handleMouseMove);
+}
+exports.ElementTooltip = ElementTooltip;
+ElementTooltip._elementTooltipChangedEvent = new core_bentley_1.BeUiEvent();
+function ElementTooltipComponent(props) {
+    const [visible, setVisible] = React.useState(false);
+    const [message, setMessage] = React.useState("");
+    const [preferredPosition, setPreferredPosition] = React.useState(undefined);
+    const [position, setPosition] = React.useState({ x: 0, y: 0 });
+    // Use a dedicated container for the tooltip to avoid z-index issues in the main window.
+    const [mainContainer, setMainContainer] = React.useState(undefined);
+    const [container, setContainer] = React.useState(undefined);
+    const [popout, setPopout] = React.useState(false);
+    const [size, setSize] = React.useState(undefined);
+    React.useEffect(() => {
+        return ElementTooltip.onElementTooltipChangedEvent.addListener((args) => {
+            const isPopout = args.el?.ownerDocument.defaultView !== window;
+            setPopout(isPopout);
+            setVisible(args.isTooltipVisible);
+            setMessage(args.message);
+            setContainer(args.el);
+            setPreferredPosition(args.pt);
+        });
+    }, []);
+    const portalContainer = popout ? container : mainContainer;
+    React.useLayoutEffect(() => {
+        if (!preferredPosition)
             return;
-        }
-        const hoveredElement = el
-            ? el.elementFromPoint(event.clientX, event.clientY)
-            : undefined;
-        /* If the mouse has moved to an element that is not the view canvas, close the ElementTooltip. */
-        if (hoveredElement && hoveredElement.localName !== "canvas") {
-            ElementTooltip.onElementTooltipChangedEvent.emit({
-                isTooltipVisible: false,
-                message: "",
-            });
-            el.removeEventListener("mousemove", ElementTooltip._handleMouseMove);
+        // Use preferred position by default.
+        setPosition(preferredPosition);
+        if (!container)
             return;
-        }
-    }
-    updatePosition() {
-        this.setState((prevState) => {
-            if (!this._element)
-                return null;
-            if (!this._position)
-                return null;
-            const containerBounds = core_react_1.Rectangle.create(this._element.getBoundingClientRect());
-            const relativeBounds = core_react_1.Rectangle.createFromSize(this._size).offset(this._position);
-            const adjustedPosition = (0, Tooltip_1.offsetAndContainInContainer)(relativeBounds, containerBounds.getSize(), { x: 8, y: 8 });
-            const position = adjustedPosition.offset(containerBounds.topLeft());
-            if (position.equals(prevState.position))
-                return null;
-            return {
-                position,
-            };
-        });
-    }
+        if (!size)
+            return;
+        // Contain the tooltip based on the container bounds.
+        const containerBounds = core_react_1.Rectangle.create(container.getBoundingClientRect());
+        const bounds = core_react_1.Rectangle.createFromSize(size).offset(preferredPosition);
+        const adjustedPosition = (0, Tooltip_1.offsetAndContainInContainer)(bounds, containerBounds.getSize(), { x: 8, y: 8 });
+        const newPosition = adjustedPosition.offset(containerBounds.topLeft());
+        setPosition(newPosition);
+    }, [container, size, preferredPosition]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: (0, classnames_1.default)("uifw-feedback-elementTooltip_container", props.className), ref: (el) => setMainContainer(el ?? undefined) }),
+        portalContainer &&
+            visible &&
+            ReactDOM.createPortal(React.createElement(Tooltip_1.Tooltip, { className: (0, classnames_1.default)("uifw-feedback-elementTooltip", props.className), style: props.style, onSizeChanged: setSize, position: position },
+                React.createElement(core_react_1.MessageRenderer, { message: message })), portalContainer)));
 }
-exports.ElementTooltip = ElementTooltip;
-ElementTooltip._elementTooltipChangedEvent = new core_bentley_1.BeUiEvent(); // eslint-disable-line deprecation/deprecation
 //# sourceMappingURL=ElementTooltip.js.map

package/lib/cjs/appui-react/feedback/ElementTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementTooltip.js","sourceRoot":"","sources":["../../../../src/appui-react/feedback/ElementTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Notification\n */\n\nimport { UiEvent } from \"@itwin/appui-abstract\";\nimport type { ToolTipOptions } from \"@itwin/core-frontend\";\nimport type { XAndY } from \"@itwin/core-geometry\";\nimport type { CommonProps, Point, SizeProps } from \"@itwin/core-react\";\nimport { MessageRenderer, Rectangle } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { offsetAndContainInContainer, Tooltip } from \"../layout/popup/Tooltip\";\nimport type { NotifyMessageType } from \"../messages/ReactNotifyMessageDetails\";\nimport { BeUiEvent } from \"@itwin/core-bentley\";\n\n/** [[ElementTooltip]] State.\n * @internal\n */\ninterface ElementTooltipState {\n  isVisible: boolean;\n  message: NotifyMessageType;\n  position: XAndY;\n  options?: ToolTipOptions;\n}\n\n/** [[ElementTooltipChangedEvent]] arguments.\n * @public\n * @deprecated in 4.13.x. Event args are inferred from a listener. If explicit type is needed use a type helper.\n */\nexport interface ElementTooltipChangedEventArgs {\n  isTooltipVisible: boolean;\n  message: NotifyMessageType;\n  el?: HTMLElement;\n  pt?: XAndY;\n  options?: ToolTipOptions;\n}\n\n/** ElementTooltip Changed Event class.\n * @public\n * @deprecated in 4.13.x. This class should not be used by applications to instantiate objects.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport class ElementTooltipChangedEvent extends UiEvent<ElementTooltipChangedEventArgs> {}\n\n/** ElementTooltip React component.\n * @public\n */\nexport class ElementTooltip extends React.Component<\n  CommonProps,\n  ElementTooltipState\n> {\n  private static _elementTooltipChangedEvent =\n    new BeUiEvent<ElementTooltipChangedEventArgs>(); // eslint-disable-line deprecation/deprecation\n  private static _isTooltipVisible: boolean;\n  private static _isTooltipHalted: boolean;\n\n  // eslint-disable-next-line deprecation/deprecation\n  public static get onElementTooltipChangedEvent(): ElementTooltipChangedEvent {\n    return ElementTooltip._elementTooltipChangedEvent;\n  }\n  public static get isTooltipVisible(): boolean {\n    return ElementTooltip._isTooltipVisible;\n  }\n\n  public static showTooltip(\n    el: HTMLElement,\n    message: NotifyMessageType,\n    pt?: XAndY,\n    options?: ToolTipOptions\n  ): void {\n    if (ElementTooltip._isTooltipHalted) return;\n    ElementTooltip._isTooltipVisible = true;\n    ElementTooltip.onElementTooltipChangedEvent.emit({\n      isTooltipVisible: true,\n      el,\n      message,\n      pt,\n      options,\n    });\n    el.ownerDocument.addEventListener(\n      \"mousemove\",\n      ElementTooltip._handleMouseMove\n    );\n  }\n\n  public static hideTooltip(): void {\n    ElementTooltip._isTooltipVisible = false;\n    ElementTooltip.onElementTooltipChangedEvent.emit({\n      isTooltipVisible: false,\n      message: \"\",\n    });\n  }\n\n  public static get isTooltipHalted(): boolean {\n    return ElementTooltip._isTooltipHalted;\n  }\n  public static set isTooltipHalted(halt: boolean) {\n    ElementTooltip._isTooltipHalted = halt;\n    if (halt && ElementTooltip._isTooltipVisible) ElementTooltip.hideTooltip();\n  }\n\n  private _size: SizeProps = {\n    height: 0,\n    width: 0,\n  };\n  private _element?: HTMLElement;\n  private _position?: XAndY;\n\n  /** @internal */\n  public override readonly state: Readonly<ElementTooltipState> = {\n    message: \"\",\n    isVisible: false,\n    position: {\n      x: 0,\n      y: 0,\n    },\n  };\n\n  constructor(props: CommonProps) {\n    super(props);\n  }\n\n  public override render() {\n    if (!this.state.isVisible) return null;\n\n    const className = classnames(\"uifw-element-tooltip\", this.props.className);\n    return (\n      <div className=\"uifw-element-tooltip-container\">\n        <Tooltip\n          className={className}\n          style={this.props.style}\n          position={this.state.position}\n          onSizeChanged={this._handleSizeChanged}\n        >\n          <MessageRenderer message={this.state.message} />\n        </Tooltip>\n      </div>\n    );\n  }\n\n  public override componentDidMount(): void {\n    ElementTooltip.onElementTooltipChangedEvent.addListener(\n      this._handleElementTooltipChangedEvent\n    );\n  }\n\n  public override componentWillUnmount(): void {\n    ElementTooltip.onElementTooltipChangedEvent.removeListener(\n      this._handleElementTooltipChangedEvent\n    );\n  }\n\n  private static _handleMouseMove(event: MouseEvent) {\n    const el = event.currentTarget as Document;\n    /* Only monitor mouse movement when an ElementTooltip is open. */\n    if (\n      (el && ElementTooltip._isTooltipHalted) ||\n      !ElementTooltip._isTooltipVisible\n    ) {\n      el.removeEventListener(\"mousemove\", ElementTooltip._handleMouseMove);\n      return;\n    }\n    const hoveredElement = el\n      ? el.elementFromPoint(event.clientX, event.clientY)\n      : undefined;\n    /* If the mouse has moved to an element that is not the view canvas, close the ElementTooltip. */\n    if (hoveredElement && hoveredElement.localName !== \"canvas\") {\n      ElementTooltip.onElementTooltipChangedEvent.emit({\n        isTooltipVisible: false,\n        message: \"\",\n      });\n      el.removeEventListener(\"mousemove\", ElementTooltip._handleMouseMove);\n      return;\n    }\n  }\n  private _handleElementTooltipChangedEvent = (\n    args: ElementTooltipChangedEventArgs // eslint-disable-line deprecation/deprecation\n  ) => {\n    this._element = args.el;\n    this._position = args.pt;\n    this.setState({\n      isVisible: args.isTooltipVisible,\n      message: args.message,\n    });\n    this.updatePosition();\n  };\n\n  private _handleSizeChanged = (size: SizeProps) => {\n    this._size = size;\n    this.updatePosition();\n  };\n\n  private updatePosition() {\n    this.setState((prevState) => {\n      if (!this._element) return null;\n      if (!this._position) return null;\n\n      const containerBounds = Rectangle.create(\n        this._element.getBoundingClientRect()\n      );\n      const relativeBounds = Rectangle.createFromSize(this._size).offset(\n        this._position\n      );\n      const adjustedPosition: Point = offsetAndContainInContainer(\n        relativeBounds,\n        containerBounds.getSize(),\n        { x: 8, y: 8 }\n      );\n      const position = adjustedPosition.offset(containerBounds.topLeft());\n\n      if (position.equals(prevState.position)) return null;\n\n      return {\n        position,\n      };\n    });\n  }\n}\n"]}
+{"version":3,"file":"ElementTooltip.js","sourceRoot":"","sources":["../../../../src/appui-react/feedback/ElementTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Notification\n */\n\nimport \"./ElementTooltip.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { UiEvent } from \"@itwin/appui-abstract\";\nimport { BeUiEvent } from \"@itwin/core-bentley\";\nimport type { ToolTipOptions } from \"@itwin/core-frontend\";\nimport type { XAndY } from \"@itwin/core-geometry\";\nimport type { CommonProps, SizeProps } from \"@itwin/core-react\";\nimport { MessageRenderer, Rectangle } from \"@itwin/core-react\";\nimport type { NotifyMessageType } from \"../messages/ReactNotifyMessageDetails\";\nimport { offsetAndContainInContainer, Tooltip } from \"../layout/popup/Tooltip\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** [[ElementTooltip]] state. */\ninterface ElementTooltipState {\n  isVisible: boolean;\n  message: NotifyMessageType;\n  position: XAndY;\n  options?: ToolTipOptions;\n}\n\n/** [[ElementTooltipChangedEvent]] arguments.\n * @public\n * @deprecated in 4.13.x. Event args are inferred from a listener. If explicit type is needed use a type helper.\n */\nexport interface ElementTooltipChangedEventArgs {\n  isTooltipVisible: boolean;\n  message: NotifyMessageType;\n  el?: HTMLElement;\n  pt?: XAndY;\n  options?: ToolTipOptions;\n}\n\n/** ElementTooltip Changed Event class.\n * @public\n * @deprecated in 4.13.x. This class should not be used by applications to instantiate objects.\n */\nexport class ElementTooltipChangedEvent extends UiEvent<ElementTooltipChangedEventArgs> {}\n\n/** ElementTooltip React component.\n * @public\n */\nexport class ElementTooltip extends React.Component<\n  CommonProps,\n  ElementTooltipState\n> {\n  private static _elementTooltipChangedEvent =\n    new BeUiEvent<ElementTooltipChangedEventArgs>();\n  private static _isTooltipVisible: boolean;\n  private static _isTooltipHalted: boolean;\n\n  public static get onElementTooltipChangedEvent(): ElementTooltipChangedEvent {\n    return ElementTooltip._elementTooltipChangedEvent;\n  }\n\n  public static get isTooltipVisible(): boolean {\n    return ElementTooltip._isTooltipVisible;\n  }\n\n  public static showTooltip(\n    el: HTMLElement,\n    message: NotifyMessageType,\n    pt?: XAndY,\n    options?: ToolTipOptions\n  ): void {\n    if (ElementTooltip._isTooltipHalted) return;\n    ElementTooltip._isTooltipVisible = true;\n    ElementTooltip.onElementTooltipChangedEvent.emit({\n      isTooltipVisible: true,\n      el,\n      message,\n      pt,\n      options,\n    });\n  }\n\n  public static hideTooltip(): void {\n    ElementTooltip._isTooltipVisible = false;\n    ElementTooltip.onElementTooltipChangedEvent.emit({\n      isTooltipVisible: false,\n      message: \"\",\n    });\n  }\n\n  public static get isTooltipHalted(): boolean {\n    return ElementTooltip._isTooltipHalted;\n  }\n\n  public static set isTooltipHalted(halt: boolean) {\n    ElementTooltip._isTooltipHalted = halt;\n    if (halt && ElementTooltip._isTooltipVisible) ElementTooltip.hideTooltip();\n  }\n\n  public override render() {\n    return <ElementTooltipComponent />;\n  }\n}\n\nfunction ElementTooltipComponent(props: CommonProps) {\n  const [visible, setVisible] = React.useState(false);\n  const [message, setMessage] = React.useState<NotifyMessageType>(\"\");\n  const [preferredPosition, setPreferredPosition] = React.useState<\n    XAndY | undefined\n  >(undefined);\n  const [position, setPosition] = React.useState<XAndY>({ x: 0, y: 0 });\n\n  // Use a dedicated container for the tooltip to avoid z-index issues in the main window.\n  const [mainContainer, setMainContainer] = React.useState<\n    HTMLDivElement | undefined\n  >(undefined);\n  const [container, setContainer] = React.useState<HTMLElement | undefined>(\n    undefined\n  );\n  const [popout, setPopout] = React.useState(false);\n  const [size, setSize] = React.useState<SizeProps | undefined>(undefined);\n\n  React.useEffect(() => {\n    return ElementTooltip.onElementTooltipChangedEvent.addListener((args) => {\n      const isPopout = args.el?.ownerDocument.defaultView !== window;\n      setPopout(isPopout);\n      setVisible(args.isTooltipVisible);\n      setMessage(args.message);\n      setContainer(args.el);\n      setPreferredPosition(args.pt);\n    });\n  }, []);\n\n  const portalContainer = popout ? container : mainContainer;\n\n  React.useLayoutEffect(() => {\n    if (!preferredPosition) return;\n\n    // Use preferred position by default.\n    setPosition(preferredPosition);\n\n    if (!container) return;\n    if (!size) return;\n\n    // Contain the tooltip based on the container bounds.\n    const containerBounds = Rectangle.create(container.getBoundingClientRect());\n    const bounds = Rectangle.createFromSize(size).offset(preferredPosition);\n    const adjustedPosition = offsetAndContainInContainer(\n      bounds,\n      containerBounds.getSize(),\n      { x: 8, y: 8 }\n    );\n    const newPosition = adjustedPosition.offset(containerBounds.topLeft());\n    setPosition(newPosition);\n  }, [container, size, preferredPosition]);\n\n  return (\n    <>\n      <div\n        className={classnames(\n          \"uifw-feedback-elementTooltip_container\",\n          props.className\n        )}\n        ref={(el) => setMainContainer(el ?? undefined)}\n      />\n      {portalContainer &&\n        visible &&\n        ReactDOM.createPortal(\n          <Tooltip\n            className={classnames(\n              \"uifw-feedback-elementTooltip\",\n              props.className\n            )}\n            style={props.style}\n            onSizeChanged={setSize}\n            position={position}\n          >\n            <MessageRenderer message={message} />\n          </Tooltip>,\n          portalContainer\n        )}\n    </>\n  );\n}\n"]}

package/lib/cjs/appui-react/feedback/ElementTooltip.scss

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@import "../variables";
+
+.uifw-feedback-elementTooltip {
+  pointer-events: none;
+  width: max-content;
+  font-size: var(--iui-font-size-1);
+  border: {
+    color: $uifw-popup-border-color;
+    radius: $uifw-popup-border-radius;
+    style: solid;
+    width: $uifw-popup-border-width;
+  }
+}
+
+.uifw-feedback-elementTooltip_container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+
+  @include uicore-z-index(tooltip);
+}

package/lib/cjs/appui-react/statusbar/popup/StatusBarPopover.d.ts

@@ -4,14 +4,14 @@
 import * as React from "react";
 import { Popover } from "@itwin/itwinui-react";
 import { ButtonExpandIndicator } from "./ExpandIndicator";
-import type { CommonProps } from "@itwin/core-react";
+import { type CommonProps } from "@itwin/core-react";
 type StatusBarPopoverProps = CommonProps & Pick<React.ComponentProps<typeof Popover>, "content" | "children" | "visible" | "onVisibleChange" | "closeOnOutsideClick">;
 /** Popover component used in `StatusBar` component.
  * This component should wrap the element that triggers the popover.
  * @note Add the `StatusBarPopover.ExpandIndicator` to popover trigger buttons.
  * @public
  */
-export declare function StatusBarPopover(props: StatusBarPopoverProps): React.JSX.Element;
+export declare function StatusBarPopover({ content, ...props }: StatusBarPopoverProps): React.JSX.Element;
 /** Components used in `StatusBarPopover`.
  * @public
  */

package/lib/cjs/appui-react/statusbar/popup/StatusBarPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBarPopover.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/statusbar/popup/StatusBarPopover.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,KAAK,qBAAqB,GAAG,WAAW,GACtC,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAClC,SAAS,GACT,UAAU,GACV,SAAS,GACT,iBAAiB,GACjB,qBAAqB,CACxB,CAAC;AAEJ;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAW5D;AAED;;GAEG;AACH,yBAAiB,gBAAgB,CAAC;IAChC;;OAEG;IACI,MAAM,eAAe,8BAAwB,CAAC;CACtD"}
+{"version":3,"file":"StatusBarPopover.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/statusbar/popup/StatusBarPopover.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAEnE,KAAK,qBAAqB,GAAG,WAAW,GACtC,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAClC,SAAS,GACT,UAAU,GACV,SAAS,GACT,iBAAiB,GACjB,qBAAqB,CACxB,CAAC;AAEJ;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,qBAsB5E;AAED;;GAEG;AACH,yBAAiB,gBAAgB,CAAC;IAChC;;OAEG;IACI,MAAM,eAAe,8BAAwB,CAAC;CACtD"}

package/lib/cjs/appui-react/statusbar/popup/StatusBarPopover.js

@@ -11,14 +11,18 @@ exports.StatusBarPopover = void 0;
 const React = require("react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const ExpandIndicator_1 = require("./ExpandIndicator");
+const core_react_1 = require("@itwin/core-react");
 /** Popover component used in `StatusBar` component.
  * This component should wrap the element that triggers the popover.
  * @note Add the `StatusBarPopover.ExpandIndicator` to popover trigger buttons.
  * @public
  */
-function StatusBarPopover(props) {
-    return (React.createElement(itwinui_react_1.Popover, { ...props, placement: "top", applyBackground: true, middleware: {
+function StatusBarPopover({ content, ...props }) {
+    const [portalTarget, setPortalTarget] = React.useState(undefined);
+    return (React.createElement(itwinui_react_1.Popover, { ...props, content: React.createElement(core_react_1.PopupContext.Provider, { value: portalTarget }, content), placement: "top", applyBackground: true, middleware: {
             offset: 4,
+        }, ref: (el) => {
+            setPortalTarget(el ?? undefined);
         } }));
 }
 exports.StatusBarPopover = StatusBarPopover;

package/lib/cjs/appui-react/statusbar/popup/StatusBarPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBarPopover.js","sourceRoot":"","sources":["../../../../../src/appui-react/statusbar/popup/StatusBarPopover.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,wDAA+C;AAC/C,uDAA0D;AAa1D;;;;GAIG;AACH,SAAgB,gBAAgB,CAAC,KAA4B;IAC3D,OAAO,CACL,oBAAC,uBAAO,OACF,KAAK,EACT,SAAS,EAAC,KAAK,EACf,eAAe,QACf,UAAU,EAAE;YACV,MAAM,EAAE,CAAC;SACV,GACD,CACH,CAAC;AACJ,CAAC;AAXD,4CAWC;AAED;;GAEG;AACH,WAAiB,gBAAgB;IAC/B;;OAEG;IACU,gCAAe,GAAG,uCAAqB,CAAC;AACvD,CAAC,EALgB,gBAAgB,gCAAhB,gBAAgB,QAKhC","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 StatusBar\n */\n\nimport * as React from \"react\";\nimport { Popover } from \"@itwin/itwinui-react\";\nimport { ButtonExpandIndicator } from \"./ExpandIndicator\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\ntype StatusBarPopoverProps = CommonProps &\n  Pick<\n    React.ComponentProps<typeof Popover>,\n    | \"content\"\n    | \"children\"\n    | \"visible\"\n    | \"onVisibleChange\"\n    | \"closeOnOutsideClick\"\n  >;\n\n/** Popover component used in `StatusBar` component.\n * This component should wrap the element that triggers the popover.\n * @note Add the `StatusBarPopover.ExpandIndicator` to popover trigger buttons.\n * @public\n */\nexport function StatusBarPopover(props: StatusBarPopoverProps) {\n  return (\n    <Popover\n      {...props}\n      placement=\"top\"\n      applyBackground\n      middleware={{\n        offset: 4,\n      }}\n    />\n  );\n}\n\n/** Components used in `StatusBarPopover`.\n * @public\n */\nexport namespace StatusBarPopover {\n  /** Indicator to be used in popover trigger buttons to show expandable content.\n   * @public\n   */\n  export const ExpandIndicator = ButtonExpandIndicator;\n}\n"]}
+{"version":3,"file":"StatusBarPopover.js","sourceRoot":"","sources":["../../../../../src/appui-react/statusbar/popup/StatusBarPopover.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,wDAA+C;AAC/C,uDAA0D;AAC1D,kDAAmE;AAYnE;;;;GAIG;AACH,SAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAyB;IAC3E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAEpD,SAAS,CAAC,CAAC;IACb,OAAO,CACL,oBAAC,uBAAO,OACF,KAAK,EACT,OAAO,EACL,oBAAC,yBAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IACvC,OAAO,CACc,EAE1B,SAAS,EAAC,KAAK,EACf,eAAe,QACf,UAAU,EAAE;YACV,MAAM,EAAE,CAAC;SACV,EACD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;YACV,eAAe,CAAC,EAAE,IAAI,SAAS,CAAC,CAAC;QACnC,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAtBD,4CAsBC;AAED;;GAEG;AACH,WAAiB,gBAAgB;IAC/B;;OAEG;IACU,gCAAe,GAAG,uCAAqB,CAAC;AACvD,CAAC,EALgB,gBAAgB,gCAAhB,gBAAgB,QAKhC","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 StatusBar\n */\n\nimport * as React from \"react\";\nimport { Popover } from \"@itwin/itwinui-react\";\nimport { ButtonExpandIndicator } from \"./ExpandIndicator\";\nimport { type CommonProps, PopupContext } from \"@itwin/core-react\";\n\ntype StatusBarPopoverProps = CommonProps &\n  Pick<\n    React.ComponentProps<typeof Popover>,\n    | \"content\"\n    | \"children\"\n    | \"visible\"\n    | \"onVisibleChange\"\n    | \"closeOnOutsideClick\"\n  >;\n\n/** Popover component used in `StatusBar` component.\n * This component should wrap the element that triggers the popover.\n * @note Add the `StatusBarPopover.ExpandIndicator` to popover trigger buttons.\n * @public\n */\nexport function StatusBarPopover({ content, ...props }: StatusBarPopoverProps) {\n  const [portalTarget, setPortalTarget] = React.useState<\n    HTMLElement | undefined\n  >(undefined);\n  return (\n    <Popover\n      {...props}\n      content={\n        <PopupContext.Provider value={portalTarget}>\n          {content}\n        </PopupContext.Provider>\n      }\n      placement=\"top\"\n      applyBackground\n      middleware={{\n        offset: 4,\n      }}\n      ref={(el) => {\n        setPortalTarget(el ?? undefined);\n      }}\n    />\n  );\n}\n\n/** Components used in `StatusBarPopover`.\n * @public\n */\nexport namespace StatusBarPopover {\n  /** Indicator to be used in popover trigger buttons to show expandable content.\n   * @public\n   */\n  export const ExpandIndicator = ButtonExpandIndicator;\n}\n"]}

package/lib/cjs/appui-react/widget-panels/Frontstage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Frontstage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/Frontstage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Frontstage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/Frontstage.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/appui-react/widget-panels/Frontstage.js

@@ -263,11 +263,10 @@ function addPanelSectionWidgetDefs(frontstageDef, location, section) {
     }
 }
 exports.addPanelSectionWidgetDefs = addPanelSectionWidgetDefs;
+/** Sends back popout widgets if app is not an electron app. */
 function processPopoutWidgets(frontstageDef) {
-    // Electron reopens popout windows w/o user interaction.
-    if (core_bentley_1.ProcessDetector.isElectronAppFrontend) {
+    if (core_bentley_1.ProcessDetector.isElectronAppFrontend)
         return;
-    }
     (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
     const state = frontstageDef.nineZoneState;
     for (const id of state.popoutWidgets.allIds) {
@@ -277,6 +276,17 @@ function processPopoutWidgets(frontstageDef) {
         });
     }
 }
+/** Opens popout widgets if app is an electron app. */
+function openPopoutWidgets(frontstageDef) {
+    // Only electron can reopen popout windows w/o user interaction.
+    if (!core_bentley_1.ProcessDetector.isElectronAppFrontend)
+        return;
+    (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+    const state = frontstageDef.nineZoneState;
+    for (const id of state.popoutWidgets.allIds) {
+        frontstageDef.openPopoutWidgetContainer(id, undefined);
+    }
+}
 /** Adds frontstageDef widgets that are missing in NineZoneState.
  * @internal
  */
@@ -534,6 +544,7 @@ function useSavedFrontstageState(frontstageDef) {
             // Switching to previously initialized frontstage.
             if (frontstageDef.nineZoneState) {
                 processPopoutWidgets(frontstageDef);
+                openPopoutWidgets(frontstageDef);
                 return;
             }
             const id = frontstageDef.id;