@itwin/appui-react 4.17.1 → 5.0.0-dev.2

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

@@ -0,0 +1,309 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Picker
+ */
+import * as React from "react";
+import { UiEvent } from "@itwin/appui-abstract";
+import { assert, BeUiEvent, Logger } from "@itwin/core-bentley";
+import { FuzzySearch, IModelApp } from "@itwin/core-frontend";
+import { UiFramework } from "../UiFramework.js";
+import { ViewUtilities } from "../utils/ViewUtilities.js";
+import { ListItemType, ListPicker } from "./ListPicker.js";
+import { debounce } from "lodash";
+import svgSavedView from "@bentley/icons-generic/icons/saved-view.svg";
+import { useReduxFrameworkState } from "../uistate/useReduxFrameworkState.js";
+/** ViewSelector Changed Event class.
+ * @beta
+ * @deprecated in 4.13.0. This class should not be used by applications to instantiate objects.
+ */
+// eslint-disable-next-line deprecation/deprecation
+export class ViewSelectorChangedEvent extends UiEvent {
+}
+/** View Selector React component
+ * @beta
+ */
+export class ViewSelector extends React.Component {
+    /** Updates the ViewSelector show settings.
+     */
+    static updateShowSettings(showSpatials, showDrawings, showSheets, showUnknown) {
+        ViewSelector._onViewSelectorShowUpdateEvent.emit({
+            showSpatials,
+            showDrawings,
+            showSheets,
+            showUnknown,
+        });
+    }
+    /** Creates a ViewSelector */
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        this._searchInput = "";
+        this._handleViewSelectorShowUpdateEvent = (args) => {
+            if (!this._isMounted)
+                return;
+            this.setState(args, async () => this.loadViews());
+        };
+        // enable/disable the models
+        this._setEnabled = async (item, _enabled) => {
+            const activeContentControl = // eslint-disable-next-line deprecation/deprecation
+             UiFramework.content.getActiveContentControl();
+            if (!this.props.onViewSelected &&
+                (!activeContentControl ||
+                    !activeContentControl.supportsViewSelectorChange)) {
+                Logger.logError(UiFramework.loggerCategory("ViewSelector"), `No active ContentControl for ViewSelector change`);
+                return;
+            }
+            // Enable the item temporarily to let user see that their click was registered
+            // while we query for view state and change the current view which may take a bit
+            if (_enabled && item.type !== ListItemType.Container) {
+                // This itemMapper simply looks through all the list items and their nested children and enables the one
+                // that we have registered to enable
+                // Also disable all other items
+                const itemMapper = (tempItem) => {
+                    if (tempItem.type === ListItemType.Container) {
+                        return { ...tempItem, children: tempItem.children.map(itemMapper) };
+                    }
+                    else if (tempItem.key === item.key) {
+                        return { ...tempItem, enabled: true };
+                    }
+                    else {
+                        return { ...tempItem, enabled: false };
+                    }
+                };
+                // Create the new array with the current item enabled
+                const itemsWithEnabled = this.state.items.map(itemMapper);
+                if (!this._isMounted)
+                    return;
+                // Update the state so that we show the user it was enabled while we work in the background
+                this.setState({ items: itemsWithEnabled });
+            }
+            assert(!!this.props.imodel);
+            assert(!!item.name);
+            // Load the view state using the viewSpec's ID
+            const viewState = await this.props.imodel.views.load(item.key);
+            if (this.props.onViewSelected) {
+                this.props.onViewSelected({
+                    iModelConnection: this.props.imodel,
+                    viewDefinitionId: item.key,
+                    viewState,
+                    name: item.name,
+                });
+            }
+            else if (activeContentControl) {
+                // Let activeContentControl process the ViewSelector change
+                await activeContentControl.processViewSelectorChange(this.props.imodel, item.key, viewState, item.name);
+                // Emit a change event
+                // eslint-disable-next-line deprecation/deprecation
+                ViewSelector.onViewSelectorChangedEvent.emit({
+                    iModelConnection: this.props.imodel,
+                    viewDefinitionId: item.key,
+                    viewState,
+                    name: item.name,
+                });
+            }
+            // Set state to show enabled the view that got selected
+            void this.updateState(item.key);
+        };
+        // Hook on the category selector being expanded so that we may initialize if needed
+        this._onExpanded = (expand) => {
+            if (expand)
+                void this.updateState(IModelApp.viewManager.selectedView
+                    ? IModelApp.viewManager.selectedView.view.id
+                    : undefined);
+        };
+        this.state = {
+            items: new Array(),
+            title: UiFramework.translate("viewTypes.views"),
+            initialized: false,
+            showSpatials: props.showSpatials,
+            showDrawings: props.showDrawings,
+            showSheets: props.showSheets,
+            showUnknown: props.showUnknown,
+            searchBox: props.searchBox ? props.searchBox : true,
+            panelOnly: props.panelOnly ? props.panelOnly : false,
+            expand: false,
+        };
+    }
+    async componentDidMount() {
+        this._isMounted = true;
+        if (this.props.listenForShowUpdates)
+            this._removeShowUpdateListener =
+                ViewSelector._onViewSelectorShowUpdateEvent.addListener(this._handleViewSelectorShowUpdateEvent);
+        await this.loadViews();
+    }
+    async componentDidUpdate(prevProps) {
+        if (this.props.imodel !== prevProps.imodel) {
+            await this.loadViews();
+        }
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+        if (this._removeShowUpdateListener)
+            this._removeShowUpdateListener();
+    }
+    setStateContainers(views3d, views2d, sheets, unknown, views3dFiltered, views2dFiltered, sheetsFiltered, unknownFiltered) {
+        const views3dContainer = {
+            key: "views3dContainer",
+            name: UiFramework.translate("viewTypes.spatialViews"),
+            enabled: false,
+            type: ListItemType.Container,
+            children: views3dFiltered ? views3dFiltered : views3d,
+        };
+        const views2dContainer = {
+            key: "views2dContainer",
+            name: UiFramework.translate("viewTypes.drawings"),
+            enabled: false,
+            type: ListItemType.Container,
+            children: views2dFiltered ? views2dFiltered : views2d,
+        };
+        const sheetContainer = {
+            key: "sheetContainer",
+            name: UiFramework.translate("viewTypes.sheets"),
+            enabled: false,
+            type: ListItemType.Container,
+            children: sheetsFiltered ? sheetsFiltered : sheets,
+        };
+        const containers = [views3dContainer, views2dContainer, sheetContainer];
+        if (unknown && unknown.length > 0) {
+            // This should never show, but just in case we missed a type of view state
+            const unknownContainer = {
+                key: "unknownContainer",
+                name: UiFramework.translate("viewTypes.others"),
+                enabled: false,
+                type: ListItemType.Container,
+                children: unknownFiltered ? unknownFiltered : unknown,
+            };
+            if (unknown.length !== 0)
+                containers.push(unknownContainer);
+        }
+        if (!this._isMounted)
+            return;
+        this.setState({
+            items: containers,
+            title: UiFramework.translate("viewTypes.views"),
+            initialized: true,
+        });
+    }
+    /**
+     * Query the views and set the initial state with the iModel's views.
+     */
+    async loadViews() {
+        // Query views and add them to state
+        const views3d = [];
+        const views2d = [];
+        const sheets = [];
+        const unknown = [];
+        let views3dFiltered;
+        let views2dFiltered;
+        let sheetsFiltered;
+        let unknownFiltered;
+        const fuzzy = new FuzzySearch();
+        if (this.props.imodel && this.props.imodel.views.getViewList) {
+            const query = { wantPrivate: false };
+            const specs = await this.props.imodel.views.getViewList(query);
+            specs.forEach((spec) => {
+                const viewItem = {
+                    key: spec.id,
+                    name: spec.name,
+                    enabled: spec.id === IModelApp.viewManager.selectedView?.view.id
+                        ? true
+                        : false,
+                    type: ListItemType.Item,
+                };
+                const className = ViewUtilities.getBisBaseClass(spec.class);
+                if (ViewUtilities.isSpatial(className) && this.state.showSpatials)
+                    views3d.push(viewItem);
+                else if (ViewUtilities.isDrawing(className) && this.state.showDrawings)
+                    views2d.push(viewItem);
+                else if (ViewUtilities.isSheet(className) && this.state.showSheets)
+                    sheets.push(viewItem);
+                else if (this.state.showUnknown)
+                    unknown.push(viewItem);
+            });
+            if (this._searchInput.length > 0) {
+                const views3dFuzzySearchResults = fuzzy.search(views3d, ["name"], this._searchInput).results;
+                const views2dFuzzySearchResults = fuzzy.search(views2d, ["name"], this._searchInput).results;
+                const sheetsFuzzySearchResults = fuzzy.search(sheets, ["name"], this._searchInput).results;
+                const unknownFuzzySearchResults = fuzzy.search(unknown, ["name"], this._searchInput).results;
+                views3dFiltered = [];
+                views2dFiltered = [];
+                sheetsFiltered = [];
+                unknownFiltered = [];
+                views3dFuzzySearchResults.forEach(function (result) {
+                    views3dFiltered?.push(result.item);
+                });
+                views2dFuzzySearchResults.forEach(function (result) {
+                    views2dFiltered?.push(result.item);
+                });
+                sheetsFuzzySearchResults.forEach(function (result) {
+                    sheetsFiltered?.push(result.item);
+                });
+                unknownFuzzySearchResults.forEach(function (result) {
+                    unknownFiltered?.push(result.item);
+                });
+            }
+        }
+        this.setStateContainers(views3d, views2d, sheets, unknown, views3dFiltered, views2dFiltered, sheetsFiltered, unknownFiltered);
+    }
+    /**
+     * Update state of the entries in the widget.
+     * @param viewId Identifier for the relevant view
+     */
+    async updateState(viewId) {
+        // Wait for initialization finished
+        if (!this.state.initialized)
+            return;
+        // Query views and add them to state
+        const views3d = this.state.items[0].children;
+        const views2d = this.state.items[1].children;
+        const sheets = this.state.items[2].children;
+        const unknown = this.state.items.length > 3 ? this.state.items[3].children : [];
+        const updateChildren = (item) => {
+            if (item.key === viewId)
+                return { ...item, enabled: true };
+            else
+                return { ...item, enabled: false };
+        };
+        this.setStateContainers(views3d.map(updateChildren), views2d.map(updateChildren), sheets.map(updateChildren), unknown.map(updateChildren));
+    }
+    /**
+     *  Renders ViewSelector component
+     */
+    render() {
+        const { imodel, ...props } = this.props;
+        return (React.createElement(ListPicker, { ...props, title: this.state.title, setEnabled: this._setEnabled, items: this.state.items, iconSpec: svgSavedView, onExpanded: this._onExpanded, searchBox: this.state.searchBox, onSearchValueChange: debounce((search) => {
+                this._searchInput = search;
+                if (this._isMounted &&
+                    this.state.expand === false &&
+                    this._searchInput.length > 0)
+                    this.setState({ expand: true });
+                void this.loadViews();
+            }, 300), panelOnly: this.state.panelOnly, expanded: this.state.expand }));
+    }
+}
+ViewSelector._onViewSelectorShowUpdateEvent = new BeUiEvent();
+ViewSelector.defaultProps = {
+    showSpatials: true,
+    showDrawings: true,
+    showSheets: true,
+    showUnknown: true,
+};
+/** Gets the [[ViewSelectorChangedEvent]].
+ * @deprecated in 4.16.0. Use {@link ViewSelectorProps.onViewSelected} prop instead.
+ */
+ViewSelector.onViewSelectorChangedEvent = new ViewSelectorChangedEvent(); // eslint-disable-line deprecation/deprecation
+/** ViewSelector that is connected to the IModelConnection property in the Redux store. The application must set up the Redux store and include the FrameworkReducer.
+ * @note Requires redux provider.
+ * @beta
+ * @deprecated in 4.15.0. Use {@link ViewSelector} instead.
+ */
+export function IModelConnectedViewSelector(props) {
+    const iModel = useReduxFrameworkState(
+    // eslint-disable-next-line deprecation/deprecation
+    (state) => state?.sessionState.iModelConnection);
+    return React.createElement(ViewSelector, { imodel: iModel, ...props });
+}
+//# sourceMappingURL=ViewSelector.js.map

package/lib/appui-react/pickers/ViewSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSelector.js","sourceRoot":"","sources":["../../../src/appui-react/pickers/ViewSelector.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,YAAY,MAAM,6CAA6C,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAgB9E;;;GAGG;AACH,mDAAmD;AACnD,MAAM,OAAO,wBAAyB,SAAQ,OAAqC;CAAG;AA+CtF;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAGvC;IAwBC;OACG;IACI,MAAM,CAAC,kBAAkB,CAC9B,YAAqB,EACrB,YAAqB,EACrB,UAAmB,EACnB,WAAoB;QAEpB,YAAY,CAAC,8BAA8B,CAAC,IAAI,CAAC;YAC/C,YAAY;YACZ,YAAY;YACZ,UAAU;YACV,WAAW;SACZ,CAAC,CAAC;IACL,CAAC;IAED,6BAA6B;IAC7B,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;QAlCP,eAAU,GAAG,KAAK,CAAC;QACnB,iBAAY,GAAG,EAAE,CAAC;QAuElB,uCAAkC,GAEtC,CAAC,IAAI,EAAQ,EAAE;YACjB,IAAI,CAAC,IAAI,CAAC,UAAU;gBAAE,OAAO;YAE7B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACpD,CAAC,CAAC;QAoLF,4BAA4B;QACpB,gBAAW,GAAG,KAAK,EAAE,IAAc,EAAE,QAAiB,EAAE,EAAE;YAChE,MAAM,oBAAoB,GAAG,mDAAmD;aAC9E,WAAW,CAAC,OAAO,CAAC,uBAAuB,EAE9B,CAAC;YAChB,IACE,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc;gBAC1B,CAAC,CAAC,oBAAoB;oBACpB,CAAC,oBAAoB,CAAC,0BAA0B,CAAC,EACnD,CAAC;gBACD,MAAM,CAAC,QAAQ,CACb,WAAW,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,kDAAkD,CACnD,CAAC;gBACF,OAAO;YACT,CAAC;YAED,8EAA8E;YAC9E,iFAAiF;YACjF,IAAI,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,SAAS,EAAE,CAAC;gBACrD,wGAAwG;gBACxG,oCAAoC;gBACpC,+BAA+B;gBAC/B,MAAM,UAAU,GAAqC,CACnD,QAAkB,EAClB,EAAE;oBACF,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,CAAC,SAAS,EAAE,CAAC;wBAC7C,OAAO,EAAE,GAAG,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAS,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;oBACvE,CAAC;yBAAM,IAAI,QAAQ,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;wBACrC,OAAO,EAAE,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oBACxC,CAAC;yBAAM,CAAC;wBACN,OAAO,EAAE,GAAG,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;oBACzC,CAAC;gBACH,CAAC,CAAC;gBAEF,qDAAqD;gBACrD,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;gBAE1D,IAAI,CAAC,IAAI,CAAC,UAAU;oBAAE,OAAO;gBAE7B,2FAA2F;gBAC3F,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,CAAC;YAC7C,CAAC;YAED,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC5B,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEpB,8CAA8C;YAC9C,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAE/D,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;gBAC9B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;oBACxB,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;oBACnC,gBAAgB,EAAE,IAAI,CAAC,GAAG;oBAC1B,SAAS;oBACT,IAAI,EAAE,IAAI,CAAC,IAAI;iBAChB,CAAC,CAAC;YACL,CAAC;iBAAM,IAAI,oBAAoB,EAAE,CAAC;gBAChC,2DAA2D;gBAC3D,MAAM,oBAAoB,CAAC,yBAAyB,CAClD,IAAI,CAAC,KAAK,CAAC,MAAM,EACjB,IAAI,CAAC,GAAG,EACR,SAAS,EACT,IAAI,CAAC,IAAI,CACV,CAAC;gBAEF,sBAAsB;gBACtB,mDAAmD;gBACnD,YAAY,CAAC,0BAA0B,CAAC,IAAI,CAAC;oBAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;oBACnC,gBAAgB,EAAE,IAAI,CAAC,GAAG;oBAC1B,SAAS;oBACT,IAAI,EAAE,IAAI,CAAC,IAAI;iBAChB,CAAC,CAAC;YACL,CAAC;YAED,uDAAuD;YACvD,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC,CAAC;QAEF,mFAAmF;QAC3E,gBAAW,GAAG,CAAC,MAAe,EAAE,EAAE;YACxC,IAAI,MAAM;gBACR,KAAK,IAAI,CAAC,WAAW,CACnB,SAAS,CAAC,WAAW,CAAC,YAAY;oBAChC,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;oBAC5C,CAAC,CAAC,SAAS,CACd,CAAC;QACN,CAAC,CAAC;QAvTA,IAAI,CAAC,KAAK,GAAG;YACX,KAAK,EAAE,IAAI,KAAK,EAAY;YAC5B,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,iBAAiB,CAAC;YAC/C,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,UAAU,EAAE,KAAK,CAAC,UAAU;YAC5B,WAAW,EAAE,KAAK,CAAC,WAAW;YAC9B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;YACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;YACpD,MAAM,EAAE,KAAK;SACd,CAAC;IACJ,CAAC;IAEe,KAAK,CAAC,iBAAiB;QACrC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,IAAI,CAAC,KAAK,CAAC,oBAAoB;YACjC,IAAI,CAAC,yBAAyB;gBAC5B,YAAY,CAAC,8BAA8B,CAAC,WAAW,CACrD,IAAI,CAAC,kCAAkC,CACxC,CAAC;QAEN,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;IACzB,CAAC;IAEe,KAAK,CAAC,kBAAkB,CAAC,SAA4B;QACnE,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,EAAE,CAAC;YAC3C,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEe,oBAAoB;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,IAAI,CAAC,yBAAyB;YAAE,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACvE,CAAC;IAUO,kBAAkB,CACxB,OAAmB,EACnB,OAAmB,EACnB,MAAkB,EAClB,OAAoB,EACpB,eAA4B,EAC5B,eAA4B,EAC5B,cAA2B,EAC3B,eAA4B;QAE5B,MAAM,gBAAgB,GAAa;YACjC,GAAG,EAAE,kBAAkB;YACvB,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,wBAAwB,CAAC;YACrD,OAAO,EAAE,KAAK;YACd,IAAI,EAAE,YAAY,CAAC,SAAS;YAC5B,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;SACtD,CAAC;QAEF,MAAM,gBAAgB,GAAa;YACjC,GAAG,EAAE,kBAAkB;YACvB,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,oBAAoB,CAAC;YACjD,OAAO,EAAE,KAAK;YACd,IAAI,EAAE,YAAY,CAAC,SAAS;YAC5B,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;SACtD,CAAC;QAEF,MAAM,cAAc,GAAa;YAC/B,GAAG,EAAE,gBAAgB;YACrB,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,kBAAkB,CAAC;YAC/C,OAAO,EAAE,KAAK;YACd,IAAI,EAAE,YAAY,CAAC,SAAS;YAC5B,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM;SACnD,CAAC;QAEF,MAAM,UAAU,GAAG,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC;QAExE,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAClC,0EAA0E;YAC1E,MAAM,gBAAgB,GAAa;gBACjC,GAAG,EAAE,kBAAkB;gBACvB,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,kBAAkB,CAAC;gBAC/C,OAAO,EAAE,KAAK;gBACd,IAAI,EAAE,YAAY,CAAC,SAAS;gBAC5B,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;aACtD,CAAC;YAEF,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;gBAAE,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC9D,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,IAAI,CAAC,QAAQ,CAAC;YACZ,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,iBAAiB,CAAC;YAC/C,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;IACL,CAAC;IACD;;OAEG;IACI,KAAK,CAAC,SAAS;QACpB,oCAAoC;QACpC,MAAM,OAAO,GAAe,EAAE,CAAC;QAC/B,MAAM,OAAO,GAAe,EAAE,CAAC;QAC/B,MAAM,MAAM,GAAe,EAAE,CAAC;QAC9B,MAAM,OAAO,GAAe,EAAE,CAAC;QAC/B,IAAI,eAAuC,CAAC;QAC5C,IAAI,eAAuC,CAAC;QAC5C,IAAI,cAAsC,CAAC;QAC3C,IAAI,eAAuC,CAAC;QAC5C,MAAM,KAAK,GAAG,IAAI,WAAW,EAAY,CAAC;QAE1C,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;YAC7D,MAAM,KAAK,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;YACrC,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAE/D,KAAK,CAAC,OAAO,CAAC,CAAC,IAA+B,EAAE,EAAE;gBAChD,MAAM,QAAQ,GAAa;oBACzB,GAAG,EAAE,IAAI,CAAC,EAAE;oBACZ,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,OAAO,EACL,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,WAAW,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE;wBACrD,CAAC,CAAC,IAAI;wBACN,CAAC,CAAC,KAAK;oBACX,IAAI,EAAE,YAAY,CAAC,IAAI;iBACxB,CAAC;gBAEF,MAAM,SAAS,GAAG,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAE5D,IAAI,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;oBAC/D,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;qBACpB,IAAI,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;oBACpE,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;qBACpB,IAAI,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU;oBAChE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;qBACnB,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW;oBAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC1D,CAAC,CAAC,CAAC;YAEH,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACjC,MAAM,yBAAyB,GAAG,KAAK,CAAC,MAAM,CAC5C,OAAO,EACP,CAAC,MAAM,CAAC,EACR,IAAI,CAAC,YAAY,CAClB,CAAC,OAAqB,CAAC;gBACxB,MAAM,yBAAyB,GAAG,KAAK,CAAC,MAAM,CAC5C,OAAO,EACP,CAAC,MAAM,CAAC,EACR,IAAI,CAAC,YAAY,CAClB,CAAC,OAAqB,CAAC;gBACxB,MAAM,wBAAwB,GAAG,KAAK,CAAC,MAAM,CAC3C,MAAM,EACN,CAAC,MAAM,CAAC,EACR,IAAI,CAAC,YAAY,CAClB,CAAC,OAAqB,CAAC;gBACxB,MAAM,yBAAyB,GAAG,KAAK,CAAC,MAAM,CAC5C,OAAO,EACP,CAAC,MAAM,CAAC,EACR,IAAI,CAAC,YAAY,CAClB,CAAC,OAAqB,CAAC;gBACxB,eAAe,GAAG,EAAE,CAAC;gBACrB,eAAe,GAAG,EAAE,CAAC;gBACrB,cAAc,GAAG,EAAE,CAAC;gBACpB,eAAe,GAAG,EAAE,CAAC;gBACrB,yBAAyB,CAAC,OAAO,CAAC,UAAU,MAAM;oBAChD,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;gBACH,yBAAyB,CAAC,OAAO,CAAC,UAAU,MAAM;oBAChD,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;gBACH,wBAAwB,CAAC,OAAO,CAAC,UAAU,MAAM;oBAC/C,cAAc,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBACpC,CAAC,CAAC,CAAC;gBACH,yBAAyB,CAAC,OAAO,CAAC,UAAU,MAAM;oBAChD,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QAED,IAAI,CAAC,kBAAkB,CACrB,OAAO,EACP,OAAO,EACP,MAAM,EACN,OAAO,EACP,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,CAChB,CAAC;IACJ,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,WAAW,CAAC,MAAY;QACnC,mCAAmC;QACnC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW;YAAE,OAAO;QAEpC,oCAAoC;QACpC,MAAM,OAAO,GAAe,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAS,CAAC;QAC1D,MAAM,OAAO,GAAe,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAS,CAAC;QAC1D,MAAM,MAAM,GAAe,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAS,CAAC;QACzD,MAAM,OAAO,GACX,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QAEnE,MAAM,cAAc,GAAG,CAAC,IAAc,EAAE,EAAE;YACxC,IAAI,IAAI,CAAC,GAAG,KAAK,MAAM;gBAAE,OAAO,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;gBACtD,OAAO,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC1C,CAAC,CAAC;QAEF,IAAI,CAAC,kBAAkB,CACrB,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAC3B,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAC3B,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,EAC1B,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAC5B,CAAC;IACJ,CAAC;IA6FD;;OAEG;IACa,MAAM;QACpB,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAExC,OAAO,CACL,oBAAC,UAAU,OACL,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,mBAAmB,EAAE,QAAQ,CAAC,CAAC,MAAc,EAAE,EAAE;gBAC/C,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;gBAC3B,IACE,IAAI,CAAC,UAAU;oBACf,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,KAAK;oBAC3B,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;oBAE5B,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;gBAClC,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACxB,CAAC,EAAE,GAAG,CAAC,EACP,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAC3B,CACH,CAAC;IACJ,CAAC;;AAjYuB,2CAA8B,GAAG,IAAI,SAAS,EAKlE,AALkD,CAKjD;AAKkB,yBAAY,GAA6B;IAC9D,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,IAAI;IAClB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;CAClB,AALkC,CAKjC;AAEF;;GAEG;AACoB,uCAA0B,GAC/C,IAAI,wBAAwB,EAAE,AADiB,CAChB,CAAC,8CAA8C;AAqXlF;;;;GAIG;AACH,MAAM,UAAU,2BAA2B,CACzC,KAAuC;IAEvC,MAAM,MAAM,GAAG,sBAAsB;IACnC,mDAAmD;IACnD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,gBAAgB,CAChD,CAAC;IACF,OAAO,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAAC;AACrD,CAAC","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 Picker\n */\n\nimport * as React from \"react\";\nimport { UiEvent } from \"@itwin/appui-abstract\";\nimport type { Id64String } from \"@itwin/core-bentley\";\nimport { assert, BeUiEvent, Logger } from \"@itwin/core-bentley\";\nimport type { IModelConnection, ViewState } from \"@itwin/core-frontend\";\nimport { FuzzySearch, IModelApp } from \"@itwin/core-frontend\";\nimport type { SupportsViewSelectorChange } from \"../content/ContentControl.js\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { ViewUtilities } from \"../utils/ViewUtilities.js\";\nimport type { ListItem } from \"./ListPicker.js\";\nimport { ListItemType, ListPicker } from \"./ListPicker.js\";\nimport { debounce } from \"lodash\";\nimport svgSavedView from \"@bentley/icons-generic/icons/saved-view.svg\";\nimport { useReduxFrameworkState } from \"../uistate/useReduxFrameworkState.js\";\nimport type { ListenerType } from \"@itwin/core-react/internal\";\n\n// cSpell:ignore Spatials\n\n/** [[ViewSelectorChangedEvent]] Args interface.\n * @beta\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 ViewSelectorChangedEventArgs {\n  iModelConnection: IModelConnection;\n  viewDefinitionId: Id64String;\n  viewState: ViewState;\n  name: string;\n}\n\n/** ViewSelector Changed Event class.\n * @beta\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 ViewSelectorChangedEvent extends UiEvent<ViewSelectorChangedEventArgs> {}\n\n/** Properties for the [[ViewSelector]] component\n * @beta\n */\nexport interface ViewSelectorProps {\n  imodel?: IModelConnection;\n  listenForShowUpdates?: boolean;\n  onViewSelected?: (args: {\n    iModelConnection: IModelConnection;\n    viewDefinitionId: Id64String;\n    viewState: ViewState;\n    name: string;\n  }) => void;\n\n  showSpatials: boolean;\n  showDrawings: boolean;\n  showSheets: boolean;\n  showUnknown: boolean;\n  searchBox?: boolean;\n  panelOnly?: boolean;\n}\n\n/** State for the [[ViewSelector]] component\n * @beta\n */\ninterface ViewSelectorState {\n  items: ListItem[];\n  title: string;\n  initialized: boolean;\n  showSpatials: boolean;\n  showDrawings: boolean;\n  showSheets: boolean;\n  showUnknown: boolean;\n  searchBox: boolean;\n  panelOnly: boolean;\n  expand: boolean;\n}\n\n/** Default properties of [[ViewSelector]] component.\n * @beta\n */\nexport type ViewSelectorDefaultProps = Pick<\n  ViewSelectorProps,\n  \"showSpatials\" | \"showDrawings\" | \"showSheets\" | \"showUnknown\"\n>;\n\n/** View Selector React component\n * @beta\n */\nexport class ViewSelector extends React.Component<\n  ViewSelectorProps,\n  ViewSelectorState\n> {\n  private static readonly _onViewSelectorShowUpdateEvent = new BeUiEvent<{\n    showSpatials: boolean;\n    showDrawings: boolean;\n    showSheets: boolean;\n    showUnknown: boolean;\n  }>();\n  private _removeShowUpdateListener?: () => void;\n  private _isMounted = false;\n  private _searchInput = \"\";\n\n  public static readonly defaultProps: ViewSelectorDefaultProps = {\n    showSpatials: true,\n    showDrawings: true,\n    showSheets: true,\n    showUnknown: true,\n  };\n\n  /** Gets the [[ViewSelectorChangedEvent]].\n   * @deprecated in 4.16.0. Use {@link ViewSelectorProps.onViewSelected} prop instead.\n   */\n  public static readonly onViewSelectorChangedEvent =\n    new ViewSelectorChangedEvent(); // eslint-disable-line deprecation/deprecation\n\n  /** Updates the ViewSelector show settings.\n   */\n  public static updateShowSettings(\n    showSpatials: boolean,\n    showDrawings: boolean,\n    showSheets: boolean,\n    showUnknown: boolean\n  ): void {\n    ViewSelector._onViewSelectorShowUpdateEvent.emit({\n      showSpatials,\n      showDrawings,\n      showSheets,\n      showUnknown,\n    });\n  }\n\n  /** Creates a ViewSelector */\n  constructor(props: ViewSelectorProps) {\n    super(props);\n\n    this.state = {\n      items: new Array<ListItem>(),\n      title: UiFramework.translate(\"viewTypes.views\"),\n      initialized: false,\n      showSpatials: props.showSpatials,\n      showDrawings: props.showDrawings,\n      showSheets: props.showSheets,\n      showUnknown: props.showUnknown,\n      searchBox: props.searchBox ? props.searchBox : true,\n      panelOnly: props.panelOnly ? props.panelOnly : false,\n      expand: false,\n    };\n  }\n\n  public override async componentDidMount() {\n    this._isMounted = true;\n    if (this.props.listenForShowUpdates)\n      this._removeShowUpdateListener =\n        ViewSelector._onViewSelectorShowUpdateEvent.addListener(\n          this._handleViewSelectorShowUpdateEvent\n        );\n\n    await this.loadViews();\n  }\n\n  public override async componentDidUpdate(prevProps: ViewSelectorProps) {\n    if (this.props.imodel !== prevProps.imodel) {\n      await this.loadViews();\n    }\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n    if (this._removeShowUpdateListener) this._removeShowUpdateListener();\n  }\n\n  private _handleViewSelectorShowUpdateEvent: ListenerType<\n    typeof ViewSelector._onViewSelectorShowUpdateEvent\n  > = (args): void => {\n    if (!this._isMounted) return;\n\n    this.setState(args, async () => this.loadViews());\n  };\n\n  private setStateContainers(\n    views3d: ListItem[],\n    views2d: ListItem[],\n    sheets: ListItem[],\n    unknown?: ListItem[],\n    views3dFiltered?: ListItem[],\n    views2dFiltered?: ListItem[],\n    sheetsFiltered?: ListItem[],\n    unknownFiltered?: ListItem[]\n  ) {\n    const views3dContainer: ListItem = {\n      key: \"views3dContainer\",\n      name: UiFramework.translate(\"viewTypes.spatialViews\"),\n      enabled: false,\n      type: ListItemType.Container,\n      children: views3dFiltered ? views3dFiltered : views3d,\n    };\n\n    const views2dContainer: ListItem = {\n      key: \"views2dContainer\",\n      name: UiFramework.translate(\"viewTypes.drawings\"),\n      enabled: false,\n      type: ListItemType.Container,\n      children: views2dFiltered ? views2dFiltered : views2d,\n    };\n\n    const sheetContainer: ListItem = {\n      key: \"sheetContainer\",\n      name: UiFramework.translate(\"viewTypes.sheets\"),\n      enabled: false,\n      type: ListItemType.Container,\n      children: sheetsFiltered ? sheetsFiltered : sheets,\n    };\n\n    const containers = [views3dContainer, views2dContainer, sheetContainer];\n\n    if (unknown && unknown.length > 0) {\n      // This should never show, but just in case we missed a type of view state\n      const unknownContainer: ListItem = {\n        key: \"unknownContainer\",\n        name: UiFramework.translate(\"viewTypes.others\"),\n        enabled: false,\n        type: ListItemType.Container,\n        children: unknownFiltered ? unknownFiltered : unknown,\n      };\n\n      if (unknown.length !== 0) containers.push(unknownContainer);\n    }\n\n    if (!this._isMounted) return;\n\n    this.setState({\n      items: containers,\n      title: UiFramework.translate(\"viewTypes.views\"),\n      initialized: true,\n    });\n  }\n  /**\n   * Query the views and set the initial state with the iModel's views.\n   */\n  public async loadViews(): Promise<void> {\n    // Query views and add them to state\n    const views3d: ListItem[] = [];\n    const views2d: ListItem[] = [];\n    const sheets: ListItem[] = [];\n    const unknown: ListItem[] = [];\n    let views3dFiltered: ListItem[] | undefined;\n    let views2dFiltered: ListItem[] | undefined;\n    let sheetsFiltered: ListItem[] | undefined;\n    let unknownFiltered: ListItem[] | undefined;\n    const fuzzy = new FuzzySearch<ListItem>();\n\n    if (this.props.imodel && this.props.imodel.views.getViewList) {\n      const query = { wantPrivate: false };\n      const specs = await this.props.imodel.views.getViewList(query);\n\n      specs.forEach((spec: IModelConnection.ViewSpec) => {\n        const viewItem: ListItem = {\n          key: spec.id,\n          name: spec.name,\n          enabled:\n            spec.id === IModelApp.viewManager.selectedView?.view.id\n              ? true\n              : false,\n          type: ListItemType.Item,\n        };\n\n        const className = ViewUtilities.getBisBaseClass(spec.class);\n\n        if (ViewUtilities.isSpatial(className) && this.state.showSpatials)\n          views3d.push(viewItem);\n        else if (ViewUtilities.isDrawing(className) && this.state.showDrawings)\n          views2d.push(viewItem);\n        else if (ViewUtilities.isSheet(className) && this.state.showSheets)\n          sheets.push(viewItem);\n        else if (this.state.showUnknown) unknown.push(viewItem);\n      });\n\n      if (this._searchInput.length > 0) {\n        const views3dFuzzySearchResults = fuzzy.search(\n          views3d,\n          [\"name\"],\n          this._searchInput\n        ).results as ListItem[];\n        const views2dFuzzySearchResults = fuzzy.search(\n          views2d,\n          [\"name\"],\n          this._searchInput\n        ).results as ListItem[];\n        const sheetsFuzzySearchResults = fuzzy.search(\n          sheets,\n          [\"name\"],\n          this._searchInput\n        ).results as ListItem[];\n        const unknownFuzzySearchResults = fuzzy.search(\n          unknown,\n          [\"name\"],\n          this._searchInput\n        ).results as ListItem[];\n        views3dFiltered = [];\n        views2dFiltered = [];\n        sheetsFiltered = [];\n        unknownFiltered = [];\n        views3dFuzzySearchResults.forEach(function (result) {\n          views3dFiltered?.push(result.item);\n        });\n        views2dFuzzySearchResults.forEach(function (result) {\n          views2dFiltered?.push(result.item);\n        });\n        sheetsFuzzySearchResults.forEach(function (result) {\n          sheetsFiltered?.push(result.item);\n        });\n        unknownFuzzySearchResults.forEach(function (result) {\n          unknownFiltered?.push(result.item);\n        });\n      }\n    }\n\n    this.setStateContainers(\n      views3d,\n      views2d,\n      sheets,\n      unknown,\n      views3dFiltered,\n      views2dFiltered,\n      sheetsFiltered,\n      unknownFiltered\n    );\n  }\n\n  /**\n   * Update state of the entries in the widget.\n   * @param viewId Identifier for the relevant view\n   */\n  public async updateState(viewId?: any): Promise<void> {\n    // Wait for initialization finished\n    if (!this.state.initialized) return;\n\n    // Query views and add them to state\n    const views3d: ListItem[] = this.state.items[0].children!;\n    const views2d: ListItem[] = this.state.items[1].children!;\n    const sheets: ListItem[] = this.state.items[2].children!;\n    const unknown: ListItem[] =\n      this.state.items.length > 3 ? this.state.items[3].children! : [];\n\n    const updateChildren = (item: ListItem) => {\n      if (item.key === viewId) return { ...item, enabled: true };\n      else return { ...item, enabled: false };\n    };\n\n    this.setStateContainers(\n      views3d.map(updateChildren),\n      views2d.map(updateChildren),\n      sheets.map(updateChildren),\n      unknown.map(updateChildren)\n    );\n  }\n\n  // enable/disable the models\n  private _setEnabled = async (item: ListItem, _enabled: boolean) => {\n    const activeContentControl = // eslint-disable-next-line deprecation/deprecation\n      UiFramework.content.getActiveContentControl() as unknown as  // eslint-disable-next-line deprecation/deprecation\n        | SupportsViewSelectorChange\n        | undefined;\n    if (\n      !this.props.onViewSelected &&\n      (!activeContentControl ||\n        !activeContentControl.supportsViewSelectorChange)\n    ) {\n      Logger.logError(\n        UiFramework.loggerCategory(\"ViewSelector\"),\n        `No active ContentControl for ViewSelector change`\n      );\n      return;\n    }\n\n    // Enable the item temporarily to let user see that their click was registered\n    // while we query for view state and change the current view which may take a bit\n    if (_enabled && item.type !== ListItemType.Container) {\n      // This itemMapper simply looks through all the list items and their nested children and enables the one\n      // that we have registered to enable\n      // Also disable all other items\n      const itemMapper: (tempItem: ListItem) => ListItem = (\n        tempItem: ListItem\n      ) => {\n        if (tempItem.type === ListItemType.Container) {\n          return { ...tempItem, children: tempItem.children!.map(itemMapper) };\n        } else if (tempItem.key === item.key) {\n          return { ...tempItem, enabled: true };\n        } else {\n          return { ...tempItem, enabled: false };\n        }\n      };\n\n      // Create the new array with the current item enabled\n      const itemsWithEnabled = this.state.items.map(itemMapper);\n\n      if (!this._isMounted) return;\n\n      // Update the state so that we show the user it was enabled while we work in the background\n      this.setState({ items: itemsWithEnabled });\n    }\n\n    assert(!!this.props.imodel);\n    assert(!!item.name);\n\n    // Load the view state using the viewSpec's ID\n    const viewState = await this.props.imodel.views.load(item.key);\n\n    if (this.props.onViewSelected) {\n      this.props.onViewSelected({\n        iModelConnection: this.props.imodel,\n        viewDefinitionId: item.key,\n        viewState,\n        name: item.name,\n      });\n    } else if (activeContentControl) {\n      // Let activeContentControl process the ViewSelector change\n      await activeContentControl.processViewSelectorChange(\n        this.props.imodel,\n        item.key,\n        viewState,\n        item.name\n      );\n\n      // Emit a change event\n      // eslint-disable-next-line deprecation/deprecation\n      ViewSelector.onViewSelectorChangedEvent.emit({\n        iModelConnection: this.props.imodel,\n        viewDefinitionId: item.key,\n        viewState,\n        name: item.name,\n      });\n    }\n\n    // Set state to show enabled the view that got selected\n    void this.updateState(item.key);\n  };\n\n  // Hook on the category selector being expanded so that we may initialize if needed\n  private _onExpanded = (expand: boolean) => {\n    if (expand)\n      void this.updateState(\n        IModelApp.viewManager.selectedView\n          ? IModelApp.viewManager.selectedView.view.id\n          : undefined\n      );\n  };\n\n  /**\n   *  Renders ViewSelector component\n   */\n  public override render() {\n    const { imodel, ...props } = this.props;\n\n    return (\n      <ListPicker\n        {...props}\n        title={this.state.title}\n        setEnabled={this._setEnabled}\n        items={this.state.items}\n        iconSpec={svgSavedView}\n        onExpanded={this._onExpanded}\n        searchBox={this.state.searchBox}\n        onSearchValueChange={debounce((search: string) => {\n          this._searchInput = search;\n          if (\n            this._isMounted &&\n            this.state.expand === false &&\n            this._searchInput.length > 0\n          )\n            this.setState({ expand: true });\n          void this.loadViews();\n        }, 300)}\n        panelOnly={this.state.panelOnly}\n        expanded={this.state.expand}\n      />\n    );\n  }\n}\n\ntype IModelConnectedViewSelectorProps = Omit<\n  ViewSelectorProps,\n  \"imodel\" | keyof ViewSelectorDefaultProps\n> &\n  Partial<ViewSelectorDefaultProps>;\n\n/** ViewSelector that is connected to the IModelConnection property in the Redux store. The application must set up the Redux store and include the FrameworkReducer.\n * @note Requires redux provider.\n * @beta\n * @deprecated in 4.15.0. Use {@link ViewSelector} instead.\n */\nexport function IModelConnectedViewSelector(\n  props: IModelConnectedViewSelectorProps\n) {\n  const iModel = useReduxFrameworkState(\n    // eslint-disable-next-line deprecation/deprecation\n    (state) => state?.sessionState.iModelConnection\n  );\n  return <ViewSelector imodel={iModel} {...props} />;\n}\n"]}

package/lib/appui-react/popup/CardPopup.d.ts

@@ -0,0 +1,65 @@
+/** @packageDocumentation
+ * @module Popup
+ */
+import "./CardPopup.scss";
+import * as React from "react";
+import type { CommonToolbarItem, PropertyRecord } from "@itwin/appui-abstract";
+import type { RelativePosition } from "@itwin/appui-abstract";
+import type { Orientation } from "@itwin/components-react";
+import type { RequireAtLeastOne } from "@itwin/core-bentley";
+import type { PopupContentType, PopupPropsBase } from "./PopupManager.js";
+import type { ToolbarItem } from "../toolbar/ToolbarItem.js";
+import { type Placement } from "../utils/Placement.js";
+import { WrapperContext } from "../configurableui/ConfigurableUiContent.js";
+import type { SizeProps } from "../utils/SizeProps.js";
+/** Props for defining a CardPopup editor.
+ * @beta */
+export type CardPopupProps = Omit<PopupPropsBase, "el"> & {
+    content: PopupContentType;
+    title: string | PropertyRecord | undefined;
+    items: CommonToolbarItem[] | ToolbarItem[] | undefined;
+    /** @deprecated in 4.16.0. Not used by the {@link CardPopup} component. */
+    orientation: Orientation;
+    onCancel: () => void;
+    onItemExecuted: (item: any) => void;
+    el?: HTMLElement;
+} & RequireAtLeastOne<{
+    /** @deprecated in 4.16.0. Use `placement` property instead. */
+    relativePosition: RelativePosition;
+    placement: Placement;
+}>;
+interface CardPopupState {
+    size: SizeProps;
+}
+/** Popup component for Input Editor
+ * @beta
+ */
+export declare class CardPopup extends React.PureComponent<CardPopupProps, CardPopupState> {
+    /** @internal */
+    static contextType: React.Context<HTMLElement>;
+    /** @internal */
+    context: React.ContextType<typeof WrapperContext>;
+    readonly state: {
+        size: {
+            width: number;
+            height: number;
+        };
+    };
+    private _onSizeKnown;
+    private _handleKeyDown;
+    private _cancel;
+    render(): React.JSX.Element;
+}
+/** Props defining a Card component
+ * @beta */
+export interface CardProps {
+    content: PopupContentType;
+    title: string | PropertyRecord | undefined;
+    items?: CommonToolbarItem[] | ToolbarItem[] | undefined;
+    onItemExecuted: (item: any) => void;
+}
+/** Card component
+ * @beta */
+export declare function Card(props: CardProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CardPopup.d.ts.map

package/lib/appui-react/popup/CardPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardPopup.d.ts","sourceRoot":"","sources":["../../../src/appui-react/popup/CardPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAO3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAK7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAI1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD;WACW;AACX,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,GAAG;IACxD,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAAC;IAC3C,KAAK,EAAE,iBAAiB,EAAE,GAAG,WAAW,EAAE,GAAG,SAAS,CAAC;IACvD,0EAA0E;IAC1E,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,GAAG,iBAAiB,CAAC;IAClB,+DAA+D;IAC/D,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AAEL,UAAU,cAAc;IACtB,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,aAAa,CAChD,cAAc,EACd,cAAc,CACf;IACC,gBAAgB;IAChB,OAAuB,WAAW,6BAAkB;IACpD,gBAAgB;IACD,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,cAAc,CAAC,CAAC;IACjE,SAAyB,KAAK;;;;;MAE5B;IAEF,OAAO,CAAC,YAAY,CAOlB;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,OAAO,CAAC,OAAO;IAMC,MAAM;CAwCvB;AAED;WACW;AACX,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAAC;IAC3C,KAAK,CAAC,EAAE,iBAAiB,EAAE,GAAG,WAAW,EAAE,GAAG,SAAS,CAAC;IACxD,cAAc,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CACrC;AAED;WACW;AACX,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,qBA8CpC"}

package/lib/appui-react/popup/CardPopup.js

@@ -0,0 +1,90 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Popup
+ */
+import "./CardPopup.scss";
+import * as React from "react";
+import classnames from "classnames";
+import { Key } from "ts-key-enum";
+import { Direction, PropertyValueRendererManager, ToolbarOpacitySetting, ToolbarPanelAlignment, } from "@itwin/components-react";
+import { DivWithOutsideClick, MessageRenderer } from "@itwin/core-react";
+import { FocusTrap, Point } from "@itwin/core-react/internal";
+import { Text } from "@itwin/itwinui-react";
+import { CursorPopup } from "../cursor/cursorpopup/CursorPopup.js";
+import { isReactContent, PopupManager } from "./PopupManager.js";
+import { PositionPopup } from "./PositionPopup.js";
+import { ToolbarWithOverflow } from "../toolbar/ToolbarWithOverflow.js";
+import { mapToPlacement } from "../utils/Placement.js";
+import { WrapperContext } from "../configurableui/ConfigurableUiContent.js";
+/** Popup component for Input Editor
+ * @beta
+ */
+export class CardPopup extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            size: { width: -1, height: -1 },
+        };
+        this._onSizeKnown = (newSize) => {
+            if (newSize.height === this.state.size.height &&
+                newSize.width === this.state.size.width)
+                return;
+            this.setState({ size: newSize });
+        };
+        this._handleKeyDown = (event) => {
+            switch (event.key) {
+                case Key.Escape.valueOf():
+                    this._cancel();
+                    break;
+            }
+        };
+    }
+    _cancel() {
+        if (this.props.onCancel) {
+            this.props.onCancel();
+        }
+    }
+    render() {
+        let point = PopupManager.getPopupPosition(this.props.el ?? this.context, this.props.pt, new Point(), this.state.size);
+        const popupRect = CursorPopup.getPopupRect(point, this.props.offset, this.state.size, 
+        // eslint-disable-next-line deprecation/deprecation
+        this.props.placement ?? mapToPlacement(this.props.relativePosition));
+        point = new Point(popupRect.left, popupRect.top);
+        return (React.createElement(PositionPopup, { key: this.props.id, className: classnames("uifw-no-border", "uifw-card"), point: point, onSizeKnown: this._onSizeKnown },
+            React.createElement(DivWithOutsideClick, { onOutsideClick: this.props.onCancel, onKeyDown: this._handleKeyDown },
+                React.createElement(FocusTrap, { active: true, returnFocusOnDeactivate: true },
+                    React.createElement(Card, { content: this.props.content, title: this.props.title, items: this.props.items, onItemExecuted: this.props.onItemExecuted })))));
+    }
+}
+/** @internal */
+CardPopup.contextType = WrapperContext;
+/** Card component
+ * @beta */
+export function Card(props) {
+    let titleNode;
+    if (props.title) {
+        if (typeof props.title === "string")
+            titleNode = React.createElement(Text, { variant: "leading" }, props.title);
+        else {
+            const propertyValueRendererManager = PropertyValueRendererManager.defaultManager;
+            const titleValue = propertyValueRendererManager.render(props.title);
+            titleNode = React.createElement(Text, { variant: "leading" }, titleValue);
+        }
+    }
+    const content = isReactContent(props.content) ? (props.content.reactNode) : (
+    // eslint-disable-next-line deprecation/deprecation
+    React.createElement(MessageRenderer, { message: props.content }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "uifw-card-content" },
+            props.title && (React.createElement(React.Fragment, null,
+                titleNode,
+                React.createElement("div", { className: "uifw-card-gap" }))),
+            content),
+        props.items && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "uifw-card-separator" }),
+            React.createElement(ToolbarWithOverflow, { expandsTo: Direction.Bottom, panelAlignment: ToolbarPanelAlignment.Start, items: props.items, useDragInteraction: true, toolbarOpacitySetting: ToolbarOpacitySetting.Transparent, onItemExecuted: props.onItemExecuted })))));
+}
+//# sourceMappingURL=CardPopup.js.map

package/lib/appui-react/popup/CardPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardPopup.js","sourceRoot":"","sources":["../../../src/appui-react/popup/CardPopup.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 Popup\n */\n\nimport \"./CardPopup.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { Key } from \"ts-key-enum\";\nimport type { CommonToolbarItem, PropertyRecord } from \"@itwin/appui-abstract\";\nimport type { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { Orientation } from \"@itwin/components-react\";\nimport {\n  Direction,\n  PropertyValueRendererManager,\n  ToolbarOpacitySetting,\n  ToolbarPanelAlignment,\n} from \"@itwin/components-react\";\nimport type { RequireAtLeastOne } from \"@itwin/core-bentley\";\nimport { DivWithOutsideClick, MessageRenderer } from \"@itwin/core-react\";\nimport { FocusTrap, Point } from \"@itwin/core-react/internal\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { CursorPopup } from \"../cursor/cursorpopup/CursorPopup.js\";\nimport type { PopupContentType, PopupPropsBase } from \"./PopupManager.js\";\nimport { isReactContent, PopupManager } from \"./PopupManager.js\";\nimport { PositionPopup } from \"./PositionPopup.js\";\nimport { ToolbarWithOverflow } from \"../toolbar/ToolbarWithOverflow.js\";\nimport type { ToolbarItem } from \"../toolbar/ToolbarItem.js\";\nimport { mapToPlacement, type Placement } from \"../utils/Placement.js\";\nimport { WrapperContext } from \"../configurableui/ConfigurableUiContent.js\";\nimport type { SizeProps } from \"../utils/SizeProps.js\";\n\n/** Props for defining a CardPopup editor.\n * @beta */\nexport type CardPopupProps = Omit<PopupPropsBase, \"el\"> & {\n  content: PopupContentType;\n  title: string | PropertyRecord | undefined;\n  items: CommonToolbarItem[] | ToolbarItem[] | undefined;\n  /** @deprecated in 4.16.0. Not used by the {@link CardPopup} component. */\n  orientation: Orientation;\n  onCancel: () => void;\n  onItemExecuted: (item: any) => void;\n  el?: HTMLElement;\n} & RequireAtLeastOne<{\n    /** @deprecated in 4.16.0. Use `placement` property instead. */\n    relativePosition: RelativePosition;\n    placement: Placement;\n  }>;\n\ninterface CardPopupState {\n  size: SizeProps;\n}\n\n/** Popup component for Input Editor\n * @beta\n */\nexport class CardPopup extends React.PureComponent<\n  CardPopupProps,\n  CardPopupState\n> {\n  /** @internal */\n  public static override contextType = WrapperContext;\n  /** @internal */\n  public declare context: React.ContextType<typeof WrapperContext>;\n  public override readonly state = {\n    size: { width: -1, height: -1 },\n  };\n\n  private _onSizeKnown = (newSize: SizeProps) => {\n    if (\n      newSize.height === this.state.size.height &&\n      newSize.width === this.state.size.width\n    )\n      return;\n    this.setState({ size: newSize });\n  };\n\n  private _handleKeyDown = (event: React.KeyboardEvent): void => {\n    switch (event.key) {\n      case Key.Escape.valueOf():\n        this._cancel();\n        break;\n    }\n  };\n\n  private _cancel() {\n    if (this.props.onCancel) {\n      this.props.onCancel();\n    }\n  }\n\n  public override render() {\n    let point = PopupManager.getPopupPosition(\n      this.props.el ?? this.context,\n      this.props.pt,\n      new Point(),\n      this.state.size\n    );\n    const popupRect = CursorPopup.getPopupRect(\n      point,\n      this.props.offset,\n      this.state.size,\n      // eslint-disable-next-line deprecation/deprecation\n      this.props.placement ?? mapToPlacement(this.props.relativePosition)\n    );\n    point = new Point(popupRect.left, popupRect.top);\n\n    return (\n      <PositionPopup\n        key={this.props.id}\n        className={classnames(\"uifw-no-border\", \"uifw-card\")}\n        point={point}\n        onSizeKnown={this._onSizeKnown}\n      >\n        {/* eslint-disable-next-line deprecation/deprecation */}\n        <DivWithOutsideClick\n          onOutsideClick={this.props.onCancel}\n          onKeyDown={this._handleKeyDown}\n        >\n          <FocusTrap active={true} returnFocusOnDeactivate={true}>\n            <Card\n              content={this.props.content}\n              title={this.props.title}\n              items={this.props.items}\n              onItemExecuted={this.props.onItemExecuted}\n            />\n          </FocusTrap>\n        </DivWithOutsideClick>\n      </PositionPopup>\n    );\n  }\n}\n\n/** Props defining a Card component\n * @beta */\nexport interface CardProps {\n  content: PopupContentType;\n  title: string | PropertyRecord | undefined;\n  items?: CommonToolbarItem[] | ToolbarItem[] | undefined;\n  onItemExecuted: (item: any) => void;\n}\n\n/** Card component\n * @beta */\nexport function Card(props: CardProps) {\n  let titleNode: React.ReactNode;\n  if (props.title) {\n    if (typeof props.title === \"string\")\n      titleNode = <Text variant=\"leading\">{props.title}</Text>;\n    else {\n      const propertyValueRendererManager =\n        PropertyValueRendererManager.defaultManager;\n      const titleValue = propertyValueRendererManager.render(props.title);\n      titleNode = <Text variant=\"leading\">{titleValue}</Text>;\n    }\n  }\n\n  const content = isReactContent(props.content) ? (\n    props.content.reactNode\n  ) : (\n    // eslint-disable-next-line deprecation/deprecation\n    <MessageRenderer message={props.content} />\n  );\n\n  return (\n    <>\n      <div className=\"uifw-card-content\">\n        {props.title && (\n          <>\n            {titleNode}\n            <div className=\"uifw-card-gap\" />\n          </>\n        )}\n        {content}\n      </div>\n      {props.items && (\n        <>\n          <div className=\"uifw-card-separator\" />\n          <ToolbarWithOverflow\n            expandsTo={Direction.Bottom}\n            panelAlignment={ToolbarPanelAlignment.Start}\n            items={props.items}\n            useDragInteraction={true}\n            toolbarOpacitySetting={ToolbarOpacitySetting.Transparent}\n            onItemExecuted={props.onItemExecuted}\n          />\n        </>\n      )}\n    </>\n  );\n}\n"]}

package/lib/appui-react/popup/CardPopup.scss

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/z-index" as *;
+
+.uifw-card {
+  background-color: hsl(var(--iui-color-background-hsl) / 0.9);
+  @include uicore-z-index(content-card-popup);
+
+  .uifw-card-content {
+    padding: 6px 10px;
+  }
+
+  .uifw-card-separator {
+    height: 2px;
+    margin-bottom: 1px;
+    background: rgba(var(--iui-color-foreground-hsl), 0.45);
+  }
+}
+
+.uifw-card-gap {
+  height: 4px;
+}

package/lib/appui-react/popup/ComponentPopup.d.ts

@@ -0,0 +1,18 @@
+import type { Orientation } from "@itwin/components-react";
+import * as React from "react";
+import type { PopupPropsBase } from "./PopupManager.js";
+import { type Placement } from "../utils/Placement.js";
+interface ComponentPopupProps extends Omit<PopupPropsBase, "el"> {
+    children?: React.ReactNode;
+    placement: Placement;
+    orientation: Orientation;
+    onCancel: () => void;
+    anchor?: HTMLElement;
+}
+/**
+ * Displays a React Component inside a popup. The user-facing API is the {@link PopupManager} and should be used instead of this component.
+ * @internal
+ */
+export declare const ComponentPopup: React.FC<ComponentPopupProps>;
+export {};
+//# sourceMappingURL=ComponentPopup.d.ts.map

package/lib/appui-react/popup/ComponentPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentPopup.d.ts","sourceRoot":"","sources":["../../../src/appui-react/popup/ComponentPopup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKxD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIvD,UAAU,mBAAoB,SAAQ,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwCxD,CAAC"}

package/lib/appui-react/popup/ComponentPopup.js

@@ -0,0 +1,27 @@
+import { DivWithOutsideClick } from "@itwin/core-react";
+import { Point } from "@itwin/core-react/internal";
+import * as React from "react";
+import { CursorPopup } from "../cursor/cursorpopup/CursorPopup.js";
+import { PopupManager } from "./PopupManager.js";
+import { PositionPopup } from "./PositionPopup.js";
+import { useState } from "react";
+import { WrapperContext } from "../configurableui/ConfigurableUiContent.js";
+/**
+ * Displays a React Component inside a popup. The user-facing API is the {@link PopupManager} and should be used instead of this component.
+ * @internal
+ */
+export const ComponentPopup = ({ pt, children, offset, placement, id, onCancel, anchor, }) => {
+    const wrapper = React.useContext(WrapperContext);
+    const [size, setSize] = useState({ width: -1, height: -1 });
+    let point = PopupManager.getPopupPosition(anchor ?? wrapper, pt, new Point(), size);
+    const popupRect = CursorPopup.getPopupRect(point, offset, size, placement);
+    point = new Point(popupRect.left, popupRect.top);
+    const handleSizeKnown = (newSize) => {
+        if (newSize.height === size.height && newSize.width === size.width)
+            return;
+        setSize(newSize);
+    };
+    return (React.createElement(PositionPopup, { key: id, className: "uifw-no-border", point: point, onSizeKnown: handleSizeKnown },
+        React.createElement(DivWithOutsideClick, { onOutsideClick: onCancel }, children)));
+};
+//# sourceMappingURL=ComponentPopup.js.map

package/lib/appui-react/popup/ComponentPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentPopup.js","sourceRoot":"","sources":["../../../src/appui-react/popup/ComponentPopup.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAa5E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,EAAE,EACF,QAAQ,EACR,MAAM,EACN,SAAS,EACT,EAAE,EACF,QAAQ,EACR,MAAM,GACP,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAY,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAEvE,IAAI,KAAK,GAAG,YAAY,CAAC,gBAAgB,CACvC,MAAM,IAAI,OAAO,EACjB,EAAE,EACF,IAAI,KAAK,EAAE,EACX,IAAI,CACL,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;IAC3E,KAAK,GAAG,IAAI,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,CAAC,OAAkB,EAAE,EAAE;QAC7C,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;YAAE,OAAO;QAC3E,OAAO,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IACZ,GAAG,EAAE,EAAE,EACP,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,eAAe;QAG5B,oBAAC,mBAAmB,IAAC,cAAc,EAAE,QAAQ,IAC1C,QAAQ,CACW,CACR,CACjB,CAAC;AACJ,CAAC,CAAC","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 *--------------------------------------------------------------------------------------------*/\nimport type { Orientation } from \"@itwin/components-react\";\nimport { DivWithOutsideClick } from \"@itwin/core-react\";\nimport { Point } from \"@itwin/core-react/internal\";\nimport * as React from \"react\";\nimport { CursorPopup } from \"../cursor/cursorpopup/CursorPopup.js\";\nimport type { PopupPropsBase } from \"./PopupManager.js\";\nimport { PopupManager } from \"./PopupManager.js\";\nimport { PositionPopup } from \"./PositionPopup.js\";\nimport { useState } from \"react\";\nimport { WrapperContext } from \"../configurableui/ConfigurableUiContent.js\";\nimport { type Placement } from \"../utils/Placement.js\";\nimport type { SizeProps } from \"../utils/SizeProps.js\";\n\n// Props used for the ComponentPopup.\ninterface ComponentPopupProps extends Omit<PopupPropsBase, \"el\"> {\n  children?: React.ReactNode;\n  placement: Placement;\n  orientation: Orientation;\n  onCancel: () => void;\n  anchor?: HTMLElement;\n}\n\n/**\n * Displays a React Component inside a popup. The user-facing API is the {@link PopupManager} and should be used instead of this component.\n * @internal\n */\nexport const ComponentPopup: React.FC<ComponentPopupProps> = ({\n  pt,\n  children,\n  offset,\n  placement,\n  id,\n  onCancel,\n  anchor,\n}) => {\n  const wrapper = React.useContext(WrapperContext);\n  const [size, setSize] = useState<SizeProps>({ width: -1, height: -1 });\n\n  let point = PopupManager.getPopupPosition(\n    anchor ?? wrapper,\n    pt,\n    new Point(),\n    size\n  );\n\n  const popupRect = CursorPopup.getPopupRect(point, offset, size, placement);\n  point = new Point(popupRect.left, popupRect.top);\n\n  const handleSizeKnown = (newSize: SizeProps) => {\n    if (newSize.height === size.height && newSize.width === size.width) return;\n    setSize(newSize);\n  };\n\n  return (\n    <PositionPopup\n      key={id}\n      className=\"uifw-no-border\"\n      point={point}\n      onSizeKnown={handleSizeKnown}\n    >\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <DivWithOutsideClick onOutsideClick={onCancel}>\n        {children}\n      </DivWithOutsideClick>\n    </PositionPopup>\n  );\n};\n"]}