@itwin/appui-react 4.9.0-dev.1 → 4.9.0

package/lib/cjs/appui-react/layout/widget/FloatingWidget.js

@@ -0,0 +1,278 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidgetAllowedToDock = exports.useFloatingWidgetId = exports.getResizeBy = exports.FloatingWidget = exports.FloatingWidgetProvider = void 0;
+require("./FloatingWidget.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const DragManager_1 = require("../base/DragManager");
+const NineZone_1 = require("../base/NineZone");
+const ContentContainer_1 = require("./ContentContainer");
+const TabBar_1 = require("./TabBar");
+const Widget_1 = require("./Widget");
+const usePointerCaptor_1 = require("../base/usePointerCaptor");
+const WidgetTarget_1 = require("../target/WidgetTarget");
+const WidgetOutline_1 = require("../outline/WidgetOutline");
+const LayoutStore_1 = require("../base/LayoutStore");
+const WidgetStateHelpers_1 = require("../state/internal/WidgetStateHelpers");
+const PreviewMaximizeToggle_1 = require("./PreviewMaximizeToggle");
+/** @internal */
+function FloatingWidgetProvider(props) {
+    const floatingWidget = React.useContext(NineZone_1.FloatingWidgetNodeContext);
+    return React.createElement(Widget_1.WidgetProvider, { id: props.id }, floatingWidget);
+}
+exports.FloatingWidgetProvider = FloatingWidgetProvider;
+/** @internal */
+function FloatingWidget(props) {
+    const uiIsVisible = React.useContext(NineZone_1.UiIsVisibleContext);
+    const id = useFloatingWidgetId();
+    (0, core_bentley_1.assert)(!!id);
+    const { autoSized, bounds, hideWithUiWhenFloating, isToolSettingsTab, minimized, resizable, } = useFloatingWidgetState();
+    const hideFloatingWidget = !uiIsVisible && hideWithUiWhenFloating;
+    const item = React.useMemo(() => ({
+        id,
+        type: "widget",
+    }), [id]);
+    const dragged = (0, DragManager_1.useIsDraggedItem)(item);
+    const ref = useHandleAutoSize(dragged);
+    const { enabled: enableMaximizedFloatingWidget, maximizedWidget } = (0, PreviewMaximizeToggle_1.usePreviewMaximizedWidget)();
+    // istanbul ignore next (preview)
+    const previewMaximizedWidgetSectionsClass = maximizedWidget === id &&
+        enableMaximizedFloatingWidget &&
+        "preview-enableMaximizedFloatingWidget-maximized";
+    const className = (0, classnames_1.default)("nz-widget-floatingWidget", dragged && "nz-dragged", isToolSettingsTab && "nz-floating-toolSettings", minimized && "nz-minimized", hideFloatingWidget && "nz-hidden", previewMaximizedWidgetSectionsClass);
+    const style = React.useMemo(() => {
+        const boundsRect = core_react_1.Rectangle.create(bounds);
+        const { height, width } = boundsRect.getSize();
+        const position = boundsRect.topLeft();
+        // istanbul ignore next
+        return {
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            height: minimized || autoSized ? undefined : height,
+            width: autoSized ? undefined : width,
+            maxHeight: autoSized ? "60%" : undefined,
+            maxWidth: autoSized ? "60%" : undefined,
+        };
+    }, [autoSized, bounds, minimized]);
+    const content = React.useMemo(() => (React.createElement(ContentContainer_1.WidgetContentContainer, null,
+        React.createElement(WidgetTarget_1.WidgetTarget, null),
+        React.createElement(WidgetOutline_1.WidgetOutline, null))), []);
+    const handles = React.useMemo(() => resizable && (React.createElement(React.Fragment, null,
+        React.createElement(FloatingWidgetHandle, { handle: "left" }),
+        React.createElement(FloatingWidgetHandle, { handle: "top" }),
+        React.createElement(FloatingWidgetHandle, { handle: "right" }),
+        React.createElement(FloatingWidgetHandle, { handle: "bottom" }),
+        React.createElement(FloatingWidgetHandle, { handle: "topLeft" }),
+        React.createElement(FloatingWidgetHandle, { handle: "topRight" }),
+        React.createElement(FloatingWidgetHandle, { handle: "bottomLeft" }),
+        React.createElement(FloatingWidgetHandle, { handle: "bottomRight" }))), [resizable]);
+    return (React.createElement(Widget_1.Widget, { className: className, widgetId: id, style: style, ref: ref, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave },
+        React.createElement(TabBar_1.WidgetTabBar, { separator: !minimized }),
+        content,
+        handles));
+}
+exports.FloatingWidget = FloatingWidget;
+function useFloatingWidgetState() {
+    const id = useFloatingWidgetId();
+    (0, core_bentley_1.assert)(!!id);
+    return (0, LayoutStore_1.useLayout)((state) => {
+        var _a;
+        const widget = (0, WidgetStateHelpers_1.getWidgetState)(state, id);
+        const floatingWidget = state.floatingWidgets.byId[id];
+        const tabs = widget.tabs;
+        const activeTabId = widget.activeTabId;
+        const activeTab = state.tabs[activeTabId];
+        const userSized = floatingWidget.userSized;
+        const singleTab = 1 === tabs.length;
+        const toolSettingsTabId = (_a = state.toolSettings) === null || _a === void 0 ? void 0 : _a.tabId;
+        const isToolSettingsTab = widget.tabs[0] === toolSettingsTabId;
+        const resizable = !!floatingWidget.resizable && !isToolSettingsTab;
+        const autoSized = singleTab && !userSized;
+        return {
+            autoSized,
+            bounds: floatingWidget.bounds,
+            hideWithUiWhenFloating: activeTab.hideWithUiWhenFloating,
+            isToolSettingsTab,
+            minimized: widget.minimized,
+            resizable,
+        };
+    }, true);
+}
+// Re-adjust bounds so that widget is behind pointer when auto-sized.
+// istanbul ignore next
+function useHandleAutoSize(dragged) {
+    const dragManager = React.useContext(DragManager_1.DragManagerContext);
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    const measureNz = React.useContext(NineZone_1.MeasureContext);
+    const id = useFloatingWidgetId();
+    (0, core_bentley_1.assert)(!!id);
+    const userSized = (0, LayoutStore_1.useLayout)((state) => state.floatingWidgets.byId[id].userSized);
+    const { enabled: enableMaximizedFloatingWidget, maximizedWidget } = (0, PreviewMaximizeToggle_1.usePreviewMaximizedWidget)();
+    const maximized = enableMaximizedFloatingWidget && maximizedWidget === id;
+    const updatePosition = React.useRef(true);
+    const ref = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!updatePosition.current)
+            return;
+        if (!dragged)
+            return;
+        // istanbul ignore next (preview)
+        if (maximized)
+            return;
+        if (!dragManager.draggedItem)
+            return;
+        if (!ref.current)
+            return;
+        let bounds = core_react_1.Rectangle.create(ref.current.getBoundingClientRect());
+        const nzBounds = measureNz();
+        const pointerPosition = dragManager.draggedItem.info.pointerPosition;
+        if (bounds.containsPoint(pointerPosition))
+            return;
+        // Pointer is outside of tab area. Need to re-adjust widget bounds so that tab is behind pointer
+        if (pointerPosition.x > bounds.right) {
+            const offset = pointerPosition.x - bounds.right + 20;
+            bounds = bounds.offsetX(offset);
+        }
+        // Adjust bounds to be relative to 9z origin
+        bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });
+        dispatch({
+            type: "FLOATING_WIDGET_SET_BOUNDS",
+            id,
+            bounds: bounds.toProps(),
+        });
+        dispatch({
+            type: "FLOATING_WIDGET_SET_USER_SIZED",
+            id,
+            userSized: true,
+        });
+        updatePosition.current = false;
+    }, [dragged, dragManager, dispatch, id, measureNz, maximized]);
+    const handleResize = React.useCallback(() => {
+        if (!ref.current)
+            return;
+        if (dragged)
+            return;
+        // istanbul ignore next (preview)
+        if (maximized)
+            return;
+        if (userSized)
+            return;
+        let bounds = core_react_1.Rectangle.create(ref.current.getBoundingClientRect());
+        // Adjust bounds to be relative to 9z origin
+        const nzBounds = measureNz();
+        bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });
+        dispatch({
+            type: "FLOATING_WIDGET_SET_BOUNDS",
+            id,
+            bounds,
+        });
+    }, [dispatch, dragged, id, userSized, measureNz, maximized]);
+    const roRef = (0, core_react_1.useResizeObserver)(handleResize);
+    const refs = (0, core_react_1.useRefs)(ref, roRef);
+    return refs;
+}
+function FloatingWidgetHandle(props) {
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    const id = useFloatingWidgetId();
+    const { handle } = props;
+    const relativePosition = React.useRef(new core_react_1.Point());
+    (0, core_bentley_1.assert)(id !== undefined);
+    const onDrag = React.useCallback((pointerPosition) => {
+        (0, core_bentley_1.assert)(!!ref.current);
+        const bounds = core_react_1.Rectangle.create(ref.current.getBoundingClientRect());
+        const newRelativePosition = bounds.topLeft().getOffsetTo(pointerPosition);
+        const offset = relativePosition.current.getOffsetTo(newRelativePosition);
+        const resizeBy = getResizeBy(handle, offset);
+        dispatch({
+            type: "FLOATING_WIDGET_RESIZE",
+            id,
+            resizeBy,
+        });
+    }, [dispatch, handle, id]);
+    const handleDragStart = (0, DragManager_1.useDragResizeHandle)({
+        handle,
+        widgetId: id,
+        onDrag,
+    });
+    const handlePointerDown = React.useCallback((args) => {
+        (0, core_bentley_1.assert)(!!ref.current);
+        const bounds = core_react_1.Rectangle.create(ref.current.getBoundingClientRect());
+        const initialPointerPosition = new core_react_1.Point(args.clientX, args.clientY);
+        relativePosition.current = bounds
+            .topLeft()
+            .getOffsetTo(initialPointerPosition);
+        handleDragStart({
+            initialPointerPosition,
+            pointerPosition: initialPointerPosition,
+        });
+        dispatch({
+            type: "FLOATING_WIDGET_BRING_TO_FRONT",
+            id,
+        });
+    }, [dispatch, handleDragStart, id]);
+    const pointerCaptorRef = (0, usePointerCaptor_1.usePointerCaptor)(handlePointerDown);
+    const ref = React.useRef(null);
+    const refs = (0, core_react_1.useRefs)(ref, pointerCaptorRef);
+    const className = (0, classnames_1.default)("nz-widget-floatingWidget_handle", `nz-${handle}`);
+    return React.createElement("div", { className: className, ref: refs });
+}
+/** @internal */
+function getResizeBy(handle, offset) {
+    switch (handle) {
+        case "left":
+            return new core_react_1.Rectangle(-offset.x);
+        case "top":
+            return new core_react_1.Rectangle(0, -offset.y);
+        case "right":
+            return new core_react_1.Rectangle(0, 0, offset.x);
+        case "bottom":
+            return new core_react_1.Rectangle(0, 0, 0, offset.y);
+        case "topLeft":
+            return new core_react_1.Rectangle(-offset.x, -offset.y);
+        case "topRight":
+            return new core_react_1.Rectangle(0, -offset.y, offset.x);
+        case "bottomLeft":
+            return new core_react_1.Rectangle(-offset.x, 0, 0, offset.y);
+        case "bottomRight":
+            return new core_react_1.Rectangle(0, 0, offset.x, offset.y);
+    }
+}
+exports.getResizeBy = getResizeBy;
+/** @internal */
+function useFloatingWidgetId() {
+    const widgetId = React.useContext(Widget_1.WidgetIdContext);
+    return (0, LayoutStore_1.useLayout)((state) => {
+        if (!widgetId)
+            return undefined;
+        const floatingWidget = state.floatingWidgets.byId[widgetId];
+        if (!floatingWidget)
+            return undefined;
+        return widgetId;
+    });
+}
+exports.useFloatingWidgetId = useFloatingWidgetId;
+/** @internal */
+function useWidgetAllowedToDock() {
+    const id = useFloatingWidgetId();
+    return (0, LayoutStore_1.useLayout)((state) => {
+        var _a;
+        if (id) {
+            const widget = (0, WidgetStateHelpers_1.getWidgetState)(state, id);
+            const activeTab = state.tabs[widget.activeTabId];
+            if (((_a = activeTab.allowedPanelTargets) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+                return false;
+            }
+        }
+        return true;
+    });
+}
+exports.useWidgetAllowedToDock = useWidgetAllowedToDock;
+//# sourceMappingURL=FloatingWidget.js.map

package/lib/cjs/appui-react/layout/widget/FloatingWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingWidget.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 Widget\n */\n\nimport \"./FloatingWidget.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport {\n  Point,\n  Rectangle,\n  useRefs,\n  useResizeObserver,\n} from \"@itwin/core-react\";\nimport type { UseDragResizeHandleArgs } from \"../base/DragManager\";\nimport {\n  DragManagerContext,\n  useDragResizeHandle,\n  useIsDraggedItem,\n} from \"../base/DragManager\";\nimport {\n  FloatingWidgetNodeContext,\n  MeasureContext,\n  NineZoneDispatchContext,\n  UiIsVisibleContext,\n} from \"../base/NineZone\";\nimport type { FloatingWidgetState } from \"../state/WidgetState\";\nimport { WidgetContentContainer } from \"./ContentContainer\";\nimport { WidgetTabBar } from \"./TabBar\";\nimport { Widget, WidgetIdContext, WidgetProvider } from \"./Widget\";\nimport type { PointerCaptorArgs } from \"../base/usePointerCaptor\";\nimport { usePointerCaptor } from \"../base/usePointerCaptor\";\nimport { WidgetTarget } from \"../target/WidgetTarget\";\nimport { WidgetOutline } from \"../outline/WidgetOutline\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\nimport type { XAndY } from \"../state/internal/NineZoneStateHelpers\";\nimport { usePreviewMaximizedWidget } from \"./PreviewMaximizeToggle\";\n\ntype FloatingWidgetEdgeHandle = \"left\" | \"right\" | \"top\" | \"bottom\";\ntype FloatingWidgetCornerHandle =\n  | \"topLeft\"\n  | \"topRight\"\n  | \"bottomLeft\"\n  | \"bottomRight\";\n\n/** @internal */\nexport type FloatingWidgetResizeHandle =\n  | FloatingWidgetEdgeHandle\n  | FloatingWidgetCornerHandle;\n\n/** @internal */\nexport interface FloatingWidgetProviderProps {\n  id: FloatingWidgetState[\"id\"];\n}\n\n/** @internal */\nexport function FloatingWidgetProvider(props: FloatingWidgetProviderProps) {\n  const floatingWidget = React.useContext(FloatingWidgetNodeContext);\n  return <WidgetProvider id={props.id}>{floatingWidget}</WidgetProvider>;\n}\n\n/** @internal */\nexport interface FloatingWidgetProps {\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/** @internal */\nexport function FloatingWidget(props: FloatingWidgetProps) {\n  const uiIsVisible = React.useContext(UiIsVisibleContext);\n  const id = useFloatingWidgetId();\n  assert(!!id);\n  const {\n    autoSized,\n    bounds,\n    hideWithUiWhenFloating,\n    isToolSettingsTab,\n    minimized,\n    resizable,\n  } = useFloatingWidgetState();\n  const hideFloatingWidget = !uiIsVisible && hideWithUiWhenFloating;\n\n  const item = React.useMemo(\n    () => ({\n      id,\n      type: \"widget\" as const,\n    }),\n    [id]\n  );\n  const dragged = useIsDraggedItem(item);\n  const ref = useHandleAutoSize(dragged);\n  const { enabled: enableMaximizedFloatingWidget, maximizedWidget } =\n    usePreviewMaximizedWidget();\n  // istanbul ignore next (preview)\n  const previewMaximizedWidgetSectionsClass =\n    maximizedWidget === id &&\n    enableMaximizedFloatingWidget &&\n    \"preview-enableMaximizedFloatingWidget-maximized\";\n\n  const className = classnames(\n    \"nz-widget-floatingWidget\",\n    dragged && \"nz-dragged\",\n    isToolSettingsTab && \"nz-floating-toolSettings\",\n    minimized && \"nz-minimized\",\n    hideFloatingWidget && \"nz-hidden\",\n    previewMaximizedWidgetSectionsClass\n  );\n  const style = React.useMemo(() => {\n    const boundsRect = Rectangle.create(bounds);\n    const { height, width } = boundsRect.getSize();\n    const position = boundsRect.topLeft();\n    // istanbul ignore next\n    return {\n      transform: `translate(${position.x}px, ${position.y}px)`,\n      height: minimized || autoSized ? undefined : height,\n      width: autoSized ? undefined : width,\n      maxHeight: autoSized ? \"60%\" : undefined,\n      maxWidth: autoSized ? \"60%\" : undefined,\n    };\n  }, [autoSized, bounds, minimized]);\n\n  const content = React.useMemo(\n    () => (\n      <WidgetContentContainer>\n        <WidgetTarget />\n        <WidgetOutline />\n      </WidgetContentContainer>\n    ),\n    []\n  );\n  const handles = React.useMemo(\n    () =>\n      resizable && (\n        <>\n          <FloatingWidgetHandle handle=\"left\" />\n          <FloatingWidgetHandle handle=\"top\" />\n          <FloatingWidgetHandle handle=\"right\" />\n          <FloatingWidgetHandle handle=\"bottom\" />\n          <FloatingWidgetHandle handle=\"topLeft\" />\n          <FloatingWidgetHandle handle=\"topRight\" />\n          <FloatingWidgetHandle handle=\"bottomLeft\" />\n          <FloatingWidgetHandle handle=\"bottomRight\" />\n        </>\n      ),\n    [resizable]\n  );\n  return (\n    <Widget\n      className={className}\n      widgetId={id}\n      style={style}\n      ref={ref}\n      onMouseEnter={props.onMouseEnter}\n      onMouseLeave={props.onMouseLeave}\n    >\n      <WidgetTabBar separator={!minimized} />\n      {content}\n      {handles}\n    </Widget>\n  );\n}\n\nfunction useFloatingWidgetState() {\n  const id = useFloatingWidgetId();\n  assert(!!id);\n  return useLayout((state) => {\n    const widget = getWidgetState(state, id);\n    const floatingWidget = state.floatingWidgets.byId[id];\n    const tabs = widget.tabs;\n    const activeTabId = widget.activeTabId;\n    const activeTab = state.tabs[activeTabId];\n    const userSized = floatingWidget.userSized;\n    const singleTab = 1 === tabs.length;\n\n    const toolSettingsTabId = state.toolSettings?.tabId;\n    const isToolSettingsTab = widget.tabs[0] === toolSettingsTabId;\n    const resizable = !!floatingWidget.resizable && !isToolSettingsTab;\n    const autoSized = singleTab && !userSized;\n    return {\n      autoSized,\n      bounds: floatingWidget.bounds,\n      hideWithUiWhenFloating: activeTab.hideWithUiWhenFloating,\n      isToolSettingsTab,\n      minimized: widget.minimized,\n      resizable,\n    };\n  }, true);\n}\n\n// Re-adjust bounds so that widget is behind pointer when auto-sized.\n// istanbul ignore next\nfunction useHandleAutoSize(dragged: boolean) {\n  const dragManager = React.useContext(DragManagerContext);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const measureNz = React.useContext(MeasureContext);\n  const id = useFloatingWidgetId();\n  assert(!!id);\n  const userSized = useLayout(\n    (state) => state.floatingWidgets.byId[id].userSized\n  );\n  const { enabled: enableMaximizedFloatingWidget, maximizedWidget } =\n    usePreviewMaximizedWidget();\n  const maximized = enableMaximizedFloatingWidget && maximizedWidget === id;\n\n  const updatePosition = React.useRef(true);\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useLayoutEffect(() => {\n    if (!updatePosition.current) return;\n    if (!dragged) return;\n    // istanbul ignore next (preview)\n    if (maximized) return;\n    if (!dragManager.draggedItem) return;\n    if (!ref.current) return;\n\n    let bounds = Rectangle.create(ref.current.getBoundingClientRect());\n    const nzBounds = measureNz();\n    const pointerPosition = dragManager.draggedItem.info.pointerPosition;\n\n    if (bounds.containsPoint(pointerPosition)) return;\n\n    // Pointer is outside of tab area. Need to re-adjust widget bounds so that tab is behind pointer\n    if (pointerPosition.x > bounds.right) {\n      const offset = pointerPosition.x - bounds.right + 20;\n      bounds = bounds.offsetX(offset);\n    }\n\n    // Adjust bounds to be relative to 9z origin\n    bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });\n\n    dispatch({\n      type: \"FLOATING_WIDGET_SET_BOUNDS\",\n      id,\n      bounds: bounds.toProps(),\n    });\n    dispatch({\n      type: \"FLOATING_WIDGET_SET_USER_SIZED\",\n      id,\n      userSized: true,\n    });\n    updatePosition.current = false;\n  }, [dragged, dragManager, dispatch, id, measureNz, maximized]);\n  const handleResize = React.useCallback(() => {\n    if (!ref.current) return;\n    if (dragged) return;\n    // istanbul ignore next (preview)\n    if (maximized) return;\n    if (userSized) return;\n\n    let bounds = Rectangle.create(ref.current.getBoundingClientRect());\n\n    // Adjust bounds to be relative to 9z origin\n    const nzBounds = measureNz();\n    bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });\n\n    dispatch({\n      type: \"FLOATING_WIDGET_SET_BOUNDS\",\n      id,\n      bounds,\n    });\n  }, [dispatch, dragged, id, userSized, measureNz, maximized]);\n  const roRef = useResizeObserver(handleResize);\n  const refs = useRefs(ref, roRef);\n  return refs;\n}\n\ninterface FloatingWidgetHandleProps {\n  handle: FloatingWidgetResizeHandle;\n}\n\nfunction FloatingWidgetHandle(props: FloatingWidgetHandleProps) {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const id = useFloatingWidgetId();\n  const { handle } = props;\n  const relativePosition = React.useRef<Point>(new Point());\n  assert(id !== undefined);\n  const onDrag = React.useCallback<\n    NonNullable<UseDragResizeHandleArgs[\"onDrag\"]>\n  >(\n    (pointerPosition) => {\n      assert(!!ref.current);\n      const bounds = Rectangle.create(ref.current.getBoundingClientRect());\n      const newRelativePosition = bounds.topLeft().getOffsetTo(pointerPosition);\n      const offset = relativePosition.current.getOffsetTo(newRelativePosition);\n      const resizeBy = getResizeBy(handle, offset);\n      dispatch({\n        type: \"FLOATING_WIDGET_RESIZE\",\n        id,\n        resizeBy,\n      });\n    },\n    [dispatch, handle, id]\n  );\n  const handleDragStart = useDragResizeHandle({\n    handle,\n    widgetId: id,\n    onDrag,\n  });\n  const handlePointerDown = React.useCallback(\n    (args: PointerCaptorArgs) => {\n      assert(!!ref.current);\n      const bounds = Rectangle.create(ref.current.getBoundingClientRect());\n      const initialPointerPosition = new Point(args.clientX, args.clientY);\n      relativePosition.current = bounds\n        .topLeft()\n        .getOffsetTo(initialPointerPosition);\n      handleDragStart({\n        initialPointerPosition,\n        pointerPosition: initialPointerPosition,\n      });\n      dispatch({\n        type: \"FLOATING_WIDGET_BRING_TO_FRONT\",\n        id,\n      });\n    },\n    [dispatch, handleDragStart, id]\n  );\n  const pointerCaptorRef = usePointerCaptor(handlePointerDown);\n  const ref = React.useRef<HTMLDivElement>(null);\n  const refs = useRefs(ref, pointerCaptorRef);\n  const className = classnames(\n    \"nz-widget-floatingWidget_handle\",\n    `nz-${handle}`\n  );\n  return <div className={className} ref={refs} />;\n}\n\n/** @internal */\nexport function getResizeBy(handle: FloatingWidgetResizeHandle, offset: XAndY) {\n  switch (handle) {\n    case \"left\":\n      return new Rectangle(-offset.x);\n    case \"top\":\n      return new Rectangle(0, -offset.y);\n    case \"right\":\n      return new Rectangle(0, 0, offset.x);\n    case \"bottom\":\n      return new Rectangle(0, 0, 0, offset.y);\n    case \"topLeft\":\n      return new Rectangle(-offset.x, -offset.y);\n    case \"topRight\":\n      return new Rectangle(0, -offset.y, offset.x);\n    case \"bottomLeft\":\n      return new Rectangle(-offset.x, 0, 0, offset.y);\n    case \"bottomRight\":\n      return new Rectangle(0, 0, offset.x, offset.y);\n  }\n}\n\n/** @internal */\nexport function useFloatingWidgetId(): FloatingWidgetState[\"id\"] | undefined {\n  const widgetId = React.useContext(WidgetIdContext);\n  return useLayout((state) => {\n    if (!widgetId) return undefined;\n    const floatingWidget = state.floatingWidgets.byId[widgetId];\n    if (!floatingWidget) return undefined;\n\n    return widgetId;\n  });\n}\n\n/** @internal */\nexport function useWidgetAllowedToDock(): boolean {\n  const id = useFloatingWidgetId();\n  return useLayout((state) => {\n    if (id) {\n      const widget = getWidgetState(state, id);\n      const activeTab = state.tabs[widget.activeTabId];\n      if (activeTab.allowedPanelTargets?.length === 0) {\n        return false;\n      }\n    }\n    return true;\n  });\n}\n"]}

package/lib/cjs/appui-react/layout/widget/FloatingWidget.scss

@@ -0,0 +1,140 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "../widgetopacity";
+@import "variables";
+
+.nz-widget-floatingWidget {
+  position: absolute;
+  border: 1px solid $buic-background-5;
+  border-radius: var(--iui-border-radius-1);
+  min-width: 200px;
+  min-height: 120px;
+  transition: opacity var(--iui-duration-2) ease;
+
+  &.nz-floating-toolSettings {
+    min-height: 60px;
+  }
+
+  @include uicore-z-index(dragged-widget);
+  @include nz-widget-opacity;
+
+  &.nz-minimized {
+    flex-grow: 0;
+
+    > .nz-content {
+      width: 0;
+    }
+  }
+
+  &.nz-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &.nz-dragged {
+    pointer-events: none;
+    opacity: $nz-dragged-widget-opacity;
+
+    @include uicore-z-index(drag-preview);
+  }
+
+  &.nz-minimized {
+    min-height: 30px;
+
+    .nz-widget-floatingWidget_handle {
+      visibility: hidden;
+    }
+  }
+
+  &.preview-enableMaximizedFloatingWidget-maximized {
+    transform: unset !important;
+    height: unset !important;
+    width: unset !important;
+    max-height: unset !important;
+    max-width: unset !important;
+    opacity: 1 !important;
+    border-radius: unset !important;
+    inset: 0;
+
+    .nz-widget-floatingWidget_handle {
+      visibility: hidden;
+    }
+  }
+}
+
+.nz-widget-floatingWidget_handle {
+  $size: 0.5em;
+  $cornerSize: 1em;
+
+  position: absolute;
+  user-select: none;
+
+  &.nz-left,
+  &.nz-right {
+    height: 100%;
+    width: $size;
+    cursor: ew-resize;
+  }
+
+  &.nz-top,
+  &.nz-bottom {
+    width: 100%;
+    height: $size;
+    cursor: ns-resize;
+  }
+
+  &.nz-left {
+    left: -$size * 0.5;
+    top: 0;
+  }
+
+  &.nz-right {
+    right: -$size * 0.5;
+    top: 0;
+  }
+
+  &.nz-top {
+    left: 0;
+    top: -$size * 0.5;
+  }
+
+  &.nz-bottom {
+    left: 0;
+    bottom: -$size * 0.5;
+  }
+
+  &.nz-topLeft,
+  &.nz-topRight,
+  &.nz-bottomLeft,
+  &.nz-bottomRight {
+    height: $cornerSize;
+    width: $cornerSize;
+  }
+
+  &.nz-topLeft {
+    left: -$cornerSize * 0.3333;
+    top: -$cornerSize * 0.3333;
+    cursor: nwse-resize;
+  }
+
+  &.nz-topRight {
+    right: -$cornerSize * 0.3333;
+    top: -$cornerSize * 0.3333;
+    cursor: nesw-resize;
+  }
+
+  &.nz-bottomLeft {
+    left: -$cornerSize * 0.3333;
+    bottom: -$cornerSize * 0.3333;
+    cursor: nesw-resize;
+  }
+
+  &.nz-bottomRight {
+    right: -$cornerSize * 0.3333;
+    bottom: -$cornerSize * 0.3333;
+    cursor: nwse-resize;
+  }
+}

package/lib/cjs/appui-react/layout/widget/FloatingWidgets.d.ts

@@ -0,0 +1,9 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** This component renders all floating widgets.
+ * @internal
+ */
+export declare function FloatingWidgets(): React.JSX.Element;
+//# sourceMappingURL=FloatingWidgets.d.ts.map

package/lib/cjs/appui-react/layout/widget/FloatingWidgets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWidgets.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingWidgets.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;GAEG;AACH,wBAAgB,eAAe,sBAU9B"}

package/lib/cjs/appui-react/layout/widget/FloatingWidgets.js

@@ -0,0 +1,27 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingWidgets = void 0;
+const React = require("react");
+const FloatingWidget_1 = require("./FloatingWidget");
+const FloatingTab_1 = require("./FloatingTab");
+const LayoutStore_1 = require("../base/LayoutStore");
+/** This component renders all floating widgets.
+ * @internal
+ */
+function FloatingWidgets() {
+    const ids = (0, LayoutStore_1.useLayout)((state) => state.floatingWidgets.allIds);
+    return (React.createElement(React.Fragment, null,
+        ids.map((id) => {
+            return React.createElement(FloatingWidget_1.FloatingWidgetProvider, { key: id, id: id });
+        }),
+        React.createElement(FloatingTab_1.FloatingTab, null)));
+}
+exports.FloatingWidgets = FloatingWidgets;
+//# sourceMappingURL=FloatingWidgets.js.map

package/lib/cjs/appui-react/layout/widget/FloatingWidgets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWidgets.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingWidgets.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,qDAA0D;AAC1D,+CAA4C;AAC5C,qDAAgD;AAEhD;;GAEG;AACH,SAAgB,eAAe;IAC7B,MAAM,GAAG,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/D,OAAO,CACL;QACG,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;YACd,OAAO,oBAAC,uCAAsB,IAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAI,CAAC;QACrD,CAAC,CAAC;QACF,oBAAC,yBAAW,OAAG,CACd,CACJ,CAAC;AACJ,CAAC;AAVD,0CAUC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { FloatingWidgetProvider } from \"./FloatingWidget\";\nimport { FloatingTab } from \"./FloatingTab\";\nimport { useLayout } from \"../base/LayoutStore\";\n\n/** This component renders all floating widgets.\n * @internal\n */\nexport function FloatingWidgets() {\n  const ids = useLayout((state) => state.floatingWidgets.allIds);\n  return (\n    <>\n      {ids.map((id) => {\n        return <FloatingWidgetProvider key={id} id={id} />;\n      })}\n      <FloatingTab />\n    </>\n  );\n}\n"]}

package/lib/cjs/appui-react/layout/widget/Menu.d.ts

@@ -0,0 +1,16 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./Menu.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** @internal */
+export interface WidgetMenuProps extends CommonProps {
+    children?: React.ReactNode;
+    open?: boolean;
+    onClose?: () => void;
+    target?: HTMLElement;
+}
+/** @internal */
+export declare function WidgetMenu(props: WidgetMenuProps): React.JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/lib/cjs/appui-react/layout/widget/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Menu.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,gBAAgB;AAChB,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,gBAAgB;AAChB,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAgBhD"}

package/lib/cjs/appui-react/layout/widget/Menu.js

@@ -0,0 +1,23 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetMenu = void 0;
+require("./Menu.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+/** @internal */
+function WidgetMenu(props) {
+    const className = (0, classnames_1.default)("nz-widget-menu", props.className);
+    return (React.createElement(core_react_1.Popup, { className: className, isOpen: props.open, offset: 0, onClose: props.onClose, position: appui_abstract_1.RelativePosition.BottomLeft, style: props.style, showShadow: false, target: props.target },
+        React.createElement("div", { className: "nz-widget-menu_tabs" }, props.children)));
+}
+exports.WidgetMenu = WidgetMenu;
+//# sourceMappingURL=Menu.js.map

package/lib/cjs/appui-react/layout/widget/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Menu.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,uBAAqB;AACrB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAA0C;AAC1C,0DAAyD;AAUzD,gBAAgB;AAChB,SAAgB,UAAU,CAAC,KAAsB;IAC/C,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAChE,OAAO,CACL,oBAAC,kBAAK,IACJ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,iCAAgB,CAAC,UAAU,EACrC,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,KAAK,CAAC,MAAM;QAEpB,6BAAK,SAAS,EAAC,qBAAqB,IAAE,KAAK,CAAC,QAAQ,CAAO,CACrD,CACT,CAAC;AACJ,CAAC;AAhBD,gCAgBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./Menu.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Popup } from \"@itwin/core-react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\n\n/** @internal */\nexport interface WidgetMenuProps extends CommonProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  onClose?: () => void;\n  target?: HTMLElement;\n}\n\n/** @internal */\nexport function WidgetMenu(props: WidgetMenuProps) {\n  const className = classnames(\"nz-widget-menu\", props.className);\n  return (\n    <Popup\n      className={className}\n      isOpen={props.open}\n      offset={0}\n      onClose={props.onClose}\n      position={RelativePosition.BottomLeft}\n      style={props.style}\n      showShadow={false}\n      target={props.target}\n    >\n      <div className=\"nz-widget-menu_tabs\">{props.children}</div>\n    </Popup>\n  );\n}\n"]}

package/lib/cjs/appui-react/layout/widget/Menu.scss

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+
+.nz-widget-menu {
+  background: $buic-background-1;
+}
+
+.nz-widget-menu_tabs {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}

package/lib/cjs/appui-react/layout/widget/MenuTab.d.ts

@@ -0,0 +1,13 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./MenuTab.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** @internal */
+export interface WidgetMenuTabProps extends CommonProps {
+    badge?: React.ReactNode;
+}
+/** @internal */
+export declare function WidgetMenuTab(props: WidgetMenuTabProps): React.JSX.Element;
+//# sourceMappingURL=MenuTab.d.ts.map

package/lib/cjs/appui-react/layout/widget/MenuTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTab.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/MenuTab.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AASrD,gBAAgB;AAChB,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,gBAAgB;AAChB,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA+CtD"}

package/lib/cjs/appui-react/layout/widget/MenuTab.js

@@ -0,0 +1,56 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetMenuTab = void 0;
+require("./MenuTab.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const Tab_1 = require("./Tab");
+const Widget_1 = require("./Widget");
+const Overflow_1 = require("./Overflow");
+const NineZone_1 = require("../base/NineZone");
+const LayoutStore_1 = require("../base/LayoutStore");
+const ContentRenderer_1 = require("./ContentRenderer");
+/** @internal */
+function WidgetMenuTab(props) {
+    const id = React.useContext(ContentRenderer_1.TabIdContext);
+    const overflowContext = React.useContext(Overflow_1.WidgetOverflowContext);
+    const showWidgetIcon = React.useContext(NineZone_1.ShowWidgetIconContext);
+    (0, core_bentley_1.assert)(!!id);
+    const { label, iconSpec } = (0, LayoutStore_1.useLayout)((state) => {
+        const tab = state.tabs[id];
+        return {
+            label: tab.label,
+            iconSpec: tab.iconSpec,
+        };
+    }, true);
+    (0, core_bentley_1.assert)(!!overflowContext);
+    const closeOverflow = React.useCallback(() => {
+        overflowContext.close();
+    }, [overflowContext]);
+    const ref = (0, Tab_1.useTabInteractions)({
+        onDragStart: closeOverflow,
+        onClick: closeOverflow,
+        onDoubleClick: closeOverflow,
+    });
+    const activeTabId = (0, Widget_1.useActiveTabId)();
+    const active = activeTabId === id;
+    const className = (0, classnames_1.default)("nz-widget-menuTab", !showWidgetIcon && "nz-no-icon", props.className);
+    return (React.createElement("div", { className: className, ref: ref, title: label },
+        props.badge && React.createElement("div", { className: "nz-badge" }, props.badge),
+        showWidgetIcon && (React.createElement("div", { className: "nz-icon" }, iconSpec && React.createElement(core_react_1.Icon, { iconSpec: iconSpec }))),
+        React.createElement("span", null, label),
+        React.createElement("div", { className: (0, classnames_1.default)("nz-checkmark", 
+            // istanbul ignore next
+            !active && "nz-hidden") })));
+}
+exports.WidgetMenuTab = WidgetMenuTab;
+//# sourceMappingURL=MenuTab.js.map