@itwin/appui-react 4.15.5 → 4.16.0

package/lib/esm/appui-react/content/ContentGroup.js

@@ -37,6 +37,7 @@ export class ContentGroup {
         return this.groupId;
     }
     constructor(contentGroupProps) {
+        /* eslint-disable deprecation/deprecation */
         this._contentControls = new Map();
         this._contentSetMap = new Map();
         this.layout = { ...contentGroupProps.layout };
@@ -45,81 +46,30 @@ export class ContentGroup {
         this.groupId = `[${contentGroupProps.id}-${ContentGroup._sId++}]`;
         this.contentPropsList = contentGroupProps.contents;
     }
-    /** Gets a [[ContentControl]] from the Content Group based on its [[ContentProps]]. */
-    getContentControl(contentProps, _index) {
-        // ensure we have a unique control Id for each instance of a content control - this will be used as a key for the React control - see `ContentControl.getKeyedReactNode`
-        const id = `${contentProps.id}::${this.groupId}`;
-        let contentControl;
-        if (!this._contentControls.get(contentProps.id)) {
-            let usedClassId = "";
-            if (typeof contentProps.classId === "string") {
-                if (!this._contentControls.get(contentProps.id) &&
-                    UiFramework.controls.isRegistered(contentProps.classId)) {
-                    contentControl = UiFramework.controls.create(contentProps.classId, id, contentProps.applicationData, contentProps.id);
-                    usedClassId = contentProps.classId;
-                }
-            }
-            else {
-                const info = new ConfigurableCreateInfo(contentProps.classId.name, id, contentProps.id);
-                contentControl = new contentProps.classId(info, contentProps.applicationData);
-                usedClassId = contentProps.classId.name;
-            }
-            if (contentControl) {
-                if (contentControl.getType() !== ConfigurableUiControlType.Content &&
-                    contentControl.getType() !== ConfigurableUiControlType.Viewport) {
-                    // eslint-disable-next-line deprecation/deprecation
-                    throw new UiError(UiFramework.loggerCategory(this), `getContentControl error: '${usedClassId}' is NOT a ContentControl or ViewportContentControl`);
-                }
-                contentControl.initialize();
-                this._contentControls.set(contentProps.id, contentControl);
-            }
-        }
-        return this._contentControls.get(contentProps.id);
-    }
-    /** Gets a [[ContentControl]] from the Content Group with a given ID. */
-    getContentControlById(id) {
-        return this._contentControls.get(id);
-    }
-    /** Gets the React nodes representing the Content Views in this Content Group. */
+    /** Gets the React nodes representing the content views in this content group.
+     * @deprecated in 4.16.0. Use {@link ContentGroup.contentPropsList} instead.
+     */
     getContentNodes() {
         const contentNodes = new Array();
         this._contentSetMap.clear();
         this.contentPropsList.forEach((contentProps, index) => {
-            const control = this.getContentControl(contentProps, index);
-            if (control) {
-                contentNodes.push(control.reactNode);
-                this._contentSetMap.set(control.controlId, control);
+            if (contentProps.content) {
+                contentNodes.push(contentProps.content);
+                return;
             }
+            // eslint-disable-next-line deprecation/deprecation
+            const control = this.getContentControl(contentProps, index);
+            if (!control)
+                return;
+            contentNodes.push(control.reactNode);
+            this._contentSetMap.set(control.controlId, control);
         });
         return contentNodes;
     }
-    /** Gets the [[ContentControl]] associated with a given React node representing a Content View. */
-    getControlFromElement(node) {
-        if (this._contentSetMap.size === 0)
-            this.getContentNodes();
-        if (node && node.key) {
-            const key = node.key;
-            // key has format `${contentProps.id}::${this.groupId}` which is stored as unique id
-            const controlId = key.split("::", 1)[0];
-            return this._contentSetMap.get(controlId);
-        }
-        return undefined;
-    }
-    /** Refreshes the React nodes representing the Content Views in this Content Group.. */
+    /** Refreshes the React nodes representing the Content Views in this Content Group. */
     refreshContentNodes() {
         this._contentSetMap.clear();
     }
-    /** Gets an array of the content controls representing the Content Views. */
-    getContentControls() {
-        const contentControls = new Array();
-        this.contentPropsList.forEach((contentProps, index) => {
-            const control = this.getContentControl(contentProps, index);
-            if (control) {
-                contentControls.push(control);
-            }
-        });
-        return contentControls;
-    }
     /** Called when Frontstage is deactivated. */
     onFrontstageDeactivated() {
         this.clearContentControls();
@@ -130,7 +80,7 @@ export class ContentGroup {
     clearContentControls() {
         this._contentControls.clear();
     }
-    /** Creates [[ContentGroupProps]] for JSON purposes
+    /** Creates [[ContentGroupProps]] for JSON purposes.
      * @public
      */
     toJSON(contentCallback) {
@@ -140,8 +90,12 @@ export class ContentGroup {
             contents: this.contentPropsList,
         };
         contentGroupProps.contents.forEach((content, index) => {
+            // eslint-disable-next-line deprecation/deprecation
             if (typeof content.classId !== "string") {
-                const classId = InternalConfigurableUiManager.getConstructorClassId(content.classId);
+                const classId = InternalConfigurableUiManager.getConstructorClassId(
+                // eslint-disable-next-line deprecation/deprecation
+                content.classId);
+                // eslint-disable-next-line deprecation/deprecation
                 if (classId !== undefined)
                     content.classId = classId;
                 else
@@ -153,10 +107,11 @@ export class ContentGroup {
         });
         return contentGroupProps;
     }
-    /** Gets Viewports from Viewport Content Controls
+    /** Gets Viewports from Viewport Content Controls.
      * @internal
      */
     getViewports() {
+        // eslint-disable-next-line deprecation/deprecation
         const contentControls = this.getContentControls();
         const viewports = new Array();
         contentControls.forEach((control) => {
@@ -169,6 +124,71 @@ export class ContentGroup {
         });
         return viewports;
     }
+    /** Gets a [[ContentControl]] from the Content Group based on its [[ContentProps]].
+     * @deprecated in 4.16.0. Uses a deprecated class {@link ContentControl}.
+     */
+    getContentControl(contentProps, _index) {
+        // ensure we have a unique control Id for each instance of a content control - this will be used as a key for the React control - see `ContentControl.getKeyedReactNode`
+        const id = `${contentProps.id}::${this.groupId}`;
+        let contentControl;
+        if (!this._contentControls.get(contentProps.id)) {
+            let usedClassId = "";
+            if (typeof contentProps.classId === "string") {
+                if (!this._contentControls.get(contentProps.id) &&
+                    UiFramework.controls.isRegistered(contentProps.classId)) {
+                    contentControl = UiFramework.controls.create(contentProps.classId, id, contentProps.applicationData, contentProps.id);
+                    usedClassId = contentProps.classId;
+                }
+            }
+            else {
+                const info = new ConfigurableCreateInfo(contentProps.classId.name, id, contentProps.id);
+                contentControl = new contentProps.classId(info, contentProps.applicationData);
+                usedClassId = contentProps.classId.name;
+            }
+            if (contentControl) {
+                if (contentControl.getType() !== ConfigurableUiControlType.Content &&
+                    contentControl.getType() !== ConfigurableUiControlType.Viewport) {
+                    throw new UiError(UiFramework.loggerCategory(this), `getContentControl error: '${usedClassId}' is NOT a ContentControl or ViewportContentControl`);
+                }
+                contentControl.initialize();
+                this._contentControls.set(contentProps.id, contentControl);
+            }
+        }
+        return this._contentControls.get(contentProps.id);
+    }
+    /** Gets a [[ContentControl]] from the Content Group with a given ID.
+     * @deprecated in 4.16.0. Uses a deprecated class {@link ContentControl}.
+     */
+    getContentControlById(id) {
+        return this._contentControls.get(id);
+    }
+    /** Gets the [[ContentControl]] associated with a given React node representing a Content View.
+     * @deprecated in 4.16.0. Uses a deprecated class {@link ContentControl}.
+     */
+    getControlFromElement(node) {
+        if (this._contentSetMap.size === 0)
+            this.getContentNodes();
+        if (node && node.key) {
+            const key = node.key;
+            // key has format `${contentProps.id}::${this.groupId}` which is stored as unique id
+            const controlId = key.split("::", 1)[0];
+            return this._contentSetMap.get(controlId);
+        }
+        return undefined;
+    }
+    /** Gets an array of the content controls representing the Content Views.
+     * @deprecated in 4.16.0. Uses a deprecated class {@link ContentControl}.
+     */
+    getContentControls() {
+        const contentControls = new Array();
+        this.contentPropsList.forEach((contentProps, index) => {
+            const control = this.getContentControl(contentProps, index);
+            if (!control)
+                return;
+            contentControls.push(control);
+        });
+        return contentControls;
+    }
 }
 ContentGroup._sId = 0;
 //# sourceMappingURL=ContentGroup.js.map

package/lib/esm/appui-react/content/ContentGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentGroup.js","sourceRoot":"","sources":["../../../../src/appui-react/content/ContentGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ContentView\n */\n\nimport type * as React from \"react\";\nimport type { ScreenViewport } from \"@itwin/core-frontend\";\nimport type { ContentLayoutProps } from \"@itwin/appui-abstract\";\nimport { UiError } from \"@itwin/appui-abstract\";\nimport type { ConfigurableUiControlConstructor } from \"../configurableui/ConfigurableUiControl\";\nimport {\n  ConfigurableCreateInfo,\n  ConfigurableUiControlType,\n} from \"../configurableui/ConfigurableUiControl\";\nimport { UiFramework } from \"../UiFramework\";\nimport type { ContentControl } from \"./ContentControl\";\nimport { InternalConfigurableUiManager } from \"../configurableui/InternalConfigurableUiManager\";\nimport type { Frontstage } from \"../frontstage/Frontstage\";\n\n/** Properties for content displayed in a content view\n * @public\n */\nexport interface ContentProps {\n  /** A unique id for the Content View within the group */\n  id: string;\n  /** The class name or [[ConfigurableUiControlConstructor]] of the content control */\n  classId: string | ConfigurableUiControlConstructor;\n  /** Optional application data passed down to the Content View */\n  applicationData?: any;\n}\n\n/** Properties for a [[ContentGroup]]\n * @public\n */\nexport interface ContentGroupProps {\n  /** An id for the [[ContentGroup]]. This id is used to locate a ContentGroup and it also can be used by an ContentGroupProvider to save/restore content settings */\n  id: string;\n  /** Content Layout Id or complete set of [[ContentLayoutProps]]  */\n  layout: ContentLayoutProps;\n  /** A collection of [[ContentProps]], one for each content view */\n  contents: ContentProps[];\n}\n\n/** Abstract class that can be implemented and specified by frontstage to dynamically construct\n * content group just prior to activating the frontstage.\n * @public\n */\nexport abstract class ContentGroupProvider {\n  /** Return the contentGroup based on the `Frontstage`. */\n  public abstract contentGroup(frontstage: Frontstage): Promise<ContentGroup>;\n\n  /** Allow provider to update any data stored in ContentGroupProps. Typically this may\n   * be to remove applicationData entries.\n   */\n  public prepareToSaveProps(contentGroupProps: ContentGroupProps) {\n    return contentGroupProps;\n  }\n\n  /** Allow provider to update any stored ContentGroupProps be it is to be used to create ContentGroup and layouts.\n   * Typically this may be to add applicationData to content entries.\n   */\n  public applyUpdatesToSavedProps(contentGroupProps: ContentGroupProps) {\n    return contentGroupProps;\n  }\n\n  /** Allow provider to save any content group data before the stage deactivated. */\n  public async onFrontstageDeactivated() {}\n}\n\n/** Callback to process content properties during toJSON method\n * @public\n */\nexport type ContentCallback = (content: ContentProps) => void;\n\n/** ContentGroup class. Content Groups define content displayed in content views that are laid out using a [[ContentLayout]].\n * @public\n */\nexport class ContentGroup {\n  private static _sId = 0;\n  public groupId: string;\n  public propsId: string;\n  public layout: ContentLayoutProps;\n  public contentPropsList: ContentProps[];\n  private _contentControls = new Map<string, ContentControl>();\n  private _contentSetMap = new Map<string, ContentControl>();\n\n  public get id() {\n    return this.groupId;\n  }\n\n  constructor(contentGroupProps: ContentGroupProps) {\n    this.layout = { ...contentGroupProps.layout };\n    this.propsId = contentGroupProps.id;\n    // ensure we have a unique groupId for each instance of a content group - this will be used to generate a key in the React controls\n    this.groupId = `[${contentGroupProps.id}-${ContentGroup._sId++}]`;\n    this.contentPropsList = contentGroupProps.contents;\n  }\n\n  /** Gets a [[ContentControl]] from the Content Group based on its [[ContentProps]]. */\n  public getContentControl(\n    contentProps: ContentProps,\n    _index: number\n  ): ContentControl | undefined {\n    // ensure we have a unique control Id for each instance of a content control - this will be used as a key for the React control - see `ContentControl.getKeyedReactNode`\n    const id = `${contentProps.id}::${this.groupId}`;\n    let contentControl: ContentControl | undefined;\n\n    if (!this._contentControls.get(contentProps.id)) {\n      let usedClassId: string = \"\";\n\n      if (typeof contentProps.classId === \"string\") {\n        if (\n          !this._contentControls.get(contentProps.id) &&\n          UiFramework.controls.isRegistered(contentProps.classId)\n        ) {\n          contentControl = UiFramework.controls.create(\n            contentProps.classId,\n            id,\n            contentProps.applicationData,\n            contentProps.id\n          ) as ContentControl;\n          usedClassId = contentProps.classId;\n        }\n      } else {\n        const info = new ConfigurableCreateInfo(\n          contentProps.classId.name,\n          id,\n          contentProps.id\n        );\n        contentControl = new contentProps.classId(\n          info,\n          contentProps.applicationData\n        ) as ContentControl;\n        usedClassId = contentProps.classId.name;\n      }\n\n      if (contentControl) {\n        if (\n          contentControl.getType() !== ConfigurableUiControlType.Content &&\n          contentControl.getType() !== ConfigurableUiControlType.Viewport\n        ) {\n          // eslint-disable-next-line deprecation/deprecation\n          throw new UiError(\n            UiFramework.loggerCategory(this),\n            `getContentControl error: '${usedClassId}' is NOT a ContentControl or ViewportContentControl`\n          );\n        }\n        contentControl.initialize();\n        this._contentControls.set(contentProps.id, contentControl);\n      }\n    }\n\n    return this._contentControls.get(contentProps.id);\n  }\n\n  /** Gets a [[ContentControl]] from the Content Group with a given ID. */\n  public getContentControlById(id: string): ContentControl | undefined {\n    return this._contentControls.get(id);\n  }\n\n  /** Gets the React nodes representing the Content Views in this Content Group. */\n  public getContentNodes(): React.ReactNode[] {\n    const contentNodes: React.ReactNode[] = new Array<React.ReactNode>();\n\n    this._contentSetMap.clear();\n\n    this.contentPropsList.forEach(\n      (contentProps: ContentProps, index: number) => {\n        const control = this.getContentControl(contentProps, index);\n        if (control) {\n          contentNodes.push(control.reactNode);\n          this._contentSetMap.set(control.controlId, control);\n        }\n      }\n    );\n\n    return contentNodes;\n  }\n\n  /** Gets the [[ContentControl]] associated with a given React node representing a Content View. */\n  public getControlFromElement(\n    node: React.ReactNode\n  ): ContentControl | undefined {\n    if (this._contentSetMap.size === 0) this.getContentNodes();\n\n    if (node && (node as React.ReactElement<any>).key) {\n      const key = (node as React.ReactElement<any>).key as string;\n      // key has format `${contentProps.id}::${this.groupId}` which is stored as unique id\n      const controlId = key.split(\"::\", 1)[0];\n      return this._contentSetMap.get(controlId);\n    }\n\n    return undefined;\n  }\n\n  /** Refreshes the React nodes representing the Content Views in this Content Group.. */\n  public refreshContentNodes() {\n    this._contentSetMap.clear();\n  }\n\n  /** Gets an array of the content controls representing the Content Views. */\n  public getContentControls(): ContentControl[] {\n    const contentControls: ContentControl[] = new Array<ContentControl>();\n\n    this.contentPropsList.forEach(\n      (contentProps: ContentProps, index: number) => {\n        const control = this.getContentControl(contentProps, index);\n        if (control) {\n          contentControls.push(control);\n        }\n      }\n    );\n\n    return contentControls;\n  }\n\n  /** Called when Frontstage is deactivated. */\n  public onFrontstageDeactivated(): void {\n    this.clearContentControls();\n  }\n\n  /** Called when Frontstage is ready. */\n  public onFrontstageReady(): void {}\n\n  /** Clears the map of content controls. */\n  public clearContentControls(): void {\n    this._contentControls.clear();\n  }\n\n  /** Creates [[ContentGroupProps]] for JSON purposes\n   * @public\n   */\n  public toJSON(contentCallback?: ContentCallback): ContentGroupProps {\n    const contentGroupProps: ContentGroupProps = {\n      id: this.propsId,\n      layout: this.layout,\n      contents: this.contentPropsList,\n    };\n\n    contentGroupProps.contents.forEach(\n      (content: ContentProps, index: number) => {\n        if (typeof content.classId !== \"string\") {\n          const classId = InternalConfigurableUiManager.getConstructorClassId(\n            content.classId\n          );\n          if (classId !== undefined) content.classId = classId;\n          else\n            throw new UiError( // eslint-disable-line deprecation/deprecation\n              UiFramework.loggerCategory(this),\n              `toJSON: ContentControl at index ${index} is NOT registered with a string id`\n            );\n\n          if (contentCallback) contentCallback(content);\n        }\n      }\n    );\n\n    return contentGroupProps;\n  }\n\n  /** Gets Viewports from Viewport Content Controls\n   * @internal\n   */\n  public getViewports(): Array<ScreenViewport | undefined> {\n    const contentControls = this.getContentControls();\n    const viewports = new Array<ScreenViewport | undefined>();\n\n    contentControls.forEach((control: ContentControl) => {\n      if (control.isViewport && control.viewport) {\n        viewports.push(control.viewport);\n      } else {\n        viewports.push(undefined);\n      }\n    });\n\n    return viewports;\n  }\n}\n"]}
+{"version":3,"file":"ContentGroup.js","sourceRoot":"","sources":["../../../../src/appui-react/content/ContentGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ContentView\n */\n\nimport type * as React from \"react\";\nimport type { ScreenViewport } from \"@itwin/core-frontend\";\nimport type { ContentLayoutProps } from \"@itwin/appui-abstract\";\nimport { UiError } from \"@itwin/appui-abstract\";\nimport type { ConfigurableUiControlConstructor } from \"../configurableui/ConfigurableUiControl\";\nimport {\n  ConfigurableCreateInfo,\n  ConfigurableUiControlType,\n} from \"../configurableui/ConfigurableUiControl\";\nimport { UiFramework } from \"../UiFramework\";\nimport type { ContentControl } from \"./ContentControl\";\nimport { InternalConfigurableUiManager } from \"../configurableui/InternalConfigurableUiManager\";\nimport type { Frontstage } from \"../frontstage/Frontstage\";\n\n/** Properties for content displayed in a content view\n * @public\n */\nexport interface ContentProps {\n  /** A unique id for the Content View within the group. */\n  id: string;\n  /** The class name or [[ConfigurableUiControlConstructor]] of the content control.\n   * @deprecated in 4.16.0. Use {@link ContentProps.content} instead and specify an empty string for this property. This will be made optional in 5.0.0.\n   */\n  // eslint-disable-next-line deprecation/deprecation\n  classId: string | ConfigurableUiControlConstructor;\n  /** Optional application data passed down to the content view.\n   * @deprecated in 4.16.0. Use {@link ContentProps.content} instead.\n   */\n  applicationData?: any;\n  /** Content to be displayed in the content view.\n   * @beta\n   */\n  content?: React.ReactNode;\n}\n\n/** Properties for a [[ContentGroup]]\n * @public\n */\nexport interface ContentGroupProps {\n  /** An id for the [[ContentGroup]]. This id is used to locate a ContentGroup and it also can be used by an ContentGroupProvider to save/restore content settings */\n  id: string;\n  /** Content Layout Id or complete set of [[ContentLayoutProps]]  */\n  layout: ContentLayoutProps;\n  /** A collection of [[ContentProps]], one for each content view */\n  contents: ContentProps[];\n}\n\n/** Abstract class that can be implemented and specified by frontstage to dynamically construct\n * content group just prior to activating the frontstage.\n * @public\n */\nexport abstract class ContentGroupProvider {\n  /** Return the contentGroup based on the `Frontstage`. */\n  public abstract contentGroup(frontstage: Frontstage): Promise<ContentGroup>;\n\n  /** Allow provider to update any data stored in ContentGroupProps. Typically this may\n   * be to remove applicationData entries.\n   */\n  public prepareToSaveProps(contentGroupProps: ContentGroupProps) {\n    return contentGroupProps;\n  }\n\n  /** Allow provider to update any stored ContentGroupProps be it is to be used to create ContentGroup and layouts.\n   * Typically this may be to add applicationData to content entries.\n   */\n  public applyUpdatesToSavedProps(contentGroupProps: ContentGroupProps) {\n    return contentGroupProps;\n  }\n\n  /** Allow provider to save any content group data before the stage deactivated. */\n  public async onFrontstageDeactivated() {}\n}\n\n/** Callback to process content properties during toJSON method\n * @public\n */\nexport type ContentCallback = (content: ContentProps) => void;\n\n/** ContentGroup class. Content Groups define content displayed in content views that are laid out using a [[ContentLayout]].\n * @public\n */\nexport class ContentGroup {\n  private static _sId = 0;\n  public groupId: string;\n  public propsId: string;\n  public layout: ContentLayoutProps;\n  public contentPropsList: ContentProps[];\n\n  public get id() {\n    return this.groupId;\n  }\n\n  constructor(contentGroupProps: ContentGroupProps) {\n    this.layout = { ...contentGroupProps.layout };\n    this.propsId = contentGroupProps.id;\n    // ensure we have a unique groupId for each instance of a content group - this will be used to generate a key in the React controls\n    this.groupId = `[${contentGroupProps.id}-${ContentGroup._sId++}]`;\n    this.contentPropsList = contentGroupProps.contents;\n  }\n\n  /** Gets the React nodes representing the content views in this content group.\n   * @deprecated in 4.16.0. Use {@link ContentGroup.contentPropsList} instead.\n   */\n  public getContentNodes(): React.ReactNode[] {\n    const contentNodes: React.ReactNode[] = new Array<React.ReactNode>();\n\n    this._contentSetMap.clear();\n\n    this.contentPropsList.forEach((contentProps, index) => {\n      if (contentProps.content) {\n        contentNodes.push(contentProps.content);\n        return;\n      }\n\n      // eslint-disable-next-line deprecation/deprecation\n      const control = this.getContentControl(contentProps, index);\n      if (!control) return;\n\n      contentNodes.push(control.reactNode);\n      this._contentSetMap.set(control.controlId, control);\n    });\n\n    return contentNodes;\n  }\n\n  /** Refreshes the React nodes representing the Content Views in this Content Group. */\n  public refreshContentNodes() {\n    this._contentSetMap.clear();\n  }\n\n  /** Called when Frontstage is deactivated. */\n  public onFrontstageDeactivated(): void {\n    this.clearContentControls();\n  }\n\n  /** Called when Frontstage is ready. */\n  public onFrontstageReady(): void {}\n\n  /** Clears the map of content controls. */\n  public clearContentControls(): void {\n    this._contentControls.clear();\n  }\n\n  /** Creates [[ContentGroupProps]] for JSON purposes.\n   * @public\n   */\n  public toJSON(contentCallback?: ContentCallback): ContentGroupProps {\n    const contentGroupProps: ContentGroupProps = {\n      id: this.propsId,\n      layout: this.layout,\n      contents: this.contentPropsList,\n    };\n\n    contentGroupProps.contents.forEach((content, index) => {\n      // eslint-disable-next-line deprecation/deprecation\n      if (typeof content.classId !== \"string\") {\n        const classId = InternalConfigurableUiManager.getConstructorClassId(\n          // eslint-disable-next-line deprecation/deprecation\n          content.classId\n        );\n        // eslint-disable-next-line deprecation/deprecation\n        if (classId !== undefined) content.classId = classId;\n        else\n          throw new UiError( // eslint-disable-line deprecation/deprecation\n            UiFramework.loggerCategory(this),\n            `toJSON: ContentControl at index ${index} is NOT registered with a string id`\n          );\n\n        if (contentCallback) contentCallback(content);\n      }\n    });\n\n    return contentGroupProps;\n  }\n\n  /** Gets Viewports from Viewport Content Controls.\n   * @internal\n   */\n  public getViewports(): Array<ScreenViewport | undefined> {\n    // eslint-disable-next-line deprecation/deprecation\n    const contentControls = this.getContentControls();\n    const viewports = new Array<ScreenViewport | undefined>();\n\n    contentControls.forEach((control) => {\n      if (control.isViewport && control.viewport) {\n        viewports.push(control.viewport);\n      } else {\n        viewports.push(undefined);\n      }\n    });\n\n    return viewports;\n  }\n\n  /* eslint-disable deprecation/deprecation */\n\n  private _contentControls = new Map<string, ContentControl>();\n  private _contentSetMap = new Map<string, ContentControl>();\n\n  /** Gets a [[ContentControl]] from the Content Group based on its [[ContentProps]].\n   * @deprecated in 4.16.0. Uses a deprecated class {@link ContentControl}.\n   */\n  public getContentControl(\n    contentProps: ContentProps,\n    _index: number\n  ): ContentControl | undefined {\n    // ensure we have a unique control Id for each instance of a content control - this will be used as a key for the React control - see `ContentControl.getKeyedReactNode`\n    const id = `${contentProps.id}::${this.groupId}`;\n    let contentControl: ContentControl | undefined;\n\n    if (!this._contentControls.get(contentProps.id)) {\n      let usedClassId: string = \"\";\n\n      if (typeof contentProps.classId === \"string\") {\n        if (\n          !this._contentControls.get(contentProps.id) &&\n          UiFramework.controls.isRegistered(contentProps.classId)\n        ) {\n          contentControl = UiFramework.controls.create(\n            contentProps.classId,\n            id,\n            contentProps.applicationData,\n            contentProps.id\n          ) as ContentControl;\n          usedClassId = contentProps.classId;\n        }\n      } else {\n        const info = new ConfigurableCreateInfo(\n          contentProps.classId.name,\n          id,\n          contentProps.id\n        );\n        contentControl = new contentProps.classId(\n          info,\n          contentProps.applicationData\n        ) as ContentControl;\n        usedClassId = contentProps.classId.name;\n      }\n\n      if (contentControl) {\n        if (\n          contentControl.getType() !== ConfigurableUiControlType.Content &&\n          contentControl.getType() !== ConfigurableUiControlType.Viewport\n        ) {\n          throw new UiError(\n            UiFramework.loggerCategory(this),\n            `getContentControl error: '${usedClassId}' is NOT a ContentControl or ViewportContentControl`\n          );\n        }\n        contentControl.initialize();\n        this._contentControls.set(contentProps.id, contentControl);\n      }\n    }\n\n    return this._contentControls.get(contentProps.id);\n  }\n\n  /** Gets a [[ContentControl]] from the Content Group with a given ID.\n   * @deprecated in 4.16.0. Uses a deprecated class {@link ContentControl}.\n   */\n  public getContentControlById(id: string): ContentControl | undefined {\n    return this._contentControls.get(id);\n  }\n\n  /** Gets the [[ContentControl]] associated with a given React node representing a Content View.\n   * @deprecated in 4.16.0. Uses a deprecated class {@link ContentControl}.\n   */\n  public getControlFromElement(\n    node: React.ReactNode\n  ): ContentControl | undefined {\n    if (this._contentSetMap.size === 0) this.getContentNodes();\n\n    if (node && (node as React.ReactElement<any>).key) {\n      const key = (node as React.ReactElement<any>).key as string;\n      // key has format `${contentProps.id}::${this.groupId}` which is stored as unique id\n      const controlId = key.split(\"::\", 1)[0];\n      return this._contentSetMap.get(controlId);\n    }\n\n    return undefined;\n  }\n\n  /** Gets an array of the content controls representing the Content Views.\n   * @deprecated in 4.16.0. Uses a deprecated class {@link ContentControl}.\n   */\n  public getContentControls(): ContentControl[] {\n    const contentControls: ContentControl[] = new Array<ContentControl>();\n\n    this.contentPropsList.forEach((contentProps, index) => {\n      const control = this.getContentControl(contentProps, index);\n      if (!control) return;\n\n      contentControls.push(control);\n    });\n\n    return contentControls;\n  }\n\n  /* eslint-enable deprecation/deprecation */\n}\n"]}

package/lib/esm/appui-react/content/ContentLayout.d.ts

@@ -3,10 +3,10 @@
  */
 import "./ContentLayout.scss";
 import * as React from "react";
-import type { CommonProps } from "@itwin/core-react";
-import type { ContentGroup } from "./ContentGroup";
 import type { ContentLayoutProps, LayoutFragmentProps } from "@itwin/appui-abstract";
 import { UiEvent } from "@itwin/appui-abstract";
+import type { CommonProps } from "@itwin/core-react";
+import type { ContentGroup } from "./ContentGroup";
 /** Properties for [[ContentWrapper]] */
 interface ContentWrapperProps extends CommonProps {
     content: React.ReactNode;
@@ -15,8 +15,7 @@ interface ContentWrapperProps extends CommonProps {
  * @internal
  */
 export declare function ContentWrapper(props: ContentWrapperProps): React.JSX.Element;
-/** Common interface for HorizontalSplit and VerticalSplit
- */
+/** Common interface for HorizontalSplit and VerticalSplit. */
 interface LayoutSplit {
     createContentContainer(contentNodes: React.ReactNode[], resizable: boolean): React.ReactNode;
     isLocked: boolean;
@@ -32,16 +31,17 @@ export declare class ContentLayoutDef {
     /** Description of the layout. */
     description: string;
     constructor(layoutProps: ContentLayoutProps);
+    /** @deprecated in 4.16.0. Used internally. */
     get rootSplit(): LayoutSplit | undefined;
     /** Creates [[ContentLayoutProps]] for JSON purposes
      * @public
      */
     toJSON(): ContentLayoutProps;
-    /** Fill a layout container with React nodes for each content view
+    /** Fill a layout container with React nodes for each content view.
+     * @deprecated in 4.16.0. Used internally.
      */
     fillLayoutContainer(contentNodes: React.ReactNode[], resizable: boolean): React.ReactNode | undefined;
-    /** Gets the indexes of content views used in this Content Layout
-     */
+    /** Gets the indexes of content views used in this Content Layout. */
     getUsedContentIndexes(): number[];
     private getHorizontalSplitContentIndexes;
     private getVerticalSplitContentIndexes;
@@ -62,13 +62,6 @@ export interface ContentLayoutActivatedEventArgs {
  */
 export declare class ContentLayoutActivatedEvent extends UiEvent<ContentLayoutActivatedEventArgs> {
 }
-/** State for the [[ContentLayout]].
- */
-interface ContentLayoutState {
-    contentLayoutDef: ContentLayoutDef;
-    contentContainer?: React.ReactNode;
-    contentGroupId?: string;
-}
 /** Properties for the [[ContentLayout]] React component.
  * @public
  */
@@ -79,16 +72,6 @@ export interface ContentLayoutComponentProps extends CommonProps {
 /** Content Layout React component.
  * @public
  */
-export declare class ContentLayout extends React.Component<ContentLayoutComponentProps, ContentLayoutState> {
-    /** @internal */
-    readonly state: Readonly<ContentLayoutState>;
-    constructor(props: ContentLayoutComponentProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private _handleContentLayoutActivated;
-    render(): React.ReactNode;
-    private _onMouseDown;
-    private _onMouseUp;
-}
+export declare function ContentLayout(props: ContentLayoutComponentProps): React.JSX.Element | null;
 export {};
 //# sourceMappingURL=ContentLayout.d.ts.map

package/lib/esm/appui-react/content/ContentLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/ContentLayout.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EAIpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKhD,wCAAwC;AAExC,UAAU,mBAAoB,SAAQ,WAAW;IAC/C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBA2FxD;AA4GD;GACG;AACH,UAAU,WAAW;IACnB,sBAAsB,CACpB,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,EAC/B,SAAS,EAAE,OAAO,GACjB,KAAK,CAAC,SAAS,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqKD;;GAEG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,UAAU,CAAC,CAAc;IAEjC,iCAAiC;IAC1B,EAAE,EAAE,MAAM,CAAM;IACvB,iCAAiC;IAC1B,WAAW,EAAE,MAAM,CAAM;gBACpB,WAAW,EAAE,kBAAkB;IAO3C,IAAW,SAAS,IAAI,WAAW,GAAG,SAAS,CAE9C;IAED;;OAEG;IACI,MAAM,IAAI,kBAAkB;IAInC;OACG;IACI,mBAAmB,CACxB,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,EAC/B,SAAS,EAAE,OAAO,GACjB,KAAK,CAAC,SAAS,GAAG,SAAS;IAa9B;OACG;IACI,qBAAqB,IAAI,MAAM,EAAE;IAmBxC,OAAO,CAAC,gCAAgC;IA+BxC,OAAO,CAAC,8BAA8B;IAgCtC,gBAAgB;WACF,WAAW,CACvB,WAAW,EAAE,mBAAmB,GAC/B,WAAW,GAAG,SAAS;CAS3B;AAED;;;GAGG;AACH,MAAM,WAAW,+BAA+B;IAC9C,aAAa,EAAE,gBAAgB,CAAC;IAChC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;;GAGG;AAEH,qBAAa,2BAA4B,SAAQ,OAAO,CAAC,+BAA+B,CAAC;CAAG;AAE5F;GACG;AACH,UAAU,kBAAkB;IAC1B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AAEH,MAAM,WAAW,2BAA4B,SAAQ,WAAW;IAC9D,aAAa,EAAE,gBAAgB,CAAC;IAChC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAChD,2BAA2B,EAC3B,kBAAkB,CACnB;IACC,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC;gBAEjD,KAAK,EAAE,2BAA2B;IAmB9B,iBAAiB;IAMjB,oBAAoB;IAMpC,OAAO,CAAC,6BAA6B,CAiBnC;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IAoBzC,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,UAAU,CAEhB;CACH"}
+{"version":3,"file":"ContentLayout.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/ContentLayout.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EAIpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKnD,wCAAwC;AAExC,UAAU,mBAAoB,SAAQ,WAAW;IAC/C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBA2FxD;AA2GD,8DAA8D;AAC9D,UAAU,WAAW;IACnB,sBAAsB,CACpB,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,EAC/B,SAAS,EAAE,OAAO,GACjB,KAAK,CAAC,SAAS,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqKD;;GAEG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,UAAU,CAAC,CAAc;IAEjC,iCAAiC;IAC1B,EAAE,EAAE,MAAM,CAAM;IACvB,iCAAiC;IAC1B,WAAW,EAAE,MAAM,CAAM;gBACpB,WAAW,EAAE,kBAAkB;IAO3C,8CAA8C;IAC9C,IAAW,SAAS,IAAI,WAAW,GAAG,SAAS,CAE9C;IAED;;OAEG;IACI,MAAM,IAAI,kBAAkB;IAInC;;OAEG;IACI,mBAAmB,CACxB,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,EAC/B,SAAS,EAAE,OAAO,GACjB,KAAK,CAAC,SAAS,GAAG,SAAS;IAe9B,qEAAqE;IAC9D,qBAAqB,IAAI,MAAM,EAAE;IAmBxC,OAAO,CAAC,gCAAgC;IA+BxC,OAAO,CAAC,8BAA8B;IAgCtC,gBAAgB;WACF,WAAW,CACvB,WAAW,EAAE,mBAAmB,GAC/B,WAAW,GAAG,SAAS;CAS3B;AAED;;;GAGG;AACH,MAAM,WAAW,+BAA+B;IAC9C,aAAa,EAAE,gBAAgB,CAAC;IAChC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;;GAGG;AAEH,qBAAa,2BAA4B,SAAQ,OAAO,CAAC,+BAA+B,CAAC;CAAG;AAE5F;;GAEG;AAEH,MAAM,WAAW,2BAA4B,SAAQ,WAAW;IAC9D,aAAa,EAAE,gBAAgB,CAAC;IAChC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,2BAA2B,4BAkD/D"}

package/lib/esm/appui-react/content/ContentLayout.js

@@ -9,18 +9,22 @@
 import "./ContentLayout.scss";
 import classnames from "classnames";
 import * as React from "react";
-import { SplitPane } from "./split-pane/SplitPane";
-import { Orientation } from "@itwin/core-react";
 import { UiEvent } from "@itwin/appui-abstract";
+import { Orientation } from "@itwin/components-react";
+import { SplitPane } from "./split-pane/SplitPane";
 import { useActiveFrontstageDef } from "../frontstage/FrontstageDef";
 import { UiFramework } from "../UiFramework";
+import { ContentOverlay } from "./ContentOverlay";
 /** ContentWrapper React component.
  * @internal
  */
 export function ContentWrapper(props) {
     const { content } = props;
-    const [isActive, setIsActive] = React.useState(content === UiFramework.content.getActive());
     const activeFrontstageDef = useActiveFrontstageDef();
+    const [isActive, setIsActive] = React.useState(() => {
+        // eslint-disable-next-line deprecation/deprecation
+        return content === UiFramework.content.getActive();
+    });
     const contentControlKey = (contentControl) => {
         let controlId;
         if (contentControl && contentControl.key) {
@@ -32,47 +36,48 @@ export function ContentWrapper(props) {
     };
     const [hasMultipleContents, setHasMultipleContents] = React.useState(() => (activeFrontstageDef &&
         !!activeFrontstageDef.floatingContentControls?.length) ||
+        // eslint-disable-next-line deprecation/deprecation
         (activeFrontstageDef?.contentGroup?.getContentControls().length ?? 0) > 1);
     React.useEffect(() => {
+        // eslint-disable-next-line deprecation/deprecation
         setIsActive(content === UiFramework.content.getActive());
     }, [content]);
     React.useEffect(() => {
-        const handleActiveContentChanged = (args // eslint-disable-line deprecation/deprecation
-        ) => {
+        return UiFramework.content.onActiveContentChangedEvent.addListener((args) => {
+            // eslint-disable-next-line deprecation/deprecation
             const contentIsIdentical = content === args.activeContent;
-            if (contentIsIdentical)
+            if (contentIsIdentical) {
                 setIsActive(contentIsIdentical);
+            }
             else {
                 const contentId = contentControlKey(content);
+                // eslint-disable-next-line deprecation/deprecation
                 const activeContentId = contentControlKey(args.activeContent);
-                setIsActive(contentId === activeContentId);
+                setIsActive(!!contentId && contentId === activeContentId);
             }
             setHasMultipleContents((activeFrontstageDef &&
                 !!activeFrontstageDef.floatingContentControls?.length) ||
-                (activeFrontstageDef?.contentGroup?.getContentControls().length ??
-                    0) > 1);
-        };
-        return UiFramework.content.onActiveContentChangedEvent.addListener(handleActiveContentChanged);
+                // eslint-disable-next-line deprecation/deprecation
+                (activeFrontstageDef?.contentGroup?.contentPropsList.length ?? 0) >
+                    1);
+        });
     }, [activeFrontstageDef, content]);
     const handleMouseDown = React.useCallback(() => {
+        // eslint-disable-next-line deprecation/deprecation
         UiFramework.content.setActive(content);
         setIsActive(true);
     }, [content]);
     React.useEffect(() => {
-        const onAvailableContentChanged = () => {
+        return UiFramework.content.onAvailableContentChangedEvent.addListener(() => {
             setHasMultipleContents((activeFrontstageDef &&
                 !!activeFrontstageDef.floatingContentControls?.length) ||
+                // eslint-disable-next-line deprecation/deprecation
                 (activeFrontstageDef?.contentGroup?.getContentControls().length ??
                     0) > 1);
-        };
-        return UiFramework.content.onAvailableContentChangedEvent.addListener(onAvailableContentChanged);
+        });
     }, [activeFrontstageDef]);
-    const overlayClassName = classnames("uifw-contentlayout-overlay-div", isActive && hasMultipleContents
-        ? "uifw-contentlayout-overlay-active"
-        : "uifw-contentlayout-overlay-inactive");
-    return (React.createElement("div", { className: classnames("uifw-contentlayout-wrapper", props.className), style: props.style, onMouseDown: handleMouseDown, onMouseMove: UiFramework.visibility.handleContentMouseMove, role: "presentation" },
-        content,
-        React.createElement("div", { className: overlayClassName })));
+    const active = isActive && hasMultipleContents;
+    return (React.createElement(ContentOverlay, { className: classnames("uifw-contentlayout-wrapper", props.className), style: props.style, active: active, onMouseDown: handleMouseDown, onMouseMove: UiFramework.visibility.handleContentMouseMove, role: "presentation" }, content));
 }
 /** Split Container class.
  */
@@ -113,8 +118,7 @@ class SplitContainer extends React.Component {
                 this.props.contentB)));
     }
 }
-/** Single Content Container class.
- */
+/** Single Content Container class. */
 class SingleContentContainer extends React.Component {
     render() {
         return (React.createElement("div", { className: classnames("uifw-contentlayout-full-size", this.props.className), style: this.props.style, "data-testid": "single-content-container", onMouseMove: UiFramework.visibility.handleContentMouseMove },
@@ -226,6 +230,7 @@ export class ContentLayoutDef {
         if (layoutProps.description !== undefined)
             this.description = layoutProps.description;
     }
+    /** @deprecated in 4.16.0. Used internally. */
     get rootSplit() {
         return this._rootSplit;
     }
@@ -235,19 +240,21 @@ export class ContentLayoutDef {
     toJSON() {
         return this._layoutProps;
     }
-    /** Fill a layout container with React nodes for each content view
+    /** Fill a layout container with React nodes for each content view.
+     * @deprecated in 4.16.0. Used internally.
      */
     fillLayoutContainer(contentNodes, resizable) {
         this._rootSplit = ContentLayoutDef.createSplit(this._layoutProps);
+        // eslint-disable-next-line deprecation/deprecation
         if (this.rootSplit) {
+            // eslint-disable-next-line deprecation/deprecation
             return this.rootSplit.createContentContainer(contentNodes, resizable);
         }
         if (contentNodes.length > 0)
             return React.createElement(SingleContentContainer, { content: contentNodes[0] });
         return undefined;
     }
-    /** Gets the indexes of content views used in this Content Layout
-     */
+    /** Gets the indexes of content views used in this Content Layout. */
     getUsedContentIndexes() {
         let allContentIndexes = [];
         if (!this._layoutProps.horizontalSplit && !this._layoutProps.verticalSplit)
@@ -316,48 +323,30 @@ export class ContentLayoutActivatedEvent extends UiEvent {
 /** Content Layout React component.
  * @public
  */
-export class ContentLayout extends React.Component {
-    constructor(props) {
-        super(props);
-        this._handleContentLayoutActivated = (args // eslint-disable-line deprecation/deprecation
-        ) => {
-            const contentLayoutDef = args.contentLayout;
-            const contentGroup = args.contentGroup;
-            const contentNodes = contentGroup.getContentNodes();
-            const contentContainer = contentLayoutDef.fillLayoutContainer(contentNodes, true);
-            this.setState({
-                contentLayoutDef: args.contentLayout,
-                contentContainer,
-                contentGroupId: contentGroup.groupId,
-            });
-        };
-        this._onMouseDown = (_event) => {
-            UiFramework.content.setMouseDown(true);
-        };
-        this._onMouseUp = (_event) => {
-            UiFramework.content.setMouseDown(false);
-        };
-        const contentLayoutDef = this.props.contentLayout;
-        const contentGroup = this.props.contentGroup;
-        const contentNodes = contentGroup.getContentNodes();
-        const contentContainer = contentLayoutDef.fillLayoutContainer(contentNodes, true);
-        this.state = {
-            contentLayoutDef: this.props.contentLayout,
-            contentContainer,
-            contentGroupId: this.props.contentGroup.groupId,
-        };
-    }
-    componentDidMount() {
-        UiFramework.frontstages.onContentLayoutActivatedEvent.addListener(this._handleContentLayoutActivated);
-    }
-    componentWillUnmount() {
-        UiFramework.frontstages.onContentLayoutActivatedEvent.removeListener(this._handleContentLayoutActivated);
-    }
-    render() {
-        if (this.state.contentContainer) {
-            return (React.createElement("div", { id: "uifw-contentlayout-div", className: this.props.className, style: this.props.style, key: `${this.state.contentGroupId}-${this.state.contentLayoutDef.id}`, onMouseDown: this._onMouseDown, onMouseUp: this._onMouseUp, role: "presentation" }, this.state.contentContainer));
-        }
-        return null;
+export function ContentLayout(props) {
+    const [contentLayoutDef, setContentLayoutDef] = React.useState(props.contentLayout);
+    const [contentGroupId, setContentGroupId] = React.useState(props.contentGroup.groupId);
+    const [contentNodes, setContentNodes] = React.useState(() => {
+        // eslint-disable-next-line deprecation/deprecation
+        return props.contentGroup.getContentNodes();
+    });
+    React.useEffect(() => {
+        return UiFramework.frontstages.onContentLayoutActivatedEvent.addListener((args) => {
+            setContentLayoutDef(args.contentLayout);
+            setContentGroupId(args.contentGroup.groupId);
+            // eslint-disable-next-line deprecation/deprecation
+            setContentNodes(args.contentGroup.getContentNodes());
+        });
+    }, []);
+    // eslint-disable-next-line deprecation/deprecation
+    const contentContainer = contentLayoutDef.fillLayoutContainer(contentNodes, true);
+    if (contentContainer) {
+        return (React.createElement("div", { id: "uifw-contentlayout-div", className: props.className, style: props.style, key: `${contentGroupId}-${contentLayoutDef.id}`, onMouseDown: () => {
+                UiFramework.content.setMouseDown(true);
+            }, onMouseUp: () => {
+                UiFramework.content.setMouseDown(false);
+            }, role: "presentation" }, contentContainer));
     }
+    return null;
 }
 //# sourceMappingURL=ContentLayout.js.map