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

package/lib/esm/appui-react/layout/tool-settings/Setting.js

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./Setting.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useResizeObserver } from "@itwin/core-react";
+import { useToolSettingsEntry } from "./Docked";
+/** Used in a [[DockedToolSettings]] component to display a setting.
+ * @internal
+ */
+export function DockedToolSetting(props) {
+    const { onResize } = useToolSettingsEntry();
+    const ref = useResizeObserver(onResize);
+    const className = classnames("nz-toolSettings-setting", props.className);
+    return (React.createElement("div", { className: className, ref: ref, style: props.style }, props.children));
+}
+//# sourceMappingURL=Setting.js.map

package/lib/esm/appui-react/layout/tool-settings/Setting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Setting.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Setting.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAUhD;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAuB;IACvD,MAAM,EAAE,QAAQ,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC5C,MAAM,GAAG,GAAG,iBAAiB,CAAiB,QAAQ,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,UAAU,CAAC,yBAAyB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACzE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACpD,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./Setting.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\nimport { useToolSettingsEntry } from \"./Docked\";\n\n/** Properties of [[ToolSetting]] component.\n * @internal\n */\nexport interface ToolSettingProps extends CommonProps {\n  /** Tool setting content. */\n  children?: React.ReactNode;\n}\n\n/** Used in a [[DockedToolSettings]] component to display a setting.\n * @internal\n */\nexport function DockedToolSetting(props: ToolSettingProps) {\n  const { onResize } = useToolSettingsEntry();\n  const ref = useResizeObserver<HTMLDivElement>(onResize);\n  const className = classnames(\"nz-toolSettings-setting\", props.className);\n  return (\n    <div className={className} ref={ref} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/esm/appui-react/layout/tool-settings/Setting.scss

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-toolSettings-setting {
+  height: 100%;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+
+  &:not(.nz-overflown) {
+    &:before {
+      content: "";
+      padding-left: 1em;
+    }
+
+    &:after {
+      content: "";
+      padding-right: 1em;
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/Button.d.ts

@@ -0,0 +1,14 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** @internal */
+export declare const TabBarButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "id" | "label" | "isActive" | "form" | "slot" | "style" | "title" | "className" | "disabled" | "hidden" | "as" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "size" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "styleType"> & {
+    isActive?: boolean | undefined;
+    label?: React.ReactNode;
+} & Omit<import("@itwin/itwinui-react").ButtonProps, "startIcon" | "endIcon"> & {
+    as?: "button" | undefined;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

package/lib/esm/appui-react/layout/widget/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,gBAAgB;AAChB,eAAO,MAAM,YAAY;;;;;;;mDAOvB,CAAC"}

package/lib/esm/appui-react/layout/widget/Button.js

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { IconButton } from "@itwin/itwinui-react";
+/** @internal */
+export const TabBarButton = React.forwardRef(function TabBarButton(props, ref) {
+    return (React.createElement(IconButton, { ref: ref, styleType: "borderless", size: "small", ...props }));
+});
+//# sourceMappingURL=Button.js.map

package/lib/esm/appui-react/layout/widget/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Button.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,gBAAgB;AAChB,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAG1C,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAChC,OAAO,CACL,oBAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,KAAK,KAAK,GAAI,CACxE,CAAC;AACJ,CAAC,CAAC,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 * as React from \"react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\n\n/** @internal */\nexport const TabBarButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof IconButton>\n>(function TabBarButton(props, ref) {\n  return (\n    <IconButton ref={ref} styleType=\"borderless\" size=\"small\" {...props} />\n  );\n});\n"]}

package/lib/esm/appui-react/layout/widget/Buttons.d.ts

@@ -0,0 +1,12 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import "./Buttons.scss";
+/** @internal */
+export declare function TabBarButtons(): React.JSX.Element;
+/** @internal */
+export declare function useWidgetFeatures(): ("pin" | "maximize" | "popout" | "horizontalAlign" | "dock" | "sendBack")[];
+/** @internal */
+export declare function useIsMainPanelWidget(): boolean;
+//# sourceMappingURL=Buttons.d.ts.map

package/lib/esm/appui-react/layout/widget/Buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Buttons.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Buttons.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,OAAO,gBAAgB,CAAC;AAExB,gBAAgB;AAChB,wBAAgB,aAAa,sBA2B5B;AAED,gBAAgB;AAChB,wBAAgB,iBAAiB,gFAmBhC;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,YAYnC"}

package/lib/esm/appui-react/layout/widget/Buttons.js

@@ -0,0 +1,79 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { useLayout } from "../base/LayoutStore";
+import { isHorizontalPanelSide, PanelSideContext, } from "../widget-panels/Panel";
+import { Dock } from "./Dock";
+import { PinToggle } from "./PinToggle";
+import { PopoutToggle, usePopoutToggle } from "./PopoutToggle";
+import { PreviewHorizontalPanelAlignButton, useHorizontalPanelAlignButton, } from "./PreviewHorizontalPanelAlign";
+import { PreviewMaximizeToggle, useMaximizeToggle, } from "./PreviewMaximizeToggle";
+import { SendBack, useSendBack } from "./SendBack";
+import { WidgetIdContext } from "./Widget";
+import { MoreButton, useDropdownFeatures, } from "../../preview/widget-action-dropdown/MoreButton";
+import { useIsToolSettingsTab } from "./useIsToolSettingsTab";
+import "./Buttons.scss";
+/** @internal */
+export function TabBarButtons() {
+    const features = useWidgetFeatures();
+    const [sortedFeatures, isDropdown] = useDropdownFeatures(features);
+    const buttons = sortedFeatures.map((feature) => {
+        switch (feature) {
+            case "popout":
+                return React.createElement(PopoutToggle, { key: "popout" });
+            case "maximize":
+                return React.createElement(PreviewMaximizeToggle, { key: "maximize" });
+            case "sendBack":
+                return React.createElement(SendBack, { key: "sendBack" });
+            case "dock":
+                return React.createElement(Dock, { key: "dock" });
+            case "horizontalAlign":
+                return React.createElement(PreviewHorizontalPanelAlignButton, { key: "horizontalAlign" });
+            case "pin":
+                return React.createElement(PinToggle, { key: "pin" });
+        }
+        return undefined;
+    });
+    return (React.createElement("div", { className: "nz-widget-buttons" }, isDropdown ? React.createElement(MoreButton, null, buttons) : buttons));
+}
+/** @internal */
+export function useWidgetFeatures() {
+    const isToolSettings = useIsToolSettingsTab();
+    const isMainPanelWidget = useIsMainPanelWidget();
+    const popoutToggle = usePopoutToggle();
+    const maximizeToggle = useMaximizeToggle();
+    const sendBack = useSendBack();
+    const dock = isToolSettings;
+    const horizontalPanelAlignButton = useHorizontalPanelAlignButton();
+    const pinToggle = isMainPanelWidget;
+    return [
+        ...(popoutToggle ? ["popout"] : []),
+        ...(maximizeToggle ? ["maximize"] : []),
+        ...(sendBack ? ["sendBack"] : []),
+        ...(dock ? ["dock"] : []),
+        ...(horizontalPanelAlignButton ? ["horizontalAlign"] : []),
+        ...(pinToggle ? ["pin"] : []),
+    ];
+}
+/** @internal */
+export function useIsMainPanelWidget() {
+    const side = React.useContext(PanelSideContext);
+    const widgetId = React.useContext(WidgetIdContext);
+    return useLayout((state) => {
+        const widgets = side ? state.panels[side].widgets : undefined;
+        if (!widgets)
+            return false;
+        assert(!!side);
+        const mainWidget = isHorizontalPanelSide(side)
+            ? widgets[widgets.length - 1]
+            : widgets[0];
+        return mainWidget === widgetId;
+    });
+}
+//# sourceMappingURL=Buttons.js.map

package/lib/esm/appui-react/layout/widget/Buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Buttons.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Buttons.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EACL,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EACL,iCAAiC,EACjC,6BAA6B,GAC9B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EACL,UAAU,EACV,mBAAmB,GACpB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,gBAAgB,CAAC;AAExB,gBAAgB;AAChB,MAAM,UAAU,aAAa;IAC3B,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC;IACrC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAEnE,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7C,QAAQ,OAAO,EAAE;YACf,KAAK,QAAQ;gBACX,OAAO,oBAAC,YAAY,IAAC,GAAG,EAAC,QAAQ,GAAG,CAAC;YACvC,KAAK,UAAU;gBACb,OAAO,oBAAC,qBAAqB,IAAC,GAAG,EAAC,UAAU,GAAG,CAAC;YAClD,KAAK,UAAU;gBACb,OAAO,oBAAC,QAAQ,IAAC,GAAG,EAAC,UAAU,GAAG,CAAC;YACrC,KAAK,MAAM;gBACT,OAAO,oBAAC,IAAI,IAAC,GAAG,EAAC,MAAM,GAAG,CAAC;YAC7B,KAAK,iBAAiB;gBACpB,OAAO,oBAAC,iCAAiC,IAAC,GAAG,EAAC,iBAAiB,GAAG,CAAC;YACrE,KAAK,KAAK;gBACR,OAAO,oBAAC,SAAS,IAAC,GAAG,EAAC,KAAK,GAAG,CAAC;SAClC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,UAAU,CAAC,CAAC,CAAC,oBAAC,UAAU,QAAE,OAAO,CAAc,CAAC,CAAC,CAAC,OAAO,CACtD,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iBAAiB;IAC/B,MAAM,cAAc,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IAEjD,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,cAAc,CAAC;IAC5B,MAAM,0BAA0B,GAAG,6BAA6B,EAAE,CAAC;IACnE,MAAM,SAAS,GAAG,iBAAiB,CAAC;IAEpC,OAAO;QACL,GAAG,CAAC,YAAY,CAAC,CAAC,CAAE,CAAC,QAAQ,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9C,GAAG,CAAC,cAAc,CAAC,CAAC,CAAE,CAAC,UAAU,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAClD,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAE,CAAC,UAAU,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5C,GAAG,CAAC,IAAI,CAAC,CAAC,CAAE,CAAC,MAAM,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACpC,GAAG,CAAC,0BAA0B,CAAC,CAAC,CAAE,CAAC,iBAAiB,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACrE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAE,CAAC,KAAK,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;KACzC,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,oBAAoB;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9D,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAC3B,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACf,MAAM,UAAU,GAAG,qBAAqB,CAAC,IAAI,CAAC;YAC5C,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAC7B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACf,OAAO,UAAU,KAAK,QAAQ,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,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 * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel\";\nimport { Dock } from \"./Dock\";\nimport { PinToggle } from \"./PinToggle\";\nimport { PopoutToggle, usePopoutToggle } from \"./PopoutToggle\";\nimport {\n  PreviewHorizontalPanelAlignButton,\n  useHorizontalPanelAlignButton,\n} from \"./PreviewHorizontalPanelAlign\";\nimport {\n  PreviewMaximizeToggle,\n  useMaximizeToggle,\n} from \"./PreviewMaximizeToggle\";\nimport { SendBack, useSendBack } from \"./SendBack\";\nimport { WidgetIdContext } from \"./Widget\";\nimport {\n  MoreButton,\n  useDropdownFeatures,\n} from \"../../preview/widget-action-dropdown/MoreButton\";\nimport { useIsToolSettingsTab } from \"./useIsToolSettingsTab\";\nimport \"./Buttons.scss\";\n\n/** @internal */\nexport function TabBarButtons() {\n  const features = useWidgetFeatures();\n  const [sortedFeatures, isDropdown] = useDropdownFeatures(features);\n\n  const buttons = sortedFeatures.map((feature) => {\n    switch (feature) {\n      case \"popout\":\n        return <PopoutToggle key=\"popout\" />;\n      case \"maximize\":\n        return <PreviewMaximizeToggle key=\"maximize\" />;\n      case \"sendBack\":\n        return <SendBack key=\"sendBack\" />;\n      case \"dock\":\n        return <Dock key=\"dock\" />;\n      case \"horizontalAlign\":\n        return <PreviewHorizontalPanelAlignButton key=\"horizontalAlign\" />;\n      case \"pin\":\n        return <PinToggle key=\"pin\" />;\n    }\n    return undefined;\n  });\n\n  return (\n    <div className=\"nz-widget-buttons\">\n      {isDropdown ? <MoreButton>{buttons}</MoreButton> : buttons}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useWidgetFeatures() {\n  const isToolSettings = useIsToolSettingsTab();\n  const isMainPanelWidget = useIsMainPanelWidget();\n\n  const popoutToggle = usePopoutToggle();\n  const maximizeToggle = useMaximizeToggle();\n  const sendBack = useSendBack();\n  const dock = isToolSettings;\n  const horizontalPanelAlignButton = useHorizontalPanelAlignButton();\n  const pinToggle = isMainPanelWidget;\n\n  return [\n    ...(popoutToggle ? ([\"popout\"] as const) : []),\n    ...(maximizeToggle ? ([\"maximize\"] as const) : []),\n    ...(sendBack ? ([\"sendBack\"] as const) : []),\n    ...(dock ? ([\"dock\"] as const) : []),\n    ...(horizontalPanelAlignButton ? ([\"horizontalAlign\"] as const) : []),\n    ...(pinToggle ? ([\"pin\"] as const) : []),\n  ];\n}\n\n/** @internal */\nexport function useIsMainPanelWidget() {\n  const side = React.useContext(PanelSideContext);\n  const widgetId = React.useContext(WidgetIdContext);\n  return useLayout((state) => {\n    const widgets = side ? state.panels[side].widgets : undefined;\n    if (!widgets) return false;\n    assert(!!side);\n    const mainWidget = isHorizontalPanelSide(side)\n      ? widgets[widgets.length - 1]\n      : widgets[0];\n    return mainWidget === widgetId;\n  });\n}\n"]}

package/lib/esm/appui-react/layout/widget/Buttons.scss

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-buttons {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  height: 100%;
+}

package/lib/esm/appui-react/layout/widget/Content.d.ts

@@ -0,0 +1,19 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import "./Content.scss";
+/** Properties of [[ScrollableWidgetContent]] component.
+ * @internal
+ */
+export interface ScrollableWidgetContentProps {
+    /** Optional unique identifier for item. If defined it will be added to DOM Element attribute as data-item-id */
+    itemId?: string;
+    providerId?: string;
+    children?: React.ReactNode;
+}
+/** Component that enables widget content scrolling.
+ * @internal
+ */
+export declare function ScrollableWidgetContent(props: ScrollableWidgetContentProps): React.JSX.Element;
+//# sourceMappingURL=Content.d.ts.map

package/lib/esm/appui-react/layout/widget/Content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Content.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,gHAAgH;IAChH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,qBA4B1E"}

package/lib/esm/appui-react/layout/widget/Content.js

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import { assert } from "@itwin/core-bentley";
+import { Point } from "@itwin/core-react";
+import * as React from "react";
+import { useTransientState } from "../../widget-panels/useTransientState";
+import "./Content.scss";
+/** Component that enables widget content scrolling.
+ * @internal
+ */
+export function ScrollableWidgetContent(props) {
+    const scrollPosition = React.useRef(new Point());
+    const ref = React.useRef(null);
+    const onSave = React.useCallback(() => {
+        // istanbul ignore else
+        if (!!ref.current)
+            scrollPosition.current = new Point(ref.current.scrollLeft, ref.current.scrollTop);
+    }, []);
+    const onRestore = React.useCallback(() => {
+        assert(!!ref.current);
+        ref.current.scrollLeft = scrollPosition.current.x;
+        ref.current.scrollTop = scrollPosition.current.y;
+    }, []);
+    useTransientState(onSave, onRestore);
+    return (React.createElement("div", { "data-item-id": props.itemId, "data-item-provider-id": props.providerId, "data-item-type": "widget-content", className: "nz-widget-content", ref: ref }, props.children));
+}
+//# sourceMappingURL=Content.js.map

package/lib/esm/appui-react/layout/widget/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Content.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AAYxB;;GAEG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAmC;IACzE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;IACjD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACpC,uBAAuB;QACvB,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO;YACf,cAAc,CAAC,OAAO,GAAG,IAAI,KAAK,CAChC,GAAG,CAAC,OAAO,CAAC,UAAU,EACtB,GAAG,CAAC,OAAO,CAAC,SAAS,CACtB,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACtB,GAAG,CAAC,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;QAClD,GAAG,CAAC,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,iBAAiB,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACrC,OAAO,CACL,6CACgB,KAAK,CAAC,MAAM,2BACH,KAAK,CAAC,UAAU,oBACxB,gBAAgB,EAC/B,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,GAAG,IAEP,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport { assert } from \"@itwin/core-bentley\";\nimport { Point } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport { useTransientState } from \"../../widget-panels/useTransientState\";\nimport \"./Content.scss\";\n\n/** Properties of [[ScrollableWidgetContent]] component.\n * @internal\n */\nexport interface ScrollableWidgetContentProps {\n  /** Optional unique identifier for item. If defined it will be added to DOM Element attribute as data-item-id */\n  itemId?: string;\n  providerId?: string;\n  children?: React.ReactNode;\n}\n\n/** Component that enables widget content scrolling.\n * @internal\n */\nexport function ScrollableWidgetContent(props: ScrollableWidgetContentProps) {\n  const scrollPosition = React.useRef(new Point());\n  const ref = React.useRef<HTMLDivElement>(null);\n  const onSave = React.useCallback(() => {\n    // istanbul ignore else\n    if (!!ref.current)\n      scrollPosition.current = new Point(\n        ref.current.scrollLeft,\n        ref.current.scrollTop\n      );\n  }, []);\n  const onRestore = React.useCallback(() => {\n    assert(!!ref.current);\n    ref.current.scrollLeft = scrollPosition.current.x;\n    ref.current.scrollTop = scrollPosition.current.y;\n  }, []);\n  useTransientState(onSave, onRestore);\n  return (\n    <div\n      data-item-id={props.itemId}\n      data-item-provider-id={props.providerId}\n      data-item-type=\"widget-content\"\n      className=\"nz-widget-content\"\n      ref={ref}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/esm/appui-react/layout/widget/Content.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "../scrollbar";
+
+.nz-widget-content {
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+
+  @include nz-scrollbar;
+}

package/lib/esm/appui-react/layout/widget/ContentContainer.d.ts

@@ -0,0 +1,12 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./ContentContainer.scss";
+import * as React from "react";
+/** @internal */
+export interface WidgetContentContainerProps {
+    children?: React.ReactNode;
+}
+/** @internal */
+export declare function WidgetContentContainer(props: WidgetContentContainerProps): React.JSX.Element;
+//# sourceMappingURL=ContentContainer.d.ts.map

package/lib/esm/appui-react/layout/widget/ContentContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentContainer.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentContainer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,gBAAgB;AAChB,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBA0BxE"}

package/lib/esm/appui-react/layout/widget/ContentContainer.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./ContentContainer.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { WidgetContentManagerContext } from "./ContentManager";
+import { PanelSideContext } from "../widget-panels/Panel";
+import { WidgetIdContext } from "./Widget";
+import { useLayout } from "../base/LayoutStore";
+import { getWidgetState } from "../state/internal/WidgetStateHelpers";
+/** @internal */
+export function WidgetContentContainer(props) {
+    const widgetId = React.useContext(WidgetIdContext);
+    const widgetContentManager = React.useContext(WidgetContentManagerContext);
+    const side = React.useContext(PanelSideContext);
+    assert(!!widgetId);
+    const { minimized, activeTabId } = useLayout((state) => {
+        const widget = getWidgetState(state, widgetId);
+        return { minimized: widget.minimized, activeTabId: widget.activeTabId };
+    }, true);
+    const ref = React.useCallback((instance) => {
+        widgetContentManager.setContainer(activeTabId, instance);
+    }, [widgetContentManager, activeTabId]);
+    const className = classnames("nz-widget-contentContainer", undefined === side && minimized && "nz-minimized");
+    return (React.createElement("div", { className: className },
+        React.createElement("div", { className: "nz-content", ref: ref }),
+        props.children));
+}
+//# sourceMappingURL=ContentContainer.js.map

package/lib/esm/appui-react/layout/widget/ContentContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentContainer.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentContainer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAOtE,gBAAgB;AAChB,MAAM,UAAU,sBAAsB,CAAC,KAAkC;IACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;IAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnB,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACrD,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC;IAC1E,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,MAAM,GAAG,GAAG,KAAK,CAAC,WAAW,CAC3B,CAAC,QAAwB,EAAE,EAAE;QAC3B,oBAAoB,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC,EACD,CAAC,oBAAoB,EAAE,WAAW,CAAC,CACpC,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAC1B,4BAA4B,EAC5B,SAAS,KAAK,IAAI,IAAI,SAAS,IAAI,cAAc,CAClD,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,6BAAK,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,GAAG,GAAI;QACvC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./ContentContainer.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { WidgetContentManagerContext } from \"./ContentManager\";\nimport { PanelSideContext } from \"../widget-panels/Panel\";\nimport { WidgetIdContext } from \"./Widget\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\n\n/** @internal */\nexport interface WidgetContentContainerProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetContentContainer(props: WidgetContentContainerProps) {\n  const widgetId = React.useContext(WidgetIdContext);\n  const widgetContentManager = React.useContext(WidgetContentManagerContext);\n  const side = React.useContext(PanelSideContext);\n  assert(!!widgetId);\n  const { minimized, activeTabId } = useLayout((state) => {\n    const widget = getWidgetState(state, widgetId);\n    return { minimized: widget.minimized, activeTabId: widget.activeTabId };\n  }, true);\n  const ref = React.useCallback(\n    (instance: HTMLDivElement) => {\n      widgetContentManager.setContainer(activeTabId, instance);\n    },\n    [widgetContentManager, activeTabId]\n  );\n\n  const className = classnames(\n    \"nz-widget-contentContainer\",\n    undefined === side && minimized && \"nz-minimized\"\n  );\n  return (\n    <div className={className}>\n      <div className=\"nz-content\" ref={ref} />\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/esm/appui-react/layout/widget/ContentContainer.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.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-contentContainer {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  position: relative;
+  display: flex;
+
+  > .nz-content {
+    flex: 1;
+    display: flex;
+    min-width: 0;
+  }
+}
+
+.nz-widget-floatingWidget {
+  .nz-widget-contentContainer.nz-minimized {
+    flex-basis: 0;
+    overflow: hidden;
+  }
+}

package/lib/esm/appui-react/layout/widget/ContentManager.d.ts

@@ -0,0 +1,30 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { BeEvent } from "@itwin/core-bentley";
+import type { TabState } from "../state/TabState";
+/** @internal */
+export interface WidgetContentManagerProps {
+    children?: React.ReactNode;
+}
+/** @internal */
+export declare function WidgetContentManager(props: WidgetContentManagerProps): React.JSX.Element;
+interface ContainersStore {
+    setContainer: (tabId: TabState["id"], container: Element | null) => void;
+    containers: {
+        readonly [id in TabState["id"]]: Element | null;
+    };
+}
+/** @internal */
+export declare const useContainersStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ContainersStore>>;
+/** @internal */
+export interface WidgetContentManagerContextArgs {
+    setContainer(tabId: TabState["id"], container: Element | null): void;
+    onSaveTransientState: BeEvent<(tabId: TabState["id"]) => void>;
+    onRestoreTransientState: BeEvent<(tabId: TabState["id"]) => void>;
+}
+/** @internal */
+export declare const WidgetContentManagerContext: React.Context<WidgetContentManagerContextArgs>;
+export {};
+//# sourceMappingURL=ContentManager.d.ts.map

package/lib/esm/appui-react/layout/widget/ContentManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentManager.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentManager.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,gBAAgB;AAChB,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAiCpE;AAED,UAAU,eAAe;IACvB,YAAY,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,UAAU,EAAE;QAAE,QAAQ,EAAE,EAAE,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI;KAAE,CAAC;CACjE;AAED,gBAAgB;AAChB,eAAO,MAAM,kBAAkB,8EAS5B,CAAC;AAEJ,gBAAgB;AAChB,MAAM,WAAW,+BAA+B;IAC9C,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;IACrE,oBAAoB,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IAC/D,uBAAuB,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;CACnE;AAED,gBAAgB;AAChB,eAAO,MAAM,2BAA2B,gDACqB,CAAC"}

package/lib/esm/appui-react/layout/widget/ContentManager.js

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import produce, { castDraft } from "immer";
+import * as React from "react";
+import { create } from "zustand";
+import { BeEvent } from "@itwin/core-bentley";
+/** @internal */
+export function WidgetContentManager(props) {
+    const setContentContainer = useContainersStore((state) => state.setContainer);
+    const saveTransientStateRef = React.useRef(new BeEvent());
+    const restoreTransientStateRef = React.useRef(new BeEvent());
+    const setContainer = React.useCallback((tabId, container) => {
+        container === null && saveTransientStateRef.current.raiseEvent(tabId);
+        setContentContainer(tabId, container);
+    }, [setContentContainer]);
+    const widgetContentManagerContextValue = React.useMemo(() => ({
+        setContainer,
+        onSaveTransientState: saveTransientStateRef.current,
+        onRestoreTransientState: restoreTransientStateRef.current,
+    }), [setContainer]);
+    return (React.createElement(WidgetContentManagerContext.Provider, { value: widgetContentManagerContextValue }, props.children));
+}
+/** @internal */
+export const useContainersStore = create((set) => ({
+    containers: {},
+    setContainer: (tabId, container) => {
+        set((state) => produce(state, (draft) => {
+            draft.containers[tabId] = castDraft(container);
+        }));
+    },
+}));
+/** @internal */
+export const WidgetContentManagerContext = React.createContext(null);
+WidgetContentManagerContext.displayName = "nz:WidgetContentManagerContext";
+//# sourceMappingURL=ContentManager.js.map

package/lib/esm/appui-react/layout/widget/ContentManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentManager.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentManager.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,OAAO,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAQ9C,gBAAgB;AAChB,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC9E,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CACxC,IAAI,OAAO,EAAmC,CAC/C,CAAC;IACF,MAAM,wBAAwB,GAAG,KAAK,CAAC,MAAM,CAC3C,IAAI,OAAO,EAAmC,CAC/C,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAGpC,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;QACnB,SAAS,KAAK,IAAI,IAAI,qBAAqB,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACtE,mBAAmB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACxC,CAAC,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAC;IACF,MAAM,gCAAgC,GACpC,KAAK,CAAC,OAAO,CACX,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;QACZ,oBAAoB,EAAE,qBAAqB,CAAC,OAAO;QACnD,uBAAuB,EAAE,wBAAwB,CAAC,OAAO;KAC1D,CAAC,EACF,CAAC,YAAY,CAAC,CACf,CAAC;IACJ,OAAO,CACL,oBAAC,2BAA2B,CAAC,QAAQ,IACnC,KAAK,EAAE,gCAAgC,IAEtC,KAAK,CAAC,QAAQ,CACsB,CACxC,CAAC;AACJ,CAAC;AAOD,gBAAgB;AAChB,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAkB,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAClE,UAAU,EAAE,EAAE;IACd,YAAY,EAAE,CAAC,KAAqB,EAAE,SAAyB,EAAE,EAAE;QACjE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACZ,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;CACF,CAAC,CAAC,CAAC;AASJ,gBAAgB;AAChB,MAAM,CAAC,MAAM,2BAA2B,GACtC,KAAK,CAAC,aAAa,CAAkC,IAAK,CAAC,CAAC;AAC9D,2BAA2B,CAAC,WAAW,GAAG,gCAAgC,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 produce, { castDraft } from \"immer\";\nimport * as React from \"react\";\nimport { create } from \"zustand\";\nimport { BeEvent } from \"@itwin/core-bentley\";\nimport type { TabState } from \"../state/TabState\";\n\n/** @internal */\nexport interface WidgetContentManagerProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetContentManager(props: WidgetContentManagerProps) {\n  const setContentContainer = useContainersStore((state) => state.setContainer);\n  const saveTransientStateRef = React.useRef(\n    new BeEvent<(tabId: TabState[\"id\"]) => void>()\n  );\n  const restoreTransientStateRef = React.useRef(\n    new BeEvent<(tabId: TabState[\"id\"]) => void>()\n  );\n  const setContainer = React.useCallback<\n    WidgetContentManagerContextArgs[\"setContainer\"]\n  >(\n    (tabId, container) => {\n      container === null && saveTransientStateRef.current.raiseEvent(tabId);\n      setContentContainer(tabId, container);\n    },\n    [setContentContainer]\n  );\n  const widgetContentManagerContextValue =\n    React.useMemo<WidgetContentManagerContextArgs>(\n      () => ({\n        setContainer,\n        onSaveTransientState: saveTransientStateRef.current,\n        onRestoreTransientState: restoreTransientStateRef.current,\n      }),\n      [setContainer]\n    );\n  return (\n    <WidgetContentManagerContext.Provider\n      value={widgetContentManagerContextValue}\n    >\n      {props.children}\n    </WidgetContentManagerContext.Provider>\n  );\n}\n\ninterface ContainersStore {\n  setContainer: (tabId: TabState[\"id\"], container: Element | null) => void;\n  containers: { readonly [id in TabState[\"id\"]]: Element | null };\n}\n\n/** @internal */\nexport const useContainersStore = create<ContainersStore>((set) => ({\n  containers: {},\n  setContainer: (tabId: TabState[\"id\"], container: Element | null) => {\n    set((state) =>\n      produce(state, (draft) => {\n        draft.containers[tabId] = castDraft(container);\n      })\n    );\n  },\n}));\n\n/** @internal */\nexport interface WidgetContentManagerContextArgs {\n  setContainer(tabId: TabState[\"id\"], container: Element | null): void;\n  onSaveTransientState: BeEvent<(tabId: TabState[\"id\"]) => void>;\n  onRestoreTransientState: BeEvent<(tabId: TabState[\"id\"]) => void>;\n}\n\n/** @internal */\nexport const WidgetContentManagerContext =\n  React.createContext<WidgetContentManagerContextArgs>(null!);\nWidgetContentManagerContext.displayName = \"nz:WidgetContentManagerContext\";\n"]}

package/lib/esm/appui-react/layout/widget/ContentRenderer.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./ContentRenderer.scss";
+import * as React from "react";
+import type { TabState } from "../state/TabState";
+/** @internal */
+export declare function WidgetContentRenderers(): React.JSX.Element;
+interface WidgetContentRendererProps {
+    children?: React.ReactNode;
+    tabId: TabState["id"];
+}
+/** @internal */
+export declare function WidgetContentRenderer(props: WidgetContentRendererProps): React.ReactPortal;
+/** @internal */
+export declare const TabIdContext: React.Context<string | undefined>;
+/** @internal */
+export declare function useTabTransientState(tabId: string, onSave?: () => void, onRestore?: () => void): void;
+export {};
+//# sourceMappingURL=ContentRenderer.d.ts.map

package/lib/esm/appui-react/layout/widget/ContentRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAOlD,gBAAgB;AAChB,wBAAgB,sBAAsB,sBAoBrC;AAED,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACvB;AAED,gBAAgB;AAChB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAuCtE;AAED,gBAAgB;AAChB,eAAO,MAAM,YAAY,mCAExB,CAAC;AAGF,gBAAgB;AAChB,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,IAAI,EACnB,SAAS,CAAC,EAAE,MAAM,IAAI,QAavB"}

package/lib/esm/appui-react/layout/widget/ContentRenderer.js

@@ -0,0 +1,75 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./ContentRenderer.scss";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ToolSettingsNodeContext, WidgetContentNodeContext, } from "../base/NineZone";
+import { useContainersStore, WidgetContentManagerContext, } from "./ContentManager";
+import { useLayout } from "../base/LayoutStore";
+/** @internal */
+export function WidgetContentRenderers() {
+    const widgetContent = React.useContext(WidgetContentNodeContext);
+    const toolSettingsContent = React.useContext(ToolSettingsNodeContext);
+    const tabIds = useLayout((state) => {
+        return Object.keys(state.tabs);
+    }, true);
+    const toolSettingsTabId = useLayout((state) => { var _a; return (_a = state.toolSettings) === null || _a === void 0 ? void 0 : _a.tabId; });
+    return (React.createElement(React.Fragment, null, tabIds.map((tabId) => {
+        const children = tabId === toolSettingsTabId ? toolSettingsContent : widgetContent;
+        return (React.createElement(WidgetContentRenderer, { key: tabId, tabId: tabId }, children));
+    })));
+}
+/** @internal */
+export function WidgetContentRenderer(props) {
+    const renderTo = useContainersStore((state) => state.containers[props.tabId]);
+    const unloaded = useLayout((state) => !!state.tabs[props.tabId].unloaded);
+    const widgetContentManager = React.useContext(WidgetContentManagerContext);
+    const container = React.useRef(undefined);
+    if (!container.current) {
+        container.current = document.createElement("div");
+        container.current.classList.add("nz-widget-contentRenderer");
+    }
+    React.useLayoutEffect(() => {
+        const parent = renderTo;
+        if (parent) {
+            while (parent.firstChild) {
+                parent.removeChild(parent.firstChild);
+            }
+            parent.appendChild(container.current);
+            widgetContentManager.onRestoreTransientState.raiseEvent(props.tabId);
+        }
+        return () => {
+            for (const child of (parent === null || parent === void 0 ? void 0 : parent.children) || []) {
+                if (child === container.current) {
+                    parent.removeChild(child);
+                    return;
+                }
+            }
+        };
+    }, [renderTo, widgetContentManager, props.tabId]);
+    return ReactDOM.createPortal(React.createElement("div", { style: { height: "100%", width: "100%" }, id: `content-container:${props.tabId}` },
+        React.createElement(TabIdContext.Provider, { value: props.tabId }, unloaded ? null : props.children)), container.current);
+}
+/** @internal */
+export const TabIdContext = React.createContext(undefined);
+TabIdContext.displayName = "nz:TabIdContext";
+/** @internal */
+export function useTabTransientState(tabId, onSave, onRestore) {
+    const widgetContentManager = React.useContext(WidgetContentManagerContext);
+    React.useEffect(() => {
+        return widgetContentManager.onSaveTransientState.addListener((id) => {
+            tabId === id && onSave && onSave();
+        });
+    }, [widgetContentManager, onSave, tabId]);
+    React.useEffect(() => {
+        return widgetContentManager.onRestoreTransientState.addListener((id) => {
+            tabId === id && onRestore && onRestore();
+        });
+    }, [widgetContentManager, onRestore, tabId]);
+}
+//# sourceMappingURL=ContentRenderer.js.map

package/lib/esm/appui-react/layout/widget/ContentRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentRenderer.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentRenderer.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 \"./ContentRenderer.scss\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport {\n  ToolSettingsNodeContext,\n  WidgetContentNodeContext,\n} from \"../base/NineZone\";\nimport type { TabState } from \"../state/TabState\";\nimport {\n  useContainersStore,\n  WidgetContentManagerContext,\n} from \"./ContentManager\";\nimport { useLayout } from \"../base/LayoutStore\";\n\n/** @internal */\nexport function WidgetContentRenderers() {\n  const widgetContent = React.useContext(WidgetContentNodeContext);\n  const toolSettingsContent = React.useContext(ToolSettingsNodeContext);\n  const tabIds = useLayout((state) => {\n    return Object.keys(state.tabs);\n  }, true);\n  const toolSettingsTabId = useLayout((state) => state.toolSettings?.tabId);\n  return (\n    <>\n      {tabIds.map((tabId) => {\n        const children =\n          tabId === toolSettingsTabId ? toolSettingsContent : widgetContent;\n        return (\n          <WidgetContentRenderer key={tabId} tabId={tabId}>\n            {children}\n          </WidgetContentRenderer>\n        );\n      })}\n    </>\n  );\n}\n\ninterface WidgetContentRendererProps {\n  children?: React.ReactNode;\n  tabId: TabState[\"id\"];\n}\n\n/** @internal */\nexport function WidgetContentRenderer(props: WidgetContentRendererProps) {\n  const renderTo = useContainersStore((state) => state.containers[props.tabId]);\n  const unloaded = useLayout((state) => !!state.tabs[props.tabId].unloaded);\n  const widgetContentManager = React.useContext(WidgetContentManagerContext);\n  const container = React.useRef<HTMLDivElement>(undefined!);\n  if (!container.current) {\n    container.current = document.createElement(\"div\");\n    container.current.classList.add(\"nz-widget-contentRenderer\");\n  }\n  React.useLayoutEffect(() => {\n    const parent = renderTo;\n    if (parent) {\n      while (parent.firstChild) {\n        parent.removeChild(parent.firstChild);\n      }\n\n      parent.appendChild(container.current);\n      widgetContentManager.onRestoreTransientState.raiseEvent(props.tabId);\n    }\n    return () => {\n      for (const child of parent?.children || []) {\n        if (child === container.current) {\n          parent!.removeChild(child);\n          return;\n        }\n      }\n    };\n  }, [renderTo, widgetContentManager, props.tabId]);\n  return ReactDOM.createPortal(\n    <div\n      style={{ height: \"100%\", width: \"100%\" }}\n      id={`content-container:${props.tabId}`}\n    >\n      <TabIdContext.Provider value={props.tabId}>\n        {unloaded ? null : props.children}\n      </TabIdContext.Provider>\n    </div>,\n    container.current\n  );\n}\n\n/** @internal */\nexport const TabIdContext = React.createContext<TabState[\"id\"] | undefined>(\n  undefined\n);\nTabIdContext.displayName = \"nz:TabIdContext\";\n\n/** @internal */\nexport function useTabTransientState(\n  tabId: string,\n  onSave?: () => void,\n  onRestore?: () => void\n) {\n  const widgetContentManager = React.useContext(WidgetContentManagerContext);\n  React.useEffect(() => {\n    return widgetContentManager.onSaveTransientState.addListener((id) => {\n      tabId === id && onSave && onSave();\n    });\n  }, [widgetContentManager, onSave, tabId]);\n  React.useEffect(() => {\n    return widgetContentManager.onRestoreTransientState.addListener((id) => {\n      tabId === id && onRestore && onRestore();\n    });\n  }, [widgetContentManager, onRestore, tabId]);\n}\n"]}