@itwin/appui-react 3.0.0-dev.100

package/lib/cjs/appui-react/configurableui/TimeTracker.d.ts

@@ -0,0 +1,34 @@
+/** @packageDocumentation
+ * @module ConfigurableUi
+ */
+/** Time Tracker utility class
+ * @internal
+ */
+export declare class TimeTracker {
+    private _firstActiveTimestamp;
+    private _idleStartTimestamp;
+    private _lastActiveTimestamp;
+    private _totalIdleTime;
+    private _idleCount;
+    private _idleTimeout;
+    private _totalTime;
+    private _idleTime;
+    /** Starts time tracking
+     */
+    startTiming(): void;
+    /** Stops time tracking
+     */
+    stopTiming(): void;
+    /** Gets engagement time in seconds
+     */
+    getEngagementTimeSeconds(): number;
+    /** Gets total time in seconds
+     */
+    getTotalTimeSeconds(): number;
+    /** Gets idle time in seconds
+     */
+    getIdleTimeSeconds(): number;
+    private _idleTimeCounter;
+    private _trackActivity;
+}
+//# sourceMappingURL=TimeTracker.d.ts.map

package/lib/cjs/appui-react/configurableui/TimeTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeTracker.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/configurableui/TimeTracker.ts"],"names":[],"mappings":"AAIA;;GAEG;AAIH;;GAEG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,qBAAqB,CAAa;IAC1C,OAAO,CAAC,mBAAmB,CAAa;IACxC,OAAO,CAAC,oBAAoB,CAAa;IACzC,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,SAAS,CAAa;IAE9B;OACG;IACI,WAAW,IAAI,IAAI;IAc1B;OACG;IACI,UAAU,IAAI,IAAI;IAQzB;OACG;IACI,wBAAwB,IAAI,MAAM;IAIzC;OACG;IACI,mBAAmB,IAAI,MAAM;IAIpC;OACG;IACI,kBAAkB,IAAI,MAAM;IAInC,OAAO,CAAC,gBAAgB,CAQtB;IAEF,OAAO,CAAC,cAAc,CAQpB;CACH"}

package/lib/cjs/appui-react/configurableui/TimeTracker.js

@@ -0,0 +1,82 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ConfigurableUi
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeTracker = void 0;
+const ConfigurableUiManager_1 = require("./ConfigurableUiManager");
+/** Time Tracker utility class
+ * @internal
+ */
+class TimeTracker {
+    constructor() {
+        this._firstActiveTimestamp = 0;
+        this._idleStartTimestamp = 0;
+        this._lastActiveTimestamp = 0;
+        this._totalIdleTime = 0;
+        this._idleCount = 0;
+        this._idleTimeout = 5000;
+        this._totalTime = 0;
+        this._idleTime = 0;
+        this._idleTimeCounter = (args) => {
+            var _a;
+            // istanbul ignore next
+            const idleTimeout = (_a = args.idleTimeout) !== null && _a !== void 0 ? _a : this._idleTimeout;
+            // istanbul ignore else
+            if (this._lastActiveTimestamp > 0 && this._idleStartTimestamp === 0 && Date.now() - this._lastActiveTimestamp >= idleTimeout) {
+                this._idleStartTimestamp = Date.now();
+                this._idleCount++;
+            }
+        };
+        this._trackActivity = (_args) => {
+            this._lastActiveTimestamp = Date.now();
+            if (this._idleStartTimestamp > 0) {
+                const lastIdleTime = this._lastActiveTimestamp - this._idleStartTimestamp;
+                this._totalIdleTime += lastIdleTime;
+                this._idleStartTimestamp = 0;
+            }
+        };
+    }
+    /** Starts time tracking
+     */
+    startTiming() {
+        this._totalIdleTime = 0;
+        this._idleStartTimestamp = 0;
+        this._idleCount = 0;
+        this._totalTime = 0;
+        this._idleTime = 0;
+        this._firstActiveTimestamp = Date.now();
+        this._lastActiveTimestamp = this._firstActiveTimestamp;
+        ConfigurableUiManager_1.ConfigurableUiManager.onUiIntervalEvent.addListener(this._idleTimeCounter);
+        ConfigurableUiManager_1.ConfigurableUiManager.onUiActivityEvent.addListener(this._trackActivity);
+    }
+    /** Stops time tracking
+     */
+    stopTiming() {
+        ConfigurableUiManager_1.ConfigurableUiManager.onUiIntervalEvent.removeListener(this._idleTimeCounter);
+        ConfigurableUiManager_1.ConfigurableUiManager.onUiActivityEvent.removeListener(this._trackActivity);
+        this._totalTime = Date.now() - this._firstActiveTimestamp;
+        this._idleTime = this._totalIdleTime + this._idleCount * this._idleTimeout;
+    }
+    /** Gets engagement time in seconds
+     */
+    getEngagementTimeSeconds() {
+        return (this._totalTime - this._idleTime) / 1000;
+    }
+    /** Gets total time in seconds
+     */
+    getTotalTimeSeconds() {
+        return this._totalTime / 1000;
+    }
+    /** Gets idle time in seconds
+     */
+    getIdleTimeSeconds() {
+        return this._idleTime / 1000;
+    }
+}
+exports.TimeTracker = TimeTracker;
+//# sourceMappingURL=TimeTracker.js.map

package/lib/cjs/appui-react/configurableui/TimeTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeTracker.js","sourceRoot":"","sources":["../../../../src/appui-react/configurableui/TimeTracker.ts"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module ConfigurableUi\r\n */\r\n\r\nimport { ConfigurableUiManager, UiActivityEventArgs, UiIntervalEventArgs } from \"./ConfigurableUiManager\";\r\n\r\n/** Time Tracker utility class\r\n * @internal\r\n */\r\nexport class TimeTracker {\r\n  private _firstActiveTimestamp: number = 0;\r\n  private _idleStartTimestamp: number = 0;\r\n  private _lastActiveTimestamp: number = 0;\r\n  private _totalIdleTime: number = 0;\r\n  private _idleCount: number = 0;\r\n  private _idleTimeout: number = 5000;\r\n  private _totalTime: number = 0;\r\n  private _idleTime: number = 0;\r\n\r\n  /** Starts time tracking\r\n   */\r\n  public startTiming(): void {\r\n    this._totalIdleTime = 0;\r\n    this._idleStartTimestamp = 0;\r\n    this._idleCount = 0;\r\n    this._totalTime = 0;\r\n    this._idleTime = 0;\r\n\r\n    this._firstActiveTimestamp = Date.now();\r\n    this._lastActiveTimestamp = this._firstActiveTimestamp;\r\n\r\n    ConfigurableUiManager.onUiIntervalEvent.addListener(this._idleTimeCounter);\r\n    ConfigurableUiManager.onUiActivityEvent.addListener(this._trackActivity);\r\n  }\r\n\r\n  /** Stops time tracking\r\n   */\r\n  public stopTiming(): void {\r\n    ConfigurableUiManager.onUiIntervalEvent.removeListener(this._idleTimeCounter);\r\n    ConfigurableUiManager.onUiActivityEvent.removeListener(this._trackActivity);\r\n\r\n    this._totalTime = Date.now() - this._firstActiveTimestamp;\r\n    this._idleTime = this._totalIdleTime + this._idleCount * this._idleTimeout;\r\n  }\r\n\r\n  /** Gets engagement time in seconds\r\n   */\r\n  public getEngagementTimeSeconds(): number {\r\n    return (this._totalTime - this._idleTime) / 1000;\r\n  }\r\n\r\n  /** Gets total time in seconds\r\n   */\r\n  public getTotalTimeSeconds(): number {\r\n    return this._totalTime / 1000;\r\n  }\r\n\r\n  /** Gets idle time in seconds\r\n   */\r\n  public getIdleTimeSeconds(): number {\r\n    return this._idleTime / 1000;\r\n  }\r\n\r\n  private _idleTimeCounter = (args: UiIntervalEventArgs): void => {\r\n    // istanbul ignore next\r\n    const idleTimeout = args.idleTimeout ?? this._idleTimeout;\r\n    // istanbul ignore else\r\n    if (this._lastActiveTimestamp > 0 && this._idleStartTimestamp === 0 && Date.now() - this._lastActiveTimestamp >= idleTimeout) {\r\n      this._idleStartTimestamp = Date.now();\r\n      this._idleCount++;\r\n    }\r\n  };\r\n\r\n  private _trackActivity = (_args: UiActivityEventArgs): void => {\r\n    this._lastActiveTimestamp = Date.now();\r\n\r\n    if (this._idleStartTimestamp > 0) {\r\n      const lastIdleTime = this._lastActiveTimestamp - this._idleStartTimestamp;\r\n      this._totalIdleTime += lastIdleTime;\r\n      this._idleStartTimestamp = 0;\r\n    }\r\n  };\r\n}\r\n"]}

package/lib/cjs/appui-react/configurableui/configurableui.scss

@@ -0,0 +1,80 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/base/base";
+@import "~@itwin/core-react/lib/cjs/core-react/icons/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/style/itwinui-overrides";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/core-react/lib/cjs/core-react/style/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
+@import "~@itwin/itwinui-css/scss/style/space";
+@import "~@itwin/itwinui-css/scss/style/typography";
+@import "../variables";
+
+#uifw-configurableui-wrapper {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-size: $iui-font-size;
+}
+
+#uifw-frontstage-composer {
+  width: 100%;
+  height: 100%;
+}
+
+.uifw-unselectable {
+  user-select: none;
+}
+
+.uifw-centered {
+  @include uicore-centered;
+}
+
+.uifw-dragdrop-layer {
+  cursor: grabbing;
+  position: fixed;
+  pointer-events: none;
+  @include uicore-z-index(dragdrop);
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.uifw-element-tooltip-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+
+  @include uicore-z-index(tooltip);
+
+  >.uifw-element-tooltip {
+    width: max-content;
+    font-size: $iui-font-size;
+  }
+
+  >.nz-popup-tooltip {
+    border: {
+      color: $uifw-popup-border-color;
+      radius: $uifw-popup-border-radius;
+      style: solid;
+      width: $uifw-popup-border-width;
+    }
+  }
+}
+
+.uifw-app-button-small {
+  margin-bottom: 6px;
+}
+
+@include itwinui-style-overrides;

package/lib/cjs/appui-react/configurableui/state.d.ts

@@ -0,0 +1,48 @@
+/** @packageDocumentation
+ * @module State
+ */
+import { ActionsUnion } from "../redux/redux-ts";
+import { FrameworkVersionId } from "../UiFramework";
+/** Action Ids used by Redux and to send sync UI components. Typically used to refresh visibility or enable state of control.
+ *  Since these are also used as sync ids they should be in lowercase.
+ * @public
+ */
+export declare enum ConfigurableUiActionId {
+    SetSnapMode = "configurableui:set_snapmode",
+    SetTheme = "configurableui:set_theme",
+    SetToolPrompt = "configurableui:set_toolprompt",
+    SetWidgetOpacity = "configurableui:set_widget_opacity",
+    SetDragInteraction = "configurableui:set-drag-interaction",
+    SetFrameworkVersion = "configurableui:set-framework-version"
+}
+/** The portion of state managed by the ConfigurableUiReducer.
+ * @public
+ */
+export interface ConfigurableUiState {
+    snapMode: number;
+    toolPrompt: string;
+    theme: string;
+    widgetOpacity: number;
+    useDragInteraction: boolean;
+    frameworkVersion: FrameworkVersionId;
+}
+/** An object with a function that creates each ConfigurableUiReducer that can be handled by our reducer.
+ * @public
+ */
+export declare const ConfigurableUiActions: {
+    setSnapMode: (snapMode: number) => import("../redux/redux-ts").ActionWithPayload<ConfigurableUiActionId.SetSnapMode, number>;
+    setTheme: (theme: string) => import("../redux/redux-ts").ActionWithPayload<ConfigurableUiActionId.SetTheme, string>;
+    setToolPrompt: (toolPrompt: string) => import("../redux/redux-ts").ActionWithPayload<ConfigurableUiActionId.SetToolPrompt, string>;
+    setWidgetOpacity: (opacity: number) => import("../redux/redux-ts").ActionWithPayload<ConfigurableUiActionId.SetWidgetOpacity, number>;
+    setDragInteraction: (dragInteraction: boolean) => import("../redux/redux-ts").ActionWithPayload<ConfigurableUiActionId.SetDragInteraction, boolean>;
+    setFrameworkVersion: (frameworkVersion: FrameworkVersionId) => import("../redux/redux-ts").ActionWithPayload<ConfigurableUiActionId.SetFrameworkVersion, FrameworkVersionId>;
+};
+/** Union of ConfigurableUi Redux actions
+ * @public
+ */
+export declare type ConfigurableUiActionsUnion = ActionsUnion<typeof ConfigurableUiActions>;
+/** Handles actions to update ConfigurableUiState.
+ * @public
+ */
+export declare function ConfigurableUiReducer(state: ConfigurableUiState | undefined, action: ConfigurableUiActionsUnion): ConfigurableUiState;
+//# sourceMappingURL=state.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/configurableui/state.ts"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,EAAE,YAAY,EAAgB,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAIpD;;;GAGG;AACH,oBAAY,sBAAsB;IAChC,WAAW,gCAAgC;IAC3C,QAAQ,6BAA6B;IACrC,aAAa,kCAAkC;IAC/C,gBAAgB,sCAAsC;IACtD,kBAAkB,wCAAwC;IAC1D,mBAAmB,yCAAyC;CAC7D;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,kBAAkB,CAAC;CACtC;AAYD;;GAEG;AACH,eAAO,MAAM,qBAAqB;4BACR,MAAM;sBAGpB,MAAM;gCAGD,MAAM;gCAGT,MAAM;0CACoB,OAAO;4CACL,kBAAkB;CAC3D,CAAC;AAEF;;GAEG;AACH,oBAAY,0BAA0B,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEpF;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,iCAAoC,EAAE,MAAM,EAAE,0BAA0B,GAAG,mBAAmB,CAyBxI"}

package/lib/cjs/appui-react/configurableui/state.js

@@ -0,0 +1,83 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module State
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigurableUiReducer = exports.ConfigurableUiActions = exports.ConfigurableUiActionId = void 0;
+const core_frontend_1 = require("@itwin/core-frontend");
+const redux_ts_1 = require("../redux/redux-ts");
+const ThemeManager_1 = require("../theme/ThemeManager");
+// cSpell:ignore configurableui snapmode toolprompt
+/** Action Ids used by Redux and to send sync UI components. Typically used to refresh visibility or enable state of control.
+ *  Since these are also used as sync ids they should be in lowercase.
+ * @public
+ */
+var ConfigurableUiActionId;
+(function (ConfigurableUiActionId) {
+    ConfigurableUiActionId["SetSnapMode"] = "configurableui:set_snapmode";
+    ConfigurableUiActionId["SetTheme"] = "configurableui:set_theme";
+    ConfigurableUiActionId["SetToolPrompt"] = "configurableui:set_toolprompt";
+    ConfigurableUiActionId["SetWidgetOpacity"] = "configurableui:set_widget_opacity";
+    ConfigurableUiActionId["SetDragInteraction"] = "configurableui:set-drag-interaction";
+    ConfigurableUiActionId["SetFrameworkVersion"] = "configurableui:set-framework-version";
+})(ConfigurableUiActionId = exports.ConfigurableUiActionId || (exports.ConfigurableUiActionId = {}));
+/** used on first call of ConfigurableUiReducer */
+const initialState = {
+    snapMode: core_frontend_1.SnapMode.NearestKeypoint,
+    toolPrompt: "",
+    theme: ThemeManager_1.SYSTEM_PREFERRED_COLOR_THEME,
+    widgetOpacity: ThemeManager_1.WIDGET_OPACITY_DEFAULT,
+    useDragInteraction: false,
+    frameworkVersion: "2",
+};
+/** An object with a function that creates each ConfigurableUiReducer that can be handled by our reducer.
+ * @public
+ */
+exports.ConfigurableUiActions = {
+    setSnapMode: (snapMode) => (0, redux_ts_1.createAction)(ConfigurableUiActionId.SetSnapMode, snapMode),
+    setTheme: 
+    // istanbul ignore next
+    (theme) => (0, redux_ts_1.createAction)(ConfigurableUiActionId.SetTheme, theme),
+    setToolPrompt: 
+    // istanbul ignore next
+    (toolPrompt) => (0, redux_ts_1.createAction)(ConfigurableUiActionId.SetToolPrompt, toolPrompt),
+    setWidgetOpacity: 
+    // istanbul ignore next
+    (opacity) => (0, redux_ts_1.createAction)(ConfigurableUiActionId.SetWidgetOpacity, opacity),
+    setDragInteraction: (dragInteraction) => (0, redux_ts_1.createAction)(ConfigurableUiActionId.SetDragInteraction, dragInteraction),
+    setFrameworkVersion: (frameworkVersion) => (0, redux_ts_1.createAction)(ConfigurableUiActionId.SetFrameworkVersion, frameworkVersion),
+};
+/** Handles actions to update ConfigurableUiState.
+ * @public
+ */
+function ConfigurableUiReducer(state = initialState, action) {
+    const outState = state;
+    switch (action.type) {
+        case ConfigurableUiActionId.SetSnapMode: {
+            return { ...state, snapMode: action.payload };
+        }
+        case ConfigurableUiActionId.SetToolPrompt: {
+            return { ...state, toolPrompt: action.payload };
+        }
+        case ConfigurableUiActionId.SetTheme: {
+            return { ...state, theme: action.payload };
+        }
+        case ConfigurableUiActionId.SetWidgetOpacity: {
+            return { ...state, widgetOpacity: action.payload };
+        }
+        case ConfigurableUiActionId.SetDragInteraction: {
+            return { ...state, useDragInteraction: action.payload };
+        }
+        case ConfigurableUiActionId.SetFrameworkVersion: {
+            const frameworkVersion = (action.payload);
+            return { ...state, frameworkVersion };
+        }
+    }
+    return outState;
+}
+exports.ConfigurableUiReducer = ConfigurableUiReducer;
+//# sourceMappingURL=state.js.map

package/lib/cjs/appui-react/configurableui/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../../src/appui-react/configurableui/state.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,wDAAgD;AAChD,gDAA+D;AAC/D,wDAA6F;AAG7F,mDAAmD;AAEnD;;;GAGG;AACH,IAAY,sBAOX;AAPD,WAAY,sBAAsB;IAChC,qEAA2C,CAAA;IAC3C,+DAAqC,CAAA;IACrC,yEAA+C,CAAA;IAC/C,gFAAsD,CAAA;IACtD,oFAA0D,CAAA;IAC1D,sFAA4D,CAAA;AAC9D,CAAC,EAPW,sBAAsB,GAAtB,8BAAsB,KAAtB,8BAAsB,QAOjC;AAcD,kDAAkD;AAClD,MAAM,YAAY,GAAwB;IACxC,QAAQ,EAAE,wBAAQ,CAAC,eAAyB;IAC5C,UAAU,EAAE,EAAE;IACd,KAAK,EAAE,2CAA4B;IACnC,aAAa,EAAE,qCAAsB;IACrC,kBAAkB,EAAE,KAAK;IACzB,gBAAgB,EAAE,GAAG;CACtB,CAAC;AAEF;;GAEG;AACU,QAAA,qBAAqB,GAAG;IACnC,WAAW,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,IAAA,uBAAY,EAAC,sBAAsB,CAAC,WAAW,EAAE,QAAQ,CAAC;IAC7F,QAAQ;IACN,uBAAuB;IACvB,CAAC,KAAa,EAAE,EAAE,CAAC,IAAA,uBAAY,EAAC,sBAAsB,CAAC,QAAQ,EAAE,KAAK,CAAC;IACzE,aAAa;IACX,uBAAuB;IACvB,CAAC,UAAkB,EAAE,EAAE,CAAC,IAAA,uBAAY,EAAC,sBAAsB,CAAC,aAAa,EAAE,UAAU,CAAC;IACxF,gBAAgB;IACd,uBAAuB;IACvB,CAAC,OAAe,EAAE,EAAE,CAAC,IAAA,uBAAY,EAAC,sBAAsB,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACrF,kBAAkB,EAAE,CAAC,eAAwB,EAAE,EAAE,CAAC,IAAA,uBAAY,EAAC,sBAAsB,CAAC,kBAAkB,EAAE,eAAe,CAAC;IAC1H,mBAAmB,EAAE,CAAC,gBAAoC,EAAE,EAAE,CAAC,IAAA,uBAAY,EAAC,sBAAsB,CAAC,mBAAmB,EAAE,gBAAgB,CAAC;CAC1I,CAAC;AAOF;;GAEG;AACH,SAAgB,qBAAqB,CAAC,QAA6B,YAAY,EAAE,MAAkC;IACjH,MAAM,QAAQ,GAAG,KAAK,CAAC;IAEvB,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,sBAAsB,CAAC,WAAW,CAAC,CAAC;YACvC,OAAO,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;SAC/C;QACD,KAAK,sBAAsB,CAAC,aAAa,CAAC,CAAC;YACzC,OAAO,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;SACjD;QACD,KAAK,sBAAsB,CAAC,QAAQ,CAAC,CAAC;YACpC,OAAO,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;SAC5C;QACD,KAAK,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;YAC5C,OAAO,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;SACpD;QACD,KAAK,sBAAsB,CAAC,kBAAkB,CAAC,CAAC;YAC9C,OAAO,EAAE,GAAG,KAAK,EAAE,kBAAkB,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;SACzD;QACD,KAAK,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;YAC/C,MAAM,gBAAgB,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC1C,OAAO,EAAE,GAAG,KAAK,EAAE,gBAAgB,EAAE,CAAC;SACvC;KACF;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAzBD,sDAyBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module State\r\n */\r\n\r\nimport { SnapMode } from \"@itwin/core-frontend\";\r\nimport { ActionsUnion, createAction } from \"../redux/redux-ts\";\r\nimport { SYSTEM_PREFERRED_COLOR_THEME, WIDGET_OPACITY_DEFAULT } from \"../theme/ThemeManager\";\r\nimport { FrameworkVersionId } from \"../UiFramework\";\r\n\r\n// cSpell:ignore configurableui snapmode toolprompt\r\n\r\n/** Action Ids used by Redux and to send sync UI components. Typically used to refresh visibility or enable state of control.\r\n *  Since these are also used as sync ids they should be in lowercase.\r\n * @public\r\n */\r\nexport enum ConfigurableUiActionId {\r\n  SetSnapMode = \"configurableui:set_snapmode\",\r\n  SetTheme = \"configurableui:set_theme\",\r\n  SetToolPrompt = \"configurableui:set_toolprompt\",\r\n  SetWidgetOpacity = \"configurableui:set_widget_opacity\",\r\n  SetDragInteraction = \"configurableui:set-drag-interaction\",\r\n  SetFrameworkVersion = \"configurableui:set-framework-version\",\r\n}\r\n\r\n/** The portion of state managed by the ConfigurableUiReducer.\r\n * @public\r\n */\r\nexport interface ConfigurableUiState {\r\n  snapMode: number;\r\n  toolPrompt: string;\r\n  theme: string;\r\n  widgetOpacity: number;\r\n  useDragInteraction: boolean;\r\n  frameworkVersion: FrameworkVersionId;\r\n}\r\n\r\n/** used on first call of ConfigurableUiReducer */\r\nconst initialState: ConfigurableUiState = {\r\n  snapMode: SnapMode.NearestKeypoint as number,\r\n  toolPrompt: \"\",\r\n  theme: SYSTEM_PREFERRED_COLOR_THEME,\r\n  widgetOpacity: WIDGET_OPACITY_DEFAULT,\r\n  useDragInteraction: false,\r\n  frameworkVersion: \"2\",\r\n};\r\n\r\n/** An object with a function that creates each ConfigurableUiReducer that can be handled by our reducer.\r\n * @public\r\n */\r\nexport const ConfigurableUiActions = {   // eslint-disable-line @typescript-eslint/naming-convention\r\n  setSnapMode: (snapMode: number) => createAction(ConfigurableUiActionId.SetSnapMode, snapMode),\r\n  setTheme:\r\n    // istanbul ignore next\r\n    (theme: string) => createAction(ConfigurableUiActionId.SetTheme, theme),\r\n  setToolPrompt:\r\n    // istanbul ignore next\r\n    (toolPrompt: string) => createAction(ConfigurableUiActionId.SetToolPrompt, toolPrompt),\r\n  setWidgetOpacity:\r\n    // istanbul ignore next\r\n    (opacity: number) => createAction(ConfigurableUiActionId.SetWidgetOpacity, opacity),\r\n  setDragInteraction: (dragInteraction: boolean) => createAction(ConfigurableUiActionId.SetDragInteraction, dragInteraction),\r\n  setFrameworkVersion: (frameworkVersion: FrameworkVersionId) => createAction(ConfigurableUiActionId.SetFrameworkVersion, frameworkVersion),\r\n};\r\n\r\n/** Union of ConfigurableUi Redux actions\r\n * @public\r\n */\r\nexport type ConfigurableUiActionsUnion = ActionsUnion<typeof ConfigurableUiActions>;\r\n\r\n/** Handles actions to update ConfigurableUiState.\r\n * @public\r\n */\r\nexport function ConfigurableUiReducer(state: ConfigurableUiState = initialState, action: ConfigurableUiActionsUnion): ConfigurableUiState {\r\n  const outState = state;\r\n\r\n  switch (action.type) {\r\n    case ConfigurableUiActionId.SetSnapMode: {\r\n      return { ...state, snapMode: action.payload };\r\n    }\r\n    case ConfigurableUiActionId.SetToolPrompt: {\r\n      return { ...state, toolPrompt: action.payload };\r\n    }\r\n    case ConfigurableUiActionId.SetTheme: {\r\n      return { ...state, theme: action.payload };\r\n    }\r\n    case ConfigurableUiActionId.SetWidgetOpacity: {\r\n      return { ...state, widgetOpacity: action.payload };\r\n    }\r\n    case ConfigurableUiActionId.SetDragInteraction: {\r\n      return { ...state, useDragInteraction: action.payload };\r\n    }\r\n    case ConfigurableUiActionId.SetFrameworkVersion: {\r\n      const frameworkVersion = (action.payload);\r\n      return { ...state, frameworkVersion };\r\n    }\r\n  }\r\n  return outState;\r\n}\r\n"]}

package/lib/cjs/appui-react/content/ContentControl.d.ts

@@ -0,0 +1,59 @@
+/** @packageDocumentation
+ * @module ContentView
+ */
+import * as React from "react";
+import { Id64String } from "@itwin/core-bentley";
+import { IModelConnection, ScreenViewport, ViewState } from "@itwin/core-frontend";
+import { UiEvent } from "@itwin/core-react";
+import { ConfigurableCreateInfo, ConfigurableUiControl, ConfigurableUiControlType } from "../configurableui/ConfigurableUiControl";
+/** ControlControl Activated Event Args interface.
+ * @public
+ */
+export interface ContentControlActivatedEventArgs {
+    activeContentControl: ContentControl;
+    oldContentControl?: ContentControl;
+}
+/** ContentControl Activated Event class.
+ * @public
+ */
+export declare class ContentControlActivatedEvent extends UiEvent<ContentControlActivatedEventArgs> {
+}
+/** Interface to be implemented when the ContentControl supports ViewSelector changes
+ * @public
+ */
+export interface SupportsViewSelectorChange {
+    /** Returns true if this control supports reacting to ViewSelector changes. */
+    supportsViewSelectorChange: boolean;
+    /** Process a ViewSelector change. */
+    processViewSelectorChange(iModel: IModelConnection, viewDefinitionId: Id64String, viewState: ViewState, name: string): Promise<void>;
+}
+/** The base class for Frontstage content controls.
+ * @public
+ */
+export declare class ContentControl extends ConfigurableUiControl {
+    protected _reactNode: React.ReactNode;
+    private _keyAdded;
+    /** Creates an instance of ContentControl.
+     * @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);
+    /** Called when this ContentControl is activated */
+    onActivated(): void;
+    /** Called when this ContentControl is deactivated */
+    onDeactivated(): void;
+    /** Gets the type of ConfigurableUiControl, which is 'Content' in this case */
+    getType(): ConfigurableUiControlType;
+    /** Returns true if this control is a Viewport control. */
+    get isViewport(): boolean;
+    /** Returns the ScreenViewport if isViewport is true */
+    get viewport(): ScreenViewport | undefined;
+    protected getKeyedReactNode(): React.ReactNode;
+    protected getReactNode(): React.ReactNode;
+    /** The React node associated with this control. */
+    get reactNode(): React.ReactNode;
+    set reactNode(r: React.ReactNode);
+    /** Get the NavigationAidControl associated with this ContentControl */
+    get navigationAidControl(): string;
+}
+//# sourceMappingURL=ContentControl.d.ts.map

package/lib/cjs/appui-react/content/ContentControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentControl.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/ContentControl.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAEnI;;GAEG;AACH,MAAM,WAAW,gCAAgC;IAC/C,oBAAoB,EAAE,cAAc,CAAC;IACrC,iBAAiB,CAAC,EAAE,cAAc,CAAC;CACpC;AAED;;GAEG;AACH,qBAAa,4BAA6B,SAAQ,OAAO,CAAC,gCAAgC,CAAC;CAAI;AAE/F;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,8EAA8E;IAC9E,0BAA0B,EAAE,OAAO,CAAC;IACpC,qCAAqC;IACrC,yBAAyB,CAAC,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtI;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,qBAAqB;IACvD,SAAS,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,OAAO,CAAC,SAAS,CAAS;IAE1B;;;OAGG;gBACS,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG;IAItD,mDAAmD;IAC5C,WAAW,IAAI,IAAI;IAG1B,qDAAqD;IAC9C,aAAa,IAAI,IAAI;IAG5B,8EAA8E;IACvE,OAAO,IAAI,yBAAyB;IAE3C,0DAA0D;IAC1D,IAAW,UAAU,IAAI,OAAO,CAAkB;IAClD,uDAAuD;IACvD,IAAW,QAAQ,IAAI,cAAc,GAAG,SAAS,CAAsB;IAEvE,SAAS,CAAC,iBAAiB,IAAI,KAAK,CAAC,SAAS;IAa9C,SAAS,CAAC,YAAY,IAAI,KAAK,CAAC,SAAS;IAIzC,mDAAmD;IACnD,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;IAED,IAAW,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAA0B;IAEjE,uEAAuE;IACvE,IAAW,oBAAoB,IAAI,MAAM,CAExC;CAEF"}

package/lib/cjs/appui-react/content/ContentControl.js

@@ -0,0 +1,69 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ContentView
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentControl = exports.ContentControlActivatedEvent = void 0;
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const ConfigurableUiControl_1 = require("../configurableui/ConfigurableUiControl");
+/** ContentControl Activated Event class.
+ * @public
+ */
+class ContentControlActivatedEvent extends core_react_1.UiEvent {
+}
+exports.ContentControlActivatedEvent = ContentControlActivatedEvent;
+/** The base class for Frontstage content controls.
+ * @public
+ */
+class ContentControl extends ConfigurableUiControl_1.ConfigurableUiControl {
+    /** Creates an instance of ContentControl.
+     * @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);
+        this._keyAdded = false;
+    }
+    /** Called when this ContentControl is activated */
+    onActivated() {
+    }
+    /** Called when this ContentControl is deactivated */
+    onDeactivated() {
+    }
+    /** Gets the type of ConfigurableUiControl, which is 'Content' in this case */
+    getType() { return ConfigurableUiControl_1.ConfigurableUiControlType.Content; }
+    /** Returns true if this control is a Viewport control. */
+    get isViewport() { return false; }
+    /** Returns the ScreenViewport if isViewport is true */
+    get viewport() { return undefined; }
+    getKeyedReactNode() {
+        if (!this._keyAdded && React.isValidElement(this._reactNode)) {
+            // istanbul ignore else
+            if (!this._reactNode.key) {
+                const additionalProps = { key: this.uniqueId };
+                this._reactNode = React.cloneElement(this._reactNode, additionalProps);
+            }
+            this._keyAdded = true;
+        }
+        return this._reactNode;
+    }
+    getReactNode() {
+        return this.getKeyedReactNode();
+    }
+    /** The React node associated with this control. */
+    get reactNode() {
+        return this.getReactNode();
+    }
+    set reactNode(r) { this._reactNode = r; }
+    /** Get the NavigationAidControl associated with this ContentControl */
+    get navigationAidControl() {
+        return "";
+    }
+}
+exports.ContentControl = ContentControl;
+//# sourceMappingURL=ContentControl.js.map

package/lib/cjs/appui-react/content/ContentControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentControl.js","sourceRoot":"","sources":["../../../../src/appui-react/content/ContentControl.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAG/B,kDAA4C;AAC5C,mFAAmI;AAUnI;;GAEG;AACH,MAAa,4BAA6B,SAAQ,oBAAyC;CAAI;AAA/F,oEAA+F;AAY/F;;GAEG;AACH,MAAa,cAAe,SAAQ,6CAAqB;IAIvD;;;OAGG;IACH,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAPf,cAAS,GAAG,KAAK,CAAC;IAQ1B,CAAC;IAED,mDAAmD;IAC5C,WAAW;IAClB,CAAC;IAED,qDAAqD;IAC9C,aAAa;IACpB,CAAC;IAED,8EAA8E;IACvE,OAAO,KAAgC,OAAO,iDAAyB,CAAC,OAAO,CAAC,CAAC,CAAC;IAEzF,0DAA0D;IAC1D,IAAW,UAAU,KAAc,OAAO,KAAK,CAAC,CAAC,CAAC;IAClD,uDAAuD;IACvD,IAAW,QAAQ,KAAiC,OAAO,SAAS,CAAC,CAAC,CAAC;IAE7D,iBAAiB;QACzB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YAC5D,uBAAuB;YACvB,IAAI,CAAE,IAAI,CAAC,UAAsC,CAAC,GAAG,EAAE;gBACrD,MAAM,eAAe,GAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;aACxE;YACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB;QAED,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAES,YAAY;QACpB,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAClC,CAAC;IAED,mDAAmD;IACnD,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;IAC7B,CAAC;IAED,IAAW,SAAS,CAAC,CAAkB,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;IAEjE,uEAAuE;IACvE,IAAW,oBAAoB;QAC7B,OAAO,EAAE,CAAC;IACZ,CAAC;CAEF;AAzDD,wCAyDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module ContentView\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Id64String } from \"@itwin/core-bentley\";\r\nimport { IModelConnection, ScreenViewport, ViewState } from \"@itwin/core-frontend\";\r\nimport { UiEvent } from \"@itwin/core-react\";\r\nimport { ConfigurableCreateInfo, ConfigurableUiControl, ConfigurableUiControlType } from \"../configurableui/ConfigurableUiControl\";\r\n\r\n/** ControlControl Activated Event Args interface.\r\n * @public\r\n */\r\nexport interface ContentControlActivatedEventArgs {\r\n  activeContentControl: ContentControl;\r\n  oldContentControl?: ContentControl;\r\n}\r\n\r\n/** ContentControl Activated Event class.\r\n * @public\r\n */\r\nexport class ContentControlActivatedEvent extends UiEvent<ContentControlActivatedEventArgs> { }\r\n\r\n/** Interface to be implemented when the ContentControl supports ViewSelector changes\r\n * @public\r\n */\r\nexport interface SupportsViewSelectorChange {\r\n  /** Returns true if this control supports reacting to ViewSelector changes. */\r\n  supportsViewSelectorChange: boolean;\r\n  /** Process a ViewSelector change. */\r\n  processViewSelectorChange(iModel: IModelConnection, viewDefinitionId: Id64String, viewState: ViewState, name: string): Promise<void>;\r\n}\r\n\r\n/** The base class for Frontstage content controls.\r\n * @public\r\n */\r\nexport class ContentControl extends ConfigurableUiControl {\r\n  protected _reactNode: React.ReactNode;\r\n  private _keyAdded = false;\r\n\r\n  /** Creates an instance of ContentControl.\r\n   * @param info         An object that the subclass must pass to this base class.\r\n   * @param options      Options provided via the applicationData in a [[ContentProps]].\r\n   */\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    super(info, options);\r\n  }\r\n\r\n  /** Called when this ContentControl is activated */\r\n  public onActivated(): void {\r\n  }\r\n\r\n  /** Called when this ContentControl is deactivated */\r\n  public onDeactivated(): void {\r\n  }\r\n\r\n  /** Gets the type of ConfigurableUiControl, which is 'Content' in this case */\r\n  public getType(): ConfigurableUiControlType { return ConfigurableUiControlType.Content; }\r\n\r\n  /** Returns true if this control is a Viewport control. */\r\n  public get isViewport(): boolean { return false; }\r\n  /** Returns the ScreenViewport if isViewport is true */\r\n  public get viewport(): ScreenViewport | undefined { return undefined; }\r\n\r\n  protected getKeyedReactNode(): React.ReactNode {\r\n    if (!this._keyAdded && React.isValidElement(this._reactNode)) {\r\n      // istanbul ignore else\r\n      if (!(this._reactNode as React.ReactElement<any>).key) {\r\n        const additionalProps: any = { key: this.uniqueId };\r\n        this._reactNode = React.cloneElement(this._reactNode, additionalProps);\r\n      }\r\n      this._keyAdded = true;\r\n    }\r\n\r\n    return this._reactNode;\r\n  }\r\n\r\n  protected getReactNode(): React.ReactNode {\r\n    return this.getKeyedReactNode();\r\n  }\r\n\r\n  /** The React node associated with this control. */\r\n  public get reactNode(): React.ReactNode {\r\n    return this.getReactNode();\r\n  }\r\n\r\n  public set reactNode(r: React.ReactNode) { this._reactNode = r; }\r\n\r\n  /** Get the NavigationAidControl associated with this ContentControl */\r\n  public get navigationAidControl(): string {\r\n    return \"\";\r\n  }\r\n\r\n}\r\n"]}

package/lib/cjs/appui-react/content/ContentGroup.d.ts

@@ -0,0 +1,93 @@
+/** @packageDocumentation
+ * @module ContentView
+ */
+import * as React from "react";
+import { ScreenViewport } from "@itwin/core-frontend";
+import { ContentLayoutProps } from "@itwin/appui-abstract";
+import { ConfigurableUiControlConstructor } from "../configurableui/ConfigurableUiControl";
+import { ContentControl } from "./ContentControl";
+import { FrontstageProps } from "../frontstage/Frontstage";
+/** Properties for content displayed in a content view
+ * @public
+ */
+export interface ContentProps {
+    /** A unique id for the Content View within the group */
+    id: string;
+    /** The class name or [[ConfigurableUiControlConstructor]] of the content control */
+    classId: string | ConfigurableUiControlConstructor;
+    /** Optional application data passed down to the Content View */
+    applicationData?: any;
+}
+/** Properties for a [[ContentGroup]]
+ * @public
+ */
+export interface ContentGroupProps {
+    /** An optional id for the [[ContentGroup]] */
+    id: string;
+    /** Content Layout Id or complete set of [[ContentLayoutProps]]  */
+    layout: ContentLayoutProps;
+    /** A collection of [[ContentProps]], one for each content view */
+    contents: ContentProps[];
+}
+/** Abstract class that can be implemented and specified by frontstage to dynamically construct
+ * content group just prior to activating the frontstage.
+ * @public
+ */
+export declare abstract class ContentGroupProvider {
+    abstract provideContentGroup(props: FrontstageProps): Promise<ContentGroup>;
+    /** Allow provider to update any data stored in ContentGroupProps. Typically this may
+     * be to remove applicationData entries.
+     */
+    prepareToSaveProps(contentGroupProps: ContentGroupProps): ContentGroupProps;
+    /** Allow provider to update any stored ContentGroupProps be it is to be used to create ContentGroup and layouts.
+     * Typically this may be to add applicationData to content entries.
+     */
+    applyUpdatesToSavedProps(contentGroupProps: ContentGroupProps): ContentGroupProps;
+    /** Allow provider to save any content group data before the stage deactivated. */
+    onFrontstageDeactivated(): Promise<void>;
+}
+/** Callback to process content properties during toJSON method
+ * @public
+ */
+export declare type ContentCallback = (content: ContentProps) => void;
+/** ContentGroup class. Content Groups define content displayed in content views that are laid out using a [[ContentLayout]].
+ * @public
+ */
+export declare class ContentGroup {
+    private static _sId;
+    groupId: string;
+    propsId: string;
+    layout: ContentLayoutProps;
+    contentPropsList: ContentProps[];
+    private _contentControls;
+    private _contentSetMap;
+    get id(): string;
+    constructor(contentGroupProps: ContentGroupProps);
+    /** Gets a [[ContentControl]] from the Content Group based on its [[ContentProps]]. */
+    getContentControl(contentProps: ContentProps, _index: number): ContentControl | undefined;
+    /** Gets a [[ContentControl]] from the Content Group with a given ID. */
+    getContentControlById(id: string): ContentControl | undefined;
+    /** Gets the React nodes representing the Content Views in this Content Group. */
+    getContentNodes(): React.ReactNode[];
+    /** Gets the [[ContentControl]] associated with a given React node representing a Content View. */
+    getControlFromElement(node: React.ReactNode): ContentControl | undefined;
+    /** Refreshes the React nodes representing the Content Views in this Content Group.. */
+    refreshContentNodes(): void;
+    /** Gets an array of the content controls representing the Content Views. */
+    getContentControls(): ContentControl[];
+    /** Called when Frontstage is deactivated. */
+    onFrontstageDeactivated(): void;
+    /** Called when Frontstage is ready. */
+    onFrontstageReady(): void;
+    /** Clears the map of content controls. */
+    clearContentControls(): void;
+    /** Creates [[ContentGroupProps]] for JSON purposes
+     * @public
+     */
+    toJSON(contentCallback?: ContentCallback): ContentGroupProps;
+    /** Gets Viewports from Viewport Content Controls
+     * @internal
+     */
+    getViewports(): Array<ScreenViewport | undefined>;
+}
+//# sourceMappingURL=ContentGroup.d.ts.map

package/lib/cjs/appui-react/content/ContentGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentGroup.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/ContentGroup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAW,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAA0B,gCAAgC,EAA6B,MAAM,yCAAyC,CAAC;AAG9I,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAC;IACX,oFAAoF;IACpF,OAAO,EAAE,MAAM,GAAG,gCAAgC,CAAC;IACnD,gEAAgE;IAChE,eAAe,CAAC,EAAE,GAAG,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,mEAAmE;IACnE,MAAM,EAAE,kBAAkB,CAAC;IAC3B,kEAAkE;IAClE,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B;AAED;;;GAGG;AACH,8BAAsB,oBAAoB;IACxC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CAAC,YAAY,CAAC;IAE3E;;OAEG;IACI,kBAAkB,CAAC,iBAAiB,EAAE,iBAAiB;IAI9D;;OAEG;IACI,wBAAwB,CAAC,iBAAiB,EAAE,iBAAiB;IAIpE,kFAAkF;IACrE,uBAAuB;CACrC;AAED;;GAEG;AACH,oBAAY,eAAe,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;AAE9D;;GAEG;AACH,qBAAa,YAAY;IACvB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAK;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAC7D,OAAO,CAAC,cAAc,CAAqC;IAE3D,IAAW,EAAE,WAEZ;gBAEW,iBAAiB,EAAE,iBAAiB;IAQhD,sFAAsF;IAC/E,iBAAiB,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS;IA+BhG,wEAAwE;IACjE,qBAAqB,CAAC,EAAE,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS;IAIpE,iFAAiF;IAC1E,eAAe,IAAI,KAAK,CAAC,SAAS,EAAE;IAgB3C,kGAAkG;IAC3F,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,cAAc,GAAG,SAAS;IAe/E,uFAAuF;IAChF,mBAAmB;IAI1B,4EAA4E;IACrE,kBAAkB,IAAI,cAAc,EAAE;IAa7C,6CAA6C;IACtC,uBAAuB,IAAI,IAAI;IAItC,uCAAuC;IAChC,iBAAiB,IAAI,IAAI;IAEhC,0CAA0C;IACnC,oBAAoB,IAAI,IAAI;IAInC;;OAEG;IACI,MAAM,CAAC,eAAe,CAAC,EAAE,eAAe,GAAG,iBAAiB;IAuBnE;;OAEG;IACI,YAAY,IAAI,KAAK,CAAC,cAAc,GAAG,SAAS,CAAC;CAczD"}