@itwin/components-react 4.0.0-dev.2 → 4.0.0-dev.20

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

@@ -8,11 +8,12 @@
 import "./FilteringInput.scss";
 import classnames from "classnames";
 import * as React from "react";
-import { Key } from "ts-key-enum";
-import { UiCore } from "@itwin/core-react";
+import { Icon, UiCore } from "@itwin/core-react";
 import { Input } from "@itwin/itwinui-react";
 import { UiComponents } from "../UiComponents";
 import { ResultSelector } from "./ResultSelector";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { SvgClose, SvgSearch } from "@itwin/itwinui-icons-react";
 /**
  * Enumeration of possible component contexts
  * @public
@@ -57,7 +58,7 @@ export class FilteringInput extends React.PureComponent {
             this.focus();
         };
         this._onFilterKeyDown = (e) => {
-            if (e.key !== Key.Enter)
+            if (e.key !== SpecialKey.Enter)
                 return;
             if (!this.state.searchText)
                 return;
@@ -102,13 +103,19 @@ export class FilteringInput extends React.PureComponent {
                         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 icon-search", onClick: this._onSearchButtonClick, role: "button", tabIndex: -1, title: this._searchLabel }) : undefined,
+                        React.createElement("span", { className: "icon", onClick: this._onSearchButtonClick, "data-testid": "filter-input-search", role: "button", tabIndex: -1, title: this._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 icon-close", onClick: this._onCancelButtonClick, role: "button", tabIndex: -1, title: this._cancelLabel }) : undefined,
+                        React.createElement("span", { className: "icon", onClick: this._onCancelButtonClick, "data-testid": "filter-input-close", role: "button", tabIndex: -1, title: this._cancelLabel },
+                            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 icon-close", onClick: this._onClearButtonClick, role: "button", tabIndex: -1, title: this._clearLabel }) : undefined))));
+                        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(Icon, { iconSpec: React.createElement(SvgClose, null) }),
+                            " ") : undefined))));
     }
 }
 //# sourceMappingURL=FilteringInput.js.map

package/lib/esm/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":["/*---------------------------------------------------------------------------------------------\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 { CommonProps, UiCore } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { UiComponents } from \"../UiComponents\";\nimport { ResultSelector, ResultSelectorProps } from \"./ResultSelector\";\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 !== Key.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 icon-search\" onClick={this._onSearchButtonClick}\n                role=\"button\" tabIndex={-1} title={this._searchLabel} /> : undefined}\n            {status === FilteringInputStatus.FilteringInProgress ?\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n              <span className=\"icon icon-close\" onClick={this._onCancelButtonClick}\n                role=\"button\" tabIndex={-1} title={this._cancelLabel} /> : 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 icon-close\" onClick={this._onClearButtonClick}\n                role=\"button\" tabIndex={-1} title={this._clearLabel} /> : undefined}\n          </span>\n        </span>\n      </div>\n    );\n  }\n}\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"]}

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

@@ -4,10 +4,6 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/style/variables";
-@import "~@itwin/itwinui-css/scss/button/button";
-@import "~@itwin/itwinui-css/scss/button/default";
-@import "~@itwin/itwinui-css/scss/inputs/input";
 
 .components-filtering-input {
   display: flex;
@@ -23,7 +19,7 @@
 
   // The input itself
   input {
-    min-height: $uicore-component-height-normal;
+    min-height: 28px;
     padding: $uicore-iui-input-padding;
     box-sizing: border-box;
   }
@@ -40,7 +36,7 @@
   top: 1px;
   bottom: 0px;
 
-  >.icon {
+  > .icon {
     align-self: center;
     border: none;
     outline: none;
@@ -48,18 +44,12 @@
 }
 
 @mixin filtering-button-base {
-  @include iui-button;
-  @include iui-button-default;
   margin-left: 6px;
 }
 
-.components-filtering-input-button {
-  @include filtering-button-base;
-}
-
 .components-filtering-input-clear {
   @include filtering-button-base;
-  color: $buic-text-color-muted;
+  color: var(--iui-color-text-muted);
   font-size: "12px";
 }
 

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

@@ -1 +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,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;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;AACH,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,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC/F,OAAO,CAAC,QAAQ,CAAwC;IAExD,gBAAgB;gBACJ,KAAK,EAAE,mBAAmB;IAStC,OAAO,CAAC,gBAAgB,CAStB;IAEF,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,KAAK,6BAA6B,GAExC;IAED,OAAO,CAAC,wBAAwB,CAG9B;IAEF,OAAO,CAAC,0BAA0B,CAShC;IAEF,OAAO,CAAC,sBAAsB,CAK5B;IAEF,OAAO,CAAC,wBAAwB,CAG9B;IAEF,gBAAgB;IACA,iBAAiB;IAIjC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjE,gBAAgB;IACA,MAAM;CA4BvB"}
+{"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,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAItD;;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;AACH,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,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC/F,OAAO,CAAC,QAAQ,CAAwC;IAExD,gBAAgB;gBACJ,KAAK,EAAE,mBAAmB;IAStC,OAAO,CAAC,gBAAgB,CAStB;IAEF,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,KAAK,6BAA6B,GAExC;IAED,OAAO,CAAC,wBAAwB,CAG9B;IAEF,OAAO,CAAC,0BAA0B,CAShC;IAEF,OAAO,CAAC,sBAAsB,CAK5B;IAEF,OAAO,CAAC,wBAAwB,CAG9B;IAEF,gBAAgB;IACA,iBAAiB;IAIjC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjE,gBAAgB;IACA,MAAM;CA6BvB"}

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

@@ -9,7 +9,9 @@ import "./ResultSelector.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { SpecialKey } from "@itwin/appui-abstract";
+import { Icon } from "@itwin/core-react";
 import { UiComponents } from "../UiComponents";
+import { SvgChevronLeft, SvgChevronRight } from "@itwin/itwinui-icons-react";
 /** Component for stepping through results/entries
  * @public
  */
@@ -83,14 +85,16 @@ export class ResultSelector extends React.PureComponent {
     /** @internal */
     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", "icon-chevron-left"), onClick: this._onClickPrevious, disabled: this.props.resultCount <= 0 }),
+            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.60 + 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" } }, this._ofLabel),
                 React.createElement("span", null, this.props.resultCount)),
-            React.createElement("button", { className: "components-result-selector-button icon icon-chevron-right", onClick: this._onClickNext, disabled: this.props.resultCount <= 0 })));
+            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/esm/components-react/filtering/ResultSelector.js.map

@@ -1 +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 { SpecialKey } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiComponents } from \"../UiComponents\";\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 */\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<ResultSelectorProps, ResultSelectorState> {\n  private _ofLabel = UiComponents.translate(\"general.of\");\n\n  /** @internal */\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) => ({ selectedResultId: state.selectedResultId - 1 }));\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) => ({ selectedResultId: state.selectedResultId + 1 }));\n    }\n  };\n\n  private get _maxSelectedResultInputLength() {\n    return this.props.resultCount.toString().length;\n  }\n\n  private _onSelectedResultChanged = (event: React.ChangeEvent<HTMLInputElement>) => {\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)\n      selectedId = 1;\n\n    this.setState({ selectedResultInEditMode: false, selectedResultId: selectedId });\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 === SpecialKey.Enter)\n      this._onSelectedResultConfirmed();\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);\n  }\n\n  /** @internal */\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  /** @internal */\n  public override render() {\n    return (\n      <span className={classnames(\"components-result-selector\", this.props.className)} style={this.props.style}>\n        <button className={classnames(\"components-result-selector-button\", \"icon\", \"icon-chevron-left\")}\n          onClick={this._onClickPrevious}\n          disabled={this.props.resultCount <= 0} />\n\n        <span style={{ pointerEvents: this.props.resultCount ? \"auto\" : \"none\" }}\n          className=\"components-result-selector-current-result\"\n          onClick={this._onSelectedResultClick} role=\"presentation\">\n          {this.state.selectedResultInEditMode ?\n            <input type=\"number\"\n              style={{ width: `${this.state.selectedResultEdit.length * 0.60 + 1}em` }}\n              value={this.state.selectedResultEdit}\n              onChange={this._onSelectedResultChanged}\n              onBlur={this._onSelectedResultConfirmed}\n              onKeyDown={this._onSelectedResultKeyDown} /> :\n            this.state.selectedResultId}\n          <span style={{ marginLeft: \"5px\", marginRight: \"5px\" }}>{this._ofLabel}</span>\n          <span>{this.props.resultCount}</span>\n        </span>\n\n        <button className=\"components-result-selector-button icon icon-chevron-right\"\n          onClick={this._onClickNext}\n          disabled={this.props.resultCount <= 0} />\n      </span>\n    );\n  }\n}\n"]}
+{"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 { SpecialKey } from \"@itwin/appui-abstract\";\nimport { CommonProps, Icon } from \"@itwin/core-react\";\nimport { UiComponents } from \"../UiComponents\";\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 */\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<ResultSelectorProps, ResultSelectorState> {\n  private _ofLabel = UiComponents.translate(\"general.of\");\n\n  /** @internal */\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) => ({ selectedResultId: state.selectedResultId - 1 }));\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) => ({ selectedResultId: state.selectedResultId + 1 }));\n    }\n  };\n\n  private get _maxSelectedResultInputLength() {\n    return this.props.resultCount.toString().length;\n  }\n\n  private _onSelectedResultChanged = (event: React.ChangeEvent<HTMLInputElement>) => {\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)\n      selectedId = 1;\n\n    this.setState({ selectedResultInEditMode: false, selectedResultId: selectedId });\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 === SpecialKey.Enter)\n      this._onSelectedResultConfirmed();\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);\n  }\n\n  /** @internal */\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  /** @internal */\n  public override render() {\n    return (\n      <span className={classnames(\"components-result-selector\", this.props.className)} style={this.props.style}>\n        <button className={classnames(\"components-result-selector-button\", \"icon\")}\n          data-testid=\"previous-button\"\n          onClick={this._onClickPrevious}\n          disabled={this.props.resultCount <= 0}><Icon iconSpec={<SvgChevronLeft />} /></button>\n\n        <span style={{ pointerEvents: this.props.resultCount ? \"auto\" : \"none\" }}\n          className=\"components-result-selector-current-result\"\n          onClick={this._onSelectedResultClick} role=\"presentation\">\n          {this.state.selectedResultInEditMode ?\n            <input type=\"number\"\n              style={{ width: `${this.state.selectedResultEdit.length * 0.60 + 1}em` }}\n              value={this.state.selectedResultEdit}\n              onChange={this._onSelectedResultChanged}\n              onBlur={this._onSelectedResultConfirmed}\n              onKeyDown={this._onSelectedResultKeyDown} /> :\n            this.state.selectedResultId}\n          <span style={{ marginLeft: \"5px\", marginRight: \"5px\" }}>{this._ofLabel}</span>\n          <span>{this.props.resultCount}</span>\n        </span>\n\n        <button className=\"components-result-selector-button icon\" data-testid=\"next-button\"\n          onClick={this._onClickNext}\n          disabled={this.props.resultCount <= 0}><Icon iconSpec={<SvgChevronRight />}/></button>\n      </span>\n    );\n  }\n}\n"]}

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

@@ -3,17 +3,14 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/itwinui-css/scss/button/button";
-@import "~@itwin/itwinui-css/scss/button/default";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 .components-result-selector {
   display: flex;
   align-items: center;
   font-size: 12px;
 
-  @include iui-font-family;
-  color: $buic-text-color;
+  font-family: var(--iui-font-sans);
+  color: var(--iui-color-text);
 }
 
 .components-result-selector-current-result {
@@ -41,13 +38,11 @@
 }
 
 .components-result-selector-button {
-  @include iui-button;
-  @include iui-button-default;
   font-size: 12px;
   height: 20px;
   width: 20px;
   border-style: none;
-  color: $buic-foreground-muted;
+  color: var(--iui-color-text-muted);
   margin: 0 4px;
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"IconPickerButton.d.ts","sourceRoot":"","sources":["../../../../src/components-react/iconpicker/IconPickerButton.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAoB,MAAM,mBAAmB,CAAC;AA4ClE;;GAEG;AAEH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACjG,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;AAEH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,EAAE,eAAe,CAAC;IACzF,OAAO,CAAC,OAAO,CAAwC;IAEvD,gBAAgB;IAChB,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAElD;IAEF,gBAAgB;gBACJ,KAAK,EAAE,eAAe;IAMlC,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,iBAAiB,CAQvB;IAEF,OAAO,CAAC,WAAW;IAYnB,gBAAgB;IACA,MAAM;CAyBvB"}
+{"version":3,"file":"IconPickerButton.d.ts","sourceRoot":"","sources":["../../../../src/components-react/iconpicker/IconPickerButton.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AA6C7D;;GAEG;AAEH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACjG,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;AAEH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,EAAE,eAAe,CAAC;IACzF,OAAO,CAAC,OAAO,CAAwC;IAEvD,gBAAgB;IAChB,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAElD;IAEF,gBAAgB;gBACJ,KAAK,EAAE,eAAe;IAMlC,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,iBAAiB,CAQvB;IAEF,OAAO,CAAC,WAAW;IAYnB,gBAAgB;IACA,MAAM;CAyBvB"}

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

@@ -10,7 +10,8 @@ import "./IconPickerButton.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { RelativePosition } from "@itwin/appui-abstract";
-import { Popup, SvgSprite } from "@itwin/core-react";
+import { Icon, Popup } from "@itwin/core-react";
+import { SvgChevronDown } from "@itwin/itwinui-icons-react";
 /** IconItem Functional component
  * @internal
  */
@@ -31,14 +32,14 @@ class IconItem extends React.PureComponent {
         };
         const classes = classnames("components-icon-swatch", this.props.className);
         return (React.createElement("button", { ...otherProps, className: classes, style: this.props.style, onClick: handleClick },
-            React.createElement(SvgSprite, { src: this.props.icon })));
+            React.createElement(Icon, { iconSpec: this.props.icon })));
     }
 }
 /** IconPickerButton component
  * @internal
  */
 // istanbul ignore next
-export class IconPickerButton extends React.PureComponent {
+class IconPickerButton extends React.PureComponent {
     /** @internal */
     constructor(props) {
         super(props);
@@ -72,8 +73,11 @@ export class IconPickerButton extends React.PureComponent {
         const buttonClassNames = classnames("components-iconpicker-button", this.props.readonly && "readonly", this.props.className);
         return (React.createElement(React.Fragment, null,
             React.createElement("button", { "data-testid": "components-iconpicker-button", onClick: this._togglePopup, className: buttonClassNames, style: buttonStyle, disabled: this.props.disabled, ref: this._target },
-                React.createElement(SvgSprite, { className: "iconpicker-button-sprite", src: this.state.icon }),
-                React.createElement("span", { className: "icon icon-chevron-down" })),
+                React.createElement(Icon, { className: "iconpicker-button-sprite", iconSpec: this.state.icon }),
+                React.createElement("span", { className: "icon" },
+                    " ",
+                    React.createElement(Icon, { iconSpec: React.createElement(SvgChevronDown, null) }),
+                    " ")),
             React.createElement(Popup, { className: "components-iconpicker-popup", isOpen: this.state.showPopup, position: RelativePosition.BottomLeft, onClose: this._closePopup, target: this._target.current }, this.renderPopup(this.props.dropDownTitle))));
     }
 }
@@ -81,4 +85,5 @@ export class IconPickerButton extends React.PureComponent {
 IconPickerButton.defaultProps = {
     numColumns: 4,
 };
+export { IconPickerButton };
 //# sourceMappingURL=IconPickerButton.js.map

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

@@ -1 +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/* eslint-disable deprecation/deprecation */\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 { CommonProps, Popup, SvgSprite } from \"@itwin/core-react\";\n\n/** Properties for the [[IconItem]] React component\n * @internal\n */\ninterface IconItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, 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 */\n// istanbul ignore next\nclass IconItem extends React.PureComponent<IconItemProps> {\n  /** @internal */\n  constructor(props: IconItemProps) {\n    super(props);\n  }\n\n  public override render() {\n    const {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick, icon, // do not pass on item specific props\n      ...otherProps\n    } = this.props;\n\n    const handleClick = (_e: React.MouseEvent) => {\n      if (onClick)\n        onClick();\n    };\n\n    const classes = classnames(\"components-icon-swatch\", this.props.className);\n\n    return (\n      <button {...otherProps} className={classes} style={this.props.style} onClick={handleClick}>\n        <SvgSprite src={this.props.icon} />\n      </button>\n    );\n  }\n}\n\n/** Properties for the [[IconPicker]] React component\n * @internal\n */\n// istanbul ignore next\nexport interface IconPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, 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 */\n// istanbul ignore next\nexport class IconPickerButton extends React.PureComponent<IconPickerProps, IconPickerState> {\n  private _target = React.createRef<HTMLButtonElement>();\n\n  /** @internal */\n  public static defaultProps: Partial<IconPickerProps> = {\n    numColumns: 4,\n  };\n\n  /** @internal */\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)\n      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(\n      { showPopup: false, icon },\n      () => {\n        // istanbul ignore else\n        if (this.props.onIconChange)\n          this.props.onIconChange(icon);\n      });\n  };\n\n  private renderPopup(title: string | undefined) {\n    const containerStyle: React.CSSProperties = { gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)` };\n    return (\n      <div className=\"components-iconpicker-popup-container\">\n        {title && <h4>{title}</h4>}\n        <div data-testid=\"components-iconpicker-popup-icons\" className=\"components-iconpicker-popup-icons\" style={containerStyle}>\n          {this.props.icons.map((icon: string, index: number) => <IconItem key={index} icon={icon} onClick={this._handleIconPicked.bind(this, icon)} />)}\n        </div>\n      </div>\n    );\n  }\n\n  /** @internal */\n  public override render() {\n    const buttonStyle = { ...this.props.style } as React.CSSProperties;\n    const buttonClassNames = classnames(\"components-iconpicker-button\",\n      this.props.readonly && \"readonly\",\n      this.props.className,\n    );\n\n    return (\n      <>\n        <button data-testid=\"components-iconpicker-button\" onClick={this._togglePopup} className={buttonClassNames} style={buttonStyle} disabled={this.props.disabled} ref={this._target}>\n          <SvgSprite className=\"iconpicker-button-sprite\" src={this.state.icon} />\n          <span className=\"icon icon-chevron-down\" />\n        </button>\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          {this.renderPopup(this.props.dropDownTitle)}\n        </Popup>\n      </>\n    );\n  }\n\n}\n"]}
+{"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/* eslint-disable deprecation/deprecation */\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 { CommonProps, 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 extends React.ButtonHTMLAttributes<HTMLButtonElement>, 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 */\n// istanbul ignore next\nclass IconItem extends React.PureComponent<IconItemProps> {\n  /** @internal */\n  constructor(props: IconItemProps) {\n    super(props);\n  }\n\n  public override render() {\n    const {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick, icon, // do not pass on item specific props\n      ...otherProps\n    } = this.props;\n\n    const handleClick = (_e: React.MouseEvent) => {\n      if (onClick)\n        onClick();\n    };\n\n    const classes = classnames(\"components-icon-swatch\", this.props.className);\n\n    return (\n      <button {...otherProps} className={classes} style={this.props.style} onClick={handleClick}>\n        <Icon iconSpec={this.props.icon} />\n      </button>\n    );\n  }\n}\n\n/** Properties for the [[IconPicker]] React component\n * @internal\n */\n// istanbul ignore next\nexport interface IconPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, 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 */\n// istanbul ignore next\nexport class IconPickerButton extends React.PureComponent<IconPickerProps, IconPickerState> {\n  private _target = React.createRef<HTMLButtonElement>();\n\n  /** @internal */\n  public static defaultProps: Partial<IconPickerProps> = {\n    numColumns: 4,\n  };\n\n  /** @internal */\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)\n      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(\n      { showPopup: false, icon },\n      () => {\n        // istanbul ignore else\n        if (this.props.onIconChange)\n          this.props.onIconChange(icon);\n      });\n  };\n\n  private renderPopup(title: string | undefined) {\n    const containerStyle: React.CSSProperties = { gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)` };\n    return (\n      <div className=\"components-iconpicker-popup-container\">\n        {title && <h4>{title}</h4>}\n        <div data-testid=\"components-iconpicker-popup-icons\" className=\"components-iconpicker-popup-icons\" style={containerStyle}>\n          {this.props.icons.map((icon: string, index: number) => <IconItem key={index} icon={icon} onClick={this._handleIconPicked.bind(this, icon)} />)}\n        </div>\n      </div>\n    );\n  }\n\n  /** @internal */\n  public override render() {\n    const buttonStyle = { ...this.props.style } as React.CSSProperties;\n    const buttonClassNames = classnames(\"components-iconpicker-button\",\n      this.props.readonly && \"readonly\",\n      this.props.className,\n    );\n\n    return (\n      <>\n        <button data-testid=\"components-iconpicker-button\" onClick={this._togglePopup} className={buttonClassNames} style={buttonStyle} disabled={this.props.disabled} ref={this._target}>\n          <Icon className=\"iconpicker-button-sprite\" iconSpec={this.state.icon} />\n          <span className=\"icon\"> <Icon iconSpec={<SvgChevronDown />} /> </span>\n        </button>\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          {this.renderPopup(this.props.dropDownTitle)}\n        </Popup>\n      </>\n    );\n  }\n\n}\n"]}

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

@@ -6,10 +6,10 @@
 @import "~@itwin/core-react/lib/cjs/core-react/z-index";
 
 .components-iconpicker-button {
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
   background: $buic-background-control;
   box-sizing: border-box;
-  border: 1px solid $buic-inputs-border;
+  border: 1px solid var(--iui-color-border-foreground);
   border-radius: var(--iui-border-radius-1);
   display: flex;
   align-items: center;
@@ -32,16 +32,16 @@
   }
 
   &:hover .icon {
-    color: $buic-foreground-primary;
+    color: var(--iui-color-text-accent);
   }
 }
 
 .components-iconpicker-popup {
-  border: 1px solid $buic-inputs-border;
+  border: 1px solid var(--iui-color-border-foreground);
   @include uicore-z-index(dialog-popup);
 
   .components-iconpicker-popup-container {
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
     background: $buic-background-control;
 
     .components-iconpicker-popup-icons {

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

@@ -9,12 +9,12 @@
   width: auto;
 
   &.components-parsed-input-has-error {
-    color: $buic-foreground-alert;
+    color: var(--iui-color-text-negative);
     font-weight: bold;
   }
 
   &.components-parsed-input[disabled] {
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
     opacity: 0.65;
   }
 

package/lib/esm/components-react/properties/ItemStyle.d.ts

@@ -34,7 +34,7 @@ export declare const ItemStyleProvider: {
     /**
      * Create CSS style from [[ItemStyle]]
      */
-    createStyle: ({ colorOverrides, isBold, isItalic }: ItemStyle, isSelected?: boolean | undefined) => CSSProperties;
+    createStyle: ({ colorOverrides, isBold, isItalic }: ItemStyle, isSelected?: boolean) => CSSProperties;
 };
 /**
  * Style provider for table rows

package/lib/esm/components-react/properties/ItemStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemStyle.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/ItemStyle.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAgCD;;;GAGG;AAEH,eAAO,MAAM,iBAAiB;IAC5B;;OAEG;wDACiD,SAAS,uCAAyB,aAAa;CAMpG,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,qBAAqB;IAChC;;OAEG;8CACuC,kBAAkB,KAAG,aAAa;CAI7E,CAAC"}
+{"version":3,"file":"ItemStyle.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/ItemStyle.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAgCD;;;GAGG;AAEH,eAAO,MAAM,iBAAiB;IAC5B;;OAEG;wDACiD,SAAS,eAAe,OAAO,KAAG,aAAa;CAMpG,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,qBAAqB;IAChC;;OAEG;8CACuC,kBAAkB,KAAG,aAAa;CAI7E,CAAC"}

package/lib/esm/components-react/properties/LinkHandler.d.ts

@@ -11,10 +11,10 @@ export declare const renderLinks: (text: string, links: LinkElementsInfo, highli
  * Optionally it can highlight text
  * @public
  */
-export declare const withLinks: (stringValue: string, links?: LinkElementsInfo | undefined, highlight?: ((text: string) => React.ReactNode) | undefined) => React.ReactNode;
+export declare const withLinks: (stringValue: string, links?: LinkElementsInfo, highlight?: ((text: string) => React.ReactNode) | undefined) => React.ReactNode;
 /**
  * Properties for [[LinksRenderer]] component.
- * @alpha
+ * @public
  */
 export interface LinksRendererProps {
     value: string;
@@ -23,7 +23,7 @@ export interface LinksRendererProps {
 }
 /**
  * React component for rendering string with links.
- * @alpha
+ * @public
  */
 export declare function LinksRenderer(props: LinksRendererProps): JSX.Element;
 //# sourceMappingURL=LinkHandler.d.ts.map

package/lib/esm/components-react/properties/LinkHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkHandler.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/LinkHandler.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAqEzD;;GAEG;AACH,eAAO,MAAM,WAAW,SAAU,MAAM,SAAS,gBAAgB,sBAAqB,MAAM,KAAK,MAAM,SAAS,kBAAG,MAAM,SAExH,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,gBAAiB,MAAM,4DAA+C,MAAM,KAAK,MAAM,SAAS,kBAAG,MAAM,SAM9H,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACjD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAEtD"}
+{"version":3,"file":"LinkHandler.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/LinkHandler.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAqEzD;;GAEG;AACH,eAAO,MAAM,WAAW,SAAU,MAAM,SAAS,gBAAgB,sBAAqB,MAAM,KAAK,MAAM,SAAS,kBAAG,MAAM,SAExH,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,gBAAiB,MAAM,UAAU,gBAAgB,sBAAqB,MAAM,KAAK,MAAM,SAAS,kBAAG,MAAM,SAM9H,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACjD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAEtD"}

package/lib/esm/components-react/properties/LinkHandler.js

@@ -72,7 +72,7 @@ export const withLinks = (stringValue, links, highlight) => {
 };
 /**
  * React component for rendering string with links.
- * @alpha
+ * @public
  */
 export function LinksRenderer(props) {
     return React.createElement(React.Fragment, null, withLinks(props.value, props.links, props.highlighter));

package/lib/esm/components-react/properties/LinkHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkHandler.js","sourceRoot":"","sources":["../../../../src/components-react/properties/LinkHandler.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 Properties\n */\n\nimport * as React from \"react\";\nimport { BentleyError, BentleyStatus } from \"@itwin/core-bentley\";\nimport { LinkElementsInfo } from \"@itwin/appui-abstract\";\nimport { UnderlinedButton } from \"@itwin/core-react\";\n\n/** Render a single anchor tag */\nfunction renderTag(text: string, links: LinkElementsInfo, highlight?: (text: string) => React.ReactNode) {\n  return (\n    <UnderlinedButton\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        links.onClick(text);\n      }}\n    >\n      {highlight ? highlight(text) : text}\n    </UnderlinedButton>\n  );\n}\n\ninterface Match { start: number, end: number }\n\nfunction matchComparison(matchA: Match, matchB: Match) {\n  if (matchA.start > matchB.start)\n    return 1;\n  if (matchB.start > matchA.start)\n    return -1;\n  return 0;\n}\n\nfunction renderTextPart(text: string, highlight?: (text: string) => React.ReactNode): React.ReactNode {\n  return highlight ? highlight(text) : text;\n}\n\nfunction renderText(text: string, links: LinkElementsInfo, highlight?: (text: string) => React.ReactNode): React.ReactNode {\n  const { matcher } = links;\n\n  if (!matcher)\n    return renderTag(text, links, highlight);\n\n  const matches = matcher(text);\n\n  // Sort just to be sure\n  matches.sort(matchComparison);\n\n  const parts: React.ReactNode[] = [];\n  let lastIndex = 0;\n  for (const match of matches) {\n    // If matches overlap there must be something wrong with the matcher\n    if (lastIndex > match.start)\n      throw new BentleyError(BentleyStatus.ERROR, \"renderText: matcher returned overlapping matches\");\n\n    if (lastIndex < match.start)\n      parts.push(renderTextPart(text.substring(lastIndex, match.start), highlight));\n\n    const anchorText = text.substring(match.start, match.end);\n    parts.push(renderTag(anchorText, links, highlight));\n\n    lastIndex = match.end;\n  }\n  if (text.length > lastIndex)\n    parts.push(renderTextPart(text.substring(lastIndex), highlight));\n\n  // Need to map, because React complains about the lack of keys\n  return parts.map((part, index) => <React.Fragment key={index}>{part}</React.Fragment>);\n}\n\nfunction renderHighlighted(text: string, highlight: (text: string) => React.ReactNode) {\n  return highlight(text);\n}\n\n/** Renders anchor tag by wrapping or splitting provided text\n * @public\n */\nexport const renderLinks = (text: string, links: LinkElementsInfo, highlight?: (text: string) => React.ReactNode): React.ReactNode => {\n  return renderText(text, links, highlight);\n};\n\n/** If record has links, wraps stringValue in them, otherwise returns unchanged stringValue\n * Optionally it can highlight text\n * @public\n */\nexport const withLinks = (stringValue: string, links?: LinkElementsInfo, highlight?: (text: string) => React.ReactNode): React.ReactNode => {\n  if (links)\n    return renderLinks(stringValue, links, highlight);\n  if (highlight)\n    return renderHighlighted(stringValue, highlight);\n  return stringValue;\n};\n\n/**\n * Properties for [[LinksRenderer]] component.\n * @alpha\n */\nexport interface LinksRendererProps {\n  value: string;\n  links?: LinkElementsInfo;\n  highlighter?: (text: string) => React.ReactNode;\n}\n\n/**\n * React component for rendering string with links.\n * @alpha\n */\nexport function LinksRenderer(props: LinksRendererProps) {\n  return <>{withLinks(props.value, props.links, props.highlighter)}</>;\n}\n"]}
+{"version":3,"file":"LinkHandler.js","sourceRoot":"","sources":["../../../../src/components-react/properties/LinkHandler.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 Properties\n */\n\nimport * as React from \"react\";\nimport { BentleyError, BentleyStatus } from \"@itwin/core-bentley\";\nimport { LinkElementsInfo } from \"@itwin/appui-abstract\";\nimport { UnderlinedButton } from \"@itwin/core-react\";\n\n/** Render a single anchor tag */\nfunction renderTag(text: string, links: LinkElementsInfo, highlight?: (text: string) => React.ReactNode) {\n  return (\n    <UnderlinedButton\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        links.onClick(text);\n      }}\n    >\n      {highlight ? highlight(text) : text}\n    </UnderlinedButton>\n  );\n}\n\ninterface Match { start: number, end: number }\n\nfunction matchComparison(matchA: Match, matchB: Match) {\n  if (matchA.start > matchB.start)\n    return 1;\n  if (matchB.start > matchA.start)\n    return -1;\n  return 0;\n}\n\nfunction renderTextPart(text: string, highlight?: (text: string) => React.ReactNode): React.ReactNode {\n  return highlight ? highlight(text) : text;\n}\n\nfunction renderText(text: string, links: LinkElementsInfo, highlight?: (text: string) => React.ReactNode): React.ReactNode {\n  const { matcher } = links;\n\n  if (!matcher)\n    return renderTag(text, links, highlight);\n\n  const matches = matcher(text);\n\n  // Sort just to be sure\n  matches.sort(matchComparison);\n\n  const parts: React.ReactNode[] = [];\n  let lastIndex = 0;\n  for (const match of matches) {\n    // If matches overlap there must be something wrong with the matcher\n    if (lastIndex > match.start)\n      throw new BentleyError(BentleyStatus.ERROR, \"renderText: matcher returned overlapping matches\");\n\n    if (lastIndex < match.start)\n      parts.push(renderTextPart(text.substring(lastIndex, match.start), highlight));\n\n    const anchorText = text.substring(match.start, match.end);\n    parts.push(renderTag(anchorText, links, highlight));\n\n    lastIndex = match.end;\n  }\n  if (text.length > lastIndex)\n    parts.push(renderTextPart(text.substring(lastIndex), highlight));\n\n  // Need to map, because React complains about the lack of keys\n  return parts.map((part, index) => <React.Fragment key={index}>{part}</React.Fragment>);\n}\n\nfunction renderHighlighted(text: string, highlight: (text: string) => React.ReactNode) {\n  return highlight(text);\n}\n\n/** Renders anchor tag by wrapping or splitting provided text\n * @public\n */\nexport const renderLinks = (text: string, links: LinkElementsInfo, highlight?: (text: string) => React.ReactNode): React.ReactNode => {\n  return renderText(text, links, highlight);\n};\n\n/** If record has links, wraps stringValue in them, otherwise returns unchanged stringValue\n * Optionally it can highlight text\n * @public\n */\nexport const withLinks = (stringValue: string, links?: LinkElementsInfo, highlight?: (text: string) => React.ReactNode): React.ReactNode => {\n  if (links)\n    return renderLinks(stringValue, links, highlight);\n  if (highlight)\n    return renderHighlighted(stringValue, highlight);\n  return stringValue;\n};\n\n/**\n * Properties for [[LinksRenderer]] component.\n * @public\n */\nexport interface LinksRendererProps {\n  value: string;\n  links?: LinkElementsInfo;\n  highlighter?: (text: string) => React.ReactNode;\n}\n\n/**\n * React component for rendering string with links.\n * @public\n */\nexport function LinksRenderer(props: LinksRendererProps) {\n  return <>{withLinks(props.value, props.links, props.highlighter)}</>;\n}\n"]}

package/lib/esm/components-react/properties/renderers/ActionButtonRenderer.d.ts

@@ -16,5 +16,5 @@ export interface ActionButtonRendererProps {
  * Renders a React component (usually a button) for a PropertyRecord
  * @public
  */
-export declare type ActionButtonRenderer = (props: ActionButtonRendererProps) => React.ReactNode;
+export type ActionButtonRenderer = (props: ActionButtonRendererProps) => React.ReactNode;
 //# sourceMappingURL=ActionButtonRenderer.d.ts.map

package/lib/esm/components-react/properties/renderers/ActionButtonRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButtonRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/ActionButtonRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,iDAAiD;IACjD,QAAQ,EAAE,cAAc,CAAC;IACzB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;GAGG;AACH,oBAAY,oBAAoB,GAAG,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC"}
+{"version":3,"file":"ActionButtonRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/ActionButtonRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,iDAAiD;IACjD,QAAQ,EAAE,cAAc,CAAC;IACzB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC"}

package/lib/esm/components-react/properties/renderers/CommonPropertyRenderer.js

@@ -31,7 +31,7 @@ export class CommonPropertyRenderer {
         return currentSize - minColumnLabelWidth;
     }
     static createNewDisplayValue(orientation, propertyRecord, indentation, propertyValueRendererManager, isExpanded, onExpansionToggled, onHeightChanged, highlight) {
-        const highlightCallback = (highlight === null || highlight === void 0 ? void 0 : highlight.applyOnValue) ? (CommonPropertyRenderer.createHighlightCallback(highlight, propertyRecord)) : undefined;
+        const highlightCallback = highlight?.applyOnValue ? (CommonPropertyRenderer.createHighlightCallback(highlight, propertyRecord)) : undefined;
         const rendererContext = {
             orientation,
             containerType: PropertyContainerType.PropertyPane,
@@ -51,10 +51,9 @@ export class CommonPropertyRenderer {
         return displayValue;
     }
     static createHighlightCallback(highlight, propertyRecord) {
-        var _a;
         const activeMatch = highlight.activeHighlight;
-        const propertyName = activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.highlightedItemIdentifier;
-        const matchIndex = (_a = activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.highlightIndex) !== null && _a !== void 0 ? _a : 0;
+        const propertyName = activeMatch?.highlightedItemIdentifier;
+        const matchIndex = activeMatch?.highlightIndex ?? 0;
         let labelMatches;
         if (highlight.applyOnLabel) {
             labelMatches = countMatchesInString(propertyRecord.property.displayLabel.toLowerCase(), highlight.highlightedText);

package/lib/esm/components-react/properties/renderers/CommonPropertyRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonPropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/CommonPropertyRenderer.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 Properties\n */\n\nimport * as React from \"react\";\nimport { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { Orientation } from \"@itwin/core-react\";\nimport { countMatchesInString } from \"../../common/countMatchesInString\";\nimport { HighlightedText } from \"../../common/HighlightedText\";\nimport { HighlightingComponentProps } from \"../../common/HighlightingComponentProps\";\nimport { PropertyContainerType, PropertyValueRendererContext, PropertyValueRendererManager } from \"../ValueRendererManager\";\n\n/**\n * @internal\n */\nexport class CommonPropertyRenderer {\n  public static getLabelOffset(indentation?: number, orientation?: Orientation, width?: number, columnRatio?: number, minColumnLabelWidth?: number): number {\n    if (!indentation)\n      return 0;\n\n    const maxIndent = 17;\n    const minIndent = 6;\n    if (orientation !== Orientation.Horizontal || !width || !columnRatio || !minColumnLabelWidth)\n      return indentation * maxIndent;\n\n    const currentSize = Math.ceil(width * columnRatio);\n    const shrinkThreshold = minColumnLabelWidth + (maxIndent * indentation);\n    if (currentSize >= shrinkThreshold)\n      return indentation * maxIndent;\n\n    const minShrink = minColumnLabelWidth + minIndent + (maxIndent * (indentation - 1));\n    if (currentSize <= minShrink)\n      return minIndent + this.getLabelOffset(indentation - 1, orientation, width, columnRatio, minColumnLabelWidth);\n\n    return currentSize - minColumnLabelWidth;\n  }\n\n  public static createNewDisplayValue(\n    orientation: Orientation,\n    propertyRecord: PropertyRecord,\n    indentation?: number,\n    propertyValueRendererManager?: PropertyValueRendererManager,\n    isExpanded?: boolean,\n    onExpansionToggled?: () => void,\n    onHeightChanged?: (newHeight: number) => void,\n    highlight?: HighlightingComponentProps & { applyOnLabel: boolean, applyOnValue: boolean }\n  ) {\n    const highlightCallback = highlight?.applyOnValue ? (CommonPropertyRenderer.createHighlightCallback(highlight, propertyRecord)) : undefined;\n    const rendererContext: PropertyValueRendererContext = {\n      orientation,\n      containerType: PropertyContainerType.PropertyPane,\n      isExpanded,\n      onExpansionToggled,\n      onHeightChanged,\n      textHighlighter: highlightCallback,\n    };\n\n    let displayValue: React.ReactNode | undefined;\n    if (propertyValueRendererManager)\n      displayValue = propertyValueRendererManager.render(propertyRecord, rendererContext);\n    else\n      displayValue = PropertyValueRendererManager.defaultManager.render(propertyRecord, rendererContext);\n\n    // Align value with label if orientation is vertical\n    if (orientation === Orientation.Vertical)\n      displayValue = <span style={{ paddingLeft: CommonPropertyRenderer.getLabelOffset(indentation, orientation) }}>{displayValue}</span>;\n\n    return displayValue;\n  }\n\n  private static createHighlightCallback(highlight: HighlightingComponentProps & { applyOnLabel: boolean }, propertyRecord: PropertyRecord) {\n    const activeMatch = highlight.activeHighlight;\n    const propertyName = activeMatch?.highlightedItemIdentifier;\n    const matchIndex = activeMatch?.highlightIndex ?? 0;\n    let labelMatches: number;\n\n    if (highlight.applyOnLabel) {\n      labelMatches = countMatchesInString(propertyRecord.property.displayLabel.toLowerCase(), highlight.highlightedText);\n    } else {\n      labelMatches = 0;\n    }\n\n    const activeMatchIndex = (propertyRecord.property.name === propertyName) && ((matchIndex - labelMatches) >= 0) ? (matchIndex - labelMatches) : undefined;\n    const highlightCallback = (text: string) => (<HighlightedText text={text} activeMatchIndex={activeMatchIndex} searchText={highlight.highlightedText} />);\n\n    return highlightCallback;\n  }\n}\n"]}
+{"version":3,"file":"CommonPropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/CommonPropertyRenderer.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 Properties\n */\n\nimport * as React from \"react\";\nimport { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { Orientation } from \"@itwin/core-react\";\nimport { countMatchesInString } from \"../../common/countMatchesInString\";\nimport { HighlightedText } from \"../../common/HighlightedText\";\nimport { HighlightingComponentProps } from \"../../common/HighlightingComponentProps\";\nimport { PropertyContainerType, PropertyValueRendererContext, PropertyValueRendererManager } from \"../ValueRendererManager\";\n\n/**\n * @internal\n */\nexport class CommonPropertyRenderer {\n  public static getLabelOffset(indentation?: number, orientation?: Orientation, width?: number, columnRatio?: number, minColumnLabelWidth?: number): number {\n    if (!indentation)\n      return 0;\n\n    const maxIndent = 17;\n    const minIndent = 6;\n    if (orientation !== Orientation.Horizontal || !width || !columnRatio || !minColumnLabelWidth)\n      return indentation * maxIndent;\n\n    const currentSize = Math.ceil(width * columnRatio);\n    const shrinkThreshold = minColumnLabelWidth + (maxIndent * indentation);\n    if (currentSize >= shrinkThreshold)\n      return indentation * maxIndent;\n\n    const minShrink = minColumnLabelWidth + minIndent + (maxIndent * (indentation - 1));\n    if (currentSize <= minShrink)\n      return minIndent + this.getLabelOffset(indentation - 1, orientation, width, columnRatio, minColumnLabelWidth);\n\n    return currentSize - minColumnLabelWidth;\n  }\n\n  public static createNewDisplayValue(\n    orientation: Orientation,\n    propertyRecord: PropertyRecord,\n    indentation?: number,\n    propertyValueRendererManager?: PropertyValueRendererManager,\n    isExpanded?: boolean,\n    onExpansionToggled?: () => void,\n    onHeightChanged?: (newHeight: number) => void,\n    highlight?: HighlightingComponentProps & { applyOnLabel: boolean, applyOnValue: boolean }\n  ) {\n    const highlightCallback = highlight?.applyOnValue ? (CommonPropertyRenderer.createHighlightCallback(highlight, propertyRecord)) : undefined;\n    const rendererContext: PropertyValueRendererContext = {\n      orientation,\n      containerType: PropertyContainerType.PropertyPane,\n      isExpanded,\n      onExpansionToggled,\n      onHeightChanged,\n      textHighlighter: highlightCallback,\n    };\n\n    let displayValue: React.ReactNode | undefined;\n    if (propertyValueRendererManager)\n      displayValue = propertyValueRendererManager.render(propertyRecord, rendererContext);\n    else\n      displayValue = PropertyValueRendererManager.defaultManager.render(propertyRecord, rendererContext);\n\n    // Align value with label if orientation is vertical\n    if (orientation === Orientation.Vertical)\n      displayValue = <span style={{ paddingLeft: CommonPropertyRenderer.getLabelOffset(indentation, orientation) }}>{displayValue}</span>;\n\n    return displayValue;\n  }\n\n  private static createHighlightCallback(highlight: HighlightingComponentProps & { applyOnLabel: boolean }, propertyRecord: PropertyRecord) {\n    const activeMatch = highlight.activeHighlight;\n    const propertyName = activeMatch?.highlightedItemIdentifier;\n    const matchIndex = activeMatch?.highlightIndex ?? 0;\n    let labelMatches: number;\n\n    if (highlight.applyOnLabel) {\n      labelMatches = countMatchesInString(propertyRecord.property.displayLabel.toLowerCase(), highlight.highlightedText);\n    } else {\n      labelMatches = 0;\n    }\n\n    const activeMatchIndex = (propertyRecord.property.name === propertyName) && ((matchIndex - labelMatches) >= 0) ? (matchIndex - labelMatches) : undefined;\n    const highlightCallback = (text: string) => (<HighlightedText text={text} activeMatchIndex={activeMatchIndex} searchText={highlight.highlightedText} />);\n\n    return highlightCallback;\n  }\n}\n"]}