@itwin/appui-react 4.8.3 → 4.9.0

package/lib/cjs/appui-react/layout/outline/TabOutline.d.ts

@@ -0,0 +1,8 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./TabOutline.scss";
+import * as React from "react";
+/** @internal */
+export declare function TabOutline(): React.JSX.Element;
+//# sourceMappingURL=TabOutline.d.ts.map

package/lib/cjs/appui-react/layout/outline/TabOutline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabOutline.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/outline/TabOutline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,gBAAgB;AAChB,wBAAgB,UAAU,sBAIzB"}

package/lib/cjs/appui-react/layout/outline/TabOutline.js

@@ -0,0 +1,42 @@
+"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.TabOutline = void 0;
+require("./TabOutline.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const DragManager_1 = require("../base/DragManager");
+const Widget_1 = require("../widget/Widget");
+const DropTargetState_1 = require("../state/DropTargetState");
+const SendBack_1 = require("../widget/SendBack");
+/** @internal */
+function TabOutline() {
+    const hidden = useHidden();
+    const className = (0, classnames_1.default)("nz-outline-tabOutline", hidden && "nz-hidden");
+    return React.createElement("div", { className: className });
+}
+exports.TabOutline = TabOutline;
+// istanbul ignore next
+function useHidden() {
+    const widgetId = React.useContext(Widget_1.WidgetIdContext);
+    const targeted = (0, DragManager_1.useTargeted)();
+    const activeHomeState = (0, SendBack_1.useSendBackHomeState)();
+    return React.useMemo(() => {
+        if ((activeHomeState === null || activeHomeState === void 0 ? void 0 : activeHomeState.widgetId) === widgetId)
+            return false;
+        if (!targeted)
+            return true;
+        if (!(0, DropTargetState_1.isWidgetDropTargetState)(targeted))
+            return true;
+        if (targeted.widgetId !== widgetId)
+            return true;
+        return false;
+    }, [targeted, widgetId, activeHomeState]);
+}
+//# sourceMappingURL=TabOutline.js.map

package/lib/cjs/appui-react/layout/outline/TabOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabOutline.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/outline/TabOutline.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,6BAA2B;AAC3B,2CAAoC;AACpC,+BAA+B;AAC/B,qDAAkD;AAClD,6CAAmD;AACnD,8DAAmE;AACnE,iDAA0D;AAE1D,gBAAgB;AAChB,SAAgB,UAAU;IACxB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,uBAAuB,EAAE,MAAM,IAAI,WAAW,CAAC,CAAC;IAC7E,OAAO,6BAAK,SAAS,EAAE,SAAS,GAAI,CAAC;AACvC,CAAC;AAJD,gCAIC;AAED,uBAAuB;AACvB,SAAS,SAAS;IAChB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAe,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,IAAA,yBAAW,GAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAA,+BAAoB,GAAE,CAAC;IAE/C,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,MAAK,QAAQ;YAAE,OAAO,KAAK,CAAC;QAEzD,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC;QAE3B,IAAI,CAAC,IAAA,yCAAuB,EAAC,QAAQ,CAAC;YAAE,OAAO,IAAI,CAAC;QAEpD,IAAI,QAAQ,CAAC,QAAQ,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC;QAEhD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;AAC5C,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 Widget\n */\n\nimport \"./TabOutline.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { useTargeted } from \"../base/DragManager\";\nimport { WidgetIdContext } from \"../widget/Widget\";\nimport { isWidgetDropTargetState } from \"../state/DropTargetState\";\nimport { useSendBackHomeState } from \"../widget/SendBack\";\n\n/** @internal */\nexport function TabOutline() {\n  const hidden = useHidden();\n  const className = classnames(\"nz-outline-tabOutline\", hidden && \"nz-hidden\");\n  return <div className={className} />;\n}\n\n// istanbul ignore next\nfunction useHidden() {\n  const widgetId = React.useContext(WidgetIdContext);\n  const targeted = useTargeted();\n  const activeHomeState = useSendBackHomeState();\n\n  return React.useMemo(() => {\n    if (activeHomeState?.widgetId === widgetId) return false;\n\n    if (!targeted) return true;\n\n    if (!isWidgetDropTargetState(targeted)) return true;\n\n    if (targeted.widgetId !== widgetId) return true;\n\n    return false;\n  }, [targeted, widgetId, activeHomeState]);\n}\n"]}

package/lib/cjs/appui-react/layout/outline/TabOutline.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.nz-outline-tabOutline {
+  background-color: $nz-outline-color;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  max-width: 6em;
+
+  &.nz-hidden {
+    display: none;
+  }
+}

package/lib/cjs/appui-react/layout/outline/WidgetOutline.d.ts

@@ -0,0 +1,8 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./WidgetOutline.scss";
+import * as React from "react";
+/** @internal */
+export declare function WidgetOutline(): React.JSX.Element;
+//# sourceMappingURL=WidgetOutline.d.ts.map

package/lib/cjs/appui-react/layout/outline/WidgetOutline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetOutline.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/outline/WidgetOutline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,gBAAgB;AAChB,wBAAgB,aAAa,sBAQ5B"}

package/lib/cjs/appui-react/layout/outline/WidgetOutline.js

@@ -0,0 +1,42 @@
+"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.WidgetOutline = void 0;
+require("./WidgetOutline.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const DragManager_1 = require("../base/DragManager");
+const Widget_1 = require("../widget/Widget");
+const DropTargetState_1 = require("../state/DropTargetState");
+const SendBack_1 = require("../widget/SendBack");
+/** @internal */
+function WidgetOutline() {
+    const hidden = useHidden();
+    const className = (0, classnames_1.default)("nz-outline-widgetOutline", hidden && "nz-hidden");
+    return React.createElement("div", { className: className });
+}
+exports.WidgetOutline = WidgetOutline;
+// istanbul ignore next
+function useHidden() {
+    const widgetId = React.useContext(Widget_1.WidgetIdContext);
+    const targeted = (0, DragManager_1.useTargeted)();
+    const activeHomeState = (0, SendBack_1.useSendBackHomeState)();
+    return React.useMemo(() => {
+        if ((activeHomeState === null || activeHomeState === void 0 ? void 0 : activeHomeState.widgetId) === widgetId)
+            return false;
+        if (!targeted)
+            return true;
+        if ((0, DropTargetState_1.isWidgetDropTargetState)(targeted) && targeted.widgetId === widgetId)
+            return false;
+        if ((0, DropTargetState_1.isTabDropTargetState)(targeted) && targeted.widgetId === widgetId)
+            return false;
+        return true;
+    }, [targeted, widgetId, activeHomeState]);
+}
+//# sourceMappingURL=WidgetOutline.js.map

package/lib/cjs/appui-react/layout/outline/WidgetOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetOutline.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/outline/WidgetOutline.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,qDAAkD;AAClD,6CAAmD;AACnD,8DAGkC;AAClC,iDAA0D;AAE1D,gBAAgB;AAChB,SAAgB,aAAa;IAC3B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,0BAA0B,EAC1B,MAAM,IAAI,WAAW,CACtB,CAAC;IAEF,OAAO,6BAAK,SAAS,EAAE,SAAS,GAAI,CAAC;AACvC,CAAC;AARD,sCAQC;AAED,uBAAuB;AACvB,SAAS,SAAS;IAChB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAe,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,IAAA,yBAAW,GAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAA,+BAAoB,GAAE,CAAC;IAE/C,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,MAAK,QAAQ;YAAE,OAAO,KAAK,CAAC;QAEzD,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC;QAE3B,IAAI,IAAA,yCAAuB,EAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,QAAQ,KAAK,QAAQ;YACrE,OAAO,KAAK,CAAC;QAEf,IAAI,IAAA,sCAAoB,EAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,QAAQ,KAAK,QAAQ;YAClE,OAAO,KAAK,CAAC;QAEf,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;AAC5C,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 Widget\n */\n\nimport \"./WidgetOutline.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { useTargeted } from \"../base/DragManager\";\nimport { WidgetIdContext } from \"../widget/Widget\";\nimport {\n  isTabDropTargetState,\n  isWidgetDropTargetState,\n} from \"../state/DropTargetState\";\nimport { useSendBackHomeState } from \"../widget/SendBack\";\n\n/** @internal */\nexport function WidgetOutline() {\n  const hidden = useHidden();\n  const className = classnames(\n    \"nz-outline-widgetOutline\",\n    hidden && \"nz-hidden\"\n  );\n\n  return <div className={className} />;\n}\n\n// istanbul ignore next\nfunction useHidden() {\n  const widgetId = React.useContext(WidgetIdContext);\n  const targeted = useTargeted();\n  const activeHomeState = useSendBackHomeState();\n\n  return React.useMemo(() => {\n    if (activeHomeState?.widgetId === widgetId) return false;\n\n    if (!targeted) return true;\n\n    if (isWidgetDropTargetState(targeted) && targeted.widgetId === widgetId)\n      return false;\n\n    if (isTabDropTargetState(targeted) && targeted.widgetId === widgetId)\n      return false;\n\n    return true;\n  }, [targeted, widgetId, activeHomeState]);\n}\n"]}

package/lib/cjs/appui-react/layout/outline/WidgetOutline.scss

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.nz-outline-widgetOutline {
+  background-color: $nz-outline-color;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  &.nz-hidden {
+    display: none;
+  }
+}

package/lib/cjs/appui-react/layout/outline/_variables.scss

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+$nz-outline-color: rgba(140, 210, 255, var(--iui-opacity-3));
+$nz-opaque-outline-color: rgb(140, 210, 255);

package/lib/cjs/appui-react/layout/popup/Tooltip.d.ts

@@ -0,0 +1,42 @@
+/** @packageDocumentation
+ * @module Popup
+ */
+import "./Tooltip.scss";
+import * as React from "react";
+import type { CommonProps, RectangleProps, SizeProps } from "@itwin/core-react";
+import { Point } from "@itwin/core-react";
+import type { XAndY } from "../state/internal/NineZoneStateHelpers";
+/** Properties of [[Tooltip]] component.
+ * @internal
+ */
+export interface TooltipProps extends CommonProps {
+    /** Tooltip content. */
+    children?: React.ReactNode;
+    /** Tooltip icon. */
+    icon?: React.ReactNode;
+    /** Function called when the bounds of the tooltip changes. */
+    onSizeChanged?: (size: SizeProps) => void;
+    /** Position of the tooltip. */
+    position: XAndY;
+}
+/** Default properties of [[Tooltip]] component.
+ * @internal
+ */
+export type TooltipDefaultProps = Pick<TooltipProps, "position">;
+/** Positionable tooltip component.
+ * @internal
+ */
+export declare class Tooltip extends React.PureComponent<TooltipProps> {
+    static readonly defaultProps: TooltipDefaultProps;
+    private _lastSize;
+    private _tooltip;
+    render(): React.JSX.Element;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    private onSizeChanged;
+}
+/** Function to apply offset and contain tooltip bounds in container.
+ * @internal
+ */
+export declare const offsetAndContainInContainer: (tooltipBounds: RectangleProps, containerSize: SizeProps, offset?: XAndY) => Point;
+//# sourceMappingURL=Tooltip.d.ts.map

package/lib/cjs/appui-react/layout/popup/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/popup/Tooltip.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,KAAK,EAAmB,MAAM,mBAAmB,CAAC;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAEpE;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,+BAA+B;IAC/B,QAAQ,EAAE,KAAK,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAEjE;;GAEG;AACH,qBAAa,OAAQ,SAAQ,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC;IAC5D,gBAAuB,YAAY,EAAE,mBAAmB,CAKtD;IAEF,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,QAAQ,CAAqC;IAErC,MAAM;IAmBN,iBAAiB;IAIjB,kBAAkB,IAAI,IAAI;IAI1C,OAAO,CAAC,aAAa;CActB;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,kBACvB,cAAc,iBACd,SAAS,WAChB,KAAK,KACZ,KAOF,CAAC"}

package/lib/cjs/appui-react/layout/popup/Tooltip.js

@@ -0,0 +1,73 @@
+"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 Popup
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.offsetAndContainInContainer = exports.Tooltip = void 0;
+require("./Tooltip.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+/** Positionable tooltip component.
+ * @internal
+ */
+class Tooltip extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._lastSize = new core_react_1.Size();
+        this._tooltip = React.createRef();
+    }
+    render() {
+        const className = (0, classnames_1.default)("nz-popup-tooltip", this.props.className);
+        const style = {
+            ...this.props.style,
+            left: this.props.position.x,
+            top: this.props.position.y,
+        };
+        return (React.createElement("div", { className: className, ref: this._tooltip, style: style },
+            this.props.icon !== undefined ? (React.createElement("div", null, this.props.icon)) : undefined,
+            React.createElement("div", { className: "nz-content" }, this.props.children)));
+    }
+    componentDidMount() {
+        this.onSizeChanged();
+    }
+    componentDidUpdate() {
+        this.onSizeChanged();
+    }
+    onSizeChanged() {
+        const tooltip = this._tooltip.current;
+        const rect = tooltip.getBoundingClientRect();
+        const size = {
+            height: rect.height,
+            width: rect.width,
+        };
+        if (this._lastSize.equals(size))
+            return;
+        this._lastSize = core_react_1.Size.create(size);
+        this.props.onSizeChanged && this.props.onSizeChanged(size);
+    }
+}
+Tooltip.defaultProps = {
+    position: {
+        x: 0,
+        y: 0,
+    },
+};
+exports.Tooltip = Tooltip;
+/** Function to apply offset and contain tooltip bounds in container.
+ * @internal
+ */
+const offsetAndContainInContainer = (tooltipBounds, containerSize, offset = new core_react_1.Point(20, 20)) => {
+    let newBounds = core_react_1.Rectangle.create(tooltipBounds).offset(offset);
+    const containerBounds = core_react_1.Rectangle.createFromSize(containerSize);
+    if (containerBounds.contains(newBounds))
+        return newBounds.topLeft();
+    newBounds = newBounds.containIn(containerBounds);
+    return newBounds.topLeft();
+};
+exports.offsetAndContainInContainer = offsetAndContainInContainer;
+//# sourceMappingURL=Tooltip.js.map

package/lib/cjs/appui-react/layout/popup/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/popup/Tooltip.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,0BAAwB;AACxB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAA2D;AAsB3D;;GAEG;AACH,MAAa,OAAQ,SAAQ,KAAK,CAAC,aAA2B;IAA9D;;QAQU,cAAS,GAAG,IAAI,iBAAI,EAAE,CAAC;QACvB,aAAQ,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;IA2CvD,CAAC;IAzCiB,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAEvE,MAAM,KAAK,GAAwB;YACjC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;YACnB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YAC3B,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SAC3B,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK;YACxD,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAC/B,iCAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAO,CAC7B,CAAC,CAAC,CAAC,SAAS;YACb,6BAAK,SAAS,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CACnD,CACP,CAAC;IACJ,CAAC;IAEe,iBAAiB;QAC/B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEe,kBAAkB;QAChC,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,aAAa;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAQ,CAAC;QAEvC,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAC7C,MAAM,IAAI,GAAG;YACX,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;QAEF,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC;YAAE,OAAO;QAExC,IAAI,CAAC,SAAS,GAAG,iBAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7D,CAAC;;AAlDsB,oBAAY,GAAwB;IACzD,QAAQ,EAAE;QACR,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;KACL;CACF,AALkC,CAKjC;AANS,0BAAO;AAsDpB;;GAEG;AACI,MAAM,2BAA2B,GAAG,CACzC,aAA6B,EAC7B,aAAwB,EACxB,SAAgB,IAAI,kBAAK,CAAC,EAAE,EAAE,EAAE,CAAC,EAC1B,EAAE;IACT,IAAI,SAAS,GAAG,sBAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC/D,MAAM,eAAe,GAAG,sBAAS,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;IAChE,IAAI,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC;QAAE,OAAO,SAAS,CAAC,OAAO,EAAE,CAAC;IAEpE,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IACjD,OAAO,SAAS,CAAC,OAAO,EAAE,CAAC;AAC7B,CAAC,CAAC;AAXW,QAAA,2BAA2B,+BAWtC","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 Popup\n */\n\nimport \"./Tooltip.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, RectangleProps, SizeProps } from \"@itwin/core-react\";\nimport { Point, Rectangle, Size } from \"@itwin/core-react\";\nimport type { XAndY } from \"../state/internal/NineZoneStateHelpers\";\n\n/** Properties of [[Tooltip]] component.\n * @internal\n */\nexport interface TooltipProps extends CommonProps {\n  /** Tooltip content. */\n  children?: React.ReactNode;\n  /** Tooltip icon. */\n  icon?: React.ReactNode;\n  /** Function called when the bounds of the tooltip changes. */\n  onSizeChanged?: (size: SizeProps) => void;\n  /** Position of the tooltip. */\n  position: XAndY;\n}\n\n/** Default properties of [[Tooltip]] component.\n * @internal\n */\nexport type TooltipDefaultProps = Pick<TooltipProps, \"position\">;\n\n/** Positionable tooltip component.\n * @internal\n */\nexport class Tooltip extends React.PureComponent<TooltipProps> {\n  public static readonly defaultProps: TooltipDefaultProps = {\n    position: {\n      x: 0,\n      y: 0,\n    },\n  };\n\n  private _lastSize = new Size();\n  private _tooltip = React.createRef<HTMLDivElement>();\n\n  public override render() {\n    const className = classnames(\"nz-popup-tooltip\", this.props.className);\n\n    const style: React.CSSProperties = {\n      ...this.props.style,\n      left: this.props.position.x,\n      top: this.props.position.y,\n    };\n\n    return (\n      <div className={className} ref={this._tooltip} style={style}>\n        {this.props.icon !== undefined ? (\n          <div>{this.props.icon}</div>\n        ) : undefined}\n        <div className=\"nz-content\">{this.props.children}</div>\n      </div>\n    );\n  }\n\n  public override componentDidMount() {\n    this.onSizeChanged();\n  }\n\n  public override componentDidUpdate(): void {\n    this.onSizeChanged();\n  }\n\n  private onSizeChanged() {\n    const tooltip = this._tooltip.current!;\n\n    const rect = tooltip.getBoundingClientRect();\n    const size = {\n      height: rect.height,\n      width: rect.width,\n    };\n\n    if (this._lastSize.equals(size)) return;\n\n    this._lastSize = Size.create(size);\n    this.props.onSizeChanged && this.props.onSizeChanged(size);\n  }\n}\n\n/** Function to apply offset and contain tooltip bounds in container.\n * @internal\n */\nexport const offsetAndContainInContainer = (\n  tooltipBounds: RectangleProps,\n  containerSize: SizeProps,\n  offset: XAndY = new Point(20, 20)\n): Point => {\n  let newBounds = Rectangle.create(tooltipBounds).offset(offset);\n  const containerBounds = Rectangle.createFromSize(containerSize);\n  if (containerBounds.contains(newBounds)) return newBounds.topLeft();\n\n  newBounds = newBounds.containIn(containerBounds);\n  return newBounds.topLeft();\n};\n"]}

package/lib/cjs/appui-react/layout/popup/Tooltip.scss

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+@import "~@itwin/core-react/lib/cjs/core-react/geometry";
+
+.nz-popup-tooltip {
+  position: absolute;
+  background-color: $buic-background-tooltip;
+  color: var(--iui-color-text);
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 5px;
+  align-items: center;
+  padding: 5px 10px;
+
+  @include uicore-z-index(tooltip);
+
+  > .nz-content {
+    white-space: nowrap;
+  }
+}

package/lib/cjs/appui-react/layout/state/DropTargetState.d.ts

@@ -0,0 +1,67 @@
+/** @packageDocumentation
+ * @module Base
+ */
+import type { SizeProps } from "@itwin/core-react";
+import type { PanelSide } from "../widget-panels/PanelTypes";
+import type { FloatingWidgetState, WidgetState } from "./WidgetState";
+/** @internal */
+export interface TabDropTargetState {
+    readonly widgetId: WidgetState["id"];
+    readonly tabIndex: number;
+    readonly type: "tab";
+}
+/** @internal */
+export interface WidgetDropTargetState {
+    readonly widgetId: WidgetState["id"];
+    readonly type: "widget";
+}
+/** @internal */
+export interface PanelDropTargetState {
+    readonly side: PanelSide;
+    readonly newWidgetId: WidgetState["id"];
+    readonly type: "panel";
+}
+/** @internal */
+export interface SectionDropTargetState {
+    readonly side: PanelSide;
+    readonly newWidgetId: WidgetState["id"];
+    readonly sectionIndex: number;
+    readonly type: "section";
+}
+/** @internal */
+export interface FloatingWidgetDropTargetState {
+    readonly type: "floatingWidget";
+    readonly newFloatingWidgetId: FloatingWidgetState["id"];
+    readonly size: SizeProps;
+}
+/** Drop target of a tab drag action.
+ * @internal
+ */
+export type TabDragDropTargetState = PanelDropTargetState | SectionDropTargetState | WidgetDropTargetState | TabDropTargetState | FloatingWidgetDropTargetState;
+/** Default drop target, when nothing is targeted.
+ * @internal
+ */
+export interface WindowDropTargetState {
+    readonly type: "window";
+}
+/** Drop target of a widget drag action.
+ * @internal
+ */
+export type WidgetDragDropTargetState = PanelDropTargetState | SectionDropTargetState | WidgetDropTargetState | TabDropTargetState | WindowDropTargetState;
+/** @internal */
+export type DropTargetState = TabDragDropTargetState | WidgetDragDropTargetState;
+/** @internal */
+export declare function isTabDropTargetState(state: DropTargetState): state is TabDropTargetState;
+/** @internal */
+export declare function isPanelDropTargetState(state: DropTargetState): state is PanelDropTargetState;
+/** @internal */
+export declare function isSectionDropTargetState(state: DropTargetState): state is SectionDropTargetState;
+/** @internal */
+export declare function isWidgetDropTargetState(state: DropTargetState): state is WidgetDropTargetState;
+/** @internal */
+export declare function isWindowDropTargetState(state: WidgetDragDropTargetState): state is WindowDropTargetState;
+/** @internal */
+export declare function isWidgetDragDropTargetState(state: DropTargetState): state is WidgetDragDropTargetState;
+/** @internal */
+export declare function isTabDragDropTargetState(state: DropTargetState): state is TabDragDropTargetState;
+//# sourceMappingURL=DropTargetState.d.ts.map

package/lib/cjs/appui-react/layout/state/DropTargetState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropTargetState.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/state/DropTargetState.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEtE,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACrC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;CACtB;AAED,gBAAgB;AAChB,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACrC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;CACzB;AAED,gBAAgB;AAChB,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACxC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;CACxB;AAED,gBAAgB;AAChB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACxC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;CAC1B;AAED,gBAAgB;AAChB,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,IAAI,EAAE,gBAAgB,CAAC;IAChC,QAAQ,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACxD,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC9B,oBAAoB,GACpB,sBAAsB,GACtB,qBAAqB,GACrB,kBAAkB,GAClB,6BAA6B,CAAC;AAElC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,MAAM,yBAAyB,GACjC,oBAAoB,GACpB,sBAAsB,GACtB,qBAAqB,GACrB,kBAAkB,GAClB,qBAAqB,CAAC;AAE1B,gBAAgB;AAChB,MAAM,MAAM,eAAe,GACvB,sBAAsB,GACtB,yBAAyB,CAAC;AAE9B,gBAAgB;AAChB,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,eAAe,GACrB,KAAK,IAAI,kBAAkB,CAE7B;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,eAAe,GACrB,KAAK,IAAI,oBAAoB,CAE/B;AAED,gBAAgB;AAChB,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,eAAe,GACrB,KAAK,IAAI,sBAAsB,CAEjC;AAED,gBAAgB;AAChB,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,eAAe,GACrB,KAAK,IAAI,qBAAqB,CAEhC;AAED,gBAAgB;AAChB,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,yBAAyB,GAC/B,KAAK,IAAI,qBAAqB,CAEhC;AAED,gBAAgB;AAChB,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,eAAe,GACrB,KAAK,IAAI,yBAAyB,CAGpC;AAED,gBAAgB;AAChB,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,eAAe,GACrB,KAAK,IAAI,sBAAsB,CAGjC"}

package/lib/cjs/appui-react/layout/state/DropTargetState.js

@@ -0,0 +1,50 @@
+"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 Base
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTabDragDropTargetState = exports.isWidgetDragDropTargetState = exports.isWindowDropTargetState = exports.isWidgetDropTargetState = exports.isSectionDropTargetState = exports.isPanelDropTargetState = exports.isTabDropTargetState = void 0;
+/** @internal */
+function isTabDropTargetState(state) {
+    return state.type === "tab";
+}
+exports.isTabDropTargetState = isTabDropTargetState;
+/** @internal */
+function isPanelDropTargetState(state) {
+    return state.type === "panel";
+}
+exports.isPanelDropTargetState = isPanelDropTargetState;
+/** @internal */
+function isSectionDropTargetState(state) {
+    return state.type === "section";
+}
+exports.isSectionDropTargetState = isSectionDropTargetState;
+/** @internal */
+function isWidgetDropTargetState(state) {
+    return state.type === "widget";
+}
+exports.isWidgetDropTargetState = isWidgetDropTargetState;
+/** @internal */
+function isWindowDropTargetState(state) {
+    return state.type === "window";
+}
+exports.isWindowDropTargetState = isWindowDropTargetState;
+/** @internal */
+function isWidgetDragDropTargetState(state) {
+    if (state.type === "floatingWidget")
+        return false;
+    return true;
+}
+exports.isWidgetDragDropTargetState = isWidgetDragDropTargetState;
+/** @internal */
+function isTabDragDropTargetState(state) {
+    if (state.type === "window")
+        return false;
+    return true;
+}
+exports.isTabDragDropTargetState = isTabDragDropTargetState;
+//# sourceMappingURL=DropTargetState.js.map

package/lib/cjs/appui-react/layout/state/DropTargetState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropTargetState.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/state/DropTargetState.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAyEH,gBAAgB;AAChB,SAAgB,oBAAoB,CAClC,KAAsB;IAEtB,OAAO,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC;AAC9B,CAAC;AAJD,oDAIC;AAED,gBAAgB;AAChB,SAAgB,sBAAsB,CACpC,KAAsB;IAEtB,OAAO,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC;AAChC,CAAC;AAJD,wDAIC;AAED,gBAAgB;AAChB,SAAgB,wBAAwB,CACtC,KAAsB;IAEtB,OAAO,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC;AAClC,CAAC;AAJD,4DAIC;AAED,gBAAgB;AAChB,SAAgB,uBAAuB,CACrC,KAAsB;IAEtB,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;AACjC,CAAC;AAJD,0DAIC;AAED,gBAAgB;AAChB,SAAgB,uBAAuB,CACrC,KAAgC;IAEhC,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;AACjC,CAAC;AAJD,0DAIC;AAED,gBAAgB;AAChB,SAAgB,2BAA2B,CACzC,KAAsB;IAEtB,IAAI,KAAK,CAAC,IAAI,KAAK,gBAAgB;QAAE,OAAO,KAAK,CAAC;IAClD,OAAO,IAAI,CAAC;AACd,CAAC;AALD,kEAKC;AAED,gBAAgB;AAChB,SAAgB,wBAAwB,CACtC,KAAsB;IAEtB,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IAC1C,OAAO,IAAI,CAAC;AACd,CAAC;AALD,4DAKC","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 Base\n */\n\nimport type { SizeProps } from \"@itwin/core-react\";\nimport type { PanelSide } from \"../widget-panels/PanelTypes\";\nimport type { FloatingWidgetState, WidgetState } from \"./WidgetState\";\n\n/** @internal */\nexport interface TabDropTargetState {\n  readonly widgetId: WidgetState[\"id\"];\n  readonly tabIndex: number;\n  readonly type: \"tab\";\n}\n\n/** @internal */\nexport interface WidgetDropTargetState {\n  readonly widgetId: WidgetState[\"id\"];\n  readonly type: \"widget\";\n}\n\n/** @internal */\nexport interface PanelDropTargetState {\n  readonly side: PanelSide;\n  readonly newWidgetId: WidgetState[\"id\"];\n  readonly type: \"panel\";\n}\n\n/** @internal */\nexport interface SectionDropTargetState {\n  readonly side: PanelSide;\n  readonly newWidgetId: WidgetState[\"id\"];\n  readonly sectionIndex: number;\n  readonly type: \"section\";\n}\n\n/** @internal */\nexport interface FloatingWidgetDropTargetState {\n  readonly type: \"floatingWidget\";\n  readonly newFloatingWidgetId: FloatingWidgetState[\"id\"];\n  readonly size: SizeProps;\n}\n\n/** Drop target of a tab drag action.\n * @internal\n */\nexport type TabDragDropTargetState =\n  | PanelDropTargetState\n  | SectionDropTargetState\n  | WidgetDropTargetState\n  | TabDropTargetState\n  | FloatingWidgetDropTargetState;\n\n/** Default drop target, when nothing is targeted.\n * @internal\n */\nexport interface WindowDropTargetState {\n  readonly type: \"window\";\n}\n\n/** Drop target of a widget drag action.\n * @internal\n */\nexport type WidgetDragDropTargetState =\n  | PanelDropTargetState\n  | SectionDropTargetState\n  | WidgetDropTargetState\n  | TabDropTargetState\n  | WindowDropTargetState;\n\n/** @internal */\nexport type DropTargetState =\n  | TabDragDropTargetState\n  | WidgetDragDropTargetState;\n\n/** @internal */\nexport function isTabDropTargetState(\n  state: DropTargetState\n): state is TabDropTargetState {\n  return state.type === \"tab\";\n}\n\n/** @internal */\nexport function isPanelDropTargetState(\n  state: DropTargetState\n): state is PanelDropTargetState {\n  return state.type === \"panel\";\n}\n\n/** @internal */\nexport function isSectionDropTargetState(\n  state: DropTargetState\n): state is SectionDropTargetState {\n  return state.type === \"section\";\n}\n\n/** @internal */\nexport function isWidgetDropTargetState(\n  state: DropTargetState\n): state is WidgetDropTargetState {\n  return state.type === \"widget\";\n}\n\n/** @internal */\nexport function isWindowDropTargetState(\n  state: WidgetDragDropTargetState\n): state is WindowDropTargetState {\n  return state.type === \"window\";\n}\n\n/** @internal */\nexport function isWidgetDragDropTargetState(\n  state: DropTargetState\n): state is WidgetDragDropTargetState {\n  if (state.type === \"floatingWidget\") return false;\n  return true;\n}\n\n/** @internal */\nexport function isTabDragDropTargetState(\n  state: DropTargetState\n): state is TabDragDropTargetState {\n  if (state.type === \"window\") return false;\n  return true;\n}\n"]}