@itwin/appui-react 4.17.0 → 5.0.0-dev.2

package/lib/appui-react/content/StandardContentLayouts.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module ContentView
+ */
+import type { ContentLayoutProps } from "./ContentLayoutProps.js";
+/**
+ * Class that define Standard Content Layouts that can be used to specify how the content is arranged in a frontstage.
+ * @public
+ */
+export declare class StandardContentLayouts {
+    static readonly singleView: ContentLayoutProps;
+    static readonly fourQuadrants: ContentLayoutProps;
+    static readonly twoVerticalSplit: ContentLayoutProps;
+    static readonly twoHorizontalSplit: ContentLayoutProps;
+    static readonly threeViewsTwoOnLeft: ContentLayoutProps;
+    static readonly threeViewsTwoOnRight: ContentLayoutProps;
+    static readonly threeViewsTwoOnBottom: ContentLayoutProps;
+    static readonly threeViewsTwoOnTop: ContentLayoutProps;
+    static readonly availableLayouts: ContentLayoutProps[];
+}
+//# sourceMappingURL=StandardContentLayouts.d.ts.map

package/lib/appui-react/content/StandardContentLayouts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardContentLayouts.d.ts","sourceRoot":"","sources":["../../../src/appui-react/content/StandardContentLayouts.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE;;;GAGG;AACH,qBAAa,sBAAsB;IACjC,gBAAuB,UAAU,EAAE,kBAAkB,CAGnD;IAEF,gBAAuB,aAAa,EAAE,kBAAkB,CAiCtD;IAEF,gBAAuB,gBAAgB,EAAE,kBAAkB,CASzD;IACF,gBAAuB,kBAAkB,EAAE,kBAAkB,CAU3D;IAEF,gBAAuB,mBAAmB,EAAE,kBAAkB,CAoB5D;IAEF,gBAAuB,oBAAoB,EAAE,kBAAkB,CAoB7D;IAEF,gBAAuB,qBAAqB,EAAE,kBAAkB,CAoB9D;IAEF,gBAAuB,kBAAkB,EAAE,kBAAkB,CAoB3D;IAGF,gBAAuB,gBAAgB,EAAE,kBAAkB,EAAE,CAS3D;CACH"}

package/lib/appui-react/content/StandardContentLayouts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardContentLayouts.js","sourceRoot":"","sources":["../../../src/appui-react/content/StandardContentLayouts.ts"],"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 ContentView\n */\n\nimport type { ContentLayoutProps } from \"./ContentLayoutProps.js\";\n\n/**\n * Class that define Standard Content Layouts that can be used to specify how the content is arranged in a frontstage.\n * @public\n */\nexport class StandardContentLayouts {\n  public static readonly singleView: ContentLayoutProps = {\n    id: \"uia:singleView\",\n    description: \"Single Content View\",\n  };\n\n  public static readonly fourQuadrants: ContentLayoutProps = {\n    id: \"uia:fourQuadrants\",\n    description:\n      \"Four Views, two stacked on the left, two stacked on the right\",\n    verticalSplit: {\n      id: \"uia:fourQuadrantVerticalSplit\",\n      percentage: 0.5,\n      lock: false,\n      minSizeLeft: 100,\n      minSizeRight: 100,\n      left: {\n        horizontalSplit: {\n          id: \"uia:fourQuadrantsLeftHorizontal\",\n          percentage: 0.5,\n          top: 0,\n          bottom: 1,\n          lock: false,\n          minSizeTop: 50,\n          minSizeBottom: 50,\n        },\n      },\n      right: {\n        horizontalSplit: {\n          id: \"uia:fourQuadrantsRightHorizontal\",\n          percentage: 0.5,\n          top: 2,\n          bottom: 3,\n          lock: false,\n          minSizeTop: 50,\n          minSizeBottom: 50,\n        },\n      },\n    },\n  };\n\n  public static readonly twoVerticalSplit: ContentLayoutProps = {\n    id: \"uia:twoVerticalSplit\",\n    description: \"Two Views, side by side\",\n    verticalSplit: {\n      id: \"uia:twoViewsVerticalSplit\",\n      percentage: 0.5,\n      left: 0,\n      right: 1,\n    },\n  };\n  public static readonly twoHorizontalSplit: ContentLayoutProps = {\n    id: \"uia:twoHorizontalSplit\",\n    description: \"Two views, stack one on top of the other\",\n    horizontalSplit: {\n      id: \"uia:twoViewsHorizontalSplit\",\n      percentage: 0.5,\n      lock: false,\n      top: 0,\n      bottom: 1,\n    },\n  };\n\n  public static readonly threeViewsTwoOnLeft: ContentLayoutProps = {\n    id: \"uia:threeViewsTwoOnLeft\",\n    description:\n      \"Three views, one on the right with the two on the left stacked one of top of the other\",\n    verticalSplit: {\n      id: \"uia:twoViewsOnLeftSplit\",\n      percentage: 0.5,\n      left: {\n        horizontalSplit: {\n          id: \"uia:twoViewsOnLeftHorizontal\",\n          percentage: 0.5,\n          top: 0,\n          bottom: 1,\n          lock: false,\n          minSizeTop: 50,\n          minSizeBottom: 50,\n        },\n      },\n      right: 2,\n    },\n  };\n\n  public static readonly threeViewsTwoOnRight: ContentLayoutProps = {\n    id: \"uia:threeViewsTwoOnRight\",\n    description:\n      \"Three views, one on the left with the two on the right stacked one of top of the other\",\n    verticalSplit: {\n      id: \"uia:twoViewsOnRightSplit\",\n      percentage: 0.5,\n      left: 0,\n      right: {\n        horizontalSplit: {\n          id: \"uia:twoViewsOnRightHorizontal\",\n          percentage: 0.5,\n          top: 1,\n          bottom: 2,\n          lock: false,\n          minSizeTop: 50,\n          minSizeBottom: 50,\n        },\n      },\n    },\n  };\n\n  public static readonly threeViewsTwoOnBottom: ContentLayoutProps = {\n    id: \"uia:threeViewsTwoOnBottom\",\n    description: \"Three Views, one on top and two side by side on the bottom\",\n    horizontalSplit: {\n      id: \"uia:threeViewsTwoOnBottomHorizontal\",\n      percentage: 0.5,\n      lock: false,\n      top: 0,\n      bottom: {\n        verticalSplit: {\n          id: \"uia:twoViewsOnBottomVertical\",\n          percentage: 0.5,\n          left: 1,\n          right: 2,\n          lock: false,\n          minSizeLeft: 50,\n          minSizeRight: 50,\n        },\n      },\n    },\n  };\n\n  public static readonly threeViewsTwoOnTop: ContentLayoutProps = {\n    id: \"uia:threeViewsTwoOnTop\",\n    description: \"Three Views, two side by side on top and one on the bottom\",\n    horizontalSplit: {\n      id: \"uia:twoViewsOnTopHorizontal\",\n      percentage: 0.5,\n      lock: false,\n      top: {\n        verticalSplit: {\n          id: \"uia:twoViewsOnTopVertical\",\n          percentage: 0.5,\n          left: 0,\n          right: 1,\n          lock: false,\n          minSizeLeft: 50,\n          minSizeRight: 50,\n        },\n      },\n      bottom: 2,\n    },\n  };\n\n  // provides and iterable list of standard content layouts\n  public static readonly availableLayouts: ContentLayoutProps[] = [\n    StandardContentLayouts.singleView,\n    StandardContentLayouts.fourQuadrants,\n    StandardContentLayouts.twoVerticalSplit,\n    StandardContentLayouts.twoHorizontalSplit,\n    StandardContentLayouts.threeViewsTwoOnLeft,\n    StandardContentLayouts.threeViewsTwoOnRight,\n    StandardContentLayouts.threeViewsTwoOnBottom,\n    StandardContentLayouts.threeViewsTwoOnTop,\n  ];\n}\n"]}

package/lib/appui-react/content/ViewStateHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewStateHelper.d.ts","sourceRoot":"","sources":["../../../src/appui-react/content/ViewStateHelper.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EACV,sBAAsB,EACtB,cAAc,EACf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAEV,gBAAgB,EAChB,cAAc,EACd,SAAS,EACV,MAAM,sBAAsB,CAAC;AAI9B;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,YAAY,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CACjD;AAED;;GAEG;AACH,qBAAa,eAAe;IAC1B,4CAA4C;WACxB,kBAAkB,CACpC,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,oBAAoB,GACnC,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAgBjC,iDAAiD;WACnC,0BAA0B,CACtC,EAAE,EAAE,cAAc,EAClB,cAAc,EAAE,oBAAoB,GACnC,OAAO;IAYV,mCAAmC;WACrB,gBAAgB,CAAC,SAAS,EAAE,SAAS,GAAG,oBAAoB;IAQ1E,wEAAwE;WAC1D,wBAAwB,CACpC,EAAE,EAAE,cAAc,EAClB,cAAc,EAAE,oBAAoB,GACnC,IAAI;CAKR"}

package/lib/appui-react/content/ViewStateHelper.js

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ContentView
+ */
+import { EmphasizeElements } from "@itwin/core-frontend";
+import { ViewUtilities } from "../utils/ViewUtilities.js";
+/** SavedView class. Used to serialize/deserialize a ViewState.
+ * @public
+ */
+export class ViewStateHelper {
+    /** Create a ViewState from the SavedView */
+    static async viewStateFromProps(iModelConnection, savedViewProps) {
+        const className = savedViewProps.viewDefinitionProps.classFullName;
+        const ctor = (await iModelConnection.findClassFor(className, undefined));
+        if (undefined === ctor)
+            throw new Error(`Invalid ViewState class name of [${className}]`);
+        const viewState = ctor.createFromProps(savedViewProps, iModelConnection);
+        await viewState.load(); // loads models for ModelSelector
+        return viewState;
+    }
+    /** Apply EmphasizeElements from the SavedView */
+    static emphasizeElementsFromProps(vp, savedViewProps) {
+        let changed = false;
+        if (savedViewProps.emphasizeElementsProps) {
+            const emphasizeElements = new EmphasizeElements();
+            changed = emphasizeElements.fromJSON(savedViewProps.emphasizeElementsProps, vp);
+        }
+        return changed;
+    }
+    /** Create props for a ViewState */
+    static viewStateToProps(viewState) {
+        const savedViewProps = viewState.toProps();
+        savedViewProps.bisBaseClass = ViewUtilities.getBisBaseClass(viewState.classFullName);
+        return savedViewProps;
+    }
+    /** Create props for an EmphasizeElements and store in SavedViewProps */
+    static emphasizeElementsToProps(vp, savedViewProps) {
+        const ee = EmphasizeElements.get(vp);
+        const emphasizeElementsProps = ee ? ee.toJSON(vp) : undefined;
+        savedViewProps.emphasizeElementsProps = emphasizeElementsProps;
+    }
+}
+//# sourceMappingURL=ViewStateHelper.js.map

package/lib/appui-react/content/ViewStateHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewStateHelper.js","sourceRoot":"","sources":["../../../src/appui-react/content/ViewStateHelper.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAYH,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAU1D;;GAEG;AACH,MAAM,OAAO,eAAe;IAC1B,4CAA4C;IACrC,MAAM,CAAC,KAAK,CAAC,kBAAkB,CACpC,gBAAkC,EAClC,cAAoC;QAEpC,MAAM,SAAS,GAAG,cAAc,CAAC,mBAAmB,CAAC,aAAa,CAAC;QACnE,MAAM,IAAI,GAAG,CAAC,MAAM,gBAAgB,CAAC,YAAY,CAC/C,SAAS,EACT,SAAS,CACV,CAAiC,CAAC;QAEnC,IAAI,SAAS,KAAK,IAAI;YACpB,MAAM,IAAI,KAAK,CAAC,oCAAoC,SAAS,GAAG,CAAC,CAAC;QAEpE,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAE,CAAC;QAC1E,MAAM,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC,iCAAiC;QAEzD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,iDAAiD;IAC1C,MAAM,CAAC,0BAA0B,CACtC,EAAkB,EAClB,cAAoC;QAEpC,IAAI,OAAO,GAAG,KAAK,CAAC;QACpB,IAAI,cAAc,CAAC,sBAAsB,EAAE,CAAC;YAC1C,MAAM,iBAAiB,GAAG,IAAI,iBAAiB,EAAE,CAAC;YAClD,OAAO,GAAG,iBAAiB,CAAC,QAAQ,CAClC,cAAc,CAAC,sBAAsB,EACrC,EAAE,CACH,CAAC;QACJ,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,mCAAmC;IAC5B,MAAM,CAAC,gBAAgB,CAAC,SAAoB;QACjD,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,EAA0B,CAAC;QACnE,cAAc,CAAC,YAAY,GAAG,aAAa,CAAC,eAAe,CACzD,SAAS,CAAC,aAAa,CACxB,CAAC;QACF,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,wEAAwE;IACjE,MAAM,CAAC,wBAAwB,CACpC,EAAkB,EAClB,cAAoC;QAEpC,MAAM,EAAE,GAAG,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACrC,MAAM,sBAAsB,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9D,cAAc,CAAC,sBAAsB,GAAG,sBAAsB,CAAC;IACjE,CAAC;CACF","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 ContentView\n */\n\nimport type {\n  EmphasizeElementsProps,\n  ViewStateProps,\n} from \"@itwin/core-common\";\nimport type {\n  EntityState,\n  IModelConnection,\n  ScreenViewport,\n  ViewState,\n} from \"@itwin/core-frontend\";\nimport { EmphasizeElements } from \"@itwin/core-frontend\";\nimport { ViewUtilities } from \"../utils/ViewUtilities.js\";\n\n/** SavedViewProps interface for sharing ViewState and EmphasizeElements information.\n * @public\n */\nexport interface ViewStateHelperProps extends ViewStateProps {\n  bisBaseClass: string;\n  emphasizeElementsProps?: EmphasizeElementsProps;\n}\n\n/** SavedView class. Used to serialize/deserialize a ViewState.\n * @public\n */\nexport class ViewStateHelper {\n  /** Create a ViewState from the SavedView */\n  public static async viewStateFromProps(\n    iModelConnection: IModelConnection,\n    savedViewProps: ViewStateHelperProps\n  ): Promise<ViewState | undefined> {\n    const className = savedViewProps.viewDefinitionProps.classFullName;\n    const ctor = (await iModelConnection.findClassFor<typeof EntityState>(\n      className,\n      undefined\n    )) as typeof ViewState | undefined;\n\n    if (undefined === ctor)\n      throw new Error(`Invalid ViewState class name of [${className}]`);\n\n    const viewState = ctor.createFromProps(savedViewProps, iModelConnection)!;\n    await viewState.load(); // loads models for ModelSelector\n\n    return viewState;\n  }\n\n  /** Apply EmphasizeElements from the SavedView */\n  public static emphasizeElementsFromProps(\n    vp: ScreenViewport,\n    savedViewProps: ViewStateHelperProps\n  ): boolean {\n    let changed = false;\n    if (savedViewProps.emphasizeElementsProps) {\n      const emphasizeElements = new EmphasizeElements();\n      changed = emphasizeElements.fromJSON(\n        savedViewProps.emphasizeElementsProps,\n        vp\n      );\n    }\n    return changed;\n  }\n\n  /** Create props for a ViewState */\n  public static viewStateToProps(viewState: ViewState): ViewStateHelperProps {\n    const savedViewProps = viewState.toProps() as ViewStateHelperProps;\n    savedViewProps.bisBaseClass = ViewUtilities.getBisBaseClass(\n      viewState.classFullName\n    );\n    return savedViewProps;\n  }\n\n  /** Create props for an EmphasizeElements and store in SavedViewProps */\n  public static emphasizeElementsToProps(\n    vp: ScreenViewport,\n    savedViewProps: ViewStateHelperProps\n  ): void {\n    const ee = EmphasizeElements.get(vp);\n    const emphasizeElementsProps = ee ? ee.toJSON(vp) : undefined;\n    savedViewProps.emphasizeElementsProps = emphasizeElementsProps;\n  }\n}\n"]}

package/lib/appui-react/content/ViewportContentControl.d.ts

@@ -0,0 +1,63 @@
+/** @packageDocumentation
+ * @module ContentView
+ */
+import type { Id64String } from "@itwin/core-bentley";
+import type { IModelConnection, ScreenViewport, ViewState } from "@itwin/core-frontend";
+import { ConfigurableCreateInfo, ConfigurableUiControlType } from "../configurableui/ConfigurableUiControl.js";
+import type { SupportsViewSelectorChange } from "./ContentControl.js";
+import { ContentControl } from "./ContentControl.js";
+/** The base class for frontstage Viewport content controls that connects to a `ScreenViewport`
+ * that is managed by the `ViewManager`.
+ * @public
+ * @deprecated in 4.16.0. Extends a deprecated class {@link ContentControl}.
+ */
+export declare class ViewportContentControl extends ContentControl implements SupportsViewSelectorChange {
+    private _viewport;
+    private _isReady;
+    private _viewportReadyCallback?;
+    /** Creates an instance of ViewportContentControl.
+     * @param info         An object that the subclass must pass to this base class.
+     * @param options      Options provided via the applicationData in a [[ContentProps]].
+     */
+    constructor(info: ConfigurableCreateInfo, options: any);
+    /** Gets the type of ConfigurableUiControl, which is 'Viewport' in this case */
+    getType(): ConfigurableUiControlType;
+    /** Returns true if this control is a Viewport control. */
+    get isViewport(): boolean;
+    /** The underlying ScreenViewport */
+    get viewport(): ScreenViewport | undefined;
+    set viewport(v: ScreenViewport | undefined);
+    /** Returns a promise that resolves when the control is ready for usage.
+     */
+    setIsReady(): void;
+    /** Returns a promise that resolves when the control is ready for usage.
+     */
+    get isReady(): Promise<void>;
+    /** Called when this ContentControl is activated */
+    onActivated(): void;
+    /** Get the NavigationAidControl associated with this ContentControl */
+    get navigationAidControl(): string;
+    /**
+     * Fetches appropriate NavigationAid based on the class of the current viewport.
+     * @param classFullName The full name of the current viewport class.
+     * @returns The ID of the navigation aid to be displayed.
+     */
+    private _getNavigationAid;
+    /** Returns true if this control supports processing ViewSelector changes. */
+    get supportsViewSelectorChange(): boolean;
+    /** Process a ViewSelector change. */
+    processViewSelectorChange(iModel: IModelConnection, viewDefinitionId: Id64String, viewState: ViewState, name: string): Promise<void>;
+    /** Get the React.Element for a ViewSelector change. */
+    getReactElementForViewSelectorChange(_iModel: IModelConnection, _viewDefinitionId: Id64String, _viewState: ViewState, _name: string): React.ReactNode;
+}
+/**
+ * @beta
+ * @deprecated in 4.16.0. Extends a deprecated class {@link ViewportContentControl}.
+ */
+export declare class FloatingViewportContentControl extends ViewportContentControl {
+    constructor(uniqueId: string, name: string, node: React.ReactNode);
+    /** The React node associated with this control. */
+    get reactNode(): React.ReactNode;
+    set reactNode(r: React.ReactNode);
+}
+//# sourceMappingURL=ViewportContentControl.d.ts.map

package/lib/appui-react/content/ViewportContentControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportContentControl.d.ts","sourceRoot":"","sources":["../../../src/appui-react/content/ViewportContentControl.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EACV,gBAAgB,EAChB,cAAc,EACd,SAAS,EACV,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,EACL,sBAAsB,EACtB,yBAAyB,EAC1B,MAAM,4CAA4C,CAAC;AAMpD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAIrD;;;;GAIG;AACH,qBAAa,sBACX,SAAQ,cACR,YAAW,0BAA0B;IAErC,OAAO,CAAC,SAAS,CAA6B;IAC9C,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,sBAAsB,CAAC,CAAa;IAE5C;;;OAGG;gBACS,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG;IAUtD,+EAA+E;IAC/D,OAAO,IAAI,yBAAyB;IAIpD,0DAA0D;IAC1D,IAAoB,UAAU,IAAI,OAAO,CAExC;IAED,oCAAoC;IACpC,IAAoB,QAAQ,IAAI,cAAc,GAAG,SAAS,CAEzD;IACD,IAAoB,QAAQ,CAAC,CAAC,EAAE,cAAc,GAAG,SAAS,EAGzD;IAED;OACG;IACI,UAAU,IAAI,IAAI;IAMzB;OACG;IACH,IAAoB,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAE3C;IAED,mDAAmD;IACnC,WAAW,IAAI,IAAI;IAInC,uEAAuE;IACvE,IAAoB,oBAAoB,IAAI,MAAM,CAUjD;IAED;;;;OAIG;IACH,OAAO,CAAC,iBAAiB,CAkBvB;IAEF,6EAA6E;IAC7E,IAAW,0BAA0B,IAAI,OAAO,CAE/C;IAED,qCAAqC;IACxB,yBAAyB,CACpC,MAAM,EAAE,gBAAgB,EACxB,gBAAgB,EAAE,UAAU,EAC5B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,IAAI,CAAC;IAkBhB,uDAAuD;IAChD,oCAAoC,CACzC,OAAO,EAAE,gBAAgB,EACzB,iBAAiB,EAAE,UAAU,EAC7B,UAAU,EAAE,SAAS,EACrB,KAAK,EAAE,MAAM,GACZ,KAAK,CAAC,SAAS;CAGnB;AAED;;;GAGG;AACH,qBAAa,8BAA+B,SAAQ,sBAAsB;gBAC5D,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS;IAMjE,mDAAmD;IACnD,IAAoB,SAAS,IAAI,KAAK,CAAC,SAAS,CAE/C;IAED,IAAoB,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAM/C;CACF"}

package/lib/appui-react/content/ViewportContentControl.js

@@ -0,0 +1,137 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ContentView
+ */
+import { DrawingViewState, IModelApp, OrthographicViewState, SheetViewState, SpatialViewState, } from "@itwin/core-frontend";
+import { ConfigurableCreateInfo, ConfigurableUiControlType, } from "../configurableui/ConfigurableUiControl.js";
+import { CubeNavigationAidControl } from "../navigationaids/CubeNavigationAidControl.js";
+import { DrawingNavigationAidControl } from "../navigationaids/DrawingNavigationAidControl.js";
+import { SheetNavigationAidControl } from "../navigationaids/SheetNavigationAid.js";
+import { UiFramework } from "../UiFramework.js";
+import { ViewUtilities } from "../utils/ViewUtilities.js";
+import { ContentControl } from "./ContentControl.js";
+/* eslint-disable deprecation/deprecation */
+/** The base class for frontstage Viewport content controls that connects to a `ScreenViewport`
+ * that is managed by the `ViewManager`.
+ * @public
+ * @deprecated in 4.16.0. Extends a deprecated class {@link ContentControl}.
+ */
+export class ViewportContentControl extends ContentControl {
+    /** Creates an instance of ViewportContentControl.
+     * @param info         An object that the subclass must pass to this base class.
+     * @param options      Options provided via the applicationData in a [[ContentProps]].
+     */
+    constructor(info, options) {
+        super(info, options);
+        /**
+         * Fetches appropriate NavigationAid based on the class of the current viewport.
+         * @param classFullName The full name of the current viewport class.
+         * @returns The ID of the navigation aid to be displayed.
+         */
+        this._getNavigationAid = (classFullName) => {
+            const className = ViewUtilities.getBisBaseClass(classFullName);
+            let navigationAidId = "";
+            switch (className) {
+                case SheetViewState.className:
+                    navigationAidId = SheetNavigationAidControl.navigationAidId;
+                    break;
+                case DrawingViewState.className:
+                    navigationAidId = DrawingNavigationAidControl.navigationAidId;
+                    break;
+                case SpatialViewState.className:
+                case OrthographicViewState.className:
+                    navigationAidId = CubeNavigationAidControl.navigationAidId;
+                    break;
+            }
+            return navigationAidId;
+        };
+        this._isReady = new Promise((onSuccess, _onFailure) => {
+            this._viewportReadyCallback = onSuccess;
+        });
+    }
+    /** Gets the type of ConfigurableUiControl, which is 'Viewport' in this case */
+    getType() {
+        return ConfigurableUiControlType.Viewport;
+    }
+    /** Returns true if this control is a Viewport control. */
+    get isViewport() {
+        return true;
+    }
+    /** The underlying ScreenViewport */
+    get viewport() {
+        return this._viewport;
+    }
+    set viewport(v) {
+        this._viewport = v;
+        this.setIsReady();
+    }
+    /** Returns a promise that resolves when the control is ready for usage.
+     */
+    setIsReady() {
+        if (this._viewportReadyCallback) {
+            this._viewportReadyCallback();
+        }
+    }
+    /** Returns a promise that resolves when the control is ready for usage.
+     */
+    get isReady() {
+        return this._isReady;
+    }
+    /** Called when this ContentControl is activated */
+    onActivated() {
+        super.onActivated();
+    }
+    /** Get the NavigationAidControl associated with this ContentControl */
+    get navigationAidControl() {
+        let navigationAidId = "";
+        if (this.viewport) {
+            navigationAidId = this._getNavigationAid(this.viewport.view.classFullName);
+        }
+        return navigationAidId;
+    }
+    /** Returns true if this control supports processing ViewSelector changes. */
+    get supportsViewSelectorChange() {
+        return true;
+    }
+    /** Process a ViewSelector change. */
+    async processViewSelectorChange(iModel, viewDefinitionId, viewState, name) {
+        if (this.viewport) {
+            if (IModelApp.viewManager &&
+                this.viewport === IModelApp.viewManager.selectedView)
+                this.viewport.changeView(viewState);
+        }
+        else {
+            this.reactNode = this.getReactElementForViewSelectorChange(iModel, viewDefinitionId, viewState, name);
+        }
+        UiFramework.content.refreshActive(this.reactNode);
+    }
+    /** Get the React.Element for a ViewSelector change. */
+    getReactElementForViewSelectorChange(_iModel, _viewDefinitionId, _viewState, _name) {
+        return null;
+    }
+}
+/**
+ * @beta
+ * @deprecated in 4.16.0. Extends a deprecated class {@link ViewportContentControl}.
+ */
+export class FloatingViewportContentControl extends ViewportContentControl {
+    constructor(uniqueId, name, node) {
+        super(new ConfigurableCreateInfo(name, uniqueId, name), undefined);
+        this._reactNode = node;
+        this.setIsReady();
+    }
+    /** The React node associated with this control. */
+    get reactNode() {
+        return this._reactNode;
+    }
+    set reactNode(r) {
+        this._reactNode = r;
+        const activeFrontstageDef = UiFramework.frontstages.activeFrontstageDef;
+        if (this.viewport && activeFrontstageDef)
+            activeFrontstageDef.setActiveViewFromViewport(this.viewport);
+    }
+}
+//# sourceMappingURL=ViewportContentControl.js.map

package/lib/appui-react/content/ViewportContentControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportContentControl.js","sourceRoot":"","sources":["../../../src/appui-react/content/ViewportContentControl.ts"],"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 ContentView\n */\n\nimport type { Id64String } from \"@itwin/core-bentley\";\nimport type {\n  IModelConnection,\n  ScreenViewport,\n  ViewState,\n} from \"@itwin/core-frontend\";\nimport {\n  DrawingViewState,\n  IModelApp,\n  OrthographicViewState,\n  SheetViewState,\n  SpatialViewState,\n} from \"@itwin/core-frontend\";\nimport {\n  ConfigurableCreateInfo,\n  ConfigurableUiControlType,\n} from \"../configurableui/ConfigurableUiControl.js\";\nimport { CubeNavigationAidControl } from \"../navigationaids/CubeNavigationAidControl.js\";\nimport { DrawingNavigationAidControl } from \"../navigationaids/DrawingNavigationAidControl.js\";\nimport { SheetNavigationAidControl } from \"../navigationaids/SheetNavigationAid.js\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { ViewUtilities } from \"../utils/ViewUtilities.js\";\nimport type { SupportsViewSelectorChange } from \"./ContentControl.js\";\nimport { ContentControl } from \"./ContentControl.js\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** The base class for frontstage Viewport content controls that connects to a `ScreenViewport`\n * that is managed by the `ViewManager`.\n * @public\n * @deprecated in 4.16.0. Extends a deprecated class {@link ContentControl}.\n */\nexport class ViewportContentControl\n  extends ContentControl\n  implements SupportsViewSelectorChange\n{\n  private _viewport: ScreenViewport | undefined;\n  private _isReady: Promise<void>;\n  private _viewportReadyCallback?: () => void;\n\n  /** Creates an instance of ViewportContentControl.\n   * @param info         An object that the subclass must pass to this base class.\n   * @param options      Options provided via the applicationData in a [[ContentProps]].\n   */\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    super(info, options);\n\n    this._isReady = new Promise<void>(\n      (onSuccess: () => void, _onFailure: () => void): void => {\n        this._viewportReadyCallback = onSuccess;\n      }\n    );\n  }\n\n  /** Gets the type of ConfigurableUiControl, which is 'Viewport' in this case */\n  public override getType(): ConfigurableUiControlType {\n    return ConfigurableUiControlType.Viewport;\n  }\n\n  /** Returns true if this control is a Viewport control. */\n  public override get isViewport(): boolean {\n    return true;\n  }\n\n  /** The underlying ScreenViewport */\n  public override get viewport(): ScreenViewport | undefined {\n    return this._viewport;\n  }\n  public override set viewport(v: ScreenViewport | undefined) {\n    this._viewport = v;\n    this.setIsReady();\n  }\n\n  /** Returns a promise that resolves when the control is ready for usage.\n   */\n  public setIsReady(): void {\n    if (this._viewportReadyCallback) {\n      this._viewportReadyCallback();\n    }\n  }\n\n  /** Returns a promise that resolves when the control is ready for usage.\n   */\n  public override get isReady(): Promise<void> {\n    return this._isReady;\n  }\n\n  /** Called when this ContentControl is activated */\n  public override onActivated(): void {\n    super.onActivated();\n  }\n\n  /** Get the NavigationAidControl associated with this ContentControl */\n  public override get navigationAidControl(): string {\n    let navigationAidId = \"\";\n\n    if (this.viewport) {\n      navigationAidId = this._getNavigationAid(\n        this.viewport.view.classFullName\n      );\n    }\n\n    return navigationAidId;\n  }\n\n  /**\n   * Fetches appropriate NavigationAid based on the class of the current viewport.\n   * @param classFullName The full name of the current viewport class.\n   * @returns The ID of the navigation aid to be displayed.\n   */\n  private _getNavigationAid = (classFullName: string) => {\n    const className = ViewUtilities.getBisBaseClass(classFullName);\n    let navigationAidId = \"\";\n\n    switch (className) {\n      case SheetViewState.className:\n        navigationAidId = SheetNavigationAidControl.navigationAidId;\n        break;\n      case DrawingViewState.className:\n        navigationAidId = DrawingNavigationAidControl.navigationAidId;\n        break;\n      case SpatialViewState.className:\n      case OrthographicViewState.className:\n        navigationAidId = CubeNavigationAidControl.navigationAidId;\n        break;\n    }\n\n    return navigationAidId;\n  };\n\n  /** Returns true if this control supports processing ViewSelector changes. */\n  public get supportsViewSelectorChange(): boolean {\n    return true;\n  }\n\n  /** Process a ViewSelector change. */\n  public async processViewSelectorChange(\n    iModel: IModelConnection,\n    viewDefinitionId: Id64String,\n    viewState: ViewState,\n    name: string\n  ): Promise<void> {\n    if (this.viewport) {\n      if (\n        IModelApp.viewManager &&\n        this.viewport === IModelApp.viewManager.selectedView\n      )\n        this.viewport.changeView(viewState);\n    } else {\n      this.reactNode = this.getReactElementForViewSelectorChange(\n        iModel,\n        viewDefinitionId,\n        viewState,\n        name\n      );\n    }\n    UiFramework.content.refreshActive(this.reactNode);\n  }\n\n  /** Get the React.Element for a ViewSelector change. */\n  public getReactElementForViewSelectorChange(\n    _iModel: IModelConnection,\n    _viewDefinitionId: Id64String,\n    _viewState: ViewState,\n    _name: string\n  ): React.ReactNode {\n    return null;\n  }\n}\n\n/**\n * @beta\n * @deprecated in 4.16.0. Extends a deprecated class {@link ViewportContentControl}.\n */\nexport class FloatingViewportContentControl extends ViewportContentControl {\n  constructor(uniqueId: string, name: string, node: React.ReactNode) {\n    super(new ConfigurableCreateInfo(name, uniqueId, name), undefined);\n    this._reactNode = node;\n    this.setIsReady();\n  }\n\n  /** The React node associated with this control. */\n  public override get reactNode(): React.ReactNode {\n    return this._reactNode;\n  }\n\n  public override set reactNode(r: React.ReactNode) {\n    this._reactNode = r;\n    const activeFrontstageDef = UiFramework.frontstages.activeFrontstageDef;\n\n    if (this.viewport && activeFrontstageDef)\n      activeFrontstageDef.setActiveViewFromViewport(this.viewport);\n  }\n}\n"]}

package/lib/appui-react/content/split-pane/Pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pane.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/split-pane/Pane.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,2GAA2G;AAE3G;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,qBAoCpC"}

package/lib/appui-react/content/split-pane/Pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pane.js","sourceRoot":"","sources":["../../../../src/appui-react/content/split-pane/Pane.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAgBpC;;GAEG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAElE,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC/B,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,EAC1C,CAAC,KAAK,EAAE,SAAS,CAAC,CACnB,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,SAAS,GAAiC;YAC9C,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,MAAM;SAChB,CAAC;QAEF,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;gBACzB,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC;gBACxB,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;YAC7B,CAAC;YACD,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC;QAC1B,CAAC;QAED,OAAO;YACL,GAAG,KAAK;YACR,GAAG,SAAS;SACU,CAAC;IAC3B,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,6BAAK,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,IACvD,QAAQ,CACL,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 ContentView\n */\nimport * as React from \"react\";\nimport classnames from \"classnames\";\n\n/** Based on react-split-pane package. See https://github.com/tomkp/react-split-pane/blob/master/LICENSE */\n\n/**\n * @internal\n */\nexport interface PaneProps {\n  className?: string;\n  size?: string | number;\n  split?: \"vertical\" | \"horizontal\";\n  style?: React.CSSProperties;\n  eleRef: React.RefObject<HTMLDivElement>;\n  children?: React.ReactNode;\n}\n\n/**\n * @internal\n */\nexport function Pane(props: PaneProps) {\n  const { children, className, split, style, size, eleRef } = props;\n\n  const paneClasses = React.useMemo(\n    () => classnames(\"Pane\", split, className),\n    [split, className]\n  );\n\n  const paneStyle = React.useMemo(() => {\n    const baseStyle: Partial<React.CSSProperties> = {\n      flex: 1,\n      position: \"relative\",\n      outline: \"none\",\n    };\n\n    if (size !== undefined) {\n      if (split === \"vertical\") {\n        baseStyle.width = size;\n      } else {\n        baseStyle.height = size;\n        baseStyle.display = \"flex\";\n      }\n      baseStyle.flex = \"none\";\n    }\n\n    return {\n      ...style,\n      ...baseStyle,\n    } as React.CSSProperties;\n  }, [size, split, style]);\n\n  return (\n    <div ref={eleRef} className={paneClasses} style={paneStyle}>\n      {children}\n    </div>\n  );\n}\n"]}

package/lib/appui-react/content/split-pane/Resizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizer.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/split-pane/Resizer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,2GAA2G;AAE3G;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBA8C1C"}

package/lib/appui-react/content/split-pane/Resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizer.js","sourceRoot":"","sources":["../../../../src/appui-react/content/split-pane/Resizer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAkBpC;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EACJ,SAAS,EACT,OAAO,EACP,aAAa,EACb,WAAW,EACX,UAAU,EACV,YAAY,EACZ,KAAK,EACL,KAAK,GACN,GAAG,KAAK,CAAC;IAEV,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAClC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAClC,CAAC,KAAK,EAAE,SAAS,CAAC,CACnB,CAAC;IAEF,OAAO,CACL,8BACE,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,EACtD,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE;YACtB,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAClC,CAAC,EACD,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,UAAU,EAAE,CAAC;QACf,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,OAAO,EAAE,CAAC;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,EACD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,IAAI,aAAa,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;QAED,6BAAK,SAAS,EAAC,iBAAiB,GAAG,CAC9B,CACR,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ContentView\n */\nimport * as React from \"react\";\nimport classnames from \"classnames\";\n\n/** Based on react-split-pane package. See https://github.com/tomkp/react-split-pane/blob/master/LICENSE */\n\n/**\n * @internal\n */\nexport interface ResizerProps {\n  split?: \"vertical\" | \"horizontal\";\n  style?: React.CSSProperties;\n  className: string;\n  onMouseDown: (event: MouseEvent) => void;\n  onTouchEnd: () => void;\n  onTouchStart: (event: TouchEvent) => void;\n  onClick?: (event: MouseEvent) => void;\n  onDoubleClick?: (event: MouseEvent) => void;\n}\n\n/**\n * @internal\n */\nexport function Resizer(props: ResizerProps) {\n  const {\n    className,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    onTouchEnd,\n    onTouchStart,\n    split,\n    style,\n  } = props;\n\n  const resizerClasses = React.useMemo(\n    () => classnames(split, className),\n    [split, className]\n  );\n\n  return (\n    <span\n      role=\"presentation\"\n      className={resizerClasses}\n      style={style}\n      onMouseDown={(event) => onMouseDown(event.nativeEvent)}\n      onTouchStart={(event) => {\n        onTouchStart(event.nativeEvent);\n      }}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        onTouchEnd();\n      }}\n      onClick={(event) => {\n        if (onClick) {\n          event.preventDefault();\n          onClick(event.nativeEvent);\n        }\n      }}\n      onDoubleClick={(event) => {\n        if (onDoubleClick) {\n          event.preventDefault();\n          onDoubleClick(event.nativeEvent);\n        }\n      }}\n    >\n      <div className=\"nz-resizer-grip\" />\n    </span>\n  );\n}\n"]}

package/lib/appui-react/content/split-pane/SplitPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/split-pane/SplitPane.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE7B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;;;;;;;kCAQ8B;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAClC,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,qDAAqD;IACrD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACnD,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,8EAA8E;IAC9E,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,+EAA+E;IAC/E,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,+CAA+C;IAC/C,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAsCD;;;;;GAKG;AAEH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAmT9C"}

package/lib/appui-react/content/split-pane/SplitPane.js

@@ -0,0 +1,222 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ContentView
+ */
+import * as React from "react";
+import classnames from "classnames";
+import { Pane } from "./Pane.js";
+import { Resizer } from "./Resizer.js";
+function unFocus(ownerDoc) {
+    if (!ownerDoc)
+        return;
+    const docSelection = ownerDoc.getSelection();
+    if (docSelection) {
+        docSelection.empty();
+    }
+    else {
+        try {
+            const winSelection = ownerDoc.defaultView?.getSelection();
+            winSelection?.removeAllRanges();
+        }
+        catch (_e) { }
+    }
+}
+function getDefaultSize(defaultSize, minSize, maxSize, draggedSize) {
+    if (typeof draggedSize === "number") {
+        const min = typeof minSize === "number" ? minSize : 0;
+        const max = typeof maxSize === "number" && maxSize >= 0 ? maxSize : Infinity;
+        return Math.max(min, Math.min(max, draggedSize));
+    }
+    if (defaultSize !== undefined) {
+        return defaultSize;
+    }
+    return minSize;
+}
+function removeNullChildren(children) {
+    return React.Children.toArray(children).filter((c) => c);
+}
+/**
+ * Local TypeScript implementation of `SplitPane` from `react-split-pane` package since that
+ * package is not regularly maintained.
+ * See https://github.com/tomkp/react-split-pane/blob/master/LICENSE.
+ * @public
+ */
+// eslint-disable-next-line deprecation/deprecation
+export function SplitPane(props) {
+    const { style, size, defaultSize, maxSize, children, paneStyle, pane1Style, pane2Style, className, paneClassName, pane1ClassName, pane2ClassName, onDragStarted, onDragFinished, step, onChange, onResizerClick, onResizerDoubleClick, } = props;
+    // honor same defaults as react-split-pane
+    const allowResize = React.useMemo(() => (undefined !== props.allowResize ? props.allowResize : true), [props.allowResize]);
+    const minSize = React.useMemo(() => (undefined !== props.minSize ? props.minSize : 50), [props.minSize]);
+    const primary = React.useMemo(() => (undefined !== props.primary ? props.primary : "first"), [props.primary]);
+    const split = React.useMemo(() => (undefined !== props.split ? props.split : "vertical"), [props.split]);
+    const initialSize = size !== undefined ? size : getDefaultSize(defaultSize, minSize, maxSize);
+    const [position, setPosition] = React.useState(0);
+    const [draggedSize, setDraggedSize] = React.useState();
+    const [active, setActive] = React.useState(false);
+    const [pane1Size, setPane1Size] = React.useState(() => primary === "first" ? initialSize : undefined);
+    const [pane2Size, setPane2Size] = React.useState(() => primary === "second" ? initialSize : undefined);
+    const splitPane = React.useRef(null);
+    const pane1 = React.useRef(null);
+    const pane2 = React.useRef(null);
+    const notNullChildren = React.useMemo(() => removeNullChildren(children), [children]);
+    React.useEffect(() => {
+        primary === "first" ? setPane1Size(initialSize) : setPane2Size(initialSize);
+        primary === "first" ? setPane2Size(undefined) : setPane1Size(undefined);
+    }, [initialSize, primary]);
+    const splitPaneStyle = React.useMemo(() => {
+        const directionSpecificParts = split === "vertical"
+            ? {
+                flexDirection: "row",
+                left: 0,
+                right: 0,
+            }
+            : {
+                bottom: 0,
+                flexDirection: "column",
+                minHeight: "100%",
+                top: 0,
+                width: "100%",
+            };
+        return {
+            display: "flex",
+            flex: 1,
+            height: "100%",
+            position: "absolute",
+            outline: "none",
+            overflow: "hidden",
+            MozUserSelect: "text",
+            WebkitUserSelect: "text",
+            msUserSelect: "text",
+            userSelect: "text",
+            ...style,
+            ...directionSpecificParts,
+        };
+    }, [split, style]);
+    const pane1DivStyle = { ...paneStyle, ...pane1Style };
+    const pane2DivStyle = { ...paneStyle, ...pane2Style };
+    const resizerStyle = React.useMemo(() => props.resizerStyle ?? {}, [props.resizerStyle]);
+    const resizerClasses = React.useMemo(() => classnames("Resizer", !allowResize && "disabled"), [allowResize]);
+    const splitPaneClasses = React.useMemo(() => classnames("SplitPane", className, split, !allowResize && "disabled"), [className, split, allowResize]);
+    const pane1Classes = React.useMemo(() => classnames("Pane1", paneClassName, pane1ClassName), [paneClassName, pane1ClassName]);
+    const pane2Classes = React.useMemo(() => classnames("Pane2", paneClassName, pane2ClassName), [paneClassName, pane2ClassName]);
+    const initializeDrag = React.useCallback((x, y) => {
+        unFocus(splitPane.current?.ownerDocument);
+        const newPosition = split === "vertical" ? x : y;
+        onDragStarted && onDragStarted();
+        setActive(true);
+        setPosition(newPosition);
+    }, [onDragStarted, split]);
+    const onTouchStart = React.useCallback((event) => {
+        if (allowResize) {
+            initializeDrag(event.touches[0].clientX, event.touches[0].clientY);
+        }
+    }, [allowResize, initializeDrag]);
+    const processMove = React.useCallback((x, y) => {
+        unFocus(splitPane.current?.ownerDocument);
+        const isPrimaryFirst = primary === "first";
+        const ref = isPrimaryFirst ? pane1.current : pane2.current;
+        const ref2 = isPrimaryFirst ? pane2.current : pane1.current;
+        const splitPaneDiv = splitPane.current;
+        if (ref && ref2 && splitPaneDiv) {
+            const node = ref;
+            const node2 = ref2;
+            if (node.getBoundingClientRect) {
+                const width = node.getBoundingClientRect().width;
+                const height = node.getBoundingClientRect().height;
+                const current = split === "vertical" ? x : y;
+                const oldSize = split === "vertical" ? width : height;
+                let positionDelta = position - current;
+                if (step) {
+                    if (Math.abs(positionDelta) < step) {
+                        return;
+                    }
+                    // Integer division
+                    positionDelta = ~~(positionDelta / step) * step;
+                }
+                let sizeDelta = isPrimaryFirst ? positionDelta : -positionDelta;
+                const pane1Order = parseInt(node.ownerDocument?.defaultView?.getComputedStyle(node).order ??
+                    "0", 10);
+                const pane2Order = parseInt(node2.ownerDocument?.defaultView?.getComputedStyle(node2).order ??
+                    "0", 10);
+                if (pane1Order > pane2Order) {
+                    sizeDelta = -sizeDelta;
+                }
+                let newMaxSize = maxSize;
+                if (typeof maxSize === "number" &&
+                    maxSize !== undefined &&
+                    maxSize <= 0) {
+                    if (split === "vertical") {
+                        newMaxSize = splitPaneDiv.getBoundingClientRect().width + maxSize;
+                    }
+                    else {
+                        newMaxSize =
+                            splitPaneDiv.getBoundingClientRect().height + maxSize;
+                    }
+                }
+                let newSize = oldSize - sizeDelta;
+                const newPosition = position - positionDelta;
+                if (typeof minSize === "number" && newSize < minSize) {
+                    newSize = minSize;
+                }
+                else if (typeof newMaxSize === "number" &&
+                    newMaxSize !== undefined &&
+                    newSize > newMaxSize) {
+                    newSize = newMaxSize;
+                }
+                else {
+                    setPosition(newPosition);
+                }
+                onChange && onChange(newSize);
+                setDraggedSize(newSize);
+                isPrimaryFirst ? setPane1Size(newSize) : setPane2Size(newSize);
+            }
+        }
+    }, [maxSize, minSize, onChange, position, primary, split, step]);
+    const onTouchMove = React.useCallback((event) => {
+        if (!allowResize || !active)
+            return;
+        processMove(event.touches[0].clientX, event.touches[0].clientY);
+    }, [active, allowResize, processMove]);
+    const onMouseMove = React.useCallback((event) => {
+        if (!allowResize || !active)
+            return;
+        processMove(event.clientX, event.clientY);
+    }, [active, allowResize, processMove]);
+    const onMouseDown = React.useCallback((event) => {
+        if (allowResize) {
+            event.preventDefault();
+            initializeDrag(event.clientX, event.clientY);
+        }
+    }, [allowResize, initializeDrag]);
+    const processResizeFinished = React.useCallback(() => {
+        if (undefined !== draggedSize && allowResize && active) {
+            onDragFinished && onDragFinished(draggedSize);
+        }
+        setActive(false);
+    }, [draggedSize, allowResize, active, onDragFinished]);
+    const onMouseUp = React.useCallback((event) => {
+        event.preventDefault();
+        processResizeFinished();
+    }, [processResizeFinished]);
+    React.useEffect(() => {
+        const ownerDoc = splitPane.current?.ownerDocument;
+        if (!ownerDoc)
+            return;
+        ownerDoc.addEventListener("mouseup", onMouseUp);
+        ownerDoc.addEventListener("mousemove", onMouseMove);
+        ownerDoc.addEventListener("touchmove", onTouchMove);
+        return () => {
+            ownerDoc.removeEventListener("mouseup", onMouseUp);
+            ownerDoc.removeEventListener("mousemove", onMouseMove);
+            ownerDoc.removeEventListener("touchmove", onTouchMove);
+        };
+    }, [onMouseMove, onMouseUp, onTouchMove]);
+    return (React.createElement("div", { className: splitPaneClasses, ref: splitPane, style: splitPaneStyle },
+        React.createElement(Pane, { className: pane1Classes, key: "pane1", eleRef: pane1, size: pane1Size, split: split, style: pane1DivStyle }, notNullChildren[0]),
+        React.createElement(Resizer, { className: resizerClasses, onClick: onResizerClick, onDoubleClick: onResizerDoubleClick, onMouseDown: onMouseDown, onTouchStart: onTouchStart, onTouchEnd: processResizeFinished, key: "resizer", split: split, style: resizerStyle }),
+        React.createElement(Pane, { className: pane2Classes, key: "pane2", eleRef: pane2, size: pane2Size, split: split, style: pane2DivStyle }, notNullChildren[1])));
+}
+//# sourceMappingURL=SplitPane.js.map