@itwin/components-react 4.1.0 → 4.2.0

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

@@ -1,59 +1,59 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-.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;
-}
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.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/cjs/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,KAAK,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAKpD;;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"}
+{"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;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,CACrD,mBAAmB,EACnB,mBAAmB,CACpB;IACC,OAAO,CAAC,QAAQ,CAAwC;IAExD,gBAAgB;gBACJ,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;IAEF,gBAAgB;IACA,iBAAiB;IAIjC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjE,gBAAgB;IACA,MAAM;CAuDvB"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -56,7 +56,9 @@ class ResultSelector extends React.PureComponent {
             }
             if (this.state.selectedResultId > 1) {
                 this.props.onSelectedChanged(this.state.selectedResultId - 1);
-                this.setState((state) => ({ selectedResultId: state.selectedResultId - 1 }));
+                this.setState((state) => ({
+                    selectedResultId: state.selectedResultId - 1,
+                }));
             }
         };
         this._onClickNext = () => {
@@ -66,7 +68,9 @@ class ResultSelector extends React.PureComponent {
             }
             if (this.state.selectedResultId < this.props.resultCount) {
                 this.props.onSelectedChanged(this.state.selectedResultId + 1);
-                this.setState((state) => ({ selectedResultId: state.selectedResultId + 1 }));
+                this.setState((state) => ({
+                    selectedResultId: state.selectedResultId + 1,
+                }));
             }
         };
         this._onSelectedResultChanged = (event) => {
@@ -79,7 +83,10 @@ class ResultSelector extends React.PureComponent {
                 selectedId = this.props.resultCount;
             else if (selectedId < 1)
                 selectedId = 1;
-            this.setState({ selectedResultInEditMode: false, selectedResultId: selectedId });
+            this.setState({
+                selectedResultInEditMode: false,
+                selectedResultId: selectedId,
+            });
             this.props.onSelectedChanged(selectedId);
         };
         this._onSelectedResultClick = () => {
@@ -117,9 +124,9 @@ class ResultSelector extends React.PureComponent {
             React.createElement("button", { className: (0, classnames_1.default)("components-result-selector-button", "icon"), "data-testid": "previous-button", onClick: this._onClickPrevious, disabled: this.props.resultCount <= 0 },
                 React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.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,
+                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" } }, this._ofLabel),
                 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 },

package/lib/cjs/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":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Filtering\r\n */\r\n\r\nimport \"./ResultSelector.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport type { CommonProps} from \"@itwin/core-react\";\r\nimport { Icon } from \"@itwin/core-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { SvgChevronLeft, SvgChevronRight } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** [[ResultSelector]] React Component state\r\n * @internal\r\n */\r\ninterface ResultSelectorState {\r\n  /** Currently selected result/entry index */\r\n  selectedResultId: number;\r\n  /** Input string */\r\n  selectedResultEdit: string;\r\n  /** Informs if selectedResult is currently being edited */\r\n  selectedResultInEditMode: boolean;\r\n}\r\n\r\n/** [[ResultSelector]] React Component properties\r\n * @public\r\n */\r\nexport interface ResultSelectorProps extends CommonProps {\r\n  /** Total number of results/entries */\r\n  resultCount: number;\r\n  /** Callback to currently selected result/entry change */\r\n  onSelectedChanged: (index: number) => void;\r\n}\r\n\r\n/** Component for stepping through results/entries\r\n * @public\r\n */\r\nexport class ResultSelector extends React.PureComponent<ResultSelectorProps, ResultSelectorState> {\r\n  private _ofLabel = UiComponents.translate(\"general.of\");\r\n\r\n  /** @internal */\r\n  constructor(props: ResultSelectorProps) {\r\n    super(props);\r\n    this.state = {\r\n      selectedResultId: props.resultCount ? 1 : 0,\r\n      selectedResultEdit: \"\",\r\n      selectedResultInEditMode: false,\r\n    };\r\n  }\r\n\r\n  private _onClickPrevious = () => {\r\n    if (this.state.selectedResultInEditMode) {\r\n      this._onSelectedResultConfirmed();\r\n      return;\r\n    }\r\n    if (this.state.selectedResultId > 1) {\r\n      this.props.onSelectedChanged(this.state.selectedResultId - 1);\r\n      this.setState((state) => ({ selectedResultId: state.selectedResultId - 1 }));\r\n    }\r\n  };\r\n\r\n  private _onClickNext = () => {\r\n    if (this.state.selectedResultInEditMode) {\r\n      this._onSelectedResultConfirmed();\r\n      return;\r\n    }\r\n    if (this.state.selectedResultId < this.props.resultCount) {\r\n      this.props.onSelectedChanged(this.state.selectedResultId + 1);\r\n      this.setState((state) => ({ selectedResultId: state.selectedResultId + 1 }));\r\n    }\r\n  };\r\n\r\n  private get _maxSelectedResultInputLength() {\r\n    return this.props.resultCount.toString().length;\r\n  }\r\n\r\n  private _onSelectedResultChanged = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (event.target.value.length <= this._maxSelectedResultInputLength)\r\n      this.setState({ selectedResultEdit: event.target.value });\r\n  };\r\n\r\n  private _onSelectedResultConfirmed = () => {\r\n    let selectedId = +this.state.selectedResultEdit;\r\n    if (selectedId > this.props.resultCount)\r\n      selectedId = this.props.resultCount;\r\n    else if (selectedId < 1)\r\n      selectedId = 1;\r\n\r\n    this.setState({ selectedResultInEditMode: false, selectedResultId: selectedId });\r\n    this.props.onSelectedChanged(selectedId);\r\n  };\r\n\r\n  private _onSelectedResultClick = () => {\r\n    this.setState((state) => ({\r\n      selectedResultInEditMode: true,\r\n      selectedResultEdit: state.selectedResultId.toString(),\r\n    }));\r\n  };\r\n\r\n  private _onSelectedResultKeyDown = (event: React.KeyboardEvent) => {\r\n    if (event.key === SpecialKey.Enter)\r\n      this._onSelectedResultConfirmed();\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: ResultSelectorProps) {\r\n    if (this.props.resultCount !== prevProps.resultCount) {\r\n      this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);\r\n    }\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    return (\r\n      <span className={classnames(\"components-result-selector\", this.props.className)} style={this.props.style}>\r\n        <button className={classnames(\"components-result-selector-button\", \"icon\")}\r\n          data-testid=\"previous-button\"\r\n          onClick={this._onClickPrevious}\r\n          disabled={this.props.resultCount <= 0}><Icon iconSpec={<SvgChevronLeft />} /></button>\r\n\r\n        <span style={{ pointerEvents: this.props.resultCount ? \"auto\" : \"none\" }}\r\n          className=\"components-result-selector-current-result\"\r\n          onClick={this._onSelectedResultClick} role=\"presentation\">\r\n          {this.state.selectedResultInEditMode ?\r\n            <input type=\"number\"\r\n              style={{ width: `${this.state.selectedResultEdit.length * 0.60 + 1}em` }}\r\n              value={this.state.selectedResultEdit}\r\n              onChange={this._onSelectedResultChanged}\r\n              onBlur={this._onSelectedResultConfirmed}\r\n              onKeyDown={this._onSelectedResultKeyDown} /> :\r\n            this.state.selectedResultId}\r\n          <span style={{ marginLeft: \"5px\", marginRight: \"5px\" }}>{this._ofLabel}</span>\r\n          <span>{this.props.resultCount}</span>\r\n        </span>\r\n\r\n        <button className=\"components-result-selector-button icon\" data-testid=\"next-button\"\r\n          onClick={this._onClickNext}\r\n          disabled={this.props.resultCount <= 0}><Icon iconSpec={<SvgChevronRight />}/></button>\r\n      </span>\r\n    );\r\n  }\r\n}\r\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 type { CommonProps } from \"@itwin/core-react\";\nimport { 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<\n  ResultSelectorProps,\n  ResultSelectorState\n> {\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) => ({\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 === SpecialKey.Enter) 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\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          <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            {this._ofLabel}\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          <Icon iconSpec={<SvgChevronRight />} />\n        </button>\n      </span>\n    );\n  }\n}\n"]}

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

@@ -1,68 +1,68 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-.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: $buic-row-hover;
-  border-radius: 2px;
-}
-
-/* Overriding iui-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: $buic-background-control-disabled;
-  cursor: default;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.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: $buic-row-hover;
+  border-radius: 2px;
+}
+
+/* Overriding iui-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: $buic-background-control-disabled;
+  cursor: default;
+}

package/lib/cjs/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,KAAK,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AA8CpD;;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":"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;AAEH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,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;AAEH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CACvD,eAAe,EACf,eAAe,CAChB;IACC,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,CAIlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,iBAAiB,CAKvB;IAEF,OAAO,CAAC,WAAW;IAwBnB,gBAAgB;IACA,MAAM;CAuCvB"}

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

@@ -1,9 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/* eslint-disable deprecation/deprecation */
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module IconPicker
  */
@@ -51,9 +50,7 @@ class IconItem extends React.PureComponent {
         super(props);
     }
     render() {
-        const { 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        onClick, icon, // do not pass on item specific props
+        const { onClick, icon, // do not pass on item specific props
         ...otherProps } = this.props;
         const handleClick = (_e) => {
             if (onClick)
@@ -61,7 +58,7 @@ class IconItem extends React.PureComponent {
         };
         const classes = (0, classnames_1.default)("components-icon-swatch", this.props.className);
         return (React.createElement("button", { ...otherProps, className: classes, style: this.props.style, onClick: handleClick },
-            React.createElement(core_react_1.Icon, { iconSpec: this.props.icon })));
+            React.createElement(core_react_1.Icon, { iconSpec: icon })));
     }
 }
 /** IconPickerButton component
@@ -91,10 +88,12 @@ class IconPickerButton extends React.PureComponent {
         this.state = { showPopup: false, icon: this.props.icon };
     }
     renderPopup(title) {
-        const containerStyle = { gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)` };
+        const containerStyle = {
+            gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)`,
+        };
         return (React.createElement("div", { className: "components-iconpicker-popup-container" },
             title && React.createElement("h4", null, title),
-            React.createElement("div", { "data-testid": "components-iconpicker-popup-icons", className: "components-iconpicker-popup-icons", style: containerStyle }, this.props.icons.map((icon, index) => React.createElement(IconItem, { key: index, icon: icon, onClick: this._handleIconPicked.bind(this, icon) })))));
+            React.createElement("div", { "data-testid": "components-iconpicker-popup-icons", className: "components-iconpicker-popup-icons", style: containerStyle }, this.props.icons.map((icon, index) => (React.createElement(IconItem, { key: index, icon: icon, onClick: this._handleIconPicked.bind(this, icon) }))))));
     }
     /** @internal */
     render() {

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

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

@@ -1,75 +1,75 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
-
-.components-iconpicker-button {
-  color: var(--iui-color-text);
-  background: $buic-background-control;
-  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: $buic-background-control;
-
-    .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: $buic-background-control;
-        transition: scale 0.2s ease;
-        cursor: pointer;
-        outline: none;
-
-        &:hover {
-          transform: scale(1.15);
-        }
-
-        &[disabled] {
-          opacity: 0.2;
-        }
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+
+.components-iconpicker-button {
+  color: var(--iui-color-text);
+  background: $buic-background-control;
+  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: $buic-background-control;
+
+    .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: $buic-background-control;
+        transition: scale 0.2s ease;
+        cursor: pointer;
+        outline: none;
+
+        &:hover {
+          transform: scale(1.15);
+        }
+
+        &[disabled] {
+          opacity: 0.2;
+        }
+      }
+    }
+  }
+}

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

@@ -25,5 +25,5 @@ export interface ParsedInputProps extends CommonProps {
 /** Generic Input component that requires formatting and parsing functions to be passed in as props.
  * @public
  */
-export declare const ParsedInput: (props: ParsedInputProps) => JSX.Element | null;
+export declare const ParsedInput: (props: ParsedInputProps) => React.ReactElement | null;
 //# sourceMappingURL=ParsedInput.d.ts.map