@itwin/appui-react 5.19.0 → 5.21.0

package/lib/appui-react/navigationaids/SheetNavigationAid.js

@@ -22,6 +22,7 @@ import { SvgChevronLeft, SvgChevronRight } from "@itwin/itwinui-icons-react";
  */
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 export class SheetNavigationAidControl extends NavigationAidControl {
+    static navigationAidId = "SheetNavigationAid";
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     constructor(info, options) {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -32,66 +33,18 @@ export class SheetNavigationAidControl extends NavigationAidControl {
         return "96px";
     }
 }
-SheetNavigationAidControl.navigationAidId = "SheetNavigationAid";
 /** A Sheet Navigation Aid.
  * @public
  */
 export class SheetNavigationAid extends React.Component {
+    _isMounted = false;
+    state = {
+        index: 0,
+        sheetData: [],
+    };
+    _viewport;
     constructor(props) {
         super(props);
-        this._isMounted = false;
-        this.state = {
-            index: 0,
-            sheetData: [],
-        };
-        /** Sets index of newly selected card */
-        this._handleCardSelected = (event) => {
-            event &&
-                this.setState({
-                    index: event.index,
-                });
-        };
-        /** Updates view to the next lowest index in sheetData */
-        this._handleOnClickLeftArrow = () => {
-            this.setState((prevState) => ({
-                index: prevState.index <= 0
-                    ? prevState.sheetData.length - 1
-                    : prevState.index - 1,
-            }), async () => this._updateView());
-        };
-        /** Updates view to next highest index in sheetData */
-        this._handleOnClickRightArrow = () => {
-            this.setState((prevState) => ({
-                index: (prevState.index + 1) % prevState.sheetData.length,
-            }), async () => this._updateView());
-        };
-        /** Handles a Viewport change & synchs the index */
-        this._handleSelectedViewportChanged = (args) => {
-            if (args.current) {
-                this._handleViewportChanged(args.current);
-            }
-        };
-        this._handleViewIdChanged = (args) => {
-            if (this._viewport === args.viewport)
-                this._handleViewportChanged(args.viewport);
-        };
-        /** Handles a Viewport change & synchs the index */
-        this._handleViewportChanged = (viewport) => {
-            const className = ViewUtilities.getBisBaseClass(viewport.view.classFullName);
-            if (ViewUtilities.isSheet(className)) {
-                this._viewport = viewport;
-                const viewId = this._viewport.view.id.toString();
-                const index = this.state.sheetData.findIndex((sheetData) => {
-                    return viewId === sheetData.viewId;
-                });
-                if (index >= 0)
-                    this.setState({ index });
-            }
-        };
-        /** Opens a new SheetsModelFrontstage on sheetName click */
-        this._handleOnClickSheetName = () => {
-            UiFramework.frontstages.openModalFrontstage(this.modalFrontstage());
-        };
         this._viewport = IModelApp.viewManager.selectedView;
     }
     /** Adds listeners when components mounts */
@@ -171,6 +124,50 @@ export class SheetNavigationAid extends React.Component {
         }
         return (React.createElement("div", { className: classnames("uifw-sheet-navigation", this.props.className), style: this.props.style }, content));
     }
+    /** Sets index of newly selected card */
+    _handleCardSelected = (event) => {
+        event &&
+            this.setState({
+                index: event.index,
+            });
+    };
+    /** Updates view to the next lowest index in sheetData */
+    _handleOnClickLeftArrow = () => {
+        this.setState((prevState) => ({
+            index: prevState.index <= 0
+                ? prevState.sheetData.length - 1
+                : prevState.index - 1,
+        }), async () => this._updateView());
+    };
+    /** Updates view to next highest index in sheetData */
+    _handleOnClickRightArrow = () => {
+        this.setState((prevState) => ({
+            index: (prevState.index + 1) % prevState.sheetData.length,
+        }), async () => this._updateView());
+    };
+    /** Handles a Viewport change & synchs the index */
+    _handleSelectedViewportChanged = (args) => {
+        if (args.current) {
+            this._handleViewportChanged(args.current);
+        }
+    };
+    _handleViewIdChanged = (args) => {
+        if (this._viewport === args.viewport)
+            this._handleViewportChanged(args.viewport);
+    };
+    /** Handles a Viewport change & synchs the index */
+    _handleViewportChanged = (viewport) => {
+        const className = ViewUtilities.getBisBaseClass(viewport.view.classFullName);
+        if (ViewUtilities.isSheet(className)) {
+            this._viewport = viewport;
+            const viewId = this._viewport.view.id.toString();
+            const index = this.state.sheetData.findIndex((sheetData) => {
+                return viewId === sheetData.viewId;
+            });
+            if (index >= 0)
+                this.setState({ index });
+        }
+    };
     /** Updates view to currently set sheet */
     async _updateView() {
         const viewState = await this.props.iModelConnection.views.load(this.state.sheetData[this.state.index].viewId);
@@ -181,5 +178,9 @@ export class SheetNavigationAid extends React.Component {
     modalFrontstage() {
         return new SheetsModalFrontstage(this.state.sheetData, this.props.iModelConnection, this.state.index);
     }
+    /** Opens a new SheetsModelFrontstage on sheetName click */
+    _handleOnClickSheetName = () => {
+        UiFramework.frontstages.openModalFrontstage(this.modalFrontstage());
+    };
 }
 //# sourceMappingURL=SheetNavigationAid.js.map

package/lib/appui-react/navigationaids/SheetNavigationAid.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetNavigationAid.js","sourceRoot":"","sources":["../../../src/appui-react/navigationaids/SheetNavigationAid.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 NavigationAids\n */\n\nimport \"./SheetNavigationAid.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  IModelConnection,\n  ScreenViewport,\n  SelectedViewportChangedArgs,\n} from \"@itwin/core-frontend\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { ViewportComponentEvents } from \"@itwin/imodel-components-react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { ListenerType } from \"@itwin/core-react/internal\";\nimport type { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl.js\";\nimport type { ModalFrontstageInfo } from \"../framework/FrameworkFrontstages.js\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { ViewUtilities } from \"../utils/ViewUtilities.js\";\nimport { NavigationAidControl } from \"./NavigationAidControl.js\";\nimport {\n  CardContainer,\n  SheetsModalFrontstage,\n} from \"./SheetsModalFrontstage.js\";\nimport { IconButton, ProgressRadial } from \"@itwin/itwinui-react\";\nimport { SvgChevronLeft, SvgChevronRight } from \"@itwin/itwinui-icons-react\";\n\n/** A Sheet Navigation Aid control.\n * @public\n * @deprecated in 4.16.0. Use {@link SheetNavigationAid} component instead.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport class SheetNavigationAidControl extends NavigationAidControl {\n  public static navigationAidId = \"SheetNavigationAid\";\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    super(info, options);\n    this.reactNode = <SheetNavigationAid iModelConnection={options.imodel} />;\n  }\n\n  public override getSize(): string | undefined {\n    return \"96px\";\n  }\n}\n\n/** Data displayed about sheet\n * @alpha\n */\nexport interface SheetData {\n  name: string;\n  viewId: string;\n}\n\n/** Properties for the [[SheetNavigationAid]] component\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface SheetNavigationProps extends CommonProps {\n  iModelConnection: IModelConnection;\n}\n\ninterface SheetNavigationState {\n  index: number;\n  sheetData: SheetData[];\n}\n\n/** A Sheet Navigation Aid.\n * @public\n */\nexport class SheetNavigationAid extends React.Component<\n  SheetNavigationProps,\n  SheetNavigationState\n> {\n  private _isMounted = false;\n\n  public override readonly state: Readonly<SheetNavigationState> = {\n    index: 0,\n    sheetData: [],\n  };\n\n  private _viewport: ScreenViewport | undefined;\n\n  constructor(props: SheetNavigationProps) {\n    super(props);\n\n    this._viewport = IModelApp.viewManager.selectedView;\n  }\n\n  /** Adds listeners when components mounts */\n  public override async componentDidMount() {\n    this._isMounted = true;\n\n    CardContainer.onCardSelectedEvent.addListener(this._handleCardSelected);\n    ViewportComponentEvents.onViewIdChangedEvent.addListener(\n      this._handleViewIdChanged\n    );\n\n    IModelApp.viewManager.onSelectedViewportChanged.addListener(\n      this._handleSelectedViewportChanged\n    );\n\n    const stateData = await this._setupSheets();\n\n    if (this._isMounted) this.setState(stateData);\n  }\n\n  /** Removes listeners when component will unmount */\n  public override componentWillUnmount() {\n    this._isMounted = false;\n\n    CardContainer.onCardSelectedEvent.removeListener(this._handleCardSelected);\n    ViewportComponentEvents.onViewIdChangedEvent.removeListener(\n      this._handleViewIdChanged\n    );\n\n    IModelApp.viewManager.onSelectedViewportChanged.removeListener(\n      this._handleSelectedViewportChanged\n    );\n  }\n\n  /** Queries for sheet info and sets as sheetData */\n  private async _setupSheets(): Promise<SheetNavigationState> {\n    const stateData: SheetNavigationState = {\n      index: 0,\n      sheetData: [],\n    };\n\n    if (\n      !this.props.iModelConnection ||\n      !this.props.iModelConnection.views.getViewList\n    )\n      return stateData;\n\n    let viewId = \"\";\n    if (this._viewport) {\n      viewId = this._viewport.view.id.toString();\n    }\n\n    const sheets = await this.props.iModelConnection.views.getViewList({\n      from: \"BisCore.SheetViewDefinition\",\n    });\n    sheets.forEach((viewSpec: IModelConnection.ViewSpec, index: number) => {\n      stateData.sheetData.push({ name: viewSpec.name, viewId: viewSpec.id });\n      if (viewSpec.id === viewId) stateData.index = index;\n    });\n\n    return stateData;\n  }\n\n  public override render(): React.ReactNode {\n    const name =\n      this.state.sheetData.length > 0\n        ? this.state.sheetData[this.state.index].name\n        : \"\";\n    const leftIndex =\n      this.state.index === 0\n        ? this.state.sheetData.length - 1\n        : this.state.index - 1;\n    const rightIndex =\n      this.state.index >= this.state.sheetData.length - 1\n        ? 0\n        : this.state.index + 1;\n    const leftTitle = this.state.sheetData[leftIndex]\n      ? this.state.sheetData[leftIndex].name\n      : undefined;\n    const rightTitle = this.state.sheetData[rightIndex]\n      ? this.state.sheetData[rightIndex].name\n      : undefined;\n\n    let content: React.ReactNode;\n    if (this.state.sheetData.length > 0) {\n      content = (\n        <>\n          <div className=\"sheet-title\">\n            {UiFramework.translate(\"general.sheet\")}\n          </div>\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n          <div\n            className=\"sheet-name\"\n            title={name}\n            onClick={this._handleOnClickSheetName}\n            role=\"button\"\n            tabIndex={-1}\n          >\n            {name}\n          </div>\n          <div className=\"sheet-container\">\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n            <IconButton\n              size=\"small\"\n              styleType=\"borderless\"\n              onClick={this._handleOnClickLeftArrow}\n              tabIndex={-1}\n              label={leftTitle}\n            >\n              <SvgChevronLeft />\n            </IconButton>\n            <div>\n              {this.state.index + 1} {UiFramework.translate(\"general.of\")}\n              {this.state.sheetData.length}\n            </div>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n            <IconButton\n              size=\"small\"\n              styleType=\"borderless\"\n              onClick={this._handleOnClickRightArrow}\n              role=\"button\"\n              tabIndex={-1}\n              label={rightTitle}\n            >\n              <SvgChevronRight />\n            </IconButton>\n          </div>\n        </>\n      );\n    } else {\n      content = <ProgressRadial size=\"x-small\" indeterminate />;\n    }\n\n    return (\n      <div\n        className={classnames(\"uifw-sheet-navigation\", this.props.className)}\n        style={this.props.style}\n      >\n        {content}\n      </div>\n    );\n  }\n\n  /** Sets index of newly selected card */\n  private _handleCardSelected: ListenerType<\n    typeof CardContainer.onCardSelectedEvent\n  > = (event) => {\n    event &&\n      this.setState({\n        index: event.index,\n      });\n  };\n\n  /** Updates view to the next lowest index in sheetData */\n  private _handleOnClickLeftArrow = () => {\n    this.setState(\n      (prevState) => ({\n        index:\n          prevState.index <= 0\n            ? prevState.sheetData.length - 1\n            : prevState.index - 1,\n      }),\n      async () => this._updateView()\n    );\n  };\n\n  /** Updates view to next highest index in sheetData */\n  private _handleOnClickRightArrow = () => {\n    this.setState(\n      (prevState) => ({\n        index: (prevState.index + 1) % prevState.sheetData.length,\n      }),\n      async () => this._updateView()\n    );\n  };\n\n  /** Handles a Viewport change & synchs the index */\n  private _handleSelectedViewportChanged = (\n    args: SelectedViewportChangedArgs\n  ) => {\n    if (args.current) {\n      this._handleViewportChanged(args.current);\n    }\n  };\n\n  private _handleViewIdChanged: ListenerType<\n    typeof ViewportComponentEvents.onViewIdChangedEvent\n  > = (args) => {\n    if (this._viewport === args.viewport)\n      this._handleViewportChanged(args.viewport as ScreenViewport);\n  };\n\n  /** Handles a Viewport change & synchs the index */\n  private _handleViewportChanged = (viewport: ScreenViewport) => {\n    const className = ViewUtilities.getBisBaseClass(\n      viewport.view.classFullName\n    );\n\n    if (ViewUtilities.isSheet(className)) {\n      this._viewport = viewport;\n\n      const viewId = this._viewport.view.id.toString();\n\n      const index = this.state.sheetData.findIndex((sheetData: SheetData) => {\n        return viewId === sheetData.viewId;\n      });\n\n      if (index >= 0) this.setState({ index });\n    }\n  };\n\n  /** Updates view to currently set sheet */\n  private async _updateView() {\n    const viewState = await this.props.iModelConnection.views.load(\n      this.state.sheetData[this.state.index].viewId\n    );\n    if (this._viewport) this._viewport.changeView(viewState);\n  }\n\n  /** Creates a new SheetsModalFrontstage */\n  private modalFrontstage(): ModalFrontstageInfo {\n    return new SheetsModalFrontstage(\n      this.state.sheetData,\n      this.props.iModelConnection,\n      this.state.index\n    );\n  }\n\n  /** Opens a new SheetsModelFrontstage on sheetName click */\n  private _handleOnClickSheetName = () => {\n    UiFramework.frontstages.openModalFrontstage(this.modalFrontstage());\n  };\n}\n"]}
+{"version":3,"file":"SheetNavigationAid.js","sourceRoot":"","sources":["../../../src/appui-react/navigationaids/SheetNavigationAid.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 NavigationAids\n */\n\nimport \"./SheetNavigationAid.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  IModelConnection,\n  ScreenViewport,\n  SelectedViewportChangedArgs,\n} from \"@itwin/core-frontend\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { ViewportComponentEvents } from \"@itwin/imodel-components-react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { ListenerType } from \"@itwin/core-react/internal\";\nimport type { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl.js\";\nimport type { ModalFrontstageInfo } from \"../framework/FrameworkFrontstages.js\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { ViewUtilities } from \"../utils/ViewUtilities.js\";\nimport { NavigationAidControl } from \"./NavigationAidControl.js\";\nimport {\n  CardContainer,\n  SheetsModalFrontstage,\n} from \"./SheetsModalFrontstage.js\";\nimport { IconButton, ProgressRadial } from \"@itwin/itwinui-react\";\nimport { SvgChevronLeft, SvgChevronRight } from \"@itwin/itwinui-icons-react\";\n\n/** A Sheet Navigation Aid control.\n * @public\n * @deprecated in 4.16.0. Use {@link SheetNavigationAid} component instead.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport class SheetNavigationAidControl extends NavigationAidControl {\n  public static navigationAidId = \"SheetNavigationAid\";\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    super(info, options);\n    this.reactNode = <SheetNavigationAid iModelConnection={options.imodel} />;\n  }\n\n  public override getSize(): string | undefined {\n    return \"96px\";\n  }\n}\n\n/** Data displayed about sheet\n * @alpha\n */\nexport interface SheetData {\n  name: string;\n  viewId: string;\n}\n\n/** Properties for the [[SheetNavigationAid]] component\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface SheetNavigationProps extends CommonProps {\n  iModelConnection: IModelConnection;\n}\n\ninterface SheetNavigationState {\n  index: number;\n  sheetData: SheetData[];\n}\n\n/** A Sheet Navigation Aid.\n * @public\n */\nexport class SheetNavigationAid extends React.Component<\n  SheetNavigationProps,\n  SheetNavigationState\n> {\n  private _isMounted = false;\n\n  public override readonly state: Readonly<SheetNavigationState> = {\n    index: 0,\n    sheetData: [],\n  };\n\n  private _viewport: ScreenViewport | undefined;\n\n  constructor(props: SheetNavigationProps) {\n    super(props);\n\n    this._viewport = IModelApp.viewManager.selectedView;\n  }\n\n  /** Adds listeners when components mounts */\n  public override async componentDidMount() {\n    this._isMounted = true;\n\n    CardContainer.onCardSelectedEvent.addListener(this._handleCardSelected);\n    ViewportComponentEvents.onViewIdChangedEvent.addListener(\n      this._handleViewIdChanged\n    );\n\n    IModelApp.viewManager.onSelectedViewportChanged.addListener(\n      this._handleSelectedViewportChanged\n    );\n\n    const stateData = await this._setupSheets();\n\n    if (this._isMounted) this.setState(stateData);\n  }\n\n  /** Removes listeners when component will unmount */\n  public override componentWillUnmount() {\n    this._isMounted = false;\n\n    CardContainer.onCardSelectedEvent.removeListener(this._handleCardSelected);\n    ViewportComponentEvents.onViewIdChangedEvent.removeListener(\n      this._handleViewIdChanged\n    );\n\n    IModelApp.viewManager.onSelectedViewportChanged.removeListener(\n      this._handleSelectedViewportChanged\n    );\n  }\n\n  /** Queries for sheet info and sets as sheetData */\n  private async _setupSheets(): Promise<SheetNavigationState> {\n    const stateData: SheetNavigationState = {\n      index: 0,\n      sheetData: [],\n    };\n\n    if (\n      !this.props.iModelConnection ||\n      !this.props.iModelConnection.views.getViewList\n    )\n      return stateData;\n\n    let viewId = \"\";\n    if (this._viewport) {\n      viewId = this._viewport.view.id.toString();\n    }\n\n    const sheets = await this.props.iModelConnection.views.getViewList({\n      from: \"BisCore.SheetViewDefinition\",\n    });\n    sheets.forEach((viewSpec: IModelConnection.ViewSpec, index: number) => {\n      stateData.sheetData.push({ name: viewSpec.name, viewId: viewSpec.id });\n      if (viewSpec.id === viewId) stateData.index = index;\n    });\n\n    return stateData;\n  }\n\n  public override render(): React.ReactNode {\n    const name =\n      this.state.sheetData.length > 0\n        ? this.state.sheetData[this.state.index].name\n        : \"\";\n    const leftIndex =\n      this.state.index === 0\n        ? this.state.sheetData.length - 1\n        : this.state.index - 1;\n    const rightIndex =\n      this.state.index >= this.state.sheetData.length - 1\n        ? 0\n        : this.state.index + 1;\n    const leftTitle = this.state.sheetData[leftIndex]\n      ? this.state.sheetData[leftIndex].name\n      : undefined;\n    const rightTitle = this.state.sheetData[rightIndex]\n      ? this.state.sheetData[rightIndex].name\n      : undefined;\n\n    let content: React.ReactNode;\n    if (this.state.sheetData.length > 0) {\n      content = (\n        <>\n          <div className=\"sheet-title\">\n            {UiFramework.translate(\"general.sheet\")}\n          </div>\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n          <div\n            className=\"sheet-name\"\n            title={name}\n            onClick={this._handleOnClickSheetName}\n            role=\"button\"\n            tabIndex={-1}\n          >\n            {name}\n          </div>\n          <div className=\"sheet-container\">\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n            <IconButton\n              size=\"small\"\n              styleType=\"borderless\"\n              onClick={this._handleOnClickLeftArrow}\n              tabIndex={-1}\n              label={leftTitle}\n            >\n              <SvgChevronLeft />\n            </IconButton>\n            <div>\n              {this.state.index + 1} {UiFramework.translate(\"general.of\")}\n              {this.state.sheetData.length}\n            </div>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n            <IconButton\n              size=\"small\"\n              styleType=\"borderless\"\n              onClick={this._handleOnClickRightArrow}\n              role=\"button\"\n              tabIndex={-1}\n              label={rightTitle}\n            >\n              <SvgChevronRight />\n            </IconButton>\n          </div>\n        </>\n      );\n    } else {\n      content = <ProgressRadial size=\"x-small\" indeterminate />;\n    }\n\n    return (\n      <div\n        className={classnames(\"uifw-sheet-navigation\", this.props.className)}\n        style={this.props.style}\n      >\n        {content}\n      </div>\n    );\n  }\n\n  /** Sets index of newly selected card */\n  private _handleCardSelected: ListenerType<\n    typeof CardContainer.onCardSelectedEvent\n  > = (event) => {\n    event &&\n      this.setState({\n        index: event.index,\n      });\n  };\n\n  /** Updates view to the next lowest index in sheetData */\n  private _handleOnClickLeftArrow = () => {\n    this.setState(\n      (prevState) => ({\n        index:\n          prevState.index <= 0\n            ? prevState.sheetData.length - 1\n            : prevState.index - 1,\n      }),\n      async () => this._updateView()\n    );\n  };\n\n  /** Updates view to next highest index in sheetData */\n  private _handleOnClickRightArrow = () => {\n    this.setState(\n      (prevState) => ({\n        index: (prevState.index + 1) % prevState.sheetData.length,\n      }),\n      async () => this._updateView()\n    );\n  };\n\n  /** Handles a Viewport change & synchs the index */\n  private _handleSelectedViewportChanged = (\n    args: SelectedViewportChangedArgs\n  ) => {\n    if (args.current) {\n      this._handleViewportChanged(args.current);\n    }\n  };\n\n  private _handleViewIdChanged: ListenerType<\n    typeof ViewportComponentEvents.onViewIdChangedEvent\n  > = (args) => {\n    if (this._viewport === args.viewport)\n      this._handleViewportChanged(args.viewport as ScreenViewport);\n  };\n\n  /** Handles a Viewport change & synchs the index */\n  private _handleViewportChanged = (viewport: ScreenViewport) => {\n    const className = ViewUtilities.getBisBaseClass(\n      viewport.view.classFullName\n    );\n\n    if (ViewUtilities.isSheet(className)) {\n      this._viewport = viewport;\n\n      const viewId = this._viewport.view.id.toString();\n\n      const index = this.state.sheetData.findIndex((sheetData: SheetData) => {\n        return viewId === sheetData.viewId;\n      });\n\n      if (index >= 0) this.setState({ index });\n    }\n  };\n\n  /** Updates view to currently set sheet */\n  private async _updateView() {\n    const viewState = await this.props.iModelConnection.views.load(\n      this.state.sheetData[this.state.index].viewId\n    );\n    if (this._viewport) this._viewport.changeView(viewState);\n  }\n\n  /** Creates a new SheetsModalFrontstage */\n  private modalFrontstage(): ModalFrontstageInfo {\n    return new SheetsModalFrontstage(\n      this.state.sheetData,\n      this.props.iModelConnection,\n      this.state.index\n    );\n  }\n\n  /** Opens a new SheetsModelFrontstage on sheetName click */\n  private _handleOnClickSheetName = () => {\n    UiFramework.frontstages.openModalFrontstage(this.modalFrontstage());\n  };\n}\n"]}

package/lib/appui-react/navigationaids/SheetsModalFrontstage.js

@@ -25,20 +25,17 @@ export class CardSelectedEvent extends UiEvent {
  * @alpha
  */
 export class SheetsModalFrontstage {
+    title = UiFramework.translate("navigationAid.sheetsModalFrontstage");
+    _cards = [];
+    _connection;
+    _currentIndex;
+    _searchValue = "";
     /**
      * Creates a SheetsModalFrontstage
      * @param sheets Collection of sheets available in SheetNavigationAid
      * @param connection IModelConnection to query for sheet ViewState
      */
     constructor(sheets, connection, currentIndex) {
-        this.title = UiFramework.translate("navigationAid.sheetsModalFrontstage");
-        this._cards = [];
-        this._searchValue = "";
-        /** Updates stage based on search value */
-        this._handleSearchValueChanged = (value) => {
-            this._searchValue = value;
-            UiFramework.frontstages.updateModalFrontstage();
-        };
         this._connection = connection;
         this._currentIndex = currentIndex;
         this._storeSheetsAsCards(sheets);
@@ -68,11 +65,18 @@ export class SheetsModalFrontstage {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         React.createElement(SearchBox, { placeholder: UiFramework.translate("general.search"), onValueChanged: this._handleSearchValueChanged, valueChangedDelay: 250 }));
     }
+    /** Updates stage based on search value */
+    _handleSearchValueChanged = (value) => {
+        this._searchValue = value;
+        UiFramework.frontstages.updateModalFrontstage();
+    };
 }
 /** Displays cards in SheetModalFrontstage
  * @alpha
  */
 export class CardContainer extends React.Component {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    static _cardSelectedEvent = new BeUiEvent();
     /** Get CardSelectedEvent event */
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     static get onCardSelectedEvent() {
@@ -126,26 +130,24 @@ export class CardContainer extends React.Component {
         });
     }
 }
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-CardContainer._cardSelectedEvent = new BeUiEvent();
 /** Displays information about an individual sheet
  * @alpha
  */
 export class SheetCard extends React.Component {
     constructor(props) {
         super(props);
-        this._onClick = () => {
-            this.setState({ isActive: true }, () => this.props.onClick());
-        };
-        this._onMouseDown = () => {
-            this.setState({ isPressed: true });
-        };
-        this._onMouseLeave = () => {
-            if (this.state.isPressed)
-                this.setState({ isPressed: false });
-        };
         this.state = { isActive: this.props.isActive, isPressed: false };
     }
+    _onClick = () => {
+        this.setState({ isActive: true }, () => this.props.onClick());
+    };
+    _onMouseDown = () => {
+        this.setState({ isPressed: true });
+    };
+    _onMouseLeave = () => {
+        if (this.state.isPressed)
+            this.setState({ isPressed: false });
+    };
     render() {
         const { label, index } = this.props;
         const className = classnames("uifw-sheet-card", this.state.isActive && "is-active", this.state.isPressed && "is-pressed");

package/lib/appui-react/navigationaids/SheetsModalFrontstage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetsModalFrontstage.js","sourceRoot":"","sources":["../../../src/appui-react/navigationaids/SheetsModalFrontstage.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 NavigationAids\n */\n\nimport \"./SheetsModalFrontstage.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { UiEvent } from \"@itwin/appui-abstract\";\nimport type { CommonProps, IconSpec } from \"@itwin/core-react\";\nimport {\n  FlexWrapContainer,\n  Icon,\n  ScrollView,\n  SearchBox,\n} from \"@itwin/core-react\";\nimport type { ModalFrontstageInfo } from \"../framework/FrameworkFrontstages.js\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport type { SheetData } from \"./SheetNavigationAid.js\";\nimport { SvgDocument, SvgPlaceholder } from \"@itwin/itwinui-icons-react\";\nimport { BeUiEvent } from \"@itwin/core-bentley\";\n\n/** Data about a sheet card\n * @alpha\n */\nexport interface CardInfo {\n  index: number;\n  label: string;\n  /** @deprecated in 4.16.0. Use {@link CardInfo.icon} instead. */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  iconSpec: IconSpec;\n  icon?: React.ReactNode;\n  isActive: boolean;\n  viewId: any;\n}\n\n/** Arguments for CardSelectedEvent\n * @alpha\n * @deprecated in 4.13.0. Event args are inferred from a listener. If explicit type is needed use a type helper.\n */\nexport interface CardSelectedEventArgs {\n  id: any;\n  index: number;\n}\n\n/** Class for CardSelectedEvent\n * @alpha\n * @deprecated in 4.13.0. This class should not be used by applications to instantiate objects.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport class CardSelectedEvent extends UiEvent<CardSelectedEventArgs> {}\n\n/** Modal frontstage displaying sheet information in cards.\n * @alpha\n */\nexport class SheetsModalFrontstage implements ModalFrontstageInfo {\n  public title = UiFramework.translate(\"navigationAid.sheetsModalFrontstage\");\n  private _cards: CardInfo[] = [];\n  private _connection: IModelConnection;\n  private _currentIndex: number;\n  private _searchValue: string = \"\";\n\n  /**\n   * Creates a SheetsModalFrontstage\n   * @param sheets Collection of sheets available in SheetNavigationAid\n   * @param connection IModelConnection to query for sheet ViewState\n   */\n  constructor(\n    sheets: SheetData[],\n    connection: IModelConnection,\n    currentIndex: number\n  ) {\n    this._connection = connection;\n    this._currentIndex = currentIndex;\n    this._storeSheetsAsCards(sheets);\n  }\n\n  /**\n   * Gathers card info from available sheets\n   * @param sheets SheetData from available sheets\n   */\n  private _storeSheetsAsCards(sheets: SheetData[]) {\n    sheets.forEach((sheet: SheetData, index: number) => {\n      this._cards.push({\n        index,\n        label: sheet.name,\n        iconSpec: <SvgDocument />,\n        viewId: sheet.viewId,\n        isActive: index === this._currentIndex,\n      });\n    });\n  }\n\n  /** Gets set of cards */\n  public get content(): React.ReactNode {\n    return (\n      <CardContainer\n        cards={this._cards}\n        searchValue={this._searchValue}\n        connection={this._connection}\n      />\n    );\n  }\n\n  /** Gets components to be placed in the app bar */\n  public get appBarRight(): React.ReactNode {\n    return (\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      <SearchBox\n        placeholder={UiFramework.translate(\"general.search\")}\n        onValueChanged={this._handleSearchValueChanged}\n        valueChangedDelay={250}\n      />\n    );\n  }\n\n  /** Updates stage based on search value */\n  private _handleSearchValueChanged = (value: string): void => {\n    this._searchValue = value;\n    UiFramework.frontstages.updateModalFrontstage();\n  };\n}\n\n/** Properties for [[CardContainer]]\n * @alpha\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface CardContainerProps extends CommonProps {\n  cards: CardInfo[];\n  searchValue: string;\n  connection: IModelConnection;\n}\n\n/** Displays cards in SheetModalFrontstage\n * @alpha\n */\nexport class CardContainer extends React.Component<CardContainerProps> {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  private static _cardSelectedEvent = new BeUiEvent<CardSelectedEventArgs>();\n\n  /** Get CardSelectedEvent event */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  public static get onCardSelectedEvent(): CardSelectedEvent {\n    return CardContainer._cardSelectedEvent;\n  }\n\n  public override render() {\n    return (\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      <ScrollView className={this.props.className} style={this.props.style}>\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <FlexWrapContainer>\n          {this.props.cards.map((card: CardInfo, _index: number) => {\n            let includeCard = true;\n            if (this.props.searchValue) {\n              includeCard = this.contains(card.label, this.props.searchValue);\n            }\n\n            if (includeCard) {\n              return (\n                <SheetCard\n                  key={card.label}\n                  label={card.label}\n                  index={card.index}\n                  // eslint-disable-next-line @typescript-eslint/no-deprecated\n                  iconSpec={card.iconSpec}\n                  icon={card.icon}\n                  isActive={card.isActive}\n                  onClick={async () => this._handleCardSelected(card)}\n                />\n              );\n            }\n\n            return null;\n          })}\n        </FlexWrapContainer>\n      </ScrollView>\n    );\n  }\n\n  /**\n   * Determines if string contains a substring\n   * @param valueA The string to search through\n   * @param valueB The value to search for\n   * @return True if valueB can be found in valueA, false otherwise\n   */\n  private contains(valueA: string, valueB: string): boolean {\n    if (!valueA || !valueB) return false;\n\n    if (valueB.length > valueA.length) return false;\n\n    return (\n      valueA.toLocaleUpperCase().indexOf(valueB.toLocaleUpperCase(), 0) !== -1\n    );\n  }\n\n  /**\n   * Updates view with ViewState for selected card.\n   * @param card Data about the sheet card selected.\n   */\n  private async _handleCardSelected(card: CardInfo) {\n    if (IModelApp.viewManager && IModelApp.viewManager.selectedView) {\n      const vp = IModelApp.viewManager.selectedView;\n      const viewState = await this.props.connection.views.load(card.viewId);\n      vp.changeView(viewState);\n    }\n\n    card.isActive = true;\n    UiFramework.frontstages.closeModalFrontstage();\n    CardContainer.onCardSelectedEvent.emit({\n      id: card.viewId,\n      index: card.index,\n    });\n  }\n}\n\n/** Properties for [[SheetCard]]\n * @alpha\n */\nexport interface SheetCardProps {\n  label: string;\n  index: number;\n  /** @deprecated in 4.16.0. Use {@link SheetCardProps.icon} instead. */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  iconSpec: IconSpec;\n  icon?: React.ReactNode;\n  isActive: boolean;\n  onClick: () => void;\n}\n\n/** State for [[SheetCard]]\n * @internal\n */\ninterface SheetCardState {\n  isActive: boolean;\n  isPressed: boolean;\n}\n\n/** Displays information about an individual sheet\n * @alpha\n */\nexport class SheetCard extends React.Component<SheetCardProps, SheetCardState> {\n  constructor(props: SheetCardProps) {\n    super(props);\n    this.state = { isActive: this.props.isActive, isPressed: false };\n  }\n\n  private _onClick = () => {\n    this.setState({ isActive: true }, () => this.props.onClick());\n  };\n\n  private _onMouseDown = () => {\n    this.setState({ isPressed: true });\n  };\n\n  private _onMouseLeave = () => {\n    if (this.state.isPressed) this.setState({ isPressed: false });\n  };\n\n  public override render() {\n    const { label, index } = this.props;\n\n    const className = classnames(\n      \"uifw-sheet-card\",\n      this.state.isActive && \"is-active\",\n      this.state.isPressed && \"is-pressed\"\n    );\n\n    const icon =\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      this.props.icon ?? this.props.iconSpec ? (\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        <Icon iconSpec={this.props.iconSpec} />\n      ) : (\n        <SvgPlaceholder />\n      );\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        className={className}\n        onClick={this._onClick}\n        onMouseDown={this._onMouseDown}\n        onMouseLeave={this._onMouseLeave}\n        role=\"button\"\n        tabIndex={-1}\n      >\n        {label}\n        <div className=\"sheet-image-container\">\n          <div className=\"icon\">{icon}</div>\n        </div>\n        <div className=\"sheet-index\">{index + 1}</div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"SheetsModalFrontstage.js","sourceRoot":"","sources":["../../../src/appui-react/navigationaids/SheetsModalFrontstage.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 NavigationAids\n */\n\nimport \"./SheetsModalFrontstage.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { UiEvent } from \"@itwin/appui-abstract\";\nimport type { CommonProps, IconSpec } from \"@itwin/core-react\";\nimport {\n  FlexWrapContainer,\n  Icon,\n  ScrollView,\n  SearchBox,\n} from \"@itwin/core-react\";\nimport type { ModalFrontstageInfo } from \"../framework/FrameworkFrontstages.js\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport type { SheetData } from \"./SheetNavigationAid.js\";\nimport { SvgDocument, SvgPlaceholder } from \"@itwin/itwinui-icons-react\";\nimport { BeUiEvent } from \"@itwin/core-bentley\";\n\n/** Data about a sheet card\n * @alpha\n */\nexport interface CardInfo {\n  index: number;\n  label: string;\n  /** @deprecated in 4.16.0. Use {@link CardInfo.icon} instead. */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  iconSpec: IconSpec;\n  icon?: React.ReactNode;\n  isActive: boolean;\n  viewId: any;\n}\n\n/** Arguments for CardSelectedEvent\n * @alpha\n * @deprecated in 4.13.0. Event args are inferred from a listener. If explicit type is needed use a type helper.\n */\nexport interface CardSelectedEventArgs {\n  id: any;\n  index: number;\n}\n\n/** Class for CardSelectedEvent\n * @alpha\n * @deprecated in 4.13.0. This class should not be used by applications to instantiate objects.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport class CardSelectedEvent extends UiEvent<CardSelectedEventArgs> {}\n\n/** Modal frontstage displaying sheet information in cards.\n * @alpha\n */\nexport class SheetsModalFrontstage implements ModalFrontstageInfo {\n  public title = UiFramework.translate(\"navigationAid.sheetsModalFrontstage\");\n  private _cards: CardInfo[] = [];\n  private _connection: IModelConnection;\n  private _currentIndex: number;\n  private _searchValue: string = \"\";\n\n  /**\n   * Creates a SheetsModalFrontstage\n   * @param sheets Collection of sheets available in SheetNavigationAid\n   * @param connection IModelConnection to query for sheet ViewState\n   */\n  constructor(\n    sheets: SheetData[],\n    connection: IModelConnection,\n    currentIndex: number\n  ) {\n    this._connection = connection;\n    this._currentIndex = currentIndex;\n    this._storeSheetsAsCards(sheets);\n  }\n\n  /**\n   * Gathers card info from available sheets\n   * @param sheets SheetData from available sheets\n   */\n  private _storeSheetsAsCards(sheets: SheetData[]) {\n    sheets.forEach((sheet: SheetData, index: number) => {\n      this._cards.push({\n        index,\n        label: sheet.name,\n        iconSpec: <SvgDocument />,\n        viewId: sheet.viewId,\n        isActive: index === this._currentIndex,\n      });\n    });\n  }\n\n  /** Gets set of cards */\n  public get content(): React.ReactNode {\n    return (\n      <CardContainer\n        cards={this._cards}\n        searchValue={this._searchValue}\n        connection={this._connection}\n      />\n    );\n  }\n\n  /** Gets components to be placed in the app bar */\n  public get appBarRight(): React.ReactNode {\n    return (\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      <SearchBox\n        placeholder={UiFramework.translate(\"general.search\")}\n        onValueChanged={this._handleSearchValueChanged}\n        valueChangedDelay={250}\n      />\n    );\n  }\n\n  /** Updates stage based on search value */\n  private _handleSearchValueChanged = (value: string): void => {\n    this._searchValue = value;\n    UiFramework.frontstages.updateModalFrontstage();\n  };\n}\n\n/** Properties for [[CardContainer]]\n * @alpha\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface CardContainerProps extends CommonProps {\n  cards: CardInfo[];\n  searchValue: string;\n  connection: IModelConnection;\n}\n\n/** Displays cards in SheetModalFrontstage\n * @alpha\n */\nexport class CardContainer extends React.Component<CardContainerProps> {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  private static _cardSelectedEvent = new BeUiEvent<CardSelectedEventArgs>();\n\n  /** Get CardSelectedEvent event */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  public static get onCardSelectedEvent(): CardSelectedEvent {\n    return CardContainer._cardSelectedEvent;\n  }\n\n  public override render() {\n    return (\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      <ScrollView className={this.props.className} style={this.props.style}>\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <FlexWrapContainer>\n          {this.props.cards.map((card: CardInfo, _index: number) => {\n            let includeCard = true;\n            if (this.props.searchValue) {\n              includeCard = this.contains(card.label, this.props.searchValue);\n            }\n\n            if (includeCard) {\n              return (\n                <SheetCard\n                  key={card.label}\n                  label={card.label}\n                  index={card.index}\n                  // eslint-disable-next-line @typescript-eslint/no-deprecated\n                  iconSpec={card.iconSpec}\n                  icon={card.icon}\n                  isActive={card.isActive}\n                  onClick={async () => this._handleCardSelected(card)}\n                />\n              );\n            }\n\n            return null;\n          })}\n        </FlexWrapContainer>\n      </ScrollView>\n    );\n  }\n\n  /**\n   * Determines if string contains a substring\n   * @param valueA The string to search through\n   * @param valueB The value to search for\n   * @return True if valueB can be found in valueA, false otherwise\n   */\n  private contains(valueA: string, valueB: string): boolean {\n    if (!valueA || !valueB) return false;\n\n    if (valueB.length > valueA.length) return false;\n\n    return (\n      valueA.toLocaleUpperCase().indexOf(valueB.toLocaleUpperCase(), 0) !== -1\n    );\n  }\n\n  /**\n   * Updates view with ViewState for selected card.\n   * @param card Data about the sheet card selected.\n   */\n  private async _handleCardSelected(card: CardInfo) {\n    if (IModelApp.viewManager && IModelApp.viewManager.selectedView) {\n      const vp = IModelApp.viewManager.selectedView;\n      const viewState = await this.props.connection.views.load(card.viewId);\n      vp.changeView(viewState);\n    }\n\n    card.isActive = true;\n    UiFramework.frontstages.closeModalFrontstage();\n    CardContainer.onCardSelectedEvent.emit({\n      id: card.viewId,\n      index: card.index,\n    });\n  }\n}\n\n/** Properties for [[SheetCard]]\n * @alpha\n */\nexport interface SheetCardProps {\n  label: string;\n  index: number;\n  /** @deprecated in 4.16.0. Use {@link SheetCardProps.icon} instead. */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  iconSpec: IconSpec;\n  icon?: React.ReactNode;\n  isActive: boolean;\n  onClick: () => void;\n}\n\n/** State for [[SheetCard]]\n * @internal\n */\ninterface SheetCardState {\n  isActive: boolean;\n  isPressed: boolean;\n}\n\n/** Displays information about an individual sheet\n * @alpha\n */\nexport class SheetCard extends React.Component<SheetCardProps, SheetCardState> {\n  constructor(props: SheetCardProps) {\n    super(props);\n    this.state = { isActive: this.props.isActive, isPressed: false };\n  }\n\n  private _onClick = () => {\n    this.setState({ isActive: true }, () => this.props.onClick());\n  };\n\n  private _onMouseDown = () => {\n    this.setState({ isPressed: true });\n  };\n\n  private _onMouseLeave = () => {\n    if (this.state.isPressed) this.setState({ isPressed: false });\n  };\n\n  public override render() {\n    const { label, index } = this.props;\n\n    const className = classnames(\n      \"uifw-sheet-card\",\n      this.state.isActive && \"is-active\",\n      this.state.isPressed && \"is-pressed\"\n    );\n\n    const icon =\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      this.props.icon ?? this.props.iconSpec ? (\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        <Icon iconSpec={this.props.iconSpec} />\n      ) : (\n        <SvgPlaceholder />\n      );\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        className={className}\n        onClick={this._onClick}\n        onMouseDown={this._onMouseDown}\n        onMouseLeave={this._onMouseLeave}\n        role=\"button\"\n        tabIndex={-1}\n      >\n        {label}\n        <div className=\"sheet-image-container\">\n          <div className=\"icon\">{icon}</div>\n        </div>\n        <div className=\"sheet-index\">{index + 1}</div>\n      </div>\n    );\n  }\n}\n"]}

package/lib/appui-react/navigationaids/StandardRotationNavigationAid.js

@@ -31,6 +31,7 @@ import "./StandardRotationNavigationAid.scss";
  */
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 export class StandardRotationNavigationAidControl extends NavigationAidControl {
+    static navigationAidId = "StandardRotationNavigationAid";
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     constructor(info, options) {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -38,26 +39,13 @@ export class StandardRotationNavigationAidControl extends NavigationAidControl {
         this.reactNode = React.createElement(StandardRotationNavigationAid, null);
     }
 }
-StandardRotationNavigationAidControl.navigationAidId = "StandardRotationNavigationAid";
 /** A 3D Standard Rotation Navigation Aid.
  * @public
  */
 export class StandardRotationNavigationAid extends React.Component {
+    state;
     constructor(props) {
         super(props);
-        this._handleRef = (element) => {
-            this.setState(() => ({ element }));
-        };
-        this._handlePopupClose = () => {
-            this.setState(() => ({ isExpanded: false }));
-        };
-        this._toggleIsExpanded = () => {
-            this.setState((prevState) => ({ isExpanded: !prevState.isExpanded }));
-        };
-        this._handleListItemClicked = (item) => {
-            const selected = item;
-            this.setState(() => ({ isExpanded: false, selected }), () => ViewportComponentEvents.setStandardRotation(selected));
-        };
         const list = [
             {
                 label: UiFramework.translate("rotations.top"),
@@ -107,6 +95,19 @@ export class StandardRotationNavigationAid extends React.Component {
                         React.createElement(Icon, { iconSpec: this.state.list[this.state.selected].iconsSpec })), onClick: this._toggleIsExpanded, title: UiFramework.translate("standardRotationNavigationAid.title") })),
             React.createElement(Popup, { isOpen: this.state.isExpanded, offset: 0, onClose: this._handlePopupClose, position: RelativePosition.Bottom, target: this.state.element }, this.getExpandedContent())));
     }
+    _handleRef = (element) => {
+        this.setState(() => ({ element }));
+    };
+    _handlePopupClose = () => {
+        this.setState(() => ({ isExpanded: false }));
+    };
+    _toggleIsExpanded = () => {
+        this.setState((prevState) => ({ isExpanded: !prevState.isExpanded }));
+    };
+    _handleListItemClicked = (item) => {
+        const selected = item;
+        this.setState(() => ({ isExpanded: false, selected }), () => ViewportComponentEvents.setStandardRotation(selected));
+    };
     getExpandedContent() {
         if (!this.state.isExpanded)
             return undefined;

package/lib/appui-react/navigationaids/StandardRotationNavigationAid.js.map

@@ -1 +1 @@
-{"version":3,"file":"StandardRotationNavigationAid.js","sourceRoot":"","sources":["../../../src/appui-react/navigationaids/StandardRotationNavigationAid.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 NavigationAids\n */\n\nimport { SvgCubeFaceBottom } from \"../icons/cube-faces/SvgCubeFaceBottom.js\";\nimport { SvgCubeFaceFront } from \"../icons/cube-faces/SvgCubeFaceFront.js\";\nimport { SvgCubeFaceIsoLeft } from \"../icons/cube-faces/SvgCubeFaceIsoLeft.js\";\nimport { SvgCubeFaceIsoRight } from \"../icons/cube-faces/SvgCubeFaceIsoRight.js\";\nimport { SvgCubeFaceLeft } from \"../icons/cube-faces/SvgCubeFaceLeft.js\";\nimport { SvgCubeFaceRear } from \"../icons/cube-faces/SvgCubeFaceRear.js\";\nimport { SvgCubeFaceRight } from \"../icons/cube-faces/SvgCubeFaceRight.js\";\nimport { SvgCubeFaceTop } from \"../icons/cube-faces/SvgCubeFaceTop.js\";\nimport { RelativePosition, ToolbarItemUtilities } from \"@itwin/appui-abstract\";\nimport {\n  Columns,\n  GroupColumn,\n  GroupTool,\n  Panel,\n} from \"@itwin/components-react/internal\";\nimport { StandardViewId } from \"@itwin/core-frontend\";\nimport type { CommonProps, IconSpec } from \"@itwin/core-react\";\nimport { Icon, Popup } from \"@itwin/core-react\";\nimport { ViewportComponentEvents } from \"@itwin/imodel-components-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport type { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl.js\";\nimport { ExpandableButton as NZ_Expandable } from \"../layout/widget/tools/button/Expandable.js\";\nimport { ToolbarIcon as NZ_Icon } from \"../layout/widget/tools/button/Icon.js\";\nimport { NavigationAidControl } from \"./NavigationAidControl.js\";\nimport \"./StandardRotationNavigationAid.scss\";\n\n/** A 3D Standard Rotation Navigation Aid control.\n * @public\n * @deprecated in 4.16.0. Use {@link StandardRotationNavigationAid} component instead.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport class StandardRotationNavigationAidControl extends NavigationAidControl {\n  public static navigationAidId = \"StandardRotationNavigationAid\";\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    super(info, options);\n    this.reactNode = <StandardRotationNavigationAid />;\n  }\n}\n\ninterface RotationData {\n  label: string;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  iconsSpec?: IconSpec;\n}\n\ninterface StandardRotationNavigationAidState {\n  element: HTMLDivElement | null;\n  isExpanded: boolean;\n  list: RotationData[];\n  selected: StandardViewId;\n}\n\n/** A 3D Standard Rotation Navigation Aid.\n * @public\n */\nexport class StandardRotationNavigationAid extends React.Component<\n  CommonProps, // eslint-disable-line @typescript-eslint/no-deprecated\n  StandardRotationNavigationAidState\n> {\n  public override readonly state: Readonly<StandardRotationNavigationAidState>;\n\n  constructor(props: any) {\n    super(props);\n    const list: RotationData[] = [\n      {\n        label: UiFramework.translate(\"rotations.top\"),\n        iconsSpec: <SvgCubeFaceTop />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.bottom\"),\n        iconsSpec: <SvgCubeFaceBottom />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.left\"),\n        iconsSpec: <SvgCubeFaceLeft />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.right\"),\n        iconsSpec: <SvgCubeFaceRight />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.front\"),\n        iconsSpec: <SvgCubeFaceFront />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.rear\"),\n        iconsSpec: <SvgCubeFaceRear />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.isoLeft\"),\n        iconsSpec: <SvgCubeFaceIsoLeft />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.isoRight\"),\n        iconsSpec: <SvgCubeFaceIsoRight />,\n      },\n    ];\n    this.state = {\n      element: null,\n      isExpanded: false,\n      list,\n      selected: StandardViewId.Top,\n    };\n  }\n\n  public override render(): React.ReactNode {\n    const className = classnames(\n      \"uifw-standard-rotation-navigation\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} style={this.props.style} ref={this._handleRef}>\n        <NZ_Expandable className={\"expandable\"}>\n          <NZ_Icon\n            className={\"icon-button\"}\n            icon={\n              <span className={classnames(\"three-d-icon\", \"icon\")}>\n                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n                <Icon\n                  iconSpec={this.state.list[this.state.selected].iconsSpec}\n                />\n              </span>\n            }\n            onClick={this._toggleIsExpanded}\n            title={UiFramework.translate(\"standardRotationNavigationAid.title\")}\n          ></NZ_Icon>\n        </NZ_Expandable>\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <Popup\n          isOpen={this.state.isExpanded}\n          offset={0}\n          onClose={this._handlePopupClose}\n          position={RelativePosition.Bottom}\n          target={this.state.element}\n        >\n          {this.getExpandedContent()}\n        </Popup>\n      </div>\n    );\n  }\n\n  private _handleRef = (element: HTMLDivElement | null) => {\n    this.setState(() => ({ element }));\n  };\n\n  private _handlePopupClose = () => {\n    this.setState(() => ({ isExpanded: false }));\n  };\n\n  private _toggleIsExpanded = () => {\n    this.setState((prevState) => ({ isExpanded: !prevState.isExpanded }));\n  };\n\n  private _handleListItemClicked = (item: number) => {\n    const selected = item;\n\n    this.setState(\n      () => ({ isExpanded: false, selected }),\n      () => ViewportComponentEvents.setStandardRotation(selected)\n    );\n  };\n\n  private getExpandedContent(): React.ReactNode {\n    if (!this.state.isExpanded) return undefined;\n\n    return (\n      <Panel>\n        <Columns>\n          <GroupColumn>\n            {this.state.list.map((item, itemIndex) => {\n              return (\n                <GroupTool\n                  key={itemIndex.toString()}\n                  label={item.label}\n                  // eslint-disable-next-line @typescript-eslint/no-deprecated\n                  icon={<Icon iconSpec={item.iconsSpec} />}\n                  isActive={this.state.selected.valueOf() === itemIndex}\n                  onClick={() => this._handleListItemClicked(itemIndex)}\n                  item={ToolbarItemUtilities.createActionButton(\n                    \"\",\n                    0,\n                    \"\",\n                    \"\",\n                    () => {}\n                  )}\n                />\n              );\n            })}\n          </GroupColumn>\n        </Columns>\n      </Panel>\n    );\n  }\n}\n"]}
+{"version":3,"file":"StandardRotationNavigationAid.js","sourceRoot":"","sources":["../../../src/appui-react/navigationaids/StandardRotationNavigationAid.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AACjF,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EACL,OAAO,EACP,WAAW,EACX,SAAS,EACT,KAAK,GACN,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,IAAI,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAChG,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,sCAAsC,CAAC;AAE9C;;;GAGG;AACH,4DAA4D;AAC5D,MAAM,OAAO,oCAAqC,SAAQ,oBAAoB;IACrE,MAAM,CAAC,eAAe,GAAG,+BAA+B,CAAC;IAEhE,4DAA4D;IAC5D,YAAY,IAA4B,EAAE,OAAY;QACpD,4DAA4D;QAC5D,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,oBAAC,6BAA6B,OAAG,CAAC;IACrD,CAAC;;AAgBH;;GAEG;AACH,MAAM,OAAO,6BAA8B,SAAQ,KAAK,CAAC,SAGxD;IAC0B,KAAK,CAA+C;IAE7E,YAAY,KAAU;QACpB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,MAAM,IAAI,GAAmB;YAC3B;gBACE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC;gBAC7C,SAAS,EAAE,oBAAC,cAAc,OAAG;aAC9B;YACD;gBACE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,kBAAkB,CAAC;gBAChD,SAAS,EAAE,oBAAC,iBAAiB,OAAG;aACjC;YACD;gBACE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC;gBAC9C,SAAS,EAAE,oBAAC,eAAe,OAAG;aAC/B;YACD;gBACE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,iBAAiB,CAAC;gBAC/C,SAAS,EAAE,oBAAC,gBAAgB,OAAG;aAChC;YACD;gBACE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,iBAAiB,CAAC;gBAC/C,SAAS,EAAE,oBAAC,gBAAgB,OAAG;aAChC;YACD;gBACE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC;gBAC9C,SAAS,EAAE,oBAAC,eAAe,OAAG;aAC/B;YACD;gBACE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,mBAAmB,CAAC;gBACjD,SAAS,EAAE,oBAAC,kBAAkB,OAAG;aAClC;YACD;gBACE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,oBAAoB,CAAC;gBAClD,SAAS,EAAE,oBAAC,mBAAmB,OAAG;aACnC;SACF,CAAC;QACF,IAAI,CAAC,KAAK,GAAG;YACX,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,KAAK;YACjB,IAAI;YACJ,QAAQ,EAAE,cAAc,CAAC,GAAG;SAC7B,CAAC;IACJ,CAAC;IAEe,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU;YACtE,oBAAC,aAAa,IAAC,SAAS,EAAE,YAAY;gBACpC,oBAAC,OAAO,IACN,SAAS,EAAE,aAAa,EACxB,IAAI,EACF,8BAAM,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,MAAM,CAAC;wBAEjD,oBAAC,IAAI,IACH,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,SAAS,GACxD,CACG,EAET,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,qCAAqC,CAAC,GAC1D,CACG;YAEhB,oBAAC,KAAK,IACJ,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAC7B,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,QAAQ,EAAE,gBAAgB,CAAC,MAAM,EACjC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAEzB,IAAI,CAAC,kBAAkB,EAAE,CACpB,CACJ,CACP,CAAC;IACJ,CAAC;IAEO,UAAU,GAAG,CAAC,OAA8B,EAAE,EAAE;QACtD,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEM,iBAAiB,GAAG,GAAG,EAAE;QAC/B,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEM,iBAAiB,GAAG,GAAG,EAAE;QAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC,CAAC;IAEM,sBAAsB,GAAG,CAAC,IAAY,EAAE,EAAE;QAChD,MAAM,QAAQ,GAAG,IAAI,CAAC;QAEtB,IAAI,CAAC,QAAQ,CACX,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EACvC,GAAG,EAAE,CAAC,uBAAuB,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAC5D,CAAC;IACJ,CAAC,CAAC;IAEM,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;YAAE,OAAO,SAAS,CAAC;QAE7C,OAAO,CACL,oBAAC,KAAK;YACJ,oBAAC,OAAO;gBACN,oBAAC,WAAW,QACT,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;oBACvC,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,SAAS,CAAC,QAAQ,EAAE,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK;wBACjB,4DAA4D;wBAC5D,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAI,EACxC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,SAAS,EACrD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,EACrD,IAAI,EAAE,oBAAoB,CAAC,kBAAkB,CAC3C,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,GAAG,EAAE,GAAE,CAAC,CACT,GACD,CACH,CAAC;gBACJ,CAAC,CAAC,CACU,CACN,CACJ,CACT,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module NavigationAids\n */\n\nimport { SvgCubeFaceBottom } from \"../icons/cube-faces/SvgCubeFaceBottom.js\";\nimport { SvgCubeFaceFront } from \"../icons/cube-faces/SvgCubeFaceFront.js\";\nimport { SvgCubeFaceIsoLeft } from \"../icons/cube-faces/SvgCubeFaceIsoLeft.js\";\nimport { SvgCubeFaceIsoRight } from \"../icons/cube-faces/SvgCubeFaceIsoRight.js\";\nimport { SvgCubeFaceLeft } from \"../icons/cube-faces/SvgCubeFaceLeft.js\";\nimport { SvgCubeFaceRear } from \"../icons/cube-faces/SvgCubeFaceRear.js\";\nimport { SvgCubeFaceRight } from \"../icons/cube-faces/SvgCubeFaceRight.js\";\nimport { SvgCubeFaceTop } from \"../icons/cube-faces/SvgCubeFaceTop.js\";\nimport { RelativePosition, ToolbarItemUtilities } from \"@itwin/appui-abstract\";\nimport {\n  Columns,\n  GroupColumn,\n  GroupTool,\n  Panel,\n} from \"@itwin/components-react/internal\";\nimport { StandardViewId } from \"@itwin/core-frontend\";\nimport type { CommonProps, IconSpec } from \"@itwin/core-react\";\nimport { Icon, Popup } from \"@itwin/core-react\";\nimport { ViewportComponentEvents } from \"@itwin/imodel-components-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport type { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl.js\";\nimport { ExpandableButton as NZ_Expandable } from \"../layout/widget/tools/button/Expandable.js\";\nimport { ToolbarIcon as NZ_Icon } from \"../layout/widget/tools/button/Icon.js\";\nimport { NavigationAidControl } from \"./NavigationAidControl.js\";\nimport \"./StandardRotationNavigationAid.scss\";\n\n/** A 3D Standard Rotation Navigation Aid control.\n * @public\n * @deprecated in 4.16.0. Use {@link StandardRotationNavigationAid} component instead.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport class StandardRotationNavigationAidControl extends NavigationAidControl {\n  public static navigationAidId = \"StandardRotationNavigationAid\";\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    super(info, options);\n    this.reactNode = <StandardRotationNavigationAid />;\n  }\n}\n\ninterface RotationData {\n  label: string;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  iconsSpec?: IconSpec;\n}\n\ninterface StandardRotationNavigationAidState {\n  element: HTMLDivElement | null;\n  isExpanded: boolean;\n  list: RotationData[];\n  selected: StandardViewId;\n}\n\n/** A 3D Standard Rotation Navigation Aid.\n * @public\n */\nexport class StandardRotationNavigationAid extends React.Component<\n  CommonProps, // eslint-disable-line @typescript-eslint/no-deprecated\n  StandardRotationNavigationAidState\n> {\n  public override readonly state: Readonly<StandardRotationNavigationAidState>;\n\n  constructor(props: any) {\n    super(props);\n    const list: RotationData[] = [\n      {\n        label: UiFramework.translate(\"rotations.top\"),\n        iconsSpec: <SvgCubeFaceTop />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.bottom\"),\n        iconsSpec: <SvgCubeFaceBottom />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.left\"),\n        iconsSpec: <SvgCubeFaceLeft />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.right\"),\n        iconsSpec: <SvgCubeFaceRight />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.front\"),\n        iconsSpec: <SvgCubeFaceFront />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.rear\"),\n        iconsSpec: <SvgCubeFaceRear />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.isoLeft\"),\n        iconsSpec: <SvgCubeFaceIsoLeft />,\n      },\n      {\n        label: UiFramework.translate(\"rotations.isoRight\"),\n        iconsSpec: <SvgCubeFaceIsoRight />,\n      },\n    ];\n    this.state = {\n      element: null,\n      isExpanded: false,\n      list,\n      selected: StandardViewId.Top,\n    };\n  }\n\n  public override render(): React.ReactNode {\n    const className = classnames(\n      \"uifw-standard-rotation-navigation\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} style={this.props.style} ref={this._handleRef}>\n        <NZ_Expandable className={\"expandable\"}>\n          <NZ_Icon\n            className={\"icon-button\"}\n            icon={\n              <span className={classnames(\"three-d-icon\", \"icon\")}>\n                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n                <Icon\n                  iconSpec={this.state.list[this.state.selected].iconsSpec}\n                />\n              </span>\n            }\n            onClick={this._toggleIsExpanded}\n            title={UiFramework.translate(\"standardRotationNavigationAid.title\")}\n          ></NZ_Icon>\n        </NZ_Expandable>\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <Popup\n          isOpen={this.state.isExpanded}\n          offset={0}\n          onClose={this._handlePopupClose}\n          position={RelativePosition.Bottom}\n          target={this.state.element}\n        >\n          {this.getExpandedContent()}\n        </Popup>\n      </div>\n    );\n  }\n\n  private _handleRef = (element: HTMLDivElement | null) => {\n    this.setState(() => ({ element }));\n  };\n\n  private _handlePopupClose = () => {\n    this.setState(() => ({ isExpanded: false }));\n  };\n\n  private _toggleIsExpanded = () => {\n    this.setState((prevState) => ({ isExpanded: !prevState.isExpanded }));\n  };\n\n  private _handleListItemClicked = (item: number) => {\n    const selected = item;\n\n    this.setState(\n      () => ({ isExpanded: false, selected }),\n      () => ViewportComponentEvents.setStandardRotation(selected)\n    );\n  };\n\n  private getExpandedContent(): React.ReactNode {\n    if (!this.state.isExpanded) return undefined;\n\n    return (\n      <Panel>\n        <Columns>\n          <GroupColumn>\n            {this.state.list.map((item, itemIndex) => {\n              return (\n                <GroupTool\n                  key={itemIndex.toString()}\n                  label={item.label}\n                  // eslint-disable-next-line @typescript-eslint/no-deprecated\n                  icon={<Icon iconSpec={item.iconsSpec} />}\n                  isActive={this.state.selected.valueOf() === itemIndex}\n                  onClick={() => this._handleListItemClicked(itemIndex)}\n                  item={ToolbarItemUtilities.createActionButton(\n                    \"\",\n                    0,\n                    \"\",\n                    \"\",\n                    () => {}\n                  )}\n                />\n              );\n            })}\n          </GroupColumn>\n        </Columns>\n      </Panel>\n    );\n  }\n}\n"]}

package/lib/appui-react/pickers/ListPicker.js

@@ -47,9 +47,6 @@ export class ExpandableSection extends React.PureComponent {
     /** Creates an ExpandableSection */
     constructor(props) {
         super(props);
-        this._onClick = () => {
-            this.setState((prevState) => ({ expanded: !prevState.expanded }));
-        };
         this.state = { expanded: !!this.props.expanded };
     }
     /** @internal */
@@ -58,6 +55,9 @@ export class ExpandableSection extends React.PureComponent {
             this.setState({ expanded: true });
         }
     }
+    _onClick = () => {
+        this.setState((prevState) => ({ expanded: !prevState.expanded }));
+    };
     /** Renders ExpandableSection */
     render() {
         const className = classnames("nz-toolbar-item-expandable-group-group", this.props.className);
@@ -158,31 +158,6 @@ export class ListPicker extends React.Component {
     /** Creates a ListPicker */
     constructor(props) {
         super(props);
-        // Handle enabling/disabling the items
-        // This will call the this.props.setEnabled function to provide the parent with a chance to process it
-        this._setEnabled = (item, enabled) => {
-            if (this.isSpecialItem(item)) {
-                switch (item.key) {
-                    case ListPicker.Key_All: {
-                        if (this.props.enableAllFunc)
-                            this.props.enableAllFunc();
-                        return;
-                    }
-                    case ListPicker.Key_None: {
-                        if (this.props.disableAllFunc)
-                            this.props.disableAllFunc();
-                        return;
-                    }
-                    case ListPicker.Key_Invert: {
-                        if (this.props.invertFunc)
-                            this.props.invertFunc();
-                        return;
-                    }
-                }
-            }
-            // Call on parent to do processing of the item
-            this.props.setEnabled(item, enabled);
-        };
     }
     // Creates an array of items containing the separator and special requests (all, none, invert)
     createItems(items) {
@@ -247,6 +222,31 @@ export class ListPicker extends React.Component {
             item.type !== ListItemType.Item ||
             item.key === ListPicker.Key_Separator);
     }
+    // Handle enabling/disabling the items
+    // This will call the this.props.setEnabled function to provide the parent with a chance to process it
+    _setEnabled = (item, enabled) => {
+        if (this.isSpecialItem(item)) {
+            switch (item.key) {
+                case ListPicker.Key_All: {
+                    if (this.props.enableAllFunc)
+                        this.props.enableAllFunc();
+                    return;
+                }
+                case ListPicker.Key_None: {
+                    if (this.props.disableAllFunc)
+                        this.props.disableAllFunc();
+                    return;
+                }
+                case ListPicker.Key_Invert: {
+                    if (this.props.invertFunc)
+                        this.props.invertFunc();
+                    return;
+                }
+            }
+        }
+        // Call on parent to do processing of the item
+        this.props.setEnabled(item, enabled);
+    };
     /** Renders ListPicker */
     render() {
         return (React.createElement(ListPickerPopupItem, { ...this.props, title: this.props.title, setEnabled: this._setEnabled, onExpanded: this.props.onExpanded, items: this.createItems(this.props.items),