@itwin/components-react 4.0.0-dev.11 → 4.0.0-dev.13

package/lib/cjs/components-react/filtering/FilteringInput.d.ts

@@ -1,77 +1,77 @@
-/** @packageDocumentation
- * @module Filtering
- */
-import "./FilteringInput.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-import { ResultSelectorProps } from "./ResultSelector";
-/** [[FilteringInput]] React Component state
- * @internal
- */
-interface FilteringInputState {
-    /** A string which will be used for search */
-    searchText: string;
-    /**
-     *  Tells the component if the search was started.
-     *  Gets reset to false if search is canceled/cleared or searchText is changed.
-    */
-    searchStarted: boolean;
-    resultSelectorKey: number;
-}
-/**
- * [[FilteringInput]] React Component properties
- * @public
- */
-export interface FilteringInputProps extends CommonProps {
-    /** Filtering should start */
-    onFilterStart: (searchText: string) => void;
-    /** Filtering is canceled while still in progress */
-    onFilterCancel: () => void;
-    /** Filtering is cleared after everything's loaded */
-    onFilterClear: () => void;
-    /**
-     * Tells the component what is the status of filtering.
-     */
-    status: FilteringInputStatus;
-    /**
-     * [[ResultSelector]] React Component properties.
-     * Attribute should be memoized and updated when [[ResultSelector]] state needs to be reset.
-     * This allows resetting the selected active match index back to 0.
-     */
-    resultSelectorProps?: ResultSelectorProps;
-    /** Specify that the <input> element should automatically get focus */
-    autoFocus?: boolean;
-}
-/**
- * Enumeration of possible component contexts
- * @public
- */
-export declare enum FilteringInputStatus {
-    /** Component is ready to filter */
-    ReadyToFilter = 0,
-    /** Component's parent is currently filtering */
-    FilteringInProgress = 1,
-    /** Component's parent has finished filtering */
-    FilteringFinished = 2
-}
-/** A helper component for filtering trees and stepping through results
- * @public
- */
-export declare class FilteringInput extends React.PureComponent<FilteringInputProps, FilteringInputState> {
-    private _inputElement;
-    private _searchLabel;
-    private _cancelLabel;
-    private _clearLabel;
-    constructor(props: FilteringInputProps);
-    private focus;
-    private _onSearchButtonClick;
-    private _onCancelButtonClick;
-    private _onClearButtonClick;
-    private _onFilterKeyDown;
-    private _onInputChanged;
-    /** @internal */
-    componentDidUpdate(prevProps: FilteringInputProps): void;
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module Filtering
+ */
+import "./FilteringInput.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import { ResultSelectorProps } from "./ResultSelector";
+/** [[FilteringInput]] React Component state
+ * @internal
+ */
+interface FilteringInputState {
+    /** A string which will be used for search */
+    searchText: string;
+    /**
+     *  Tells the component if the search was started.
+     *  Gets reset to false if search is canceled/cleared or searchText is changed.
+    */
+    searchStarted: boolean;
+    resultSelectorKey: number;
+}
+/**
+ * [[FilteringInput]] React Component properties
+ * @public
+ */
+export interface FilteringInputProps extends CommonProps {
+    /** Filtering should start */
+    onFilterStart: (searchText: string) => void;
+    /** Filtering is canceled while still in progress */
+    onFilterCancel: () => void;
+    /** Filtering is cleared after everything's loaded */
+    onFilterClear: () => void;
+    /**
+     * Tells the component what is the status of filtering.
+     */
+    status: FilteringInputStatus;
+    /**
+     * [[ResultSelector]] React Component properties.
+     * Attribute should be memoized and updated when [[ResultSelector]] state needs to be reset.
+     * This allows resetting the selected active match index back to 0.
+     */
+    resultSelectorProps?: ResultSelectorProps;
+    /** Specify that the <input> element should automatically get focus */
+    autoFocus?: boolean;
+}
+/**
+ * Enumeration of possible component contexts
+ * @public
+ */
+export declare enum FilteringInputStatus {
+    /** Component is ready to filter */
+    ReadyToFilter = 0,
+    /** Component's parent is currently filtering */
+    FilteringInProgress = 1,
+    /** Component's parent has finished filtering */
+    FilteringFinished = 2
+}
+/** A helper component for filtering trees and stepping through results
+ * @public
+ */
+export declare class FilteringInput extends React.PureComponent<FilteringInputProps, FilteringInputState> {
+    private _inputElement;
+    private _searchLabel;
+    private _cancelLabel;
+    private _clearLabel;
+    constructor(props: FilteringInputProps);
+    private focus;
+    private _onSearchButtonClick;
+    private _onCancelButtonClick;
+    private _onClearButtonClick;
+    private _onFilterKeyDown;
+    private _onInputChanged;
+    /** @internal */
+    componentDidUpdate(prevProps: FilteringInputProps): void;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=FilteringInput.d.ts.map

package/lib/cjs/components-react/filtering/FilteringInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilteringInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filtering/FilteringInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvE;;GAEG;AACH,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB;;;MAGE;IACF,aAAa,EAAE,OAAO,CAAC;IAEvB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,6BAA6B;IAC7B,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,oDAAoD;IACpD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,qDAAqD;IACrD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,MAAM,EAAE,oBAAoB,CAAC;IAC7B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,oBAAY,oBAAoB;IAC9B,mCAAmC;IACnC,aAAa,IAAA;IACb,gDAAgD;IAChD,mBAAmB,IAAA;IACnB,gDAAgD;IAChD,iBAAiB,IAAA;CAClB;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC/F,OAAO,CAAC,aAAa,CAAuC;IAC5D,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,YAAY,CAAqC;IACzD,OAAO,CAAC,WAAW,CAAsC;gBAE7C,KAAK,EAAE,mBAAmB;IAStC,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,oBAAoB,CAU1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,gBAAgB,CAUtB;IAEF,OAAO,CAAC,eAAe,CAKrB;IAEF,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjD,MAAM;CAwCvB"}
+{"version":3,"file":"FilteringInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filtering/FilteringInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAIvE;;GAEG;AACH,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB;;;MAGE;IACF,aAAa,EAAE,OAAO,CAAC;IAEvB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,6BAA6B;IAC7B,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,oDAAoD;IACpD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,qDAAqD;IACrD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,MAAM,EAAE,oBAAoB,CAAC;IAC7B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,oBAAY,oBAAoB;IAC9B,mCAAmC;IACnC,aAAa,IAAA;IACb,gDAAgD;IAChD,mBAAmB,IAAA;IACnB,gDAAgD;IAChD,iBAAiB,IAAA;CAClB;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC/F,OAAO,CAAC,aAAa,CAAuC;IAC5D,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,YAAY,CAAqC;IACzD,OAAO,CAAC,WAAW,CAAsC;gBAE7C,KAAK,EAAE,mBAAmB;IAStC,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,oBAAoB,CAU1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,gBAAgB,CAUtB;IAEF,OAAO,CAAC,eAAe,CAKrB;IAEF,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjD,MAAM;CAwCvB"}

package/lib/cjs/components-react/filtering/FilteringInput.js

@@ -1,147 +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 Filtering
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilteringInput = exports.FilteringInputStatus = void 0;
-require("./FilteringInput.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const ts_key_enum_1 = require("ts-key-enum");
-const core_react_1 = require("@itwin/core-react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const UiComponents_1 = require("../UiComponents");
-const ResultSelector_1 = require("./ResultSelector");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-/**
- * Enumeration of possible component contexts
- * @public
- */
-var FilteringInputStatus;
-(function (FilteringInputStatus) {
-    /** Component is ready to filter */
-    FilteringInputStatus[FilteringInputStatus["ReadyToFilter"] = 0] = "ReadyToFilter";
-    /** Component's parent is currently filtering */
-    FilteringInputStatus[FilteringInputStatus["FilteringInProgress"] = 1] = "FilteringInProgress";
-    /** Component's parent has finished filtering */
-    FilteringInputStatus[FilteringInputStatus["FilteringFinished"] = 2] = "FilteringFinished";
-})(FilteringInputStatus = exports.FilteringInputStatus || (exports.FilteringInputStatus = {}));
-/** A helper component for filtering trees and stepping through results
- * @public
- */
-class FilteringInput extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this._inputElement = React.createRef();
-        this._searchLabel = core_react_1.UiCore.translate("general.search");
-        this._cancelLabel = core_react_1.UiCore.translate("dialog.cancel");
-        this._clearLabel = core_react_1.UiCore.translate("general.search");
-        this._onSearchButtonClick = () => {
-            if (!this.state.searchText) {
-                // Empty search string is the same as clearing the search.
-                this.setState({ searchStarted: false, searchText: "" });
-                this.props.onFilterClear();
-                return;
-            }
-            this.props.onFilterStart(this.state.searchText);
-            this.setState({ searchStarted: true });
-        };
-        this._onCancelButtonClick = () => {
-            this.setState({ searchStarted: false, searchText: "" });
-            this.props.onFilterCancel();
-            this.focus();
-        };
-        this._onClearButtonClick = () => {
-            this.setState({ searchStarted: false, searchText: "" });
-            this.props.onFilterClear();
-            this.focus();
-        };
-        this._onFilterKeyDown = (e) => {
-            if (e.key !== ts_key_enum_1.Key.Enter)
-                return;
-            if (!this.state.searchText)
-                return;
-            this.props.onFilterStart(this.state.searchText);
-            this.setState({ searchStarted: true });
-            e.stopPropagation();
-        };
-        this._onInputChanged = (e) => {
-            if (this.state.searchStarted) {
-                this.props.onFilterCancel();
-            }
-            this.setState({ searchText: e.target.value, searchStarted: false });
-        };
-        this.state = {
-            searchText: "",
-            searchStarted: false,
-            resultSelectorKey: 0,
-        };
-    }
-    focus() {
-        // istanbul ignore next
-        if (this._inputElement.current)
-            this._inputElement.current.focus();
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.resultSelectorProps !== prevProps.resultSelectorProps) {
-            this.setState((state) => ({ resultSelectorKey: state.resultSelectorKey + 1 }));
-        }
-    }
-    render() {
-        const status = this.props.status;
-        return (
-        // TODO: What is filtering-input-preload-images?
-        React.createElement("div", { className: (0, classnames_1.default)("components-filtering-input", "filtering-input-preload-images", this.props.className), style: this.props.style, onKeyDown: this._onFilterKeyDown, role: "presentation" },
-            React.createElement("span", { className: "components-filtering-input-input" },
-                React.createElement(itwinui_react_1.Input, { type: "text", placeholder: UiComponents_1.UiComponents.translate("filteringInput.placeholder"), 
-                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                    autoFocus: this.props.autoFocus, onKeyDown: this._onFilterKeyDown, value: this.state.searchText, onChange: this._onInputChanged, "aria-label": core_react_1.UiCore.translate("general.search"), size: "small" }),
-                React.createElement("span", { className: "components-filtering-input-input-components" },
-                    status === FilteringInputStatus.FilteringFinished && this.props.resultSelectorProps ?
-                        React.createElement(ResultSelector_1.ResultSelector, { key: this.state.resultSelectorKey, ...this.props.resultSelectorProps }) : undefined,
-                    status === FilteringInputStatus.ReadyToFilter ?
-                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                        React.createElement("span", { className: "icon", onClick: this._onSearchButtonClick, "data-testid": "filter-input-search", role: "button", tabIndex: -1, title: this._searchLabel },
-                            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgSearch, null) }),
-                            " ") : undefined,
-                    status === FilteringInputStatus.FilteringInProgress ?
-                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                        React.createElement("span", { className: "icon", onClick: this._onCancelButtonClick, "data-testid": "filter-input-close", role: "button", tabIndex: -1, title: this._cancelLabel },
-                            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) }),
-                            " ") : undefined,
-                    status === FilteringInputStatus.FilteringFinished ?
-                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                        React.createElement("span", { className: "components-filtering-input-clear icon", onClick: this._onClearButtonClick, "data-testid": "filter-input-close", role: "button", tabIndex: -1, title: this._clearLabel },
-                            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) }),
-                            " ") : undefined))));
-    }
-}
-exports.FilteringInput = FilteringInput;
+"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 Filtering
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilteringInput = exports.FilteringInputStatus = void 0;
+require("./FilteringInput.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const core_react_1 = require("@itwin/core-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const UiComponents_1 = require("../UiComponents");
+const ResultSelector_1 = require("./ResultSelector");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+/**
+ * Enumeration of possible component contexts
+ * @public
+ */
+var FilteringInputStatus;
+(function (FilteringInputStatus) {
+    /** Component is ready to filter */
+    FilteringInputStatus[FilteringInputStatus["ReadyToFilter"] = 0] = "ReadyToFilter";
+    /** Component's parent is currently filtering */
+    FilteringInputStatus[FilteringInputStatus["FilteringInProgress"] = 1] = "FilteringInProgress";
+    /** Component's parent has finished filtering */
+    FilteringInputStatus[FilteringInputStatus["FilteringFinished"] = 2] = "FilteringFinished";
+})(FilteringInputStatus = exports.FilteringInputStatus || (exports.FilteringInputStatus = {}));
+/** A helper component for filtering trees and stepping through results
+ * @public
+ */
+class FilteringInput extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._inputElement = React.createRef();
+        this._searchLabel = core_react_1.UiCore.translate("general.search");
+        this._cancelLabel = core_react_1.UiCore.translate("dialog.cancel");
+        this._clearLabel = core_react_1.UiCore.translate("general.search");
+        this._onSearchButtonClick = () => {
+            if (!this.state.searchText) {
+                // Empty search string is the same as clearing the search.
+                this.setState({ searchStarted: false, searchText: "" });
+                this.props.onFilterClear();
+                return;
+            }
+            this.props.onFilterStart(this.state.searchText);
+            this.setState({ searchStarted: true });
+        };
+        this._onCancelButtonClick = () => {
+            this.setState({ searchStarted: false, searchText: "" });
+            this.props.onFilterCancel();
+            this.focus();
+        };
+        this._onClearButtonClick = () => {
+            this.setState({ searchStarted: false, searchText: "" });
+            this.props.onFilterClear();
+            this.focus();
+        };
+        this._onFilterKeyDown = (e) => {
+            if (e.key !== appui_abstract_1.SpecialKey.Enter)
+                return;
+            if (!this.state.searchText)
+                return;
+            this.props.onFilterStart(this.state.searchText);
+            this.setState({ searchStarted: true });
+            e.stopPropagation();
+        };
+        this._onInputChanged = (e) => {
+            if (this.state.searchStarted) {
+                this.props.onFilterCancel();
+            }
+            this.setState({ searchText: e.target.value, searchStarted: false });
+        };
+        this.state = {
+            searchText: "",
+            searchStarted: false,
+            resultSelectorKey: 0,
+        };
+    }
+    focus() {
+        // istanbul ignore next
+        if (this._inputElement.current)
+            this._inputElement.current.focus();
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.resultSelectorProps !== prevProps.resultSelectorProps) {
+            this.setState((state) => ({ resultSelectorKey: state.resultSelectorKey + 1 }));
+        }
+    }
+    render() {
+        const status = this.props.status;
+        return (
+        // TODO: What is filtering-input-preload-images?
+        React.createElement("div", { className: (0, classnames_1.default)("components-filtering-input", "filtering-input-preload-images", this.props.className), style: this.props.style, onKeyDown: this._onFilterKeyDown, role: "presentation" },
+            React.createElement("span", { className: "components-filtering-input-input" },
+                React.createElement(itwinui_react_1.Input, { type: "text", placeholder: UiComponents_1.UiComponents.translate("filteringInput.placeholder"), 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: this.props.autoFocus, onKeyDown: this._onFilterKeyDown, value: this.state.searchText, onChange: this._onInputChanged, "aria-label": core_react_1.UiCore.translate("general.search"), size: "small" }),
+                React.createElement("span", { className: "components-filtering-input-input-components" },
+                    status === FilteringInputStatus.FilteringFinished && this.props.resultSelectorProps ?
+                        React.createElement(ResultSelector_1.ResultSelector, { key: this.state.resultSelectorKey, ...this.props.resultSelectorProps }) : undefined,
+                    status === FilteringInputStatus.ReadyToFilter ?
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                        React.createElement("span", { className: "icon", onClick: this._onSearchButtonClick, "data-testid": "filter-input-search", role: "button", tabIndex: -1, title: this._searchLabel },
+                            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgSearch, null) }),
+                            " ") : undefined,
+                    status === FilteringInputStatus.FilteringInProgress ?
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                        React.createElement("span", { className: "icon", onClick: this._onCancelButtonClick, "data-testid": "filter-input-close", role: "button", tabIndex: -1, title: this._cancelLabel },
+                            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) }),
+                            " ") : undefined,
+                    status === FilteringInputStatus.FilteringFinished ?
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                        React.createElement("span", { className: "components-filtering-input-clear icon", onClick: this._onClearButtonClick, "data-testid": "filter-input-close", role: "button", tabIndex: -1, title: this._clearLabel },
+                            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) }),
+                            " ") : undefined))));
+    }
+}
+exports.FilteringInput = FilteringInput;
 //# sourceMappingURL=FilteringInput.js.map

package/lib/cjs/components-react/filtering/FilteringInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilteringInput.js","sourceRoot":"","sources":["../../../../src/components-react/filtering/FilteringInput.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 Filtering\r\n */\r\n\r\nimport \"./FilteringInput.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Key } from \"ts-key-enum\";\r\nimport { CommonProps, Icon, UiCore } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { ResultSelector, ResultSelectorProps } from \"./ResultSelector\";\r\nimport { SvgClose, SvgSearch } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** [[FilteringInput]] React Component state\r\n * @internal\r\n */\r\ninterface FilteringInputState {\r\n  /** A string which will be used for search */\r\n  searchText: string;\r\n  /**\r\n   *  Tells the component if the search was started.\r\n   *  Gets reset to false if search is canceled/cleared or searchText is changed.\r\n  */\r\n  searchStarted: boolean;\r\n  /* Used for resetting the state of [[ResultSelector]] component */\r\n  resultSelectorKey: number;\r\n}\r\n\r\n/**\r\n * [[FilteringInput]] React Component properties\r\n * @public\r\n */\r\nexport interface FilteringInputProps extends CommonProps {\r\n  /** Filtering should start */\r\n  onFilterStart: (searchText: string) => void;\r\n  /** Filtering is canceled while still in progress */\r\n  onFilterCancel: () => void;\r\n  /** Filtering is cleared after everything's loaded */\r\n  onFilterClear: () => void;\r\n  /**\r\n   * Tells the component what is the status of filtering.\r\n   */\r\n  status: FilteringInputStatus;\r\n  /**\r\n   * [[ResultSelector]] React Component properties.\r\n   * Attribute should be memoized and updated when [[ResultSelector]] state needs to be reset.\r\n   * This allows resetting the selected active match index back to 0.\r\n   */\r\n  resultSelectorProps?: ResultSelectorProps;\r\n  /** Specify that the <input> element should automatically get focus */\r\n  autoFocus?: boolean;\r\n}\r\n\r\n/**\r\n * Enumeration of possible component contexts\r\n * @public\r\n */\r\nexport enum FilteringInputStatus {\r\n  /** Component is ready to filter */\r\n  ReadyToFilter,\r\n  /** Component's parent is currently filtering */\r\n  FilteringInProgress,\r\n  /** Component's parent has finished filtering */\r\n  FilteringFinished,\r\n}\r\n\r\n/** A helper component for filtering trees and stepping through results\r\n * @public\r\n */\r\nexport class FilteringInput extends React.PureComponent<FilteringInputProps, FilteringInputState> {\r\n  private _inputElement = React.createRef<HTMLInputElement>();\r\n  private _searchLabel = UiCore.translate(\"general.search\");\r\n  private _cancelLabel = UiCore.translate(\"dialog.cancel\");\r\n  private _clearLabel = UiCore.translate(\"general.search\");\r\n\r\n  constructor(props: FilteringInputProps) {\r\n    super(props);\r\n    this.state = {\r\n      searchText: \"\",\r\n      searchStarted: false,\r\n      resultSelectorKey: 0,\r\n    };\r\n  }\r\n\r\n  private focus() {\r\n    // istanbul ignore next\r\n    if (this._inputElement.current)\r\n      this._inputElement.current.focus();\r\n  }\r\n\r\n  private _onSearchButtonClick = () => {\r\n    if (!this.state.searchText) {\r\n      // Empty search string is the same as clearing the search.\r\n      this.setState({ searchStarted: false, searchText: \"\" });\r\n      this.props.onFilterClear();\r\n      return;\r\n    }\r\n\r\n    this.props.onFilterStart(this.state.searchText);\r\n    this.setState({ searchStarted: true });\r\n  };\r\n\r\n  private _onCancelButtonClick = () => {\r\n    this.setState({ searchStarted: false, searchText: \"\" });\r\n    this.props.onFilterCancel();\r\n    this.focus();\r\n  };\r\n\r\n  private _onClearButtonClick = () => {\r\n    this.setState({ searchStarted: false, searchText: \"\" });\r\n    this.props.onFilterClear();\r\n    this.focus();\r\n  };\r\n\r\n  private _onFilterKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\r\n    if (e.key !== Key.Enter)\r\n      return;\r\n\r\n    if (!this.state.searchText)\r\n      return;\r\n\r\n    this.props.onFilterStart(this.state.searchText);\r\n    this.setState({ searchStarted: true });\r\n    e.stopPropagation();\r\n  };\r\n\r\n  private _onInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (this.state.searchStarted) {\r\n      this.props.onFilterCancel();\r\n    }\r\n    this.setState({ searchText: e.target.value, searchStarted: false });\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: FilteringInputProps) {\r\n    if (this.props.resultSelectorProps !== prevProps.resultSelectorProps) {\r\n      this.setState((state) => ({ resultSelectorKey: state.resultSelectorKey + 1 }));\r\n    }\r\n  }\r\n\r\n  public override render() {\r\n    const status = this.props.status;\r\n    return (\r\n      // TODO: What is filtering-input-preload-images?\r\n      <div className={classnames(\"components-filtering-input\", \"filtering-input-preload-images\", this.props.className)}\r\n        style={this.props.style}\r\n        onKeyDown={this._onFilterKeyDown}\r\n        role=\"presentation\"\r\n      >\r\n        <span className=\"components-filtering-input-input\">\r\n          <Input type=\"text\"\r\n            placeholder={UiComponents.translate(\"filteringInput.placeholder\")}\r\n            // eslint-disable-next-line jsx-a11y/no-autofocus\r\n            autoFocus={this.props.autoFocus}\r\n            onKeyDown={this._onFilterKeyDown}\r\n            value={this.state.searchText}\r\n            onChange={this._onInputChanged}\r\n            aria-label={UiCore.translate(\"general.search\")}\r\n            size=\"small\" />\r\n\r\n          <span className=\"components-filtering-input-input-components\">\r\n            {status === FilteringInputStatus.FilteringFinished && this.props.resultSelectorProps ?\r\n              <ResultSelector key={this.state.resultSelectorKey} {...this.props.resultSelectorProps} /> : undefined}\r\n            {status === FilteringInputStatus.ReadyToFilter ?\r\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n              <span className=\"icon\" onClick={this._onSearchButtonClick} data-testid=\"filter-input-search\"\r\n                role=\"button\" tabIndex={-1} title={this._searchLabel}><Icon iconSpec={<SvgSearch />} /> </span> : undefined}\r\n            {status === FilteringInputStatus.FilteringInProgress ?\r\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n              <span className=\"icon\" onClick={this._onCancelButtonClick} data-testid=\"filter-input-close\"\r\n                role=\"button\" tabIndex={-1} title={this._cancelLabel}><Icon iconSpec={<SvgClose />} /> </span> : undefined}\r\n            {status === FilteringInputStatus.FilteringFinished ?\r\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n              <span className=\"components-filtering-input-clear icon\" onClick={this._onClearButtonClick} data-testid=\"filter-input-close\"\r\n                role=\"button\" tabIndex={-1} title={this._clearLabel}><Icon iconSpec={<SvgClose />} /> </span> : undefined}\r\n          </span>\r\n        </span>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"FilteringInput.js","sourceRoot":"","sources":["../../../../src/components-react/filtering/FilteringInput.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 Filtering\n */\n\nimport \"./FilteringInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps, Icon, UiCore } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { UiComponents } from \"../UiComponents\";\nimport { ResultSelector, ResultSelectorProps } from \"./ResultSelector\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { SvgClose, SvgSearch } from \"@itwin/itwinui-icons-react\";\n\n/** [[FilteringInput]] React Component state\n * @internal\n */\ninterface FilteringInputState {\n  /** A string which will be used for search */\n  searchText: string;\n  /**\n   *  Tells the component if the search was started.\n   *  Gets reset to false if search is canceled/cleared or searchText is changed.\n  */\n  searchStarted: boolean;\n  /* Used for resetting the state of [[ResultSelector]] component */\n  resultSelectorKey: number;\n}\n\n/**\n * [[FilteringInput]] React Component properties\n * @public\n */\nexport interface FilteringInputProps extends CommonProps {\n  /** Filtering should start */\n  onFilterStart: (searchText: string) => void;\n  /** Filtering is canceled while still in progress */\n  onFilterCancel: () => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterClear: () => void;\n  /**\n   * Tells the component what is the status of filtering.\n   */\n  status: FilteringInputStatus;\n  /**\n   * [[ResultSelector]] React Component properties.\n   * Attribute should be memoized and updated when [[ResultSelector]] state needs to be reset.\n   * This allows resetting the selected active match index back to 0.\n   */\n  resultSelectorProps?: ResultSelectorProps;\n  /** Specify that the <input> element should automatically get focus */\n  autoFocus?: boolean;\n}\n\n/**\n * Enumeration of possible component contexts\n * @public\n */\nexport enum FilteringInputStatus {\n  /** Component is ready to filter */\n  ReadyToFilter,\n  /** Component's parent is currently filtering */\n  FilteringInProgress,\n  /** Component's parent has finished filtering */\n  FilteringFinished,\n}\n\n/** A helper component for filtering trees and stepping through results\n * @public\n */\nexport class FilteringInput extends React.PureComponent<FilteringInputProps, FilteringInputState> {\n  private _inputElement = React.createRef<HTMLInputElement>();\n  private _searchLabel = UiCore.translate(\"general.search\");\n  private _cancelLabel = UiCore.translate(\"dialog.cancel\");\n  private _clearLabel = UiCore.translate(\"general.search\");\n\n  constructor(props: FilteringInputProps) {\n    super(props);\n    this.state = {\n      searchText: \"\",\n      searchStarted: false,\n      resultSelectorKey: 0,\n    };\n  }\n\n  private focus() {\n    // istanbul ignore next\n    if (this._inputElement.current)\n      this._inputElement.current.focus();\n  }\n\n  private _onSearchButtonClick = () => {\n    if (!this.state.searchText) {\n      // Empty search string is the same as clearing the search.\n      this.setState({ searchStarted: false, searchText: \"\" });\n      this.props.onFilterClear();\n      return;\n    }\n\n    this.props.onFilterStart(this.state.searchText);\n    this.setState({ searchStarted: true });\n  };\n\n  private _onCancelButtonClick = () => {\n    this.setState({ searchStarted: false, searchText: \"\" });\n    this.props.onFilterCancel();\n    this.focus();\n  };\n\n  private _onClearButtonClick = () => {\n    this.setState({ searchStarted: false, searchText: \"\" });\n    this.props.onFilterClear();\n    this.focus();\n  };\n\n  private _onFilterKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\n    if (e.key !== SpecialKey.Enter)\n      return;\n\n    if (!this.state.searchText)\n      return;\n\n    this.props.onFilterStart(this.state.searchText);\n    this.setState({ searchStarted: true });\n    e.stopPropagation();\n  };\n\n  private _onInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.state.searchStarted) {\n      this.props.onFilterCancel();\n    }\n    this.setState({ searchText: e.target.value, searchStarted: false });\n  };\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: FilteringInputProps) {\n    if (this.props.resultSelectorProps !== prevProps.resultSelectorProps) {\n      this.setState((state) => ({ resultSelectorKey: state.resultSelectorKey + 1 }));\n    }\n  }\n\n  public override render() {\n    const status = this.props.status;\n    return (\n      // TODO: What is filtering-input-preload-images?\n      <div className={classnames(\"components-filtering-input\", \"filtering-input-preload-images\", this.props.className)}\n        style={this.props.style}\n        onKeyDown={this._onFilterKeyDown}\n        role=\"presentation\"\n      >\n        <span className=\"components-filtering-input-input\">\n          <Input type=\"text\"\n            placeholder={UiComponents.translate(\"filteringInput.placeholder\")}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={this.props.autoFocus}\n            onKeyDown={this._onFilterKeyDown}\n            value={this.state.searchText}\n            onChange={this._onInputChanged}\n            aria-label={UiCore.translate(\"general.search\")}\n            size=\"small\" />\n\n          <span className=\"components-filtering-input-input-components\">\n            {status === FilteringInputStatus.FilteringFinished && this.props.resultSelectorProps ?\n              <ResultSelector key={this.state.resultSelectorKey} {...this.props.resultSelectorProps} /> : undefined}\n            {status === FilteringInputStatus.ReadyToFilter ?\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n              <span className=\"icon\" onClick={this._onSearchButtonClick} data-testid=\"filter-input-search\"\n                role=\"button\" tabIndex={-1} title={this._searchLabel}><Icon iconSpec={<SvgSearch />} /> </span> : undefined}\n            {status === FilteringInputStatus.FilteringInProgress ?\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n              <span className=\"icon\" onClick={this._onCancelButtonClick} data-testid=\"filter-input-close\"\n                role=\"button\" tabIndex={-1} title={this._cancelLabel}><Icon iconSpec={<SvgClose />} /> </span> : undefined}\n            {status === FilteringInputStatus.FilteringFinished ?\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n              <span className=\"components-filtering-input-clear icon\" onClick={this._onClearButtonClick} data-testid=\"filter-input-close\"\n                role=\"button\" tabIndex={-1} title={this._clearLabel}><Icon iconSpec={<SvgClose />} /> </span> : undefined}\n          </span>\n        </span>\n      </div>\n    );\n  }\n}\n"]}