@itwin/appui-react 4.14.0 → 4.14.2

package/lib/esm/appui-react/configurableui/ConfigurableUiContent.js

@@ -33,7 +33,7 @@ export const WrapperContext = React.createContext(document.body);
  * @public
  */
 export function ConfigurableUiContent(props) {
-    const [mainElement, setMainElement] = React.useState(null);
+    const [mainElement, setMainElement] = React.useState();
     const [portalContainer, setPortalContainer] = React.useState();
     React.useEffect(() => {
         UiFramework.keyboardShortcuts.setFocusToHome();
@@ -51,14 +51,11 @@ export function ConfigurableUiContent(props) {
         const point = new Point(e.pageX, e.pageY);
         CursorInformation.handleMouseMove(point);
     }, []);
-    return (React.createElement("main", { role: "main", id: "uifw-configurableui-wrapper", className: props.className, style: props.style, onMouseMove: handleMouseMove, ref: setMainElement },
-        React.createElement(WrapperContext.Provider, { value: mainElement },
+    return (React.createElement("main", { role: "main", id: "uifw-configurableui-wrapper", className: props.className, style: props.style, onMouseMove: handleMouseMove, ref: (el) => setMainElement(el ?? undefined) },
+        React.createElement(WrapperContext.Provider, { value: mainElement ?? document.body },
             React.createElement(ThemeProvider, { style: { height: "100%" }, portalContainer: portalContainer },
                 props.appBackstage,
                 React.createElement(WidgetPanelsFrontstage, null),
-                React.createElement(ContentDialogRenderer, null),
-                React.createElement(ModelessDialogRenderer, null),
-                React.createElement(ModalDialogRenderer, null),
                 React.createElement(ElementTooltip, null),
                 React.createElement(PointerMessage, null),
                 React.createElement(KeyboardShortcutMenu, null),
@@ -66,7 +63,10 @@ export function ConfigurableUiContent(props) {
                 React.createElement(CursorPopupMenu, null),
                 React.createElement(CursorPopupRenderer, null),
                 React.createElement(PopupRenderer, null),
-                React.createElement(MessageRenderer, null))),
-        React.createElement("div", { className: "uifw-configurableui-portalContainer", ref: (instance) => setPortalContainer(instance ?? undefined) })));
+                React.createElement(MessageRenderer, null),
+                React.createElement("div", { className: "uifw-configurableui-portalContainer", ref: (instance) => setPortalContainer(instance ?? undefined) },
+                    React.createElement(ContentDialogRenderer, null),
+                    React.createElement(ModelessDialogRenderer, null),
+                    React.createElement(ModalDialogRenderer, null))))));
 }
 //# sourceMappingURL=ConfigurableUiContent.js.map

package/lib/esm/appui-react/configurableui/ConfigurableUiContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableUiContent.js","sourceRoot":"","sources":["../../../../src/appui-react/configurableui/ConfigurableUiContent.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 ConfigurableUi\n */\n\nimport \"./ConfigurableUiContent.scss\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Point } from \"@itwin/core-react\";\nimport { ThemeProvider } from \"@itwin/itwinui-react\";\nimport { CursorInformation } from \"../cursor/CursorInformation\";\nimport { CursorPopupMenu } from \"../cursor/cursormenu/CursorMenu\";\nimport { CursorPopupRenderer } from \"../cursor/cursorpopup/CursorPopupManager\";\nimport { ModalDialogRenderer } from \"../dialog/ModalDialogManager\";\nimport { ModelessDialogRenderer } from \"../dialog/ModelessDialogManager\";\nimport { ElementTooltip } from \"../feedback/ElementTooltip\";\nimport { KeyboardShortcutMenu } from \"../keyboardshortcut/KeyboardShortcutMenu\";\nimport { InputFieldMessage } from \"../messages/InputField\";\nimport { PointerMessage } from \"../messages/Pointer\";\nimport { PopupRenderer } from \"../popup/PopupManager\";\nimport { WidgetPanelsFrontstage } from \"../widget-panels/Frontstage\";\nimport { ContentDialogRenderer } from \"../dialog/ContentDialogManager\";\nimport { UiFramework } from \"../UiFramework\";\nimport { InternalConfigurableUiManager } from \"./InternalConfigurableUiManager\";\nimport { MessageRenderer } from \"../messages/MessageRenderer\";\n\n// cSpell:ignore cursormenu cursorpopup\n\n/** Properties for [[ConfigurableUiContent]]\n * @public\n */\nexport interface ConfigurableUiContentProps extends CommonProps {\n  /** React node of the Backstage */\n  appBackstage?: React.ReactNode;\n\n  /** @internal */\n  idleTimeout?: number;\n  /** @internal */\n  intervalTimeout?: number;\n}\n\n/**\n * Allows children to get the bounds or other properties of the wrapper element.\n * @internal\n */\nexport const WrapperContext = React.createContext<HTMLElement>(document.body);\n\n/** The ConfigurableUiContent component is the component the pages specified using ConfigurableUi\n * @public\n */\nexport function ConfigurableUiContent(props: ConfigurableUiContentProps) {\n  const [mainElement, setMainElement] = React.useState<HTMLElement | null>(\n    null\n  );\n  const [portalContainer, setPortalContainer] = React.useState<\n    HTMLElement | undefined\n  >();\n  React.useEffect(() => {\n    UiFramework.keyboardShortcuts.setFocusToHome();\n  }, []);\n\n  React.useEffect(() => {\n    InternalConfigurableUiManager.activityTracker.initialize({\n      idleTimeout: props.idleTimeout,\n      intervalTimeout: props.intervalTimeout,\n    });\n    return () => {\n      InternalConfigurableUiManager.activityTracker.terminate();\n    };\n  }, [props.idleTimeout, props.intervalTimeout]);\n\n  const handleMouseMove = React.useCallback((e: React.MouseEvent) => {\n    const point = new Point(e.pageX, e.pageY);\n    CursorInformation.handleMouseMove(point);\n  }, []);\n\n  return (\n    <main\n      role=\"main\"\n      id=\"uifw-configurableui-wrapper\"\n      className={props.className}\n      style={props.style}\n      onMouseMove={handleMouseMove}\n      ref={setMainElement}\n    >\n      <WrapperContext.Provider value={mainElement!}>\n        <ThemeProvider\n          style={{ height: \"100%\" }}\n          portalContainer={portalContainer}\n        >\n          {props.appBackstage}\n          <WidgetPanelsFrontstage />\n          <ContentDialogRenderer />\n          <ModelessDialogRenderer />\n          <ModalDialogRenderer />\n          <ElementTooltip />\n          <PointerMessage />\n          <KeyboardShortcutMenu />\n          <InputFieldMessage />\n          <CursorPopupMenu />\n          <CursorPopupRenderer />\n          <PopupRenderer />\n          <MessageRenderer />\n        </ThemeProvider>\n      </WrapperContext.Provider>\n      <div\n        className=\"uifw-configurableui-portalContainer\"\n        ref={(instance) => setPortalContainer(instance ?? undefined)}\n      />\n    </main>\n  );\n}\n"]}
+{"version":3,"file":"ConfigurableUiContent.js","sourceRoot":"","sources":["../../../../src/appui-react/configurableui/ConfigurableUiContent.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAiB9D;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAc,QAAQ,CAAC,IAAI,CAAC,CAAC;AAE9E;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAiC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAe,CAAC;IACpE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAe,CAAC;IAC5E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,iBAAiB,CAAC,cAAc,EAAE,CAAC;IACjD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,6BAA6B,CAAC,eAAe,CAAC,UAAU,CAAC;YACvD,WAAW,EAAE,KAAK,CAAC,WAAW;YAC9B,eAAe,EAAE,KAAK,CAAC,eAAe;SACvC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,6BAA6B,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IAE/C,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAmB,EAAE,EAAE;QAChE,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;QAC1C,iBAAiB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,6BAA6B,EAChC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,eAAe,EAC5B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,SAAS,CAAC;QAE5C,oBAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,IAAI,QAAQ,CAAC,IAAI;YAC1D,oBAAC,aAAa,IACZ,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EACzB,eAAe,EAAE,eAAe;gBAE/B,KAAK,CAAC,YAAY;gBACnB,oBAAC,sBAAsB,OAAG;gBAC1B,oBAAC,cAAc,OAAG;gBAClB,oBAAC,cAAc,OAAG;gBAClB,oBAAC,oBAAoB,OAAG;gBACxB,oBAAC,iBAAiB,OAAG;gBACrB,oBAAC,eAAe,OAAG;gBACnB,oBAAC,mBAAmB,OAAG;gBACvB,oBAAC,aAAa,OAAG;gBACjB,oBAAC,eAAe,OAAG;gBACnB,6BACE,SAAS,EAAC,qCAAqC,EAC/C,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,kBAAkB,CAAC,QAAQ,IAAI,SAAS,CAAC;oBAE5D,oBAAC,qBAAqB,OAAG;oBACzB,oBAAC,sBAAsB,OAAG;oBAC1B,oBAAC,mBAAmB,OAAG,CACnB,CACQ,CACQ,CACrB,CACR,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ConfigurableUi\n */\n\nimport \"./ConfigurableUiContent.scss\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Point } from \"@itwin/core-react\";\nimport { ThemeProvider } from \"@itwin/itwinui-react\";\nimport { CursorInformation } from \"../cursor/CursorInformation\";\nimport { CursorPopupMenu } from \"../cursor/cursormenu/CursorMenu\";\nimport { CursorPopupRenderer } from \"../cursor/cursorpopup/CursorPopupManager\";\nimport { ModalDialogRenderer } from \"../dialog/ModalDialogManager\";\nimport { ModelessDialogRenderer } from \"../dialog/ModelessDialogManager\";\nimport { ElementTooltip } from \"../feedback/ElementTooltip\";\nimport { KeyboardShortcutMenu } from \"../keyboardshortcut/KeyboardShortcutMenu\";\nimport { InputFieldMessage } from \"../messages/InputField\";\nimport { PointerMessage } from \"../messages/Pointer\";\nimport { PopupRenderer } from \"../popup/PopupManager\";\nimport { WidgetPanelsFrontstage } from \"../widget-panels/Frontstage\";\nimport { ContentDialogRenderer } from \"../dialog/ContentDialogManager\";\nimport { UiFramework } from \"../UiFramework\";\nimport { InternalConfigurableUiManager } from \"./InternalConfigurableUiManager\";\nimport { MessageRenderer } from \"../messages/MessageRenderer\";\n\n// cSpell:ignore cursormenu cursorpopup\n\n/** Properties for [[ConfigurableUiContent]]\n * @public\n */\nexport interface ConfigurableUiContentProps extends CommonProps {\n  /** React node of the Backstage */\n  appBackstage?: React.ReactNode;\n\n  /** @internal */\n  idleTimeout?: number;\n  /** @internal */\n  intervalTimeout?: number;\n}\n\n/**\n * Allows children to get the bounds or other properties of the wrapper element.\n * @internal\n */\nexport const WrapperContext = React.createContext<HTMLElement>(document.body);\n\n/** The ConfigurableUiContent component is the component the pages specified using ConfigurableUi\n * @public\n */\nexport function ConfigurableUiContent(props: ConfigurableUiContentProps) {\n  const [mainElement, setMainElement] = React.useState<HTMLElement>();\n  const [portalContainer, setPortalContainer] = React.useState<HTMLElement>();\n  React.useEffect(() => {\n    UiFramework.keyboardShortcuts.setFocusToHome();\n  }, []);\n\n  React.useEffect(() => {\n    InternalConfigurableUiManager.activityTracker.initialize({\n      idleTimeout: props.idleTimeout,\n      intervalTimeout: props.intervalTimeout,\n    });\n    return () => {\n      InternalConfigurableUiManager.activityTracker.terminate();\n    };\n  }, [props.idleTimeout, props.intervalTimeout]);\n\n  const handleMouseMove = React.useCallback((e: React.MouseEvent) => {\n    const point = new Point(e.pageX, e.pageY);\n    CursorInformation.handleMouseMove(point);\n  }, []);\n\n  return (\n    <main\n      role=\"main\"\n      id=\"uifw-configurableui-wrapper\"\n      className={props.className}\n      style={props.style}\n      onMouseMove={handleMouseMove}\n      ref={(el) => setMainElement(el ?? undefined)}\n    >\n      <WrapperContext.Provider value={mainElement ?? document.body}>\n        <ThemeProvider\n          style={{ height: \"100%\" }}\n          portalContainer={portalContainer}\n        >\n          {props.appBackstage}\n          <WidgetPanelsFrontstage />\n          <ElementTooltip />\n          <PointerMessage />\n          <KeyboardShortcutMenu />\n          <InputFieldMessage />\n          <CursorPopupMenu />\n          <CursorPopupRenderer />\n          <PopupRenderer />\n          <MessageRenderer />\n          <div\n            className=\"uifw-configurableui-portalContainer\"\n            ref={(instance) => setPortalContainer(instance ?? undefined)}\n          >\n            <ContentDialogRenderer />\n            <ModelessDialogRenderer />\n            <ModalDialogRenderer />\n          </div>\n        </ThemeProvider>\n      </WrapperContext.Provider>\n    </main>\n  );\n}\n"]}

package/lib/esm/appui-react/configurableui/ConfigurableUiContent.scss

@@ -43,31 +43,6 @@
   width: 100%;
 }
 
-.uifw-element-tooltip-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-
-  @include uicore-z-index(tooltip);
-
-  > .uifw-element-tooltip {
-    width: max-content;
-    font-size: var(--iui-font-size-1);
-  }
-
-  > .nz-popup-tooltip {
-    border: {
-      color: $uifw-popup-border-color;
-      radius: $uifw-popup-border-radius;
-      style: solid;
-      width: $uifw-popup-border-width;
-    }
-  }
-}
-
 .uifw-app-button-small {
   margin-bottom: 6px;
 }

package/lib/esm/appui-react/dialog/DialogManagerBase.d.ts

@@ -1,6 +1,7 @@
 /** @packageDocumentation
  * @module Dialog
  */
+import "./DialogManagerBase.scss";
 import * as React from "react";
 import type { BeUiEvent } from "@itwin/core-bentley";
 import { UiEvent } from "@itwin/appui-abstract";
@@ -68,9 +69,9 @@ export interface DialogRendererProps {
     dialogManager: DialogManagerBase;
     style?: React.CSSProperties;
 }
-/** @internal */
 interface DialogRendererState {
-    parentDocument: Document | null;
+    parentDocument: Document | undefined;
+    renderer: HTMLElement | undefined;
 }
 /** DialogRenderer React component.
  * @internal

package/lib/esm/appui-react/dialog/DialogManagerBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogManagerBase.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/dialog/DialogManagerBase.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAIhD;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;CAC3C;AAED;;;GAGG;AAEH,qBAAa,kBAAmB,SAAQ,OAAO,CAAC,sBAAsB,CAAC;CAAG;AAE1E;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,EAAE,QAAQ,CAAC;CAC1B;AAKD;;GAEG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAC,IAAI,CAAK;IACxB,OAAO,CAAC,QAAQ,CAAyC;IAEzD,OAAO,CAAC,qBAAqB,CAAoC;IACjE,OAAO,CAAC,MAAM,CAAC,UAAU,CAAkB;gBAG/B,oBAAoB,EAAE,SAAS,CAAC,sBAAsB,CAAC;IAInE,6CAA6C;WAC/B,UAAU,IAAI,IAAI;IAIhC,WAAkB,SAAS,IAAI,MAAM,CAEpC;IAED,WAAkB,SAAS,CAAC,MAAM,EAAE,MAAM,EAEzC;IACD,IAAW,OAAO,iBAEjB;IAGD,IAAW,oBAAoB,IAAI,SAAS,CAAC,sBAAsB,CAAC,CAEnE;WAEa,sBAAsB,IAAI,MAAM;IAa9C;;;;;OAKG;IACI,UAAU,CACf,MAAM,EAAE,KAAK,CAAC,SAAS,EACvB,EAAE,CAAC,EAAE,MAAM,EACX,cAAc,CAAC,EAAE,QAAQ,GACxB,IAAI;IAOP,gBAAgB;IACT,UAAU,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI;IAKxC,WAAW,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAQlD,gBAAgB;IACT,QAAQ,IAAI,IAAI;IAKvB,gBAAgB;IACT,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAS3C,sBAAsB,IAAI,IAAI;IAO9B,MAAM,IAAI,IAAI;IAIrB,IAAW,YAAY,IAAI,KAAK,CAAC,SAAS,GAAG,SAAS,CAKrD;IAED,IAAW,WAAW,IAAI,MAAM,CAE/B;CACF;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,iBAAiB,CAAC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,cAAc,EAAE,QAAQ,GAAG,IAAI,CAAC;CACjC;AACD;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,aAAa,CACzD,mBAAmB,EACnB,mBAAmB,CACpB;IACC,gBAAgB;IAChB,SAAyB,KAAK,EAAE,mBAAmB,CAEjD;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IAsBzB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAO5C,OAAO,CAAC,yBAAyB,CAE/B;CACH"}
+{"version":3,"file":"DialogManagerBase.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/dialog/DialogManagerBase.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKhD;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;CAC3C;AAED;;;GAGG;AAEH,qBAAa,kBAAmB,SAAQ,OAAO,CAAC,sBAAsB,CAAC;CAAG;AAE1E;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,EAAE,QAAQ,CAAC;CAC1B;AAKD;;GAEG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAC,IAAI,CAAK;IACxB,OAAO,CAAC,QAAQ,CAAyC;IAEzD,OAAO,CAAC,qBAAqB,CAAoC;IACjE,OAAO,CAAC,MAAM,CAAC,UAAU,CAAkB;gBAG/B,oBAAoB,EAAE,SAAS,CAAC,sBAAsB,CAAC;IAInE,6CAA6C;WAC/B,UAAU,IAAI,IAAI;IAIhC,WAAkB,SAAS,IAAI,MAAM,CAEpC;IAED,WAAkB,SAAS,CAAC,MAAM,EAAE,MAAM,EAEzC;IACD,IAAW,OAAO,iBAEjB;IAGD,IAAW,oBAAoB,IAAI,SAAS,CAAC,sBAAsB,CAAC,CAEnE;WAEa,sBAAsB,IAAI,MAAM;IAa9C;;;;;OAKG;IACI,UAAU,CACf,MAAM,EAAE,KAAK,CAAC,SAAS,EACvB,EAAE,CAAC,EAAE,MAAM,EACX,cAAc,CAAC,EAAE,QAAQ,GACxB,IAAI;IAOP,gBAAgB;IACT,UAAU,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI;IAKxC,WAAW,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAQlD,gBAAgB;IACT,QAAQ,IAAI,IAAI;IAKvB,gBAAgB;IACT,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAS3C,sBAAsB,IAAI,IAAI;IAO9B,MAAM,IAAI,IAAI;IAIrB,IAAW,YAAY,IAAI,KAAK,CAAC,SAAS,GAAG,SAAS,CAKrD;IAED,IAAW,WAAW,IAAI,MAAM,CAE/B;CACF;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,iBAAiB,CAAC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,UAAU,mBAAmB;IAC3B,cAAc,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,EAAE,WAAW,GAAG,SAAS,CAAC;CACnC;AACD;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,aAAa,CACzD,mBAAmB,EACnB,mBAAmB,CACpB;IACC,gBAAgB;IAChB,SAAyB,KAAK,EAAE,mBAAmB,CAGjD;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IA0BzB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAO5C,OAAO,CAAC,yBAAyB,CAE/B;CACH"}

package/lib/esm/appui-react/dialog/DialogManagerBase.js

@@ -5,11 +5,13 @@
 /** @packageDocumentation
  * @module Dialog
  */
+import "./DialogManagerBase.scss";
 import * as React from "react";
 import { Logger } from "@itwin/core-bentley";
 import { UiEvent } from "@itwin/appui-abstract";
 import { UiFramework } from "../UiFramework";
 import { getCssVariableAsNumber } from "@itwin/core-react";
+import { ThemeProvider } from "@itwin/itwinui-react";
 /** Dialog Changed Event class.
  * @public
  * @deprecated in 4.13.x. This class should not be used by applications to instantiate objects.
@@ -120,10 +122,14 @@ export class DialogRendererBase extends React.PureComponent {
         super(...arguments);
         /** @internal */
         this.state = {
-            parentDocument: null,
+            parentDocument: undefined,
+            renderer: undefined,
         };
-        this._handleRefSet = (popupDiv) => {
-            this.setState({ parentDocument: popupDiv?.ownerDocument ?? null });
+        this._handleRefSet = (el) => {
+            this.setState({
+                parentDocument: el?.ownerDocument ?? undefined,
+                renderer: el ?? undefined,
+            });
         };
         // eslint-disable-next-line deprecation/deprecation
         this._handleDialogChangedEvent = (_args) => {
@@ -133,12 +139,13 @@ export class DialogRendererBase extends React.PureComponent {
     render() {
         if (this.props.dialogManager.dialogCount <= 0)
             return null;
-        return (React.createElement("div", { className: "appui-react-dialog-render-container", ref: this._handleRefSet }, this.state.parentDocument &&
-            this.props.dialogManager.dialogs
-                .filter((info) => info.parentDocument === this.state.parentDocument)
-                .map((dialogInfo) => {
-                return (React.createElement(React.Fragment, { key: dialogInfo.id }, dialogInfo.reactNode));
-            })));
+        return (React.createElement("div", { className: "uifw-dialog-dialogManagerBase_renderer", ref: this._handleRefSet },
+            React.createElement(ThemeProvider, { portalContainer: this.state.renderer }, this.state.parentDocument &&
+                this.props.dialogManager.dialogs
+                    .filter((info) => info.parentDocument === this.state.parentDocument)
+                    .map((info) => {
+                    return (React.createElement(React.Fragment, { key: info.id }, info.reactNode));
+                }))));
     }
     componentDidMount() {
         this.props.dialogManager.onDialogChangedEvent.addListener(this._handleDialogChangedEvent);

package/lib/esm/appui-react/dialog/DialogManagerBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogManagerBase.js","sourceRoot":"","sources":["../../../../src/appui-react/dialog/DialogManagerBase.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 Dialog\n */\n\nimport * as React from \"react\";\nimport type { BeUiEvent } from \"@itwin/core-bentley\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport { UiEvent } from \"@itwin/appui-abstract\";\nimport { UiFramework } from \"../UiFramework\";\nimport { getCssVariableAsNumber } from \"@itwin/core-react\";\n\n/** Dialog Stack Changed Event Args class.\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 DialogChangedEventArgs {\n  dialogCount: number;\n  activeDialog: React.ReactNode | undefined;\n}\n\n/** Dialog 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 DialogChangedEvent extends UiEvent<DialogChangedEventArgs> {}\n\n/** Information maintained by a Dialog Manager about a dialog\n * @public\n */\nexport interface DialogInfo {\n  reactNode: React.ReactNode;\n  id: string;\n  parentDocument: Document;\n}\n\n/** Used if the 'dialog' z-index CSS variable cannot be read */\nconst ZINDEX_DEFAULT = 12000;\n\n/** Dialog Manager class.\n * @internal\n */\nexport class DialogManagerBase {\n  private static _sId = 0;\n  private _dialogs: DialogInfo[] = new Array<DialogInfo>();\n  // eslint-disable-next-line deprecation/deprecation\n  private _onDialogChangedEvent: BeUiEvent<DialogChangedEventArgs>;\n  private static _topZIndex = ZINDEX_DEFAULT;\n\n  // eslint-disable-next-line deprecation/deprecation\n  constructor(onDialogChangedEvent: BeUiEvent<DialogChangedEventArgs>) {\n    this._onDialogChangedEvent = onDialogChangedEvent;\n  }\n\n  /** Initialize the modeless dialog manager */\n  public static initialize(): void {\n    DialogManagerBase._topZIndex = DialogManagerBase.getDialogZIndexDefault();\n  }\n\n  public static get topZIndex(): number {\n    return DialogManagerBase._topZIndex;\n  }\n\n  public static set topZIndex(zIndex: number) {\n    DialogManagerBase._topZIndex = zIndex;\n  }\n  public get dialogs() {\n    return this._dialogs;\n  }\n\n  // eslint-disable-next-line deprecation/deprecation\n  public get onDialogChangedEvent(): BeUiEvent<DialogChangedEventArgs> {\n    return this._onDialogChangedEvent;\n  }\n\n  public static getDialogZIndexDefault(): number {\n    const variable = \"--uicore-z-index-dialog\";\n    const value = getCssVariableAsNumber(variable);\n\n    if (!isNaN(value)) return value;\n\n    Logger.logError(\n      UiFramework.loggerCategory(this),\n      `'${variable}' CSS variable not found`\n    );\n    return ZINDEX_DEFAULT;\n  }\n\n  /**\n   * Triggers opening a dialog.\n   * @param dialog Dialog React component.\n   * @param id The unique Id the identifies the dialog.\n   * @param parentDocument Optional document required when displaying a dialog in a child popup window.\n   */\n  public openDialog(\n    dialog: React.ReactNode,\n    id?: string,\n    parentDocument?: Document\n  ): void {\n    if (!id) id = `Dialog-${++DialogManagerBase._sId}`;\n\n    const owningDoc = parentDocument ?? document;\n    this.pushDialog({ reactNode: dialog, id, parentDocument: owningDoc });\n  }\n\n  /** @internal */\n  public pushDialog(dialogInfo: DialogInfo): void {\n    this._dialogs.push(dialogInfo);\n    this.emitDialogChangedEvent();\n  }\n\n  public closeDialog(dialog?: React.ReactNode): void {\n    let targetDialog = dialog;\n    if (!dialog) targetDialog = this.activeDialog;\n\n    this.removeDialog(targetDialog);\n    this.emitDialogChangedEvent();\n  }\n\n  /** @internal */\n  public closeAll(): void {\n    this._dialogs = [];\n    this.emitDialogChangedEvent();\n  }\n\n  /** @internal */\n  public removeDialog(dialog: React.ReactNode): void {\n    const index = this._dialogs.findIndex((dialogInfo: DialogInfo) => {\n      return dialog === dialogInfo.reactNode;\n    });\n    if (index >= 0) this._dialogs.splice(index, 1);\n    if (this._dialogs.length < 1)\n      DialogManagerBase.topZIndex = DialogManagerBase.getDialogZIndexDefault();\n  }\n\n  public emitDialogChangedEvent(): void {\n    this._onDialogChangedEvent.emit({\n      dialogCount: this.dialogCount,\n      activeDialog: this.activeDialog,\n    });\n  }\n\n  public update(): void {\n    this.emitDialogChangedEvent();\n  }\n\n  public get activeDialog(): React.ReactNode | undefined {\n    if (this._dialogs.length > 0)\n      return this._dialogs[this._dialogs.length - 1].reactNode;\n\n    return undefined;\n  }\n\n  public get dialogCount(): number {\n    return this._dialogs.length;\n  }\n}\n\n/** Properties for the [[DialogRendererBase]] component\n * @internal\n */\nexport interface DialogRendererProps {\n  dialogManager: DialogManagerBase;\n  style?: React.CSSProperties;\n}\n\n/** @internal */\ninterface DialogRendererState {\n  parentDocument: Document | null;\n}\n/** DialogRenderer React component.\n * @internal\n */\nexport class DialogRendererBase extends React.PureComponent<\n  DialogRendererProps,\n  DialogRendererState\n> {\n  /** @internal */\n  public override readonly state: DialogRendererState = {\n    parentDocument: null,\n  };\n\n  private _handleRefSet = (popupDiv: HTMLElement | null) => {\n    this.setState({ parentDocument: popupDiv?.ownerDocument ?? null });\n  };\n\n  public override render(): React.ReactNode {\n    if (this.props.dialogManager.dialogCount <= 0) return null;\n\n    return (\n      <div\n        className=\"appui-react-dialog-render-container\"\n        ref={this._handleRefSet}\n      >\n        {this.state.parentDocument &&\n          this.props.dialogManager.dialogs\n            .filter((info) => info.parentDocument === this.state.parentDocument)\n            .map((dialogInfo: DialogInfo) => {\n              return (\n                <React.Fragment key={dialogInfo.id}>\n                  {dialogInfo.reactNode}\n                </React.Fragment>\n              );\n            })}\n      </div>\n    );\n  }\n\n  public override componentDidMount(): void {\n    this.props.dialogManager.onDialogChangedEvent.addListener(\n      this._handleDialogChangedEvent\n    );\n  }\n\n  public override componentWillUnmount(): void {\n    this.props.dialogManager.onDialogChangedEvent.removeListener(\n      this._handleDialogChangedEvent\n    );\n  }\n\n  // eslint-disable-next-line deprecation/deprecation\n  private _handleDialogChangedEvent = (_args: DialogChangedEventArgs) => {\n    this.forceUpdate();\n  };\n}\n"]}
+{"version":3,"file":"DialogManagerBase.js","sourceRoot":"","sources":["../../../../src/appui-react/dialog/DialogManagerBase.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 Dialog\n */\n\nimport \"./DialogManagerBase.scss\";\nimport * as React from \"react\";\nimport type { BeUiEvent } from \"@itwin/core-bentley\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport { UiEvent } from \"@itwin/appui-abstract\";\nimport { UiFramework } from \"../UiFramework\";\nimport { getCssVariableAsNumber } from \"@itwin/core-react\";\nimport { ThemeProvider } from \"@itwin/itwinui-react\";\n\n/** Dialog Stack Changed Event Args class.\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 DialogChangedEventArgs {\n  dialogCount: number;\n  activeDialog: React.ReactNode | undefined;\n}\n\n/** Dialog 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 DialogChangedEvent extends UiEvent<DialogChangedEventArgs> {}\n\n/** Information maintained by a Dialog Manager about a dialog\n * @public\n */\nexport interface DialogInfo {\n  reactNode: React.ReactNode;\n  id: string;\n  parentDocument: Document;\n}\n\n/** Used if the 'dialog' z-index CSS variable cannot be read */\nconst ZINDEX_DEFAULT = 12000;\n\n/** Dialog Manager class.\n * @internal\n */\nexport class DialogManagerBase {\n  private static _sId = 0;\n  private _dialogs: DialogInfo[] = new Array<DialogInfo>();\n  // eslint-disable-next-line deprecation/deprecation\n  private _onDialogChangedEvent: BeUiEvent<DialogChangedEventArgs>;\n  private static _topZIndex = ZINDEX_DEFAULT;\n\n  // eslint-disable-next-line deprecation/deprecation\n  constructor(onDialogChangedEvent: BeUiEvent<DialogChangedEventArgs>) {\n    this._onDialogChangedEvent = onDialogChangedEvent;\n  }\n\n  /** Initialize the modeless dialog manager */\n  public static initialize(): void {\n    DialogManagerBase._topZIndex = DialogManagerBase.getDialogZIndexDefault();\n  }\n\n  public static get topZIndex(): number {\n    return DialogManagerBase._topZIndex;\n  }\n\n  public static set topZIndex(zIndex: number) {\n    DialogManagerBase._topZIndex = zIndex;\n  }\n  public get dialogs() {\n    return this._dialogs;\n  }\n\n  // eslint-disable-next-line deprecation/deprecation\n  public get onDialogChangedEvent(): BeUiEvent<DialogChangedEventArgs> {\n    return this._onDialogChangedEvent;\n  }\n\n  public static getDialogZIndexDefault(): number {\n    const variable = \"--uicore-z-index-dialog\";\n    const value = getCssVariableAsNumber(variable);\n\n    if (!isNaN(value)) return value;\n\n    Logger.logError(\n      UiFramework.loggerCategory(this),\n      `'${variable}' CSS variable not found`\n    );\n    return ZINDEX_DEFAULT;\n  }\n\n  /**\n   * Triggers opening a dialog.\n   * @param dialog Dialog React component.\n   * @param id The unique Id the identifies the dialog.\n   * @param parentDocument Optional document required when displaying a dialog in a child popup window.\n   */\n  public openDialog(\n    dialog: React.ReactNode,\n    id?: string,\n    parentDocument?: Document\n  ): void {\n    if (!id) id = `Dialog-${++DialogManagerBase._sId}`;\n\n    const owningDoc = parentDocument ?? document;\n    this.pushDialog({ reactNode: dialog, id, parentDocument: owningDoc });\n  }\n\n  /** @internal */\n  public pushDialog(dialogInfo: DialogInfo): void {\n    this._dialogs.push(dialogInfo);\n    this.emitDialogChangedEvent();\n  }\n\n  public closeDialog(dialog?: React.ReactNode): void {\n    let targetDialog = dialog;\n    if (!dialog) targetDialog = this.activeDialog;\n\n    this.removeDialog(targetDialog);\n    this.emitDialogChangedEvent();\n  }\n\n  /** @internal */\n  public closeAll(): void {\n    this._dialogs = [];\n    this.emitDialogChangedEvent();\n  }\n\n  /** @internal */\n  public removeDialog(dialog: React.ReactNode): void {\n    const index = this._dialogs.findIndex((dialogInfo: DialogInfo) => {\n      return dialog === dialogInfo.reactNode;\n    });\n    if (index >= 0) this._dialogs.splice(index, 1);\n    if (this._dialogs.length < 1)\n      DialogManagerBase.topZIndex = DialogManagerBase.getDialogZIndexDefault();\n  }\n\n  public emitDialogChangedEvent(): void {\n    this._onDialogChangedEvent.emit({\n      dialogCount: this.dialogCount,\n      activeDialog: this.activeDialog,\n    });\n  }\n\n  public update(): void {\n    this.emitDialogChangedEvent();\n  }\n\n  public get activeDialog(): React.ReactNode | undefined {\n    if (this._dialogs.length > 0)\n      return this._dialogs[this._dialogs.length - 1].reactNode;\n\n    return undefined;\n  }\n\n  public get dialogCount(): number {\n    return this._dialogs.length;\n  }\n}\n\n/** Properties for the [[DialogRendererBase]] component\n * @internal\n */\nexport interface DialogRendererProps {\n  dialogManager: DialogManagerBase;\n  style?: React.CSSProperties;\n}\n\ninterface DialogRendererState {\n  parentDocument: Document | undefined;\n  renderer: HTMLElement | undefined;\n}\n/** DialogRenderer React component.\n * @internal\n */\nexport class DialogRendererBase extends React.PureComponent<\n  DialogRendererProps,\n  DialogRendererState\n> {\n  /** @internal */\n  public override readonly state: DialogRendererState = {\n    parentDocument: undefined,\n    renderer: undefined,\n  };\n\n  private _handleRefSet = (el: HTMLElement | null) => {\n    this.setState({\n      parentDocument: el?.ownerDocument ?? undefined,\n      renderer: el ?? undefined,\n    });\n  };\n\n  public override render(): React.ReactNode {\n    if (this.props.dialogManager.dialogCount <= 0) return null;\n\n    return (\n      <div\n        className=\"uifw-dialog-dialogManagerBase_renderer\"\n        ref={this._handleRefSet}\n      >\n        <ThemeProvider portalContainer={this.state.renderer}>\n          {this.state.parentDocument &&\n            this.props.dialogManager.dialogs\n              .filter(\n                (info) => info.parentDocument === this.state.parentDocument\n              )\n              .map((info) => {\n                return (\n                  <React.Fragment key={info.id}>\n                    {info.reactNode}\n                  </React.Fragment>\n                );\n              })}\n        </ThemeProvider>\n      </div>\n    );\n  }\n\n  public override componentDidMount(): void {\n    this.props.dialogManager.onDialogChangedEvent.addListener(\n      this._handleDialogChangedEvent\n    );\n  }\n\n  public override componentWillUnmount(): void {\n    this.props.dialogManager.onDialogChangedEvent.removeListener(\n      this._handleDialogChangedEvent\n    );\n  }\n\n  // eslint-disable-next-line deprecation/deprecation\n  private _handleDialogChangedEvent = (_args: DialogChangedEventArgs) => {\n    this.forceUpdate();\n  };\n}\n"]}

package/lib/esm/appui-react/dialog/DialogManagerBase.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+
+.uifw-dialog-dialogManagerBase_renderer {
+  position: relative;
+
+  @include uicore-z-index(dialog);
+}

package/lib/esm/appui-react/feedback/ElementTooltip.d.ts

@@ -1,15 +1,14 @@
 /** @packageDocumentation
  * @module Notification
  */
+import "./ElementTooltip.scss";
+import * as React from "react";
 import { UiEvent } from "@itwin/appui-abstract";
 import type { ToolTipOptions } from "@itwin/core-frontend";
 import type { XAndY } from "@itwin/core-geometry";
 import type { CommonProps } from "@itwin/core-react";
-import * as React from "react";
 import type { NotifyMessageType } from "../messages/ReactNotifyMessageDetails";
-/** [[ElementTooltip]] State.
- * @internal
- */
+/** [[ElementTooltip]] state. */
 interface ElementTooltipState {
     isVisible: boolean;
     message: NotifyMessageType;
@@ -46,19 +45,7 @@ export declare class ElementTooltip extends React.Component<CommonProps, Element
     static hideTooltip(): void;
     static get isTooltipHalted(): boolean;
     static set isTooltipHalted(halt: boolean);
-    private _size;
-    private _element?;
-    private _position?;
-    /** @internal */
-    readonly state: Readonly<ElementTooltipState>;
-    constructor(props: CommonProps);
-    render(): React.JSX.Element | null;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private static _handleMouseMove;
-    private _handleElementTooltipChangedEvent;
-    private _handleSizeChanged;
-    private updatePosition;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=ElementTooltip.d.ts.map

package/lib/esm/appui-react/feedback/ElementTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementTooltip.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/feedback/ElementTooltip.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAoB,MAAM,mBAAmB,CAAC;AAGvE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAG/E;;GAEG;AACH,UAAU,mBAAmB;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,8BAA8B;IAC7C,gBAAgB,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;GAGG;AAEH,qBAAa,0BAA2B,SAAQ,OAAO,CAAC,8BAA8B,CAAC;CAAG;AAE1F;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CACjD,WAAW,EACX,mBAAmB,CACpB;IACC,OAAO,CAAC,MAAM,CAAC,2BAA2B,CACQ;IAClD,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAAU;IAC1C,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAU;IAGzC,WAAkB,4BAA4B,IAAI,0BAA0B,CAE3E;IACD,WAAkB,gBAAgB,IAAI,OAAO,CAE5C;WAEa,WAAW,CACvB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,iBAAiB,EAC1B,EAAE,CAAC,EAAE,KAAK,EACV,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI;WAgBO,WAAW,IAAI,IAAI;IAQjC,WAAkB,eAAe,IAAI,OAAO,CAE3C;IACD,WAAkB,eAAe,CAAC,IAAI,EAAE,OAAO,EAG9C;IAED,OAAO,CAAC,KAAK,CAGX;IACF,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,SAAS,CAAC,CAAQ;IAE1B,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAO3D;gBAEU,KAAK,EAAE,WAAW;IAId,MAAM;IAkBN,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAuB/B,OAAO,CAAC,iCAAiC,CAUvC;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,cAAc;CAyBvB"}
+{"version":3,"file":"ElementTooltip.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/feedback/ElementTooltip.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,mBAAmB,CAAC;AAEhE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAK/E,gCAAgC;AAChC,UAAU,mBAAmB;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,8BAA8B;IAC7C,gBAAgB,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;GAGG;AACH,qBAAa,0BAA2B,SAAQ,OAAO,CAAC,8BAA8B,CAAC;CAAG;AAE1F;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CACjD,WAAW,EACX,mBAAmB,CACpB;IACC,OAAO,CAAC,MAAM,CAAC,2BAA2B,CACQ;IAClD,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAAU;IAC1C,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAU;IAEzC,WAAkB,4BAA4B,IAAI,0BAA0B,CAE3E;IAED,WAAkB,gBAAgB,IAAI,OAAO,CAE5C;WAEa,WAAW,CACvB,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,iBAAiB,EAC1B,EAAE,CAAC,EAAE,KAAK,EACV,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI;WAYO,WAAW,IAAI,IAAI;IAQjC,WAAkB,eAAe,IAAI,OAAO,CAE3C;IAED,WAAkB,eAAe,CAAC,IAAI,EAAE,OAAO,EAG9C;IAEe,MAAM;CAGvB"}

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

@@ -5,24 +5,24 @@
 /** @packageDocumentation
  * @module Notification
  */
-import { UiEvent } from "@itwin/appui-abstract";
-import { MessageRenderer, Rectangle } from "@itwin/core-react";
+import "./ElementTooltip.scss";
 import classnames from "classnames";
 import * as React from "react";
-import { offsetAndContainInContainer, Tooltip } from "../layout/popup/Tooltip";
+import * as ReactDOM from "react-dom";
+import { UiEvent } from "@itwin/appui-abstract";
 import { BeUiEvent } from "@itwin/core-bentley";
+import { MessageRenderer, Rectangle } from "@itwin/core-react";
+import { offsetAndContainInContainer, Tooltip } from "../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
 export class ElementTooltipChangedEvent extends UiEvent {
 }
 /** ElementTooltip React component.
  * @public
  */
 export class ElementTooltip extends React.Component {
-    // eslint-disable-next-line deprecation/deprecation
     static get onElementTooltipChangedEvent() {
         return ElementTooltip._elementTooltipChangedEvent;
     }
@@ -40,7 +40,6 @@ export class ElementTooltip extends React.Component {
             pt,
             options,
         });
-        el.ownerDocument.addEventListener("mousemove", ElementTooltip._handleMouseMove);
     }
     static hideTooltip() {
         ElementTooltip._isTooltipVisible = false;
@@ -57,88 +56,53 @@ export 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 = classnames("uifw-element-tooltip", this.props.className);
-        return (React.createElement("div", { className: "uifw-element-tooltip-container" },
-            React.createElement(Tooltip, { className: className, style: this.props.style, position: this.state.position, onSizeChanged: this._handleSizeChanged },
-                React.createElement(MessageRenderer, { message: this.state.message }))));
+        return React.createElement(ElementTooltipComponent, null);
     }
-    componentDidMount() {
-        ElementTooltip.onElementTooltipChangedEvent.addListener(this._handleElementTooltipChangedEvent);
-    }
-    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);
+}
+ElementTooltip._elementTooltipChangedEvent = new 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 = Rectangle.create(this._element.getBoundingClientRect());
-            const relativeBounds = Rectangle.createFromSize(this._size).offset(this._position);
-            const adjustedPosition = 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 = Rectangle.create(container.getBoundingClientRect());
+        const bounds = Rectangle.createFromSize(size).offset(preferredPosition);
+        const adjustedPosition = 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: classnames("uifw-feedback-elementTooltip_container", props.className), ref: (el) => setMainContainer(el ?? undefined) }),
+        portalContainer &&
+            visible &&
+            ReactDOM.createPortal(React.createElement(Tooltip, { className: classnames("uifw-feedback-elementTooltip", props.className), style: props.style, onSizeChanged: setSize, position: position },
+                React.createElement(MessageRenderer, { message: message })), portalContainer)));
 }
-ElementTooltip._elementTooltipChangedEvent = new BeUiEvent(); // eslint-disable-line deprecation/deprecation
 //# sourceMappingURL=ElementTooltip.js.map

package/lib/esm/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/esm/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/esm/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/esm/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/esm/appui-react/statusbar/popup/StatusBarPopover.js

@@ -8,14 +8,18 @@
 import * as React from "react";
 import { Popover } from "@itwin/itwinui-react";
 import { ButtonExpandIndicator } from "./ExpandIndicator";
+import { PopupContext } from "@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
  */
-export function StatusBarPopover(props) {
-    return (React.createElement(Popover, { ...props, placement: "top", applyBackground: true, middleware: {
+export function StatusBarPopover({ content, ...props }) {
+    const [portalTarget, setPortalTarget] = React.useState(undefined);
+    return (React.createElement(Popover, { ...props, content: React.createElement(PopupContext.Provider, { value: portalTarget }, content), placement: "top", applyBackground: true, middleware: {
             offset: 4,
+        }, ref: (el) => {
+            setPortalTarget(el ?? undefined);
         } }));
 }
 /** Components used in `StatusBarPopover`.