@itwin/appui-react 4.17.6 → 5.0.0-dev.3

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

@@ -0,0 +1,123 @@
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+import "./SheetsModalFrontstage.scss";
+import * as React from "react";
+import type { IModelConnection } from "@itwin/core-frontend";
+import { UiEvent } from "@itwin/appui-abstract";
+import type { CommonProps, IconSpec } from "@itwin/core-react";
+import type { ModalFrontstageInfo } from "../framework/FrameworkFrontstages.js";
+import type { SheetData } from "./SheetNavigationAid.js";
+/** Data about a sheet card
+ * @alpha
+ */
+export interface CardInfo {
+    index: number;
+    label: string;
+    /** @deprecated in 4.16.0. Use {@link CardInfo.icon} instead. */
+    iconSpec: IconSpec;
+    icon?: React.ReactNode;
+    isActive: boolean;
+    viewId: any;
+}
+/** Arguments for CardSelectedEvent
+ * @alpha
+ * @deprecated in 4.13.0. Event args are inferred from a listener. If explicit type is needed use a type helper.
+ */
+export interface CardSelectedEventArgs {
+    id: any;
+    index: number;
+}
+/** Class for CardSelectedEvent
+ * @alpha
+ * @deprecated in 4.13.0. This class should not be used by applications to instantiate objects.
+ */
+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;
+    render(): React.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;
+    /** @deprecated in 4.16.0. Use {@link SheetCardProps.icon} instead. */
+    iconSpec: IconSpec;
+    icon?: React.ReactNode;
+    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(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=SheetsModalFrontstage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SheetsModalFrontstage.d.ts","sourceRoot":"","sources":["../../../src/appui-react/navigationaids/SheetsModalFrontstage.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAEhF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAIzD;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAEhE,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,GAAG,CAAC;CACb;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AAEH,qBAAa,iBAAkB,SAAQ,OAAO,CAAC,qBAAqB,CAAC;CAAG;AAExE;;GAEG;AACH,qBAAa,qBAAsB,YAAW,mBAAmB;IACxD,KAAK,SAAgE;IAC5E,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,WAAW,CAAmB;IACtC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,YAAY,CAAc;IAElC;;;;OAIG;gBAED,MAAM,EAAE,SAAS,EAAE,EACnB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EAAE,MAAM;IAOtB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAY3B,wBAAwB;IACxB,IAAW,OAAO,IAAI,KAAK,CAAC,SAAS,CAQpC;IAED,kDAAkD;IAClD,IAAW,WAAW,IAAI,KAAK,CAAC,SAAS,CASxC;IAED,0CAA0C;IAC1C,OAAO,CAAC,yBAAyB,CAG/B;CACH;AAED;;GAEG;AAEH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC;IAEpE,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAA0C;IAE3E,kCAAkC;IAElC,WAAkB,mBAAmB,IAAI,iBAAiB,CAEzD;IAEe,MAAM;IAkCtB;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAUhB;;;OAGG;YACW,mBAAmB;CAclC;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IAEtE,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,UAAU,cAAc;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;gBAChE,KAAK,EAAE,cAAc;IAKjC,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEc,MAAM;CAmCvB"}

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

@@ -0,0 +1,166 @@
+/*---------------------------------------------------------------------------------------------
+ * 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, } from "@itwin/core-react";
+import { UiFramework } from "../UiFramework.js";
+import { SvgDocument, SvgPlaceholder } from "@itwin/itwinui-icons-react";
+import { BeUiEvent } from "@itwin/core-bentley";
+/** Class for CardSelectedEvent
+ * @alpha
+ * @deprecated in 4.13.0. This class should not be used by applications to instantiate objects.
+ */
+// eslint-disable-next-line deprecation/deprecation
+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 */
+        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 (
+        // eslint-disable-next-line deprecation/deprecation
+        React.createElement(SearchBox, { placeholder: UiFramework.translate("general.search"), onValueChanged: this._handleSearchValueChanged, valueChangedDelay: 250 }));
+    }
+}
+/** Displays cards in SheetModalFrontstage
+ * @alpha
+ */
+export class CardContainer extends React.Component {
+    /** Get CardSelectedEvent event */
+    // eslint-disable-next-line deprecation/deprecation
+    static get onCardSelectedEvent() {
+        return CardContainer._cardSelectedEvent;
+    }
+    render() {
+        return (
+        // eslint-disable-next-line deprecation/deprecation
+        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, 
+                        // eslint-disable-next-line deprecation/deprecation
+                        iconSpec: card.iconSpec, icon: card.icon, 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) {
+        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,
+        });
+    }
+}
+// eslint-disable-next-line deprecation/deprecation
+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 };
+    }
+    render() {
+        const { label, index } = this.props;
+        const className = classnames("uifw-sheet-card", this.state.isActive && "is-active", this.state.isPressed && "is-pressed");
+        const icon = 
+        // eslint-disable-next-line deprecation/deprecation
+        (this.props.icon ?? this.props.iconSpec) ? (
+        // eslint-disable-next-line deprecation/deprecation
+        React.createElement(Icon, { 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" }, icon)),
+            React.createElement("div", { className: "sheet-index" }, index + 1)));
+    }
+}
+//# sourceMappingURL=SheetsModalFrontstage.js.map

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

@@ -0,0 +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 deprecation/deprecation\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 deprecation/deprecation\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 deprecation/deprecation\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 deprecation/deprecation\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 deprecation/deprecation\n  private static _cardSelectedEvent = new BeUiEvent<CardSelectedEventArgs>();\n\n  /** Get CardSelectedEvent event */\n  // eslint-disable-next-line deprecation/deprecation\n  public static get onCardSelectedEvent(): CardSelectedEvent {\n    return CardContainer._cardSelectedEvent;\n  }\n\n  public override render() {\n    return (\n      // eslint-disable-next-line deprecation/deprecation\n      <ScrollView className={this.props.className} style={this.props.style}>\n        {/* eslint-disable-next-line deprecation/deprecation */}\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 deprecation/deprecation\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 deprecation/deprecation\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 deprecation/deprecation\n      this.props.icon ?? this.props.iconSpec ? (\n        // eslint-disable-next-line deprecation/deprecation\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/SheetsModalFrontstage.scss

@@ -0,0 +1,74 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/style/colors" as *;
+
+$sheets-modal-padding: 10px;
+
+.uifw-sheet-card {
+  position: relative;
+  background-color: #f1f1f1;
+  width: 200px;
+  height: 250px;
+  margin: 10px;
+  padding: $sheets-modal-padding;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  border-color: #f1f1f1;
+  border-width: 8px;
+  border-radius: 12px;
+  border-style: solid;
+  box-sizing: border-box;
+  user-select: none;
+  -webkit-user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  .sheet-image-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .icon {
+      width: 50px;
+      height: 50px;
+      font-size: 50px;
+    }
+  }
+
+  .sheet-index {
+    position: absolute;
+    width: 100%;
+    bottom: $sheets-modal-padding;
+    left: 0;
+  }
+
+  &.is-active {
+    border-color: $uicore-blue;
+  }
+
+  &.is-pressed {
+    border-color: $uicore-blue;
+  }
+
+  &:not(.is-active) {
+    &:not(.is-pressed) {
+      &:hover {
+        border-color: $uicore-blue-a;
+      }
+    }
+  }
+}

package/lib/appui-react/navigationaids/StandardRotationNavigationAid.d.ts

@@ -0,0 +1,43 @@
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+import { StandardViewId } from "@itwin/core-frontend";
+import type { CommonProps, IconSpec } from "@itwin/core-react";
+import * as React from "react";
+import type { ConfigurableCreateInfo } from "../configurableui/ConfigurableUiControl.js";
+import { NavigationAidControl } from "./NavigationAidControl.js";
+import "./StandardRotationNavigationAid.scss";
+/** A 3D Standard Rotation Navigation Aid control.
+ * @public
+ * @deprecated in 4.16.0. Use {@link StandardRotationNavigationAid} component instead.
+ */
+export declare class StandardRotationNavigationAidControl extends NavigationAidControl {
+    static navigationAidId: string;
+    constructor(info: ConfigurableCreateInfo, options: any);
+}
+interface RotationData {
+    label: string;
+    iconsSpec?: IconSpec;
+}
+interface StandardRotationNavigationAidState {
+    element: HTMLDivElement | null;
+    isExpanded: boolean;
+    list: RotationData[];
+    selected: StandardViewId;
+}
+/** A 3D Standard Rotation Navigation Aid.
+ * @public
+ */
+export declare class StandardRotationNavigationAid extends React.Component<CommonProps, // eslint-disable-line deprecation/deprecation
+StandardRotationNavigationAidState> {
+    readonly state: Readonly<StandardRotationNavigationAidState>;
+    constructor(props: any);
+    render(): React.ReactNode;
+    private _handleRef;
+    private _handlePopupClose;
+    private _toggleIsExpanded;
+    private _handleListItemClicked;
+    private getExpandedContent;
+}
+export {};
+//# sourceMappingURL=StandardRotationNavigationAid.d.ts.map

package/lib/appui-react/navigationaids/StandardRotationNavigationAid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardRotationNavigationAid.d.ts","sourceRoot":"","sources":["../../../src/appui-react/navigationaids/StandardRotationNavigationAid.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAiBH,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAGzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,sCAAsC,CAAC;AAE9C;;;GAGG;AAEH,qBAAa,oCAAqC,SAAQ,oBAAoB;IAC5E,OAAc,eAAe,SAAmC;gBAGpD,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG;CAIvD;AAED,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB;AAED,UAAU,kCAAkC;IAC1C,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,QAAQ,EAAE,cAAc,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,6BAA8B,SAAQ,KAAK,CAAC,SAAS,CAChE,WAAW,EAAE,8CAA8C;AAC3D,kCAAkC,CACnC;IACC,SAAyB,KAAK,EAAE,QAAQ,CAAC,kCAAkC,CAAC,CAAC;gBAEjE,KAAK,EAAE,GAAG;IA4CN,MAAM,IAAI,KAAK,CAAC,SAAS;IAqCzC,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,sBAAsB,CAO5B;IAEF,OAAO,CAAC,kBAAkB;CA+B3B"}

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

@@ -0,0 +1,121 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 svgCubeFacesBottom from "@bentley/icons-generic/icons/cube-faces/bottom.svg";
+import svgCubeFacesFront from "@bentley/icons-generic/icons/cube-faces/front.svg";
+import svgCubeFacesIsoLeft from "@bentley/icons-generic/icons/cube-faces/iso-left.svg";
+import svgCubeFacesIsoRight from "@bentley/icons-generic/icons/cube-faces/iso-right.svg";
+import svgCubeFacesLeft from "@bentley/icons-generic/icons/cube-faces/left.svg";
+import svgCubeFacesRear from "@bentley/icons-generic/icons/cube-faces/rear.svg";
+import svgCubeFacesRight from "@bentley/icons-generic/icons/cube-faces/right.svg";
+import svgCubeFacesTop from "@bentley/icons-generic/icons/cube-faces/top.svg";
+import { RelativePosition, ToolbarItemUtilities } from "@itwin/appui-abstract";
+import { Columns, GroupColumn, GroupTool, Panel, } from "@itwin/components-react/internal";
+import { StandardViewId } from "@itwin/core-frontend";
+import { Icon, Popup } from "@itwin/core-react";
+import { ViewportComponentEvents } from "@itwin/imodel-components-react";
+import classnames from "classnames";
+import * as React from "react";
+import { UiFramework } from "../UiFramework.js";
+import { ExpandableButton as NZ_Expandable } from "../layout/widget/tools/button/Expandable.js";
+import { ToolbarIcon as NZ_Icon } from "../layout/widget/tools/button/Icon.js";
+import { NavigationAidControl } from "./NavigationAidControl.js";
+import "./StandardRotationNavigationAid.scss";
+/** A 3D Standard Rotation Navigation Aid control.
+ * @public
+ * @deprecated in 4.16.0. Use {@link StandardRotationNavigationAid} component instead.
+ */
+// eslint-disable-next-line deprecation/deprecation
+export class StandardRotationNavigationAidControl extends NavigationAidControl {
+    // eslint-disable-next-line deprecation/deprecation
+    constructor(info, options) {
+        super(info, options);
+        this.reactNode = React.createElement(StandardRotationNavigationAid, null);
+    }
+}
+StandardRotationNavigationAidControl.navigationAidId = "StandardRotationNavigationAid";
+/** A 3D Standard Rotation Navigation Aid.
+ * @public
+ */
+export class StandardRotationNavigationAid extends React.Component {
+    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"),
+                iconsSpec: svgCubeFacesTop,
+            },
+            {
+                label: UiFramework.translate("rotations.bottom"),
+                iconsSpec: svgCubeFacesBottom,
+            },
+            {
+                label: UiFramework.translate("rotations.left"),
+                iconsSpec: svgCubeFacesLeft,
+            },
+            {
+                label: UiFramework.translate("rotations.right"),
+                iconsSpec: svgCubeFacesRight,
+            },
+            {
+                label: UiFramework.translate("rotations.front"),
+                iconsSpec: svgCubeFacesFront,
+            },
+            {
+                label: UiFramework.translate("rotations.rear"),
+                iconsSpec: svgCubeFacesRear,
+            },
+            {
+                label: UiFramework.translate("rotations.isoLeft"),
+                iconsSpec: svgCubeFacesIsoLeft,
+            },
+            {
+                label: UiFramework.translate("rotations.isoRight"),
+                iconsSpec: svgCubeFacesIsoRight,
+            },
+        ];
+        this.state = {
+            element: null,
+            isExpanded: false,
+            list,
+            selected: StandardViewId.Top,
+        };
+    }
+    render() {
+        const className = classnames("uifw-standard-rotation-navigation", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style, ref: this._handleRef },
+            React.createElement(NZ_Expandable, { className: "expandable" },
+                React.createElement(NZ_Icon, { className: "icon-button", icon: React.createElement("span", { className: classnames("three-d-icon", "icon") },
+                        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())));
+    }
+    getExpandedContent() {
+        if (!this.state.isExpanded)
+            return undefined;
+        return (React.createElement(Panel, null,
+            React.createElement(Columns, null,
+                React.createElement(GroupColumn, null, this.state.list.map((item, itemIndex) => {
+                    return (React.createElement(GroupTool, { key: itemIndex.toString(), label: item.label, 
+                        // eslint-disable-next-line deprecation/deprecation
+                        icon: React.createElement(Icon, { iconSpec: item.iconsSpec }), isActive: this.state.selected.valueOf() === itemIndex, onClick: () => this._handleListItemClicked(itemIndex), item: ToolbarItemUtilities.createActionButton("", 0, "", "", () => { }) }));
+                })))));
+    }
+}
+//# sourceMappingURL=StandardRotationNavigationAid.js.map

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

@@ -0,0 +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 svgCubeFacesBottom from \"@bentley/icons-generic/icons/cube-faces/bottom.svg\";\nimport svgCubeFacesFront from \"@bentley/icons-generic/icons/cube-faces/front.svg\";\nimport svgCubeFacesIsoLeft from \"@bentley/icons-generic/icons/cube-faces/iso-left.svg\";\nimport svgCubeFacesIsoRight from \"@bentley/icons-generic/icons/cube-faces/iso-right.svg\";\nimport svgCubeFacesLeft from \"@bentley/icons-generic/icons/cube-faces/left.svg\";\nimport svgCubeFacesRear from \"@bentley/icons-generic/icons/cube-faces/rear.svg\";\nimport svgCubeFacesRight from \"@bentley/icons-generic/icons/cube-faces/right.svg\";\nimport svgCubeFacesTop from \"@bentley/icons-generic/icons/cube-faces/top.svg\";\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 deprecation/deprecation\nexport class StandardRotationNavigationAidControl extends NavigationAidControl {\n  public static navigationAidId = \"StandardRotationNavigationAid\";\n\n  // eslint-disable-next-line deprecation/deprecation\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    super(info, options);\n    this.reactNode = <StandardRotationNavigationAid />;\n  }\n}\n\ninterface RotationData {\n  label: string;\n  // eslint-disable-next-line deprecation/deprecation\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 deprecation/deprecation\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: svgCubeFacesTop,\n      },\n      {\n        label: UiFramework.translate(\"rotations.bottom\"),\n        iconsSpec: svgCubeFacesBottom,\n      },\n      {\n        label: UiFramework.translate(\"rotations.left\"),\n        iconsSpec: svgCubeFacesLeft,\n      },\n      {\n        label: UiFramework.translate(\"rotations.right\"),\n        iconsSpec: svgCubeFacesRight,\n      },\n      {\n        label: UiFramework.translate(\"rotations.front\"),\n        iconsSpec: svgCubeFacesFront,\n      },\n      {\n        label: UiFramework.translate(\"rotations.rear\"),\n        iconsSpec: svgCubeFacesRear,\n      },\n      {\n        label: UiFramework.translate(\"rotations.isoLeft\"),\n        iconsSpec: svgCubeFacesIsoLeft,\n      },\n      {\n        label: UiFramework.translate(\"rotations.isoRight\"),\n        iconsSpec: svgCubeFacesIsoRight,\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 deprecation/deprecation */}\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 deprecation/deprecation */}\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 deprecation/deprecation\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/navigationaids/StandardRotationNavigationAid.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-standard-rotation-navigation {
+  > .expandable {
+    .icon-button {
+      height: 64px;
+      width: 64px;
+      font-size: 36px;
+    }
+  }
+}