@itwin/appui-react 4.0.0-dev.12 → 4.0.0-dev.14

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

package/lib/esm/appui-react/navigationaids/SheetsModalFrontstage.d.ts

@@ -1,118 +1,118 @@
-/** @packageDocumentation
- * @module NavigationAids
- */
-import "./SheetsModalFrontstage.scss";
-import * as React from "react";
-import { IModelConnection } from "@itwin/core-frontend";
-import { UiEvent } from "@itwin/appui-abstract";
-import { CommonProps, IconSpec } from "@itwin/core-react";
-import { ModalFrontstageInfo } from "../framework/FrameworkFrontstages";
-import { SheetData } from "./SheetNavigationAid";
-/** Data about a sheet card
- * @alpha
- */
-export interface CardInfo {
-    index: number;
-    label: string;
-    iconSpec: IconSpec;
-    isActive: boolean;
-    viewId: any;
-}
-/** Arguments for CardSelectedEvent
- * @alpha
- */
-export interface CardSelectedEventArgs {
-    id: any;
-    index: number;
-}
-/** Class for CardSelectedEvent
- * @alpha
- */
-export declare class CardSelectedEvent extends UiEvent<CardSelectedEventArgs> {
-}
-/** Modal frontstage displaying sheet information in cards.
- * @alpha
- */
-export declare class SheetsModalFrontstage implements ModalFrontstageInfo {
-    title: string;
-    private _cards;
-    private _connection;
-    private _currentIndex;
-    private _searchValue;
-    /**
-     * Creates a SheetsModalFrontstage
-     * @param sheets Collection of sheets available in SheetNavigationAid
-     * @param connection IModelConnection to query for sheet ViewState
-     */
-    constructor(sheets: SheetData[], connection: IModelConnection, currentIndex: number);
-    /**
-     * Gathers card info from available sheets
-     * @param sheets SheetData from available sheets
-     */
-    private _storeSheetsAsCards;
-    /** Gets set of cards */
-    get content(): React.ReactNode;
-    /** Gets components to be placed in the app bar */
-    get appBarRight(): React.ReactNode;
-    /** Updates stage based on search value */
-    private _handleSearchValueChanged;
-}
-/** Properties for [[CardContainer]]
- * @alpha
- */
-export interface CardContainerProps extends CommonProps {
-    cards: CardInfo[];
-    searchValue: string;
-    connection: IModelConnection;
-}
-/** Displays cards in SheetModalFrontstage
- * @alpha
- */
-export declare class CardContainer extends React.Component<CardContainerProps> {
-    private static _cardSelectedEvent;
-    /** Get CardSelectedEvent event */
-    static get onCardSelectedEvent(): CardSelectedEvent;
-    /** @internal */
-    render(): JSX.Element;
-    /**
-     * Determines if string contains a substring
-     * @param valueA The string to search through
-     * @param valueB The value to search for
-     * @return True if valueB can be found in valueA, false otherwise
-     */
-    private contains;
-    /**
-     * Updates view with ViewState for selected card.
-     * @param card Data about the sheet card selected.
-     */
-    private _handleCardSelected;
-}
-/** Properties for [[SheetCard]]
- * @alpha
- */
-export interface SheetCardProps {
-    label: string;
-    index: number;
-    iconSpec: IconSpec;
-    isActive: boolean;
-    onClick: () => void;
-}
-/** State for [[SheetCard]]
- * @internal
- */
-interface SheetCardState {
-    isActive: boolean;
-    isPressed: boolean;
-}
-/** Displays information about an individual sheet
- * @alpha
- */
-export declare class SheetCard extends React.Component<SheetCardProps, SheetCardState> {
-    constructor(props: SheetCardProps);
-    private _onClick;
-    private _onMouseDown;
-    private _onMouseLeave;
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+import "./SheetsModalFrontstage.scss";
+import * as React from "react";
+import { IModelConnection } from "@itwin/core-frontend";
+import { UiEvent } from "@itwin/appui-abstract";
+import { CommonProps, IconSpec } from "@itwin/core-react";
+import { ModalFrontstageInfo } from "../framework/FrameworkFrontstages";
+import { SheetData } from "./SheetNavigationAid";
+/** Data about a sheet card
+ * @alpha
+ */
+export interface CardInfo {
+    index: number;
+    label: string;
+    iconSpec: IconSpec;
+    isActive: boolean;
+    viewId: any;
+}
+/** Arguments for CardSelectedEvent
+ * @alpha
+ */
+export interface CardSelectedEventArgs {
+    id: any;
+    index: number;
+}
+/** Class for CardSelectedEvent
+ * @alpha
+ */
+export declare class CardSelectedEvent extends UiEvent<CardSelectedEventArgs> {
+}
+/** Modal frontstage displaying sheet information in cards.
+ * @alpha
+ */
+export declare class SheetsModalFrontstage implements ModalFrontstageInfo {
+    title: string;
+    private _cards;
+    private _connection;
+    private _currentIndex;
+    private _searchValue;
+    /**
+     * Creates a SheetsModalFrontstage
+     * @param sheets Collection of sheets available in SheetNavigationAid
+     * @param connection IModelConnection to query for sheet ViewState
+     */
+    constructor(sheets: SheetData[], connection: IModelConnection, currentIndex: number);
+    /**
+     * Gathers card info from available sheets
+     * @param sheets SheetData from available sheets
+     */
+    private _storeSheetsAsCards;
+    /** Gets set of cards */
+    get content(): React.ReactNode;
+    /** Gets components to be placed in the app bar */
+    get appBarRight(): React.ReactNode;
+    /** Updates stage based on search value */
+    private _handleSearchValueChanged;
+}
+/** Properties for [[CardContainer]]
+ * @alpha
+ */
+export interface CardContainerProps extends CommonProps {
+    cards: CardInfo[];
+    searchValue: string;
+    connection: IModelConnection;
+}
+/** Displays cards in SheetModalFrontstage
+ * @alpha
+ */
+export declare class CardContainer extends React.Component<CardContainerProps> {
+    private static _cardSelectedEvent;
+    /** Get CardSelectedEvent event */
+    static get onCardSelectedEvent(): CardSelectedEvent;
+    /** @internal */
+    render(): JSX.Element;
+    /**
+     * Determines if string contains a substring
+     * @param valueA The string to search through
+     * @param valueB The value to search for
+     * @return True if valueB can be found in valueA, false otherwise
+     */
+    private contains;
+    /**
+     * Updates view with ViewState for selected card.
+     * @param card Data about the sheet card selected.
+     */
+    private _handleCardSelected;
+}
+/** Properties for [[SheetCard]]
+ * @alpha
+ */
+export interface SheetCardProps {
+    label: string;
+    index: number;
+    iconSpec: IconSpec;
+    isActive: boolean;
+    onClick: () => void;
+}
+/** State for [[SheetCard]]
+ * @internal
+ */
+interface SheetCardState {
+    isActive: boolean;
+    isPressed: boolean;
+}
+/** Displays information about an individual sheet
+ * @alpha
+ */
+export declare class SheetCard extends React.Component<SheetCardProps, SheetCardState> {
+    constructor(props: SheetCardProps);
+    private _onClick;
+    private _onMouseDown;
+    private _onMouseLeave;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=SheetsModalFrontstage.d.ts.map

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

@@ -1,145 +1,146 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module NavigationAids
- */
-import "./SheetsModalFrontstage.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { IModelApp } from "@itwin/core-frontend";
-import { UiEvent } from "@itwin/appui-abstract";
-import { FlexWrapContainer, Icon, ScrollView, SearchBox, UiCore } from "@itwin/core-react";
-import { UiFramework } from "../UiFramework";
-import { SvgDocument, SvgPlaceholder } from "@itwin/itwinui-icons-react";
-/** Class for CardSelectedEvent
- * @alpha
- */
-export class CardSelectedEvent extends UiEvent {
-}
-/** Modal frontstage displaying sheet information in cards.
- * @alpha
- */
-export class SheetsModalFrontstage {
-    /**
-     * 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 */
-        // istanbul ignore next
-        this._handleSearchValueChanged = (value) => {
-            this._searchValue = value;
-            UiFramework.frontstages.updateModalFrontstage();
-        };
-        this._connection = connection;
-        this._currentIndex = currentIndex;
-        this._storeSheetsAsCards(sheets);
-    }
-    /**
-     * Gathers card info from available sheets
-     * @param sheets SheetData from available sheets
-     */
-    _storeSheetsAsCards(sheets) {
-        sheets.forEach((sheet, index) => {
-            this._cards.push({ index, label: sheet.name, iconSpec: React.createElement(SvgDocument, null), viewId: sheet.viewId, isActive: index === this._currentIndex });
-        });
-    }
-    /** Gets set of cards */
-    get content() {
-        return React.createElement(CardContainer, { cards: this._cards, searchValue: this._searchValue, connection: this._connection });
-    }
-    /** Gets components to be placed in the app bar */
-    get appBarRight() {
-        return (React.createElement(SearchBox, { placeholder: UiCore.translate("general.search"), onValueChanged: this._handleSearchValueChanged, valueChangedDelay: 250 }));
-    }
-}
-/** Displays cards in SheetModalFrontstage
- * @alpha
- */
-export class CardContainer extends React.Component {
-    /** Get CardSelectedEvent event */
-    static get onCardSelectedEvent() { return CardContainer._cardSelectedEvent; }
-    /** @internal */
-    render() {
-        return (React.createElement(ScrollView, { className: this.props.className, style: this.props.style },
-            React.createElement(FlexWrapContainer, null, this.props.cards.map((card, _index) => {
-                let includeCard = true;
-                if (this.props.searchValue) {
-                    includeCard = this.contains(card.label, this.props.searchValue);
-                }
-                if (includeCard) {
-                    return (React.createElement(SheetCard, { key: card.label, label: card.label, index: card.index, iconSpec: card.iconSpec, isActive: card.isActive, onClick: async () => this._handleCardSelected(card) }));
-                }
-                return null;
-            }))));
-    }
-    /**
-     * Determines if string contains a substring
-     * @param valueA The string to search through
-     * @param valueB The value to search for
-     * @return True if valueB can be found in valueA, false otherwise
-     */
-    contains(valueA, valueB) {
-        if (!valueA || !valueB)
-            return false;
-        if (valueB.length > valueA.length)
-            return false;
-        return valueA.toLocaleUpperCase().indexOf(valueB.toLocaleUpperCase(), 0) !== -1;
-    }
-    /**
-     * Updates view with ViewState for selected card.
-     * @param card Data about the sheet card selected.
-     */
-    async _handleCardSelected(card) {
-        // istanbul ignore if
-        if (IModelApp.viewManager && IModelApp.viewManager.selectedView) {
-            const vp = IModelApp.viewManager.selectedView;
-            const viewState = await this.props.connection.views.load(card.viewId);
-            vp.changeView(viewState);
-        }
-        card.isActive = true;
-        UiFramework.frontstages.closeModalFrontstage();
-        CardContainer.onCardSelectedEvent.emit({ id: card.viewId, index: card.index });
-    }
-}
-CardContainer._cardSelectedEvent = new CardSelectedEvent();
-/** 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 };
-    }
-    render() {
-        const { label, index } = this.props;
-        const className = classnames("uifw-sheet-card", this.state.isActive && "is-active", this.state.isPressed && "is-pressed");
-        const iconSpec = this.props.iconSpec ? this.props.iconSpec : React.createElement(SvgPlaceholder, null);
-        return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: className, onClick: this._onClick, onMouseDown: this._onMouseDown, onMouseLeave: this._onMouseLeave, role: "button", tabIndex: -1 },
-            label,
-            React.createElement("div", { className: "sheet-image-container" },
-                React.createElement("div", { className: "icon" },
-                    " ",
-                    React.createElement(Icon, { iconSpec: iconSpec }))),
-            React.createElement("div", { className: "sheet-index" }, index + 1)));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+import "./SheetsModalFrontstage.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { IModelApp } from "@itwin/core-frontend";
+import { UiEvent } from "@itwin/appui-abstract";
+import { FlexWrapContainer, Icon, ScrollView, SearchBox, UiCore } from "@itwin/core-react";
+import { UiFramework } from "../UiFramework";
+import { SvgDocument, SvgPlaceholder } from "@itwin/itwinui-icons-react";
+/** Class for CardSelectedEvent
+ * @alpha
+ */
+export class CardSelectedEvent extends UiEvent {
+}
+/** Modal frontstage displaying sheet information in cards.
+ * @alpha
+ */
+export class SheetsModalFrontstage {
+    /**
+     * 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 */
+        // istanbul ignore next
+        this._handleSearchValueChanged = (value) => {
+            this._searchValue = value;
+            UiFramework.frontstages.updateModalFrontstage();
+        };
+        this._connection = connection;
+        this._currentIndex = currentIndex;
+        this._storeSheetsAsCards(sheets);
+    }
+    /**
+     * Gathers card info from available sheets
+     * @param sheets SheetData from available sheets
+     */
+    _storeSheetsAsCards(sheets) {
+        sheets.forEach((sheet, index) => {
+            this._cards.push({ index, label: sheet.name, iconSpec: React.createElement(SvgDocument, null), viewId: sheet.viewId, isActive: index === this._currentIndex });
+        });
+    }
+    /** Gets set of cards */
+    get content() {
+        return React.createElement(CardContainer, { cards: this._cards, searchValue: this._searchValue, connection: this._connection });
+    }
+    /** Gets components to be placed in the app bar */
+    get appBarRight() {
+        return (React.createElement(SearchBox, { placeholder: UiCore.translate("general.search"), onValueChanged: this._handleSearchValueChanged, valueChangedDelay: 250 }));
+    }
+}
+/** Displays cards in SheetModalFrontstage
+ * @alpha
+ */
+class CardContainer extends React.Component {
+    /** Get CardSelectedEvent event */
+    static get onCardSelectedEvent() { return CardContainer._cardSelectedEvent; }
+    /** @internal */
+    render() {
+        return (React.createElement(ScrollView, { className: this.props.className, style: this.props.style },
+            React.createElement(FlexWrapContainer, null, this.props.cards.map((card, _index) => {
+                let includeCard = true;
+                if (this.props.searchValue) {
+                    includeCard = this.contains(card.label, this.props.searchValue);
+                }
+                if (includeCard) {
+                    return (React.createElement(SheetCard, { key: card.label, label: card.label, index: card.index, iconSpec: card.iconSpec, isActive: card.isActive, onClick: async () => this._handleCardSelected(card) }));
+                }
+                return null;
+            }))));
+    }
+    /**
+     * Determines if string contains a substring
+     * @param valueA The string to search through
+     * @param valueB The value to search for
+     * @return True if valueB can be found in valueA, false otherwise
+     */
+    contains(valueA, valueB) {
+        if (!valueA || !valueB)
+            return false;
+        if (valueB.length > valueA.length)
+            return false;
+        return valueA.toLocaleUpperCase().indexOf(valueB.toLocaleUpperCase(), 0) !== -1;
+    }
+    /**
+     * Updates view with ViewState for selected card.
+     * @param card Data about the sheet card selected.
+     */
+    async _handleCardSelected(card) {
+        // istanbul ignore if
+        if (IModelApp.viewManager && IModelApp.viewManager.selectedView) {
+            const vp = IModelApp.viewManager.selectedView;
+            const viewState = await this.props.connection.views.load(card.viewId);
+            vp.changeView(viewState);
+        }
+        card.isActive = true;
+        UiFramework.frontstages.closeModalFrontstage();
+        CardContainer.onCardSelectedEvent.emit({ id: card.viewId, index: card.index });
+    }
+}
+CardContainer._cardSelectedEvent = new CardSelectedEvent();
+export { CardContainer };
+/** 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 };
+    }
+    render() {
+        const { label, index } = this.props;
+        const className = classnames("uifw-sheet-card", this.state.isActive && "is-active", this.state.isPressed && "is-pressed");
+        const iconSpec = this.props.iconSpec ? this.props.iconSpec : React.createElement(SvgPlaceholder, null);
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { className: className, onClick: this._onClick, onMouseDown: this._onMouseDown, onMouseLeave: this._onMouseLeave, role: "button", tabIndex: -1 },
+            label,
+            React.createElement("div", { className: "sheet-image-container" },
+                React.createElement("div", { className: "icon" },
+                    " ",
+                    React.createElement(Icon, { iconSpec: iconSpec }))),
+            React.createElement("div", { className: "sheet-index" }, index + 1)));
+    }
+}
 //# sourceMappingURL=SheetsModalFrontstage.js.map