@itwin/appui-react 3.6.0 → 3.6.2

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

@@ -1,151 +1,151 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module NavigationAids
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SheetCard = exports.CardContainer = exports.SheetsModalFrontstage = exports.CardSelectedEvent = void 0;
-require("./SheetsModalFrontstage.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const core_frontend_1 = require("@itwin/core-frontend");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const FrontstageManager_1 = require("../frontstage/FrontstageManager");
-const UiFramework_1 = require("../UiFramework");
-/** Class for CardSelectedEvent
- * @alpha
- */
-class CardSelectedEvent extends appui_abstract_1.UiEvent {
-}
-exports.CardSelectedEvent = CardSelectedEvent;
-/** Modal frontstage displaying sheet information in cards.
- * @alpha
- */
-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_1.UiFramework.translate("navigationAid.sheetsModalFrontstage");
-        this._cards = [];
-        this._searchValue = "";
-        /** Updates stage based on search value */
-        // istanbul ignore next
-        this._handleSearchValueChanged = (value) => {
-            this._searchValue = value;
-            FrontstageManager_1.FrontstageManager.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: "icon-document", 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(core_react_1.SearchBox, { placeholder: core_react_1.UiCore.translate("general.search"), onValueChanged: this._handleSearchValueChanged, valueChangedDelay: 250 }));
-    }
-}
-exports.SheetsModalFrontstage = SheetsModalFrontstage;
-/** Displays cards in SheetModalFrontstage
- * @alpha
- */
-class CardContainer extends React.Component {
-    /** Get CardSelectedEvent event */
-    static get onCardSelectedEvent() { return CardContainer._cardSelectedEvent; }
-    /** @internal */
-    render() {
-        return (React.createElement(core_react_1.ScrollView, { className: this.props.className, style: this.props.style },
-            React.createElement(core_react_1.FlexWrapContainer, null, this.props.cards.map((card, _index) => {
-                let includeCard = true;
-                const iconClassName = (typeof card.iconSpec === "string") ? card.iconSpec : /* istanbul ignore next */ "icon-placeholder";
-                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: iconClassName, 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 (core_frontend_1.IModelApp.viewManager && core_frontend_1.IModelApp.viewManager.selectedView) {
-            const vp = core_frontend_1.IModelApp.viewManager.selectedView;
-            const viewState = await this.props.connection.views.load(card.viewId);
-            vp.changeView(viewState);
-        }
-        card.isActive = true;
-        FrontstageManager_1.FrontstageManager.closeModalFrontstage();
-        CardContainer.onCardSelectedEvent.emit({ id: card.viewId, index: card.index });
-    }
-}
-exports.CardContainer = CardContainer;
-CardContainer._cardSelectedEvent = new CardSelectedEvent();
-/** Displays information about an individual sheet
- * @alpha
- */
-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, iconSpec } = this.props;
-        const className = (0, classnames_1.default)("uifw-sheet-card", this.state.isActive && "is-active", this.state.isPressed && "is-pressed");
-        const iconClassName = (0, classnames_1.default)("icon", (typeof iconSpec === "string") ? iconSpec : /* istanbul ignore next */ "icon-placeholder");
-        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: iconClassName })),
-            React.createElement("div", { className: "sheet-index" }, index + 1)));
-    }
-}
-exports.SheetCard = SheetCard;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetCard = exports.CardContainer = exports.SheetsModalFrontstage = exports.CardSelectedEvent = void 0;
+require("./SheetsModalFrontstage.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_frontend_1 = require("@itwin/core-frontend");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const FrontstageManager_1 = require("../frontstage/FrontstageManager");
+const UiFramework_1 = require("../UiFramework");
+/** Class for CardSelectedEvent
+ * @alpha
+ */
+class CardSelectedEvent extends appui_abstract_1.UiEvent {
+}
+exports.CardSelectedEvent = CardSelectedEvent;
+/** Modal frontstage displaying sheet information in cards.
+ * @alpha
+ */
+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_1.UiFramework.translate("navigationAid.sheetsModalFrontstage");
+        this._cards = [];
+        this._searchValue = "";
+        /** Updates stage based on search value */
+        // istanbul ignore next
+        this._handleSearchValueChanged = (value) => {
+            this._searchValue = value;
+            FrontstageManager_1.FrontstageManager.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: "icon-document", 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(core_react_1.SearchBox, { placeholder: core_react_1.UiCore.translate("general.search"), onValueChanged: this._handleSearchValueChanged, valueChangedDelay: 250 }));
+    }
+}
+exports.SheetsModalFrontstage = SheetsModalFrontstage;
+/** Displays cards in SheetModalFrontstage
+ * @alpha
+ */
+class CardContainer extends React.Component {
+    /** Get CardSelectedEvent event */
+    static get onCardSelectedEvent() { return CardContainer._cardSelectedEvent; }
+    /** @internal */
+    render() {
+        return (React.createElement(core_react_1.ScrollView, { className: this.props.className, style: this.props.style },
+            React.createElement(core_react_1.FlexWrapContainer, null, this.props.cards.map((card, _index) => {
+                let includeCard = true;
+                const iconClassName = (typeof card.iconSpec === "string") ? card.iconSpec : /* istanbul ignore next */ "icon-placeholder";
+                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: iconClassName, 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 (core_frontend_1.IModelApp.viewManager && core_frontend_1.IModelApp.viewManager.selectedView) {
+            const vp = core_frontend_1.IModelApp.viewManager.selectedView;
+            const viewState = await this.props.connection.views.load(card.viewId);
+            vp.changeView(viewState);
+        }
+        card.isActive = true;
+        FrontstageManager_1.FrontstageManager.closeModalFrontstage();
+        CardContainer.onCardSelectedEvent.emit({ id: card.viewId, index: card.index });
+    }
+}
+exports.CardContainer = CardContainer;
+CardContainer._cardSelectedEvent = new CardSelectedEvent();
+/** Displays information about an individual sheet
+ * @alpha
+ */
+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, iconSpec } = this.props;
+        const className = (0, classnames_1.default)("uifw-sheet-card", this.state.isActive && "is-active", this.state.isPressed && "is-pressed");
+        const iconClassName = (0, classnames_1.default)("icon", (typeof iconSpec === "string") ? iconSpec : /* istanbul ignore next */ "icon-placeholder");
+        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: iconClassName })),
+            React.createElement("div", { className: "sheet-index" }, index + 1)));
+    }
+}
+exports.SheetCard = SheetCard;
 //# sourceMappingURL=SheetsModalFrontstage.js.map

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

package/lib/cjs/appui-react/navigationaids/SheetsModalFrontstage.scss

@@ -1,73 +1,73 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/colors";
-
-$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;
-
-  &: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;
-      }
-    }
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/colors";
+
+$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;
+
+  &: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/cjs/appui-react/navigationaids/StandardRotationNavigationAid.d.ts

@@ -1,45 +1,45 @@
-/** @packageDocumentation
- * @module NavigationAids
- */
-import "./StandardRotationNavigationAid.scss";
-import * as React from "react";
-import { StandardViewId } from "@itwin/core-frontend";
-import { CommonProps } from "@itwin/core-react";
-import { ConfigurableCreateInfo } from "../configurableui/ConfigurableUiControl";
-import { NavigationAidControl } from "./NavigationAidControl";
-/** A 3D Standard Rotation Navigation Aid control.
- * @alpha
- */
-export declare class StandardRotationNavigationAidControl extends NavigationAidControl {
-    static navigationAidId: string;
-    constructor(info: ConfigurableCreateInfo, options: any);
-}
-/** @internal */
-export interface RotationData {
-    label: string;
-    iconClassName: string;
-}
-/** @internal */
-interface StandardRotationNavigationAidState {
-    element: HTMLDivElement | null;
-    isExpanded: boolean;
-    list: RotationData[];
-    selected: StandardViewId;
-}
-/** A 3D Standard Rotation Navigation Aid.
- * @alpha
- */
-export declare class StandardRotationNavigationAid extends React.Component<CommonProps, StandardRotationNavigationAidState> {
-    private _title;
-    /** @internal */
-    readonly state: Readonly<StandardRotationNavigationAidState>;
-    constructor(props: any);
-    render(): React.ReactNode;
-    private _handleRef;
-    private _handlePopupClose;
-    private _toggleIsExpanded;
-    private _handleListItemClicked;
-    private getExpandedContent;
-}
-export {};
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+import "./StandardRotationNavigationAid.scss";
+import * as React from "react";
+import { StandardViewId } from "@itwin/core-frontend";
+import { CommonProps } from "@itwin/core-react";
+import { ConfigurableCreateInfo } from "../configurableui/ConfigurableUiControl";
+import { NavigationAidControl } from "./NavigationAidControl";
+/** A 3D Standard Rotation Navigation Aid control.
+ * @alpha
+ */
+export declare class StandardRotationNavigationAidControl extends NavigationAidControl {
+    static navigationAidId: string;
+    constructor(info: ConfigurableCreateInfo, options: any);
+}
+/** @internal */
+export interface RotationData {
+    label: string;
+    iconClassName: string;
+}
+/** @internal */
+interface StandardRotationNavigationAidState {
+    element: HTMLDivElement | null;
+    isExpanded: boolean;
+    list: RotationData[];
+    selected: StandardViewId;
+}
+/** A 3D Standard Rotation Navigation Aid.
+ * @alpha
+ */
+export declare class StandardRotationNavigationAid extends React.Component<CommonProps, StandardRotationNavigationAidState> {
+    private _title;
+    /** @internal */
+    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