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

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

@@ -0,0 +1,73 @@
+/** @packageDocumentation
+ * @module Filtering
+ */
+import "./FilteringInput.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+import type { ResultSelectorProps } from "./ResultSelector.js";
+/** [[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;
+    constructor(props: FilteringInputProps);
+    private focus;
+    private _onSearchButtonClick;
+    private _onCancelButtonClick;
+    private _onClearButtonClick;
+    private _onFilterKeyDown;
+    private _onInputChanged;
+    componentDidUpdate(prevProps: FilteringInputProps): void;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=FilteringInput.d.ts.map

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

@@ -0,0 +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,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAI/D;;GAEG;AACH,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AAEH,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,CACrD,mBAAmB,EACnB,mBAAmB,CACpB;IACC,OAAO,CAAC,aAAa,CAAuC;gBAEhD,KAAK,EAAE,mBAAmB;IAStC,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,oBAAoB,CAU1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,gBAAgB,CAQtB;IAEF,OAAO,CAAC,eAAe,CAKrB;IAEc,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAQjD,MAAM;CAmFvB"}

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

@@ -0,0 +1,116 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./FilteringInput.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Key } from "ts-key-enum";
+import { Icon } from "@itwin/core-react";
+import { Input } from "@itwin/itwinui-react";
+import { UiComponents } from "../UiComponents.js";
+import { ResultSelector } from "./ResultSelector.js";
+import { SvgClose, SvgSearch } from "@itwin/itwinui-icons-react";
+/**
+ * Enumeration of possible component contexts
+ * @public
+ */
+export 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 || (FilteringInputStatus = {}));
+/** A helper component for filtering trees and stepping through results
+ * @public
+ */
+export class FilteringInput extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._inputElement = React.createRef();
+        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 !== Key.Enter.valueOf())
+                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() {
+        if (this._inputElement.current)
+            this._inputElement.current.focus();
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.resultSelectorProps !== prevProps.resultSelectorProps) {
+            this.setState((state) => ({
+                resultSelectorKey: state.resultSelectorKey + 1,
+            }));
+        }
+    }
+    render() {
+        const status = this.props.status;
+        const searchLabel = UiComponents.translate("general.search");
+        return (
+        // TODO: What is filtering-input-preload-images?
+        React.createElement("div", { className: classnames("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(Input, { type: "text", placeholder: 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": searchLabel, size: "small" }),
+                React.createElement("span", { className: "components-filtering-input-input-components" },
+                    status === FilteringInputStatus.FilteringFinished &&
+                        this.props.resultSelectorProps ? (React.createElement(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: searchLabel },
+                        React.createElement(Icon, { iconSpec: React.createElement(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: UiComponents.translate("dialog.cancel") },
+                        React.createElement(Icon, { iconSpec: React.createElement(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: UiComponents.translate("general.clear") },
+                        React.createElement(Icon, { iconSpec: React.createElement(SvgClose, null) }))) : undefined))));
+    }
+}
+//# sourceMappingURL=FilteringInput.js.map

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

@@ -0,0 +1 @@
+{"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 { Key } from \"ts-key-enum\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { UiComponents } from \"../UiComponents.js\";\nimport type { ResultSelectorProps } from \"./ResultSelector.js\";\nimport { ResultSelector } from \"./ResultSelector.js\";\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 */\n// eslint-disable-next-line deprecation/deprecation\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<\n  FilteringInputProps,\n  FilteringInputState\n> {\n  private _inputElement = React.createRef<HTMLInputElement>();\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    if (this._inputElement.current) 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 !== Key.Enter.valueOf()) return;\n\n    if (!this.state.searchText) 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  public override componentDidUpdate(prevProps: FilteringInputProps) {\n    if (this.props.resultSelectorProps !== prevProps.resultSelectorProps) {\n      this.setState((state) => ({\n        resultSelectorKey: state.resultSelectorKey + 1,\n      }));\n    }\n  }\n\n  public override render() {\n    const status = this.props.status;\n    const searchLabel = UiComponents.translate(\"general.search\");\n    return (\n      // TODO: What is filtering-input-preload-images?\n      <div\n        className={classnames(\n          \"components-filtering-input\",\n          \"filtering-input-preload-images\",\n          this.props.className\n        )}\n        style={this.props.style}\n        onKeyDown={this._onFilterKeyDown}\n        role=\"presentation\"\n      >\n        <span className=\"components-filtering-input-input\">\n          <Input\n            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={searchLabel}\n            size=\"small\"\n          />\n\n          <span className=\"components-filtering-input-input-components\">\n            {status === FilteringInputStatus.FilteringFinished &&\n            this.props.resultSelectorProps ? (\n              <ResultSelector\n                key={this.state.resultSelectorKey}\n                {...this.props.resultSelectorProps}\n              />\n            ) : undefined}\n            {status === FilteringInputStatus.ReadyToFilter ? (\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n              <span\n                className=\"icon\"\n                onClick={this._onSearchButtonClick}\n                data-testid=\"filter-input-search\"\n                role=\"button\"\n                tabIndex={-1}\n                title={searchLabel}\n              >\n                {/* eslint-disable-next-line deprecation/deprecation */}\n                <Icon iconSpec={<SvgSearch />} />\n              </span>\n            ) : undefined}\n            {status === FilteringInputStatus.FilteringInProgress ? (\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n              <span\n                className=\"icon\"\n                onClick={this._onCancelButtonClick}\n                data-testid=\"filter-input-close\"\n                role=\"button\"\n                tabIndex={-1}\n                title={UiComponents.translate(\"dialog.cancel\")}\n              >\n                {/* eslint-disable-next-line deprecation/deprecation */}\n                <Icon iconSpec={<SvgClose />} />\n              </span>\n            ) : undefined}\n            {status === FilteringInputStatus.FilteringFinished ? (\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n              <span\n                className=\"components-filtering-input-clear icon\"\n                onClick={this._onClearButtonClick}\n                data-testid=\"filter-input-close\"\n                role=\"button\"\n                tabIndex={-1}\n                title={UiComponents.translate(\"general.clear\")}\n              >\n                {/* eslint-disable-next-line deprecation/deprecation */}\n                <Icon iconSpec={<SvgClose />} />\n              </span>\n            ) : undefined}\n          </span>\n        </span>\n      </div>\n    );\n  }\n}\n"]}

package/lib/components-react/filtering/FilteringInput.scss

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/inputs/variables" as *;
+
+.components-filtering-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 5px;
+}
+
+// Input wrapper
+.components-filtering-input-input {
+  position: relative;
+  flex: 1;
+
+  // The input itself
+  input {
+    min-height: 28px;
+    padding: $uicore-iui-input-padding;
+    box-sizing: border-box;
+  }
+
+  input::-ms-clear {
+    display: none;
+  }
+}
+
+.components-filtering-input-input-components {
+  display: flex;
+  position: absolute;
+  right: 8px;
+  top: 1px;
+  bottom: 0px;
+
+  > .icon {
+    align-self: center;
+    border: none;
+    outline: none;
+  }
+}
+
+@mixin filtering-button-base {
+  margin-left: 6px;
+}
+
+.components-filtering-input-clear {
+  @include filtering-button-base;
+  color: var(--iui-color-text-muted);
+  font-size: "12px";
+}
+
+.components-filtering-input-loader {
+  margin-bottom: auto;
+  margin-top: auto;
+}

package/lib/components-react/filtering/ResultSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultSelector.d.ts","sourceRoot":"","sources":["../../../src/components-react/filtering/ResultSelector.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD;;GAEG;AACH,UAAU,mBAAmB;IAC3B,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB;IACnB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0DAA0D;IAC1D,wBAAwB,EAAE,OAAO,CAAC;CACnC;AAED;;GAEG;AAEH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,sCAAsC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CACrD,mBAAmB,EACnB,mBAAmB,CACpB;gBACa,KAAK,EAAE,mBAAmB;IAStC,OAAO,CAAC,gBAAgB,CAWtB;IAEF,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,KAAK,6BAA6B,GAExC;IAED,OAAO,CAAC,wBAAwB,CAK9B;IAEF,OAAO,CAAC,0BAA0B,CAWhC;IAEF,OAAO,CAAC,sBAAsB,CAK5B;IAEF,OAAO,CAAC,wBAAwB,CAE9B;IAEc,iBAAiB;IAIjB,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjD,MAAM;CAyDvB"}

package/lib/components-react/filtering/ResultSelector.js

@@ -0,0 +1,102 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./ResultSelector.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Key } from "ts-key-enum";
+import { Icon } from "@itwin/core-react";
+import { UiComponents } from "../UiComponents.js";
+import { SvgChevronLeft, SvgChevronRight } from "@itwin/itwinui-icons-react";
+/** Component for stepping through results/entries
+ * @public
+ */
+export class ResultSelector extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._onClickPrevious = () => {
+            if (this.state.selectedResultInEditMode) {
+                this._onSelectedResultConfirmed();
+                return;
+            }
+            if (this.state.selectedResultId > 1) {
+                this.props.onSelectedChanged(this.state.selectedResultId - 1);
+                this.setState((state) => ({
+                    selectedResultId: state.selectedResultId - 1,
+                }));
+            }
+        };
+        this._onClickNext = () => {
+            if (this.state.selectedResultInEditMode) {
+                this._onSelectedResultConfirmed();
+                return;
+            }
+            if (this.state.selectedResultId < this.props.resultCount) {
+                this.props.onSelectedChanged(this.state.selectedResultId + 1);
+                this.setState((state) => ({
+                    selectedResultId: state.selectedResultId + 1,
+                }));
+            }
+        };
+        this._onSelectedResultChanged = (event) => {
+            if (event.target.value.length <= this._maxSelectedResultInputLength)
+                this.setState({ selectedResultEdit: event.target.value });
+        };
+        this._onSelectedResultConfirmed = () => {
+            let selectedId = +this.state.selectedResultEdit;
+            if (selectedId > this.props.resultCount)
+                selectedId = this.props.resultCount;
+            else if (selectedId < 1)
+                selectedId = 1;
+            this.setState({
+                selectedResultInEditMode: false,
+                selectedResultId: selectedId,
+            });
+            this.props.onSelectedChanged(selectedId);
+        };
+        this._onSelectedResultClick = () => {
+            this.setState((state) => ({
+                selectedResultInEditMode: true,
+                selectedResultEdit: state.selectedResultId.toString(),
+            }));
+        };
+        this._onSelectedResultKeyDown = (event) => {
+            if (event.key === Key.Enter.valueOf())
+                this._onSelectedResultConfirmed();
+        };
+        this.state = {
+            selectedResultId: props.resultCount ? 1 : 0,
+            selectedResultEdit: "",
+            selectedResultInEditMode: false,
+        };
+    }
+    get _maxSelectedResultInputLength() {
+        return this.props.resultCount.toString().length;
+    }
+    componentDidMount() {
+        this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.resultCount !== prevProps.resultCount) {
+            this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);
+        }
+    }
+    render() {
+        return (React.createElement("span", { className: classnames("components-result-selector", this.props.className), style: this.props.style },
+            React.createElement("button", { className: classnames("components-result-selector-button", "icon"), "data-testid": "previous-button", onClick: this._onClickPrevious, disabled: this.props.resultCount <= 0 },
+                React.createElement(Icon, { iconSpec: React.createElement(SvgChevronLeft, null) })),
+            React.createElement("span", { style: { pointerEvents: this.props.resultCount ? "auto" : "none" }, className: "components-result-selector-current-result", onClick: this._onSelectedResultClick, role: "presentation" },
+                this.state.selectedResultInEditMode ? (React.createElement("input", { type: "number", style: {
+                        width: `${this.state.selectedResultEdit.length * 0.6 + 1}em`,
+                    }, value: this.state.selectedResultEdit, onChange: this._onSelectedResultChanged, onBlur: this._onSelectedResultConfirmed, onKeyDown: this._onSelectedResultKeyDown })) : (this.state.selectedResultId),
+                React.createElement("span", { style: { marginLeft: "5px", marginRight: "5px" } }, UiComponents.translate("general.of")),
+                React.createElement("span", null, this.props.resultCount)),
+            React.createElement("button", { className: "components-result-selector-button icon", "data-testid": "next-button", onClick: this._onClickNext, disabled: this.props.resultCount <= 0 },
+                React.createElement(Icon, { iconSpec: React.createElement(SvgChevronRight, null) }))));
+    }
+}
+//# sourceMappingURL=ResultSelector.js.map

package/lib/components-react/filtering/ResultSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultSelector.js","sourceRoot":"","sources":["../../../src/components-react/filtering/ResultSelector.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 \"./ResultSelector.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { UiComponents } from \"../UiComponents.js\";\nimport { SvgChevronLeft, SvgChevronRight } from \"@itwin/itwinui-icons-react\";\n\n/** [[ResultSelector]] React Component state\n * @internal\n */\ninterface ResultSelectorState {\n  /** Currently selected result/entry index */\n  selectedResultId: number;\n  /** Input string */\n  selectedResultEdit: string;\n  /** Informs if selectedResult is currently being edited */\n  selectedResultInEditMode: boolean;\n}\n\n/** [[ResultSelector]] React Component properties\n * @public\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ResultSelectorProps extends CommonProps {\n  /** Total number of results/entries */\n  resultCount: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n}\n\n/** Component for stepping through results/entries\n * @public\n */\nexport class ResultSelector extends React.PureComponent<\n  ResultSelectorProps,\n  ResultSelectorState\n> {\n  constructor(props: ResultSelectorProps) {\n    super(props);\n    this.state = {\n      selectedResultId: props.resultCount ? 1 : 0,\n      selectedResultEdit: \"\",\n      selectedResultInEditMode: false,\n    };\n  }\n\n  private _onClickPrevious = () => {\n    if (this.state.selectedResultInEditMode) {\n      this._onSelectedResultConfirmed();\n      return;\n    }\n    if (this.state.selectedResultId > 1) {\n      this.props.onSelectedChanged(this.state.selectedResultId - 1);\n      this.setState((state) => ({\n        selectedResultId: state.selectedResultId - 1,\n      }));\n    }\n  };\n\n  private _onClickNext = () => {\n    if (this.state.selectedResultInEditMode) {\n      this._onSelectedResultConfirmed();\n      return;\n    }\n    if (this.state.selectedResultId < this.props.resultCount) {\n      this.props.onSelectedChanged(this.state.selectedResultId + 1);\n      this.setState((state) => ({\n        selectedResultId: state.selectedResultId + 1,\n      }));\n    }\n  };\n\n  private get _maxSelectedResultInputLength() {\n    return this.props.resultCount.toString().length;\n  }\n\n  private _onSelectedResultChanged = (\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => {\n    if (event.target.value.length <= this._maxSelectedResultInputLength)\n      this.setState({ selectedResultEdit: event.target.value });\n  };\n\n  private _onSelectedResultConfirmed = () => {\n    let selectedId = +this.state.selectedResultEdit;\n    if (selectedId > this.props.resultCount)\n      selectedId = this.props.resultCount;\n    else if (selectedId < 1) selectedId = 1;\n\n    this.setState({\n      selectedResultInEditMode: false,\n      selectedResultId: selectedId,\n    });\n    this.props.onSelectedChanged(selectedId);\n  };\n\n  private _onSelectedResultClick = () => {\n    this.setState((state) => ({\n      selectedResultInEditMode: true,\n      selectedResultEdit: state.selectedResultId.toString(),\n    }));\n  };\n\n  private _onSelectedResultKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === Key.Enter.valueOf()) this._onSelectedResultConfirmed();\n  };\n\n  public override componentDidMount() {\n    this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);\n  }\n\n  public override componentDidUpdate(prevProps: ResultSelectorProps) {\n    if (this.props.resultCount !== prevProps.resultCount) {\n      this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);\n    }\n  }\n\n  public override render() {\n    return (\n      <span\n        className={classnames(\n          \"components-result-selector\",\n          this.props.className\n        )}\n        style={this.props.style}\n      >\n        <button\n          className={classnames(\"components-result-selector-button\", \"icon\")}\n          data-testid=\"previous-button\"\n          onClick={this._onClickPrevious}\n          disabled={this.props.resultCount <= 0}\n        >\n          {/* eslint-disable-next-line deprecation/deprecation */}\n          <Icon iconSpec={<SvgChevronLeft />} />\n        </button>\n\n        <span\n          style={{ pointerEvents: this.props.resultCount ? \"auto\" : \"none\" }}\n          className=\"components-result-selector-current-result\"\n          onClick={this._onSelectedResultClick}\n          role=\"presentation\"\n        >\n          {this.state.selectedResultInEditMode ? (\n            <input\n              type=\"number\"\n              style={{\n                width: `${this.state.selectedResultEdit.length * 0.6 + 1}em`,\n              }}\n              value={this.state.selectedResultEdit}\n              onChange={this._onSelectedResultChanged}\n              onBlur={this._onSelectedResultConfirmed}\n              onKeyDown={this._onSelectedResultKeyDown}\n            />\n          ) : (\n            this.state.selectedResultId\n          )}\n          <span style={{ marginLeft: \"5px\", marginRight: \"5px\" }}>\n            {UiComponents.translate(\"general.of\")}\n          </span>\n          <span>{this.props.resultCount}</span>\n        </span>\n\n        <button\n          className=\"components-result-selector-button icon\"\n          data-testid=\"next-button\"\n          onClick={this._onClickNext}\n          disabled={this.props.resultCount <= 0}\n        >\n          {/* eslint-disable-next-line deprecation/deprecation */}\n          <Icon iconSpec={<SvgChevronRight />} />\n        </button>\n      </span>\n    );\n  }\n}\n"]}

package/lib/components-react/filtering/ResultSelector.scss

@@ -0,0 +1,66 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-result-selector {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+
+  font-family: var(--iui-font-sans);
+  color: var(--iui-color-text);
+}
+
+.components-result-selector-current-result {
+  margin: 0 2px;
+  padding-top: 2px;
+
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+    display: inline-block;
+    text-align: center;
+    font-size: 12px;
+    padding: 0px;
+    min-width: 2em;
+  }
+}
+
+.components-result-selector-current-result:hover {
+  cursor: pointer;
+}
+
+.components-result-selector-button {
+  font-size: 12px;
+  height: 20px;
+  width: 20px;
+  border-style: none;
+  color: var(--iui-color-text-muted);
+  margin: 0 4px;
+}
+
+.components-result-selector-button:hover {
+  background-color: var(--iui-color-background-hover);
+  border-radius: 2px;
+}
+
+/* Overriding iTwinUI button defaults */
+.components-result-selector-button,
+.components-result-selector-button:active,
+.components-result-selector-button:focus,
+.components-result-selector-button:disabled,
+.components-result-selector-button[disabled]:hover {
+  border-style: none;
+  padding: 0px;
+}
+
+.components-result-selector-button:disabled,
+.components-result-selector-button[disabled]:hover {
+  background-color: var(--iui-color-background-backdrop);
+  cursor: default;
+}

package/lib/components-react/iconpicker/IconPickerButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerButton.d.ts","sourceRoot":"","sources":["../../../src/components-react/iconpicker/IconPickerButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAoDrD;;GAEG;AACH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAEnD,WAAW;IACb,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,gBAAgB;AAChB,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CACvD,eAAe,EACf,eAAe,CAChB;IACC,OAAO,CAAC,OAAO,CAAwC;IAEvD,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAElD;gBAEU,KAAK,EAAE,eAAe;IAMlC,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,iBAAiB,CAIvB;IAEF,OAAO,CAAC,WAAW;IAwBH,MAAM;CAyCvB"}

package/lib/components-react/iconpicker/IconPickerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerButton.js","sourceRoot":"","sources":["../../../src/components-react/iconpicker/IconPickerButton.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 IconPicker\n */\n\nimport \"./IconPickerButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup } from \"@itwin/core-react\";\nimport { SvgChevronDown } from \"@itwin/itwinui-icons-react\";\n\n/** Properties for the [[IconItem]] React component\n * @internal\n */\ninterface IconItemProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    // eslint-disable-next-line deprecation/deprecation\n    CommonProps {\n  /** icon specification */\n  icon: string;\n  /** function to run when user selects icon */\n  onClick?: () => void;\n}\n\n/** IconItem Functional component\n * @internal\n */\nclass IconItem extends React.PureComponent<IconItemProps> {\n  constructor(props: IconItemProps) {\n    super(props);\n  }\n\n  public override render() {\n    const {\n      onClick,\n      icon, // do not pass on item specific props\n      ...otherProps\n    } = this.props;\n\n    const handleClick = (_e: React.MouseEvent) => {\n      if (onClick) onClick();\n    };\n\n    const classes = classnames(\"components-icon-swatch\", this.props.className);\n\n    return (\n      <button\n        {...otherProps}\n        className={classes}\n        style={this.props.style}\n        onClick={handleClick}\n      >\n        {/* eslint-disable-next-line deprecation/deprecation */}\n        <Icon iconSpec={icon} />\n      </button>\n    );\n  }\n}\n\n/** Properties for the [[IconPicker]] React component\n * @internal\n */\nexport interface IconPickerProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    // eslint-disable-next-line deprecation/deprecation\n    CommonProps {\n  /** active string */\n  icon: string;\n  /** available icons */\n  icons: string[];\n  /** function to run when user selects icon */\n  onIconChange?: ((icon: string) => void) | undefined;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not */\n  readonly?: boolean;\n  /** Title to show at top of DropDown */\n  dropDownTitle?: string;\n  /** Number of columns */\n  numColumns: number;\n}\n\n/** @internal */\ninterface IconPickerState {\n  showPopup: boolean;\n  icon: string;\n}\n\n/** IconPickerButton component\n * @internal\n */\nexport class IconPickerButton extends React.PureComponent<\n  IconPickerProps,\n  IconPickerState\n> {\n  private _target = React.createRef<HTMLButtonElement>();\n\n  public static defaultProps: Partial<IconPickerProps> = {\n    numColumns: 4,\n  };\n\n  constructor(props: IconPickerProps) {\n    super(props);\n\n    this.state = { showPopup: false, icon: this.props.icon };\n  }\n\n  private _togglePopup = () => {\n    if (this.props.readonly) return;\n\n    this.setState((prevState) => ({ showPopup: !prevState.showPopup }));\n  };\n\n  private _closePopup = () => {\n    this.setState({ showPopup: false });\n  };\n\n  private _handleIconPicked = (icon: string) => {\n    this.setState({ showPopup: false, icon }, () => {\n      if (this.props.onIconChange) this.props.onIconChange(icon);\n    });\n  };\n\n  private renderPopup(title: string | undefined) {\n    const containerStyle: React.CSSProperties = {\n      gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)`,\n    };\n    return (\n      <div className=\"components-iconpicker-popup-container\">\n        {title && <h4>{title}</h4>}\n        <div\n          data-testid=\"components-iconpicker-popup-icons\"\n          className=\"components-iconpicker-popup-icons\"\n          style={containerStyle}\n        >\n          {this.props.icons.map((icon: string, index: number) => (\n            <IconItem\n              key={index}\n              icon={icon}\n              onClick={this._handleIconPicked.bind(this, icon)}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  public override render() {\n    const buttonStyle = { ...this.props.style } as React.CSSProperties;\n    const buttonClassNames = classnames(\n      \"components-iconpicker-button\",\n      this.props.readonly && \"readonly\",\n      this.props.className\n    );\n\n    return (\n      <>\n        <button\n          data-testid=\"components-iconpicker-button\"\n          onClick={this._togglePopup}\n          className={buttonClassNames}\n          style={buttonStyle}\n          disabled={this.props.disabled}\n          ref={this._target}\n        >\n          {/* eslint-disable-next-line deprecation/deprecation */}\n          <Icon\n            className=\"iconpicker-button-sprite\"\n            iconSpec={this.state.icon}\n          />\n          <span className=\"icon\">\n            {/* eslint-disable-next-line deprecation/deprecation */}\n            <Icon iconSpec={<SvgChevronDown />} />\n          </span>\n        </button>\n        {/* eslint-disable-next-line deprecation/deprecation */}\n        <Popup\n          className=\"components-iconpicker-popup\"\n          isOpen={this.state.showPopup}\n          position={RelativePosition.BottomLeft}\n          onClose={this._closePopup}\n          target={this._target.current}\n        >\n          {this.renderPopup(this.props.dropDownTitle)}\n        </Popup>\n      </>\n    );\n  }\n}\n"]}

package/lib/components-react/iconpicker/IconPickerButton.scss

@@ -0,0 +1,74 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+
+.components-iconpicker-button {
+  color: var(--iui-color-text);
+  background: var(--iui-color-background);
+  box-sizing: border-box;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+  width: fit-content;
+
+  .iconpicker-button-sprite {
+    width: 18px;
+    height: 18px;
+    margin: 4px;
+  }
+
+  .icon {
+    margin-left: 4px;
+    font-size: 10px;
+    transition: color 0.1s ease;
+  }
+
+  &:not(.readonly) {
+    cursor: pointer;
+  }
+
+  &:hover .icon {
+    color: var(--iui-color-text-accent);
+  }
+}
+
+.components-iconpicker-popup {
+  border: 1px solid var(--iui-color-border-foreground);
+  @include uicore-z-index(dialog-popup);
+
+  .components-iconpicker-popup-container {
+    color: var(--iui-color-text);
+    background: var(--iui-color-background);
+
+    .components-iconpicker-popup-icons {
+      display: grid;
+      grid-gap: 8px;
+      padding: 8px;
+
+      .components-icon-swatch {
+        width: 34px;
+        height: 34px;
+        padding: 4px;
+        border-width: 1px;
+        border-radius: var(--iui-border-radius-1);
+        border-style: solid;
+        border-color: rgba(0, 0, 0, 0.2);
+        background: var(--iui-color-background);
+        transition: scale 0.2s ease;
+        cursor: pointer;
+        outline: none;
+
+        &:hover {
+          transform: scale(1.15);
+        }
+
+        &[disabled] {
+          opacity: 0.2;
+        }
+      }
+    }
+  }
+}

package/lib/components-react/inputs/ParsedInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParsedInput.d.ts","sourceRoot":"","sources":["../../../src/components-react/inputs/ParsedInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,oBAAoB,CAAC;AAE5B;;;GAGG;AAEH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,0EAA0E;IAC1E,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,qDAAqD;IACrD,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,YAAY,CAAC;IACnD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AA2HD;;GAEG;AAEH,eAAO,MAAM,WAAW,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,KAAK,CAAC,SACtC,CAAC"}

package/lib/components-react/inputs/ParsedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParsedInput.js","sourceRoot":"","sources":["../../../src/components-react/inputs/ParsedInput.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 Inputs\n */\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { Key } from \"ts-key-enum\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { ParseResults } from \"@itwin/appui-abstract\";\nimport \"./ParsedInput.scss\";\n\n/** Props for [[ParsedInput]] control\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof ParsedInput>`\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ParsedInputProps extends CommonProps {\n  /** InitialValue which is used to restore input field if ESC is pressed */\n  initialValue: number;\n  /** Function used to format the value */\n  formatValue: (value: number) => string;\n  /** Function used to parse user input into a value */\n  parseString: (stringValue: string) => ParseResults;\n  /** Function to call when value is changed */\n  onChange?: (newValue: number) => void;\n  /** if readonly then only the formatValue function is used. */\n  readonly?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\nconst ForwardRefParsedInput = React.forwardRef<\n  HTMLInputElement,\n  /* eslint-disable-next-line deprecation/deprecation */\n  ParsedInputProps\n>(function ForwardRefParsedInput(\n  {\n    initialValue,\n    formatValue,\n    parseString,\n    readonly,\n    className,\n    style,\n    onChange,\n  },\n  ref\n) {\n  const currentValueRef = React.useRef(initialValue);\n  const isMountedRef = React.useRef(false);\n  const lastFormattedValueRef = React.useRef(formatValue(initialValue));\n  const [formattedValue, setFormattedValue] = React.useState(\n    () => lastFormattedValueRef.current\n  );\n  const [hasBadInput, setHasBadInput] = React.useState(false);\n\n  React.useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  // See if new initialValue props have changed since component mounted\n  React.useEffect(() => {\n    currentValueRef.current = initialValue;\n    const currentFormattedValue = formatValue(currentValueRef.current);\n    if (currentFormattedValue !== lastFormattedValueRef.current) {\n      lastFormattedValueRef.current = currentFormattedValue;\n      setFormattedValue(lastFormattedValueRef.current);\n      setHasBadInput(false);\n    }\n  }, [formatValue, initialValue]);\n\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setFormattedValue(event.currentTarget.value);\n    },\n    []\n  );\n\n  const updateValueFromString = React.useCallback(\n    (strVal: string) => {\n      if (lastFormattedValueRef.current === strVal) return;\n\n      const parseResults = parseString(strVal);\n      if (!parseResults.parseError) {\n        if (\n          undefined !== parseResults.value &&\n          typeof parseResults.value === \"number\"\n        ) {\n          const currentValue = parseResults.value;\n          if (currentValue !== currentValueRef.current) {\n            currentValueRef.current = currentValue;\n            onChange && onChange(currentValueRef.current);\n          }\n          if (isMountedRef.current) {\n            lastFormattedValueRef.current = formatValue(currentValue);\n            setFormattedValue(lastFormattedValueRef.current);\n            setHasBadInput(false);\n          }\n        }\n      } else {\n        setHasBadInput(true);\n      }\n    },\n    [formatValue, onChange, parseString]\n  );\n\n  const handleBlur = React.useCallback(\n    (event: React.FocusEvent<HTMLInputElement>) => {\n      updateValueFromString(event.target.value);\n    },\n    [updateValueFromString]\n  );\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === Key.Enter.valueOf()) {\n        updateValueFromString(event.currentTarget.value);\n        event.preventDefault();\n      }\n      if (event.key === Key.Escape.valueOf()) {\n        setFormattedValue(formatValue(currentValueRef.current));\n        setHasBadInput(false);\n        event.preventDefault();\n      }\n    },\n    [formatValue, updateValueFromString]\n  );\n\n  const classNames = classnames(\n    className,\n    \"components-parsed-input\",\n    hasBadInput && \"components-parsed-input-has-error\"\n  );\n\n  return (\n    <Input\n      data-testid=\"components-parsed-input\"\n      ref={ref}\n      style={style}\n      className={classNames}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      value={formattedValue}\n      disabled={readonly}\n      size=\"small\"\n    />\n  );\n});\n\n/** Generic Input component that requires formatting and parsing functions to be passed in as props.\n * @public\n */\n// eslint-disable-next-line deprecation/deprecation\nexport const ParsedInput: (props: ParsedInputProps) => React.ReactNode =\n  ForwardRefParsedInput;\n"]}

package/lib/components-react/inputs/ParsedInput.scss

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/inputs/variables" as *;
+
+.components-parsed-input {
+  width: auto;
+  padding: $uicore-iui-input-padding;
+
+  &.components-parsed-input-has-error {
+    color: var(--iui-color-text-negative);
+    font-weight: bold;
+  }
+
+  &.components-parsed-input[disabled] {
+    color: var(--iui-color-text);
+    opacity: 0.65;
+  }
+}

package/lib/components-react/l10n/LocalizationProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalizationProvider.d.ts","sourceRoot":"","sources":["../../../src/components-react/l10n/LocalizationProvider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,IAAI,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAElF;;GAEG;AACH,wBAAgB,oBAAoB,CAElC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,qBAI1D"}

package/lib/components-react/l10n/LocalizationProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalizationProvider.js","sourceRoot":"","sources":["../../../src/components-react/l10n/LocalizationProvider.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,IAAI,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAElF;;GAEG;AACH,MAAM,UAAU,oBAAoB;AAClC,mDAAmD;AACnD,KAAyD;IAEzD,mDAAmD;IACnD,OAAO,oBAAC,qBAAqB,OAAK,KAAK,GAAI,CAAC;AAC9C,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 Utilities\n */\nimport * as React from \"react\";\nimport { LocalizationProvider as _LocalizationProvider } from \"@itwin/core-react\";\n\n/** Provides localization capability to the components.\n * @alpha\n */\nexport function LocalizationProvider(\n  // eslint-disable-next-line deprecation/deprecation\n  props: React.ComponentProps<typeof _LocalizationProvider>\n) {\n  // eslint-disable-next-line deprecation/deprecation\n  return <_LocalizationProvider {...props} />;\n}\n"]}