@itwin/appui-react 4.0.0-dev.9 → 4.0.0

package/lib/esm/appui-react/content/ContentLayout.scss

@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/base/base";
 @import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
-@import "~@itwin/core-react/lib/cjs/core-react/style/colors";
 
 $resizer-size: 6px;
 $resizer-size-large: 14px;
@@ -22,13 +21,14 @@ $resizer-size-large: 14px;
   }
 
   .Resizer {
-    background: rgb(180, 180, 180);
+    background-color: var(--iui-color-border);
     box-sizing: border-box;
     background-clip: padding-box;
     margin: 0;
+    transition: all var(--iui-duration-1) ease;
 
     &:hover {
-      transition: all 2s ease;
+      background-color: var(--iui-color-border-accent);
     }
 
     &.horizontal {
@@ -89,7 +89,7 @@ div.uifw-contentlayout-full-size div.SplitPane div.Pane {
     pointer-events: none;
 
     &.uifw-contentlayout-overlay-active {
-      border-color: $uicore-orange;
+      border-color: var(--iui-color-border-warning);
     }
 
     &.uifw-contentlayout-overlay-inactive {

package/lib/esm/appui-react/content/DefaultViewOverlay.d.ts

@@ -1,23 +1,23 @@
-/** @packageDocumentation
- * @module ContentView
- */
-/// <reference types="react" />
-import "./DefaultViewOverlay.scss";
-import { ScreenViewport } from "@itwin/core-frontend";
-/** Props of Viewport Overlay Control that show timelines
- * @public
- */
-export interface ViewOverlayProps {
-    viewport: ScreenViewport;
-    onPlayPause?: (playing: boolean) => void;
-    featureOptions?: {
-        [key: string]: any;
-    };
-}
-/**
- * Default viewport overlay that examines ViewState of the active view for a schedule script, analysis data, or solar data. If one of these is detected, the corresponding
- * data provider is attached to the TimelineComponent and the overlay is made visible.
- * @public
- */
-export declare function DefaultViewOverlay({ viewport, onPlayPause, featureOptions }: ViewOverlayProps): JSX.Element | null;
+/** @packageDocumentation
+ * @module ContentView
+ */
+/// <reference types="react" />
+import "./DefaultViewOverlay.scss";
+import { ScreenViewport } from "@itwin/core-frontend";
+/** Props of Viewport Overlay Control that show timelines
+ * @public
+ */
+export interface ViewOverlayProps {
+    viewport: ScreenViewport;
+    onPlayPause?: (playing: boolean) => void;
+    featureOptions?: {
+        [key: string]: any;
+    };
+}
+/**
+ * Default viewport overlay that examines ViewState of the active view for a schedule script, analysis data, or solar data. If one of these is detected, the corresponding
+ * data provider is attached to the TimelineComponent and the overlay is made visible.
+ * @public
+ */
+export declare function DefaultViewOverlay({ viewport, onPlayPause, featureOptions }: ViewOverlayProps): JSX.Element | null;
 //# sourceMappingURL=DefaultViewOverlay.d.ts.map

package/lib/esm/appui-react/content/DefaultViewOverlay.js

@@ -1,47 +1,47 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module ContentView
- */
-import "./DefaultViewOverlay.scss";
-import * as React from "react";
-import { SolarTimeline, TimelineComponent } from "@itwin/imodel-components-react";
-import { useScheduleAnimationDataProvider } from "../hooks/useScheduleAnimationDataProvider";
-import { useActiveViewport } from "../hooks/useActiveViewport";
-import { useSolarDataProvider } from "../hooks/useSolarDataProvider";
-import { useAnalysisAnimationDataProvider } from "../hooks/useAnalysisAnimationDataProvider";
-/**
- * Default viewport overlay that examines ViewState of the active view for a schedule script, analysis data, or solar data. If one of these is detected, the corresponding
- * data provider is attached to the TimelineComponent and the overlay is made visible.
- * @public
- */
-// istanbul ignore next
-export function DefaultViewOverlay({ viewport, onPlayPause, featureOptions }) {
-    var _a, _b, _c;
-    const solarDataTimelineProvider = useSolarDataProvider(viewport);
-    const analysisAnimationTimelineDataProvider = useAnalysisAnimationDataProvider(viewport);
-    const scheduleTimelineDataProvider = useScheduleAnimationDataProvider(viewport);
-    const currentViewport = useActiveViewport();
-    if (!currentViewport)
-        return null;
-    // Solar gets first shot
-    if (solarDataTimelineProvider && !!((_a = featureOptions === null || featureOptions === void 0 ? void 0 : featureOptions.defaultViewOverlay) === null || _a === void 0 ? void 0 : _a.enableSolarTimelineViewOverlay)) {
-        return (React.createElement("div", { className: "uifw-view-overlay" },
-            React.createElement("div", { className: "uifw-animation-overlay" },
-                React.createElement(SolarTimeline, { dataProvider: solarDataTimelineProvider }))));
-    }
-    if (analysisAnimationTimelineDataProvider && !!((_b = featureOptions === null || featureOptions === void 0 ? void 0 : featureOptions.defaultViewOverlay) === null || _b === void 0 ? void 0 : _b.enableAnalysisTimelineViewOverlay)) {
-        return (React.createElement("div", { className: "uifw-view-overlay" },
-            React.createElement("div", { className: "uifw-animation-overlay" },
-                React.createElement(TimelineComponent, { startDate: analysisAnimationTimelineDataProvider.start, endDate: analysisAnimationTimelineDataProvider.end, initialDuration: analysisAnimationTimelineDataProvider.initialDuration, totalDuration: analysisAnimationTimelineDataProvider.duration, minimized: true, onChange: analysisAnimationTimelineDataProvider.onAnimationFractionChanged, onPlayPause: onPlayPause }))));
-    }
-    if (scheduleTimelineDataProvider && !!((_c = featureOptions === null || featureOptions === void 0 ? void 0 : featureOptions.defaultViewOverlay) === null || _c === void 0 ? void 0 : _c.enableScheduleAnimationViewOverlay)) {
-        return (React.createElement("div", { className: "uifw-view-overlay" },
-            React.createElement("div", { className: "uifw-animation-overlay" },
-                React.createElement(TimelineComponent, { startDate: scheduleTimelineDataProvider.start, endDate: scheduleTimelineDataProvider.end, initialDuration: scheduleTimelineDataProvider.initialDuration, totalDuration: scheduleTimelineDataProvider.duration, minimized: true, onChange: scheduleTimelineDataProvider.onAnimationFractionChanged, onPlayPause: onPlayPause }))));
-    }
-    return null;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ContentView
+ */
+import "./DefaultViewOverlay.scss";
+import * as React from "react";
+import { SolarTimeline, TimelineComponent } from "@itwin/imodel-components-react";
+import { useScheduleAnimationDataProvider } from "../hooks/useScheduleAnimationDataProvider";
+import { useActiveViewport } from "../hooks/useActiveViewport";
+import { useSolarDataProvider } from "../hooks/useSolarDataProvider";
+import { useAnalysisAnimationDataProvider } from "../hooks/useAnalysisAnimationDataProvider";
+/**
+ * Default viewport overlay that examines ViewState of the active view for a schedule script, analysis data, or solar data. If one of these is detected, the corresponding
+ * data provider is attached to the TimelineComponent and the overlay is made visible.
+ * @public
+ */
+// istanbul ignore next
+export function DefaultViewOverlay({ viewport, onPlayPause, featureOptions }) {
+    var _a, _b, _c;
+    const solarDataTimelineProvider = useSolarDataProvider(viewport);
+    const analysisAnimationTimelineDataProvider = useAnalysisAnimationDataProvider(viewport);
+    const scheduleTimelineDataProvider = useScheduleAnimationDataProvider(viewport);
+    const currentViewport = useActiveViewport();
+    if (!currentViewport)
+        return null;
+    // Solar gets first shot
+    if (solarDataTimelineProvider && !!((_a = featureOptions === null || featureOptions === void 0 ? void 0 : featureOptions.defaultViewOverlay) === null || _a === void 0 ? void 0 : _a.enableSolarTimelineViewOverlay)) {
+        return (React.createElement("div", { className: "uifw-view-overlay" },
+            React.createElement("div", { className: "uifw-animation-overlay" },
+                React.createElement(SolarTimeline, { dataProvider: solarDataTimelineProvider }))));
+    }
+    if (analysisAnimationTimelineDataProvider && !!((_b = featureOptions === null || featureOptions === void 0 ? void 0 : featureOptions.defaultViewOverlay) === null || _b === void 0 ? void 0 : _b.enableAnalysisTimelineViewOverlay)) {
+        return (React.createElement("div", { className: "uifw-view-overlay" },
+            React.createElement("div", { className: "uifw-animation-overlay" },
+                React.createElement(TimelineComponent, { startDate: analysisAnimationTimelineDataProvider.start, endDate: analysisAnimationTimelineDataProvider.end, initialDuration: analysisAnimationTimelineDataProvider.initialDuration, totalDuration: analysisAnimationTimelineDataProvider.duration, minimized: true, onChange: analysisAnimationTimelineDataProvider.onAnimationFractionChanged, onPlayPause: onPlayPause }))));
+    }
+    if (scheduleTimelineDataProvider && !!((_c = featureOptions === null || featureOptions === void 0 ? void 0 : featureOptions.defaultViewOverlay) === null || _c === void 0 ? void 0 : _c.enableScheduleAnimationViewOverlay)) {
+        return (React.createElement("div", { className: "uifw-view-overlay" },
+            React.createElement("div", { className: "uifw-animation-overlay" },
+                React.createElement(TimelineComponent, { startDate: scheduleTimelineDataProvider.start, endDate: scheduleTimelineDataProvider.end, initialDuration: scheduleTimelineDataProvider.initialDuration, totalDuration: scheduleTimelineDataProvider.duration, minimized: true, onChange: scheduleTimelineDataProvider.onAnimationFractionChanged, onPlayPause: onPlayPause }))));
+    }
+    return null;
+}
 //# sourceMappingURL=DefaultViewOverlay.js.map

package/lib/esm/appui-react/content/DefaultViewOverlay.scss

@@ -2,21 +2,23 @@
 * 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/style/themecolors";
 @import "~@itwin/core-react/lib/cjs/core-react/z-index";
 
 // 40px is used to ensure scrubber is not drawn behind a widget tab
+
+$uifw-view-overlay-indent: calc(var(--iui-size-l) * 2);
+
 .uifw-view-overlay {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: calc(100% - 80px);
+  width: calc(100% - #{$uifw-view-overlay-indent} * 2);
   height: auto;
   position: absolute;
-  bottom: 10px;
-  left: 40px;
-  right: 40px;
+  bottom: var(--iui-size-s);
+  left: $uifw-view-overlay-indent;
+  right: $uifw-view-overlay-indent;
   pointer-events: none;
   @include uicore-z-index(view-overlay);
 }
@@ -30,11 +32,12 @@ $widget-transparency: 0.9;
   width: 80%;
   max-width: 1000px;
   height: auto;
-  background: $buic-background-dialog;
-  border: 1px solid $buic-background-dialog-stroke;
+  background: var(--iui-color-background);
+  border: 1px solid var(--iui-color-border);
   border-radius: var(--iui-border-radius-1);
   // overflow: hidden;
   opacity: $widget-transparency;
+  transition: opacity var(--iui-duration-1) ease;
   pointer-events: auto;
 
   &:hover {

package/lib/esm/appui-react/content/FloatingViewportContent.d.ts

@@ -1,28 +1,32 @@
-/** @packageDocumentation
- * @module ContentView
- */
-import "./FloatingViewportContent.css";
-import * as React from "react";
-import { ScreenViewport } from "@itwin/core-frontend";
-import { ViewStateProp } from "@itwin/imodel-components-react";
-/**
- * @beta
- */
-export interface FloatingViewportContentProps {
-    /** callback used to construct context menu when user right-clicks on canvas/viewport */
-    onContextMenu?: (e: React.MouseEvent) => boolean;
-    /** viewport/content control uniqueId */
-    contentId: string;
-    /** The initial view state used to create the viewport, or a function that returns it (will refresh when the function changes) */
-    initialViewState: ViewStateProp;
-    /** Function to get a reference to the ScreenViewport */
-    viewportRef?: React.Ref<ScreenViewport>;
-}
-/**
- * FloatingViewportContent component that creates its own [FloatingViewportContentControl].
- * This allows it to be recognized as an "active" content control so that tools operate on this
- * content.
- * @beta
- */
-export declare function FloatingViewportContent(props: FloatingViewportContentProps): JSX.Element;
+/** @packageDocumentation
+ * @module ContentView
+ */
+import * as React from "react";
+import { ScreenViewport } from "@itwin/core-frontend";
+import { ViewStateProp } from "@itwin/imodel-components-react";
+/**
+ * @beta
+ */
+export interface FloatingViewportContentProps {
+    /** callback used to construct context menu when user right-clicks on canvas/viewport */
+    onContextMenu?: (e: React.MouseEvent) => boolean;
+    /** viewport/content control uniqueId */
+    contentId: string;
+    /** The initial view state used to create the viewport, or a function that returns it (will refresh when the function changes) */
+    initialViewState: ViewStateProp;
+    /** Function to get a reference to the ScreenViewport */
+    viewportRef?: React.Ref<ScreenViewport>;
+}
+/** @beta */
+export declare function FloatingViewportContent(props: FloatingViewportContentProps): JSX.Element;
+/** @alpha */
+export interface FloatingViewportContentWrapperProps {
+    readonly children?: React.ReactNode;
+}
+/** @alpha */
+export declare function FloatingViewportContentWrapper({ children }: FloatingViewportContentWrapperProps): JSX.Element;
+/** @alpha */
+export declare function useFloatingViewport(args: FloatingViewportContentProps): {
+    viewportControl: JSX.Element;
+};
 //# sourceMappingURL=FloatingViewportContent.d.ts.map

package/lib/esm/appui-react/content/FloatingViewportContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingViewportContent.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,EAAqB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AASlF;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,wFAAwF;IACxF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC;IACjD,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,iIAAiI;IACjI,gBAAgB,EAAE,aAAa,CAAC;IAChC,wDAAwD;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACzC;AAED;;;;;GAKG;AAEH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,eAqE1E"}
+{"version":3,"file":"FloatingViewportContent.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAqB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAMlF;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,wFAAwF;IACxF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC;IACjD,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,iIAAiI;IACjI,gBAAgB,EAAE,aAAa,CAAC;IAChC,wDAAwD;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACzC;AAED,YAAY;AACZ,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,eAO1E;AAED,aAAa;AACb,MAAM,WAAW,mCAAmC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC;AAED,aAAa;AACb,wBAAgB,8BAA8B,CAAC,EAAE,QAAQ,EAAE,EAAE,mCAAmC,eAM/F;AAED,aAAa;AACb,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,4BAA4B;;EA2DrE"}

package/lib/esm/appui-react/content/FloatingViewportContent.js

@@ -1,79 +1,74 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module ContentView
- */
-import "./FloatingViewportContent.css";
-import * as React from "react";
-import { IModelApp } from "@itwin/core-frontend";
-import { viewWithUnifiedSelection } from "@itwin/presentation-components";
-import { ViewportComponent } from "@itwin/imodel-components-react";
-import { FloatingViewportContentControl } from "./ViewportContentControl";
-import { ContentWrapper } from "./ContentLayout";
-import { useRefs } from "@itwin/core-react";
-import { UiFramework } from "../UiFramework";
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const FloatingViewport = viewWithUnifiedSelection(ViewportComponent);
-/**
- * FloatingViewportContent component that creates its own [FloatingViewportContentControl].
- * This allows it to be recognized as an "active" content control so that tools operate on this
- * content.
- * @beta
- */
-// istanbul ignore next
-export function FloatingViewportContent(props) {
-    const { contentId, initialViewState, viewportRef } = props;
-    const [viewport, setViewport] = React.useState();
-    const contentControl = React.useRef();
-    const viewState = React.useMemo(() => typeof initialViewState === "function" ? initialViewState() : initialViewState, [initialViewState]);
-    const ref = React.useCallback((v) => {
-        setViewport(v);
-    }, []);
-    const onViewportRef = useRefs(ref, ...(viewportRef ? [viewportRef] : []));
-    React.useEffect(() => {
-        if (!contentControl.current) {
-            contentControl.current = new FloatingViewportContentControl(contentId, contentId, null);
-            UiFramework.content.addFloatingContentControl(contentControl.current);
-        }
-        return () => {
-            if (contentControl.current) {
-                UiFramework.content.dropFloatingContentControl(contentControl.current);
-                contentControl.current = undefined;
-            }
-        };
-    }, [contentId]);
-    const viewPortControl = React.useMemo(() => {
-        const node = React.createElement(FloatingViewport, { viewportRef: onViewportRef, imodel: viewState.iModel, viewState: viewState, onContextMenu: props.onContextMenu, controlId: contentId });
-        let control = node;
-        if (!node.key) {
-            const additionalProps = { key: contentId };
-            control = React.cloneElement(node, additionalProps);
-        }
-        return control;
-    }, [onViewportRef, props.onContextMenu, viewState, contentId]);
-    React.useEffect(() => {
-        if (viewport && contentControl.current) {
-            contentControl.current.viewport = viewport;
-            if (null === contentControl.current.reactNode) {
-                contentControl.current.reactNode = viewPortControl;
-            }
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            contentControl.current.viewport.changeView(viewState);
-        }
-    }, [viewState, viewPortControl, viewport]);
-    React.useEffect(() => {
-        const onViewClose = (vp) => {
-            var _a;
-            if (((_a = contentControl.current) === null || _a === void 0 ? void 0 : _a.viewport) === vp) {
-                UiFramework.content.dropFloatingContentControl(contentControl.current);
-                contentControl.current = undefined;
-            }
-        };
-        return IModelApp.viewManager.onViewClose.addListener(onViewClose);
-    }, []);
-    return (React.createElement("div", { onMouseMove: UiFramework.visibility.handleContentMouseMove, className: "uifw-dialog-imodel-content", style: { height: "100%", position: "relative" } },
-        React.createElement(ContentWrapper, { content: viewPortControl, style: { height: "100%", position: "relative" } })));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ContentView
+ */
+import * as React from "react";
+import { IModelApp } from "@itwin/core-frontend";
+import { ViewportComponent } from "@itwin/imodel-components-react";
+import { FloatingViewportContentControl } from "./ViewportContentControl";
+import { ContentWrapper } from "./ContentLayout";
+import { UiFramework } from "../UiFramework";
+import { useRefs } from "@itwin/core-react";
+/** @beta */
+export function FloatingViewportContent(props) {
+    const { viewportControl } = useFloatingViewport(props);
+    return (React.createElement(FloatingViewportContentWrapper, null, viewportControl));
+}
+/** @alpha */
+export function FloatingViewportContentWrapper({ children }) {
+    return (React.createElement("div", { onMouseMove: UiFramework.visibility.handleContentMouseMove, className: "uifw-dialog-imodel-content", style: { height: "100%", position: "relative" } },
+        React.createElement(ContentWrapper, { content: children, style: { height: "100%", position: "relative" } })));
+}
+/** @alpha */
+export function useFloatingViewport(args) {
+    const { contentId, initialViewState, onContextMenu, viewportRef } = args;
+    const [viewport, setViewport] = React.useState();
+    const contentControl = React.useRef();
+    const viewState = React.useMemo(() => typeof initialViewState === "function" ? initialViewState() : initialViewState, [initialViewState]);
+    const ref = React.useCallback((v) => {
+        setViewport(v);
+    }, []);
+    const refs = useRefs(ref, viewportRef);
+    const viewportControl = React.useMemo(() => {
+        const node = React.createElement(ViewportComponent, { key: contentId, imodel: viewState.iModel, viewState: viewState, controlId: contentId, onContextMenu: onContextMenu, viewportRef: refs });
+        return node;
+    }, [refs, onContextMenu, viewState, contentId]);
+    React.useEffect(() => {
+        if (!contentControl.current) {
+            contentControl.current = new FloatingViewportContentControl(contentId, contentId, null);
+            UiFramework.content.addFloatingContentControl(contentControl.current);
+        }
+        return () => {
+            if (contentControl.current) {
+                UiFramework.content.dropFloatingContentControl(contentControl.current);
+                contentControl.current = undefined;
+            }
+        };
+    }, [contentId]);
+    React.useEffect(() => {
+        if (viewport && contentControl.current) {
+            contentControl.current.viewport = viewport;
+            if (null === contentControl.current.reactNode) {
+                contentControl.current.reactNode = viewportControl;
+            }
+            void contentControl.current.viewport.changeView(viewState);
+        }
+    }, [viewState, viewport, viewportControl]);
+    React.useEffect(() => {
+        const onViewClose = (vp) => {
+            var _a;
+            if (((_a = contentControl.current) === null || _a === void 0 ? void 0 : _a.viewport) === vp) {
+                UiFramework.content.dropFloatingContentControl(contentControl.current);
+                contentControl.current = undefined;
+            }
+        };
+        return IModelApp.viewManager.onViewClose.addListener(onViewClose);
+    }, []);
+    return {
+        viewportControl,
+    };
+}
 //# sourceMappingURL=FloatingViewportContent.js.map

package/lib/esm/appui-react/content/FloatingViewportContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingViewportContent.js","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module ContentView\r\n */\r\n\r\nimport \"./FloatingViewportContent.css\";\r\nimport * as React from \"react\";\r\nimport { IModelApp, ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { viewWithUnifiedSelection } from \"@itwin/presentation-components\";\r\nimport { ViewportComponent, ViewStateProp } from \"@itwin/imodel-components-react\";\r\nimport { FloatingViewportContentControl } from \"./ViewportContentControl\";\r\nimport { ContentWrapper } from \"./ContentLayout\";\r\nimport { useRefs } from \"@itwin/core-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nconst FloatingViewport = viewWithUnifiedSelection(ViewportComponent);\r\n\r\n/**\r\n * @beta\r\n */\r\nexport interface FloatingViewportContentProps {\r\n  /** callback used to construct context menu when user right-clicks on canvas/viewport */\r\n  onContextMenu?: (e: React.MouseEvent) => boolean;\r\n  /** viewport/content control uniqueId */\r\n  contentId: string;\r\n  /** The initial view state used to create the viewport, or a function that returns it (will refresh when the function changes) */\r\n  initialViewState: ViewStateProp;\r\n  /** Function to get a reference to the ScreenViewport */\r\n  viewportRef?: React.Ref<ScreenViewport>;\r\n}\r\n\r\n/**\r\n * FloatingViewportContent component that creates its own [FloatingViewportContentControl].\r\n * This allows it to be recognized as an \"active\" content control so that tools operate on this\r\n * content.\r\n * @beta\r\n */\r\n// istanbul ignore next\r\nexport function FloatingViewportContent(props: FloatingViewportContentProps) { // eslint-disable-line @typescript-eslint/naming-convention\r\n  const { contentId, initialViewState, viewportRef } = props;\r\n  const [viewport, setViewport] = React.useState<ScreenViewport | undefined>();\r\n  const contentControl = React.useRef<FloatingViewportContentControl | undefined>();\r\n\r\n  const viewState = React.useMemo(() => typeof initialViewState === \"function\" ? initialViewState() : initialViewState, [initialViewState]);\r\n  const ref = React.useCallback((v: ScreenViewport) => {\r\n    setViewport(v);\r\n  }, []);\r\n  const onViewportRef = useRefs(ref, ...(viewportRef ? [viewportRef] : []));\r\n\r\n  React.useEffect(() => {\r\n    if (!contentControl.current) {\r\n      contentControl.current = new FloatingViewportContentControl(contentId, contentId, null);\r\n      UiFramework.content.addFloatingContentControl(contentControl.current);\r\n    }\r\n    return () => {\r\n      if (contentControl.current) {\r\n        UiFramework.content.dropFloatingContentControl(contentControl.current);\r\n        contentControl.current = undefined;\r\n      }\r\n    };\r\n  }, [contentId]);\r\n\r\n  const viewPortControl = React.useMemo(() => {\r\n\r\n    const node = <FloatingViewport\r\n      viewportRef={onViewportRef}\r\n      imodel={viewState.iModel}\r\n      viewState={viewState}\r\n      onContextMenu={props.onContextMenu}\r\n      controlId={contentId}\r\n    />;\r\n    let control = node;\r\n\r\n    if (!(node as React.ReactElement<any>).key) {\r\n      const additionalProps: any = { key:contentId };\r\n      control = React.cloneElement(node, additionalProps);\r\n    }\r\n    return control;\r\n\r\n  }, [onViewportRef, props.onContextMenu, viewState, contentId]);\r\n\r\n  React.useEffect(() => {\r\n    if (viewport && contentControl.current) {\r\n      contentControl.current.viewport = viewport;\r\n      if (null === contentControl.current.reactNode) {\r\n        contentControl.current.reactNode = viewPortControl;\r\n      }\r\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\r\n      contentControl.current.viewport.changeView(viewState);\r\n    }\r\n  }, [viewState, viewPortControl, viewport]);\r\n\r\n  React.useEffect(() => {\r\n    const onViewClose = (vp: ScreenViewport) => {\r\n      if (contentControl.current?.viewport === vp) {\r\n        UiFramework.content.dropFloatingContentControl(contentControl.current);\r\n        contentControl.current = undefined;\r\n      }\r\n    };\r\n    return IModelApp.viewManager.onViewClose.addListener(onViewClose);\r\n  }, []);\r\n\r\n  return (\r\n    <div onMouseMove={UiFramework.visibility.handleContentMouseMove} className=\"uifw-dialog-imodel-content\" style={{ height: \"100%\", position: \"relative\" }}>\r\n      <ContentWrapper content={viewPortControl} style={{ height: \"100%\", position: \"relative\" }} />\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"FloatingViewportContent.js","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module ContentView\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { IModelApp, ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { ViewportComponent, ViewStateProp } from \"@itwin/imodel-components-react\";\r\nimport { FloatingViewportContentControl } from \"./ViewportContentControl\";\r\nimport { ContentWrapper } from \"./ContentLayout\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { useRefs } from \"@itwin/core-react\";\r\n\r\n/**\r\n * @beta\r\n */\r\nexport interface FloatingViewportContentProps {\r\n  /** callback used to construct context menu when user right-clicks on canvas/viewport */\r\n  onContextMenu?: (e: React.MouseEvent) => boolean;\r\n  /** viewport/content control uniqueId */\r\n  contentId: string;\r\n  /** The initial view state used to create the viewport, or a function that returns it (will refresh when the function changes) */\r\n  initialViewState: ViewStateProp;\r\n  /** Function to get a reference to the ScreenViewport */\r\n  viewportRef?: React.Ref<ScreenViewport>;\r\n}\r\n\r\n/** @beta */\r\nexport function FloatingViewportContent(props: FloatingViewportContentProps) {\r\n  const { viewportControl } = useFloatingViewport(props);\r\n  return (\r\n    <FloatingViewportContentWrapper>\r\n      {viewportControl}\r\n    </FloatingViewportContentWrapper>\r\n  );\r\n}\r\n\r\n/** @alpha */\r\nexport interface FloatingViewportContentWrapperProps {\r\n  readonly children?: React.ReactNode;\r\n}\r\n\r\n/** @alpha */\r\nexport function FloatingViewportContentWrapper({ children }: FloatingViewportContentWrapperProps) {\r\n  return (\r\n    <div onMouseMove={UiFramework.visibility.handleContentMouseMove} className=\"uifw-dialog-imodel-content\" style={{ height: \"100%\", position: \"relative\" }}>\r\n      <ContentWrapper content={children} style={{ height: \"100%\", position: \"relative\" }} />\r\n    </div>\r\n  );\r\n}\r\n\r\n/** @alpha */\r\nexport function useFloatingViewport(args: FloatingViewportContentProps) {\r\n  const { contentId, initialViewState, onContextMenu, viewportRef } = args;\r\n  const [viewport, setViewport] = React.useState<ScreenViewport | undefined>();\r\n  const contentControl = React.useRef<FloatingViewportContentControl | undefined>();\r\n\r\n  const viewState = React.useMemo(() => typeof initialViewState === \"function\" ? initialViewState() : initialViewState, [initialViewState]);\r\n  const ref = React.useCallback((v: ScreenViewport) => {\r\n    setViewport(v);\r\n  }, []);\r\n\r\n  const refs = useRefs(ref, viewportRef);\r\n  const viewportControl = React.useMemo(() => {\r\n    const node = <ViewportComponent\r\n      key={contentId}\r\n      imodel={viewState.iModel}\r\n      viewState={viewState}\r\n      controlId={contentId}\r\n      onContextMenu={onContextMenu}\r\n      viewportRef={refs}\r\n    />;\r\n    return node;\r\n  }, [refs, onContextMenu, viewState, contentId]);\r\n\r\n  React.useEffect(() => {\r\n    if (!contentControl.current) {\r\n      contentControl.current = new FloatingViewportContentControl(contentId, contentId, null);\r\n      UiFramework.content.addFloatingContentControl(contentControl.current);\r\n    }\r\n    return () => {\r\n      if (contentControl.current) {\r\n        UiFramework.content.dropFloatingContentControl(contentControl.current);\r\n        contentControl.current = undefined;\r\n      }\r\n    };\r\n  }, [contentId]);\r\n\r\n  React.useEffect(() => {\r\n    if (viewport && contentControl.current) {\r\n      contentControl.current.viewport = viewport;\r\n      if (null === contentControl.current.reactNode) {\r\n        contentControl.current.reactNode = viewportControl;\r\n      }\r\n      void contentControl.current.viewport.changeView(viewState);\r\n    }\r\n  }, [viewState, viewport, viewportControl]);\r\n\r\n  React.useEffect(() => {\r\n    const onViewClose = (vp: ScreenViewport) => {\r\n      if (contentControl.current?.viewport === vp) {\r\n        UiFramework.content.dropFloatingContentControl(contentControl.current);\r\n        contentControl.current = undefined;\r\n      }\r\n    };\r\n    return IModelApp.viewManager.onViewClose.addListener(onViewClose);\r\n  }, []);\r\n\r\n  return {\r\n    viewportControl,\r\n  };\r\n}\r\n"]}