@itwin/components-react 3.4.0-dev.46 → 3.4.0-dev.48

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

@@ -1,122 +1,122 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Filtering
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResultSelector = void 0;
-require("./ResultSelector.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const UiComponents_1 = require("../UiComponents");
-/** Component for stepping through results/entries
- * @public
- */
-class ResultSelector extends React.PureComponent {
-    /** @internal */
-    constructor(props) {
-        super(props);
-        this._ofLabel = UiComponents_1.UiComponents.translate("general.of");
-        this._onClickPrevious = () => {
-            if (this.state.selectedResultInEditMode) {
-                this._onSelectedResultConfirmed();
-                return;
-            }
-            if (this.state.selectedResultId > 1) {
-                this.props.onSelectedChanged(this.state.selectedResultId - 1);
-                this.setState((state) => ({ selectedResultId: state.selectedResultId - 1 }));
-            }
-        };
-        this._onClickNext = () => {
-            if (this.state.selectedResultInEditMode) {
-                this._onSelectedResultConfirmed();
-                return;
-            }
-            if (this.state.selectedResultId < this.props.resultCount) {
-                this.props.onSelectedChanged(this.state.selectedResultId + 1);
-                this.setState((state) => ({ selectedResultId: state.selectedResultId + 1 }));
-            }
-        };
-        this._onSelectedResultChanged = (event) => {
-            if (event.target.value.length <= this._maxSelectedResultInputLength)
-                this.setState({ selectedResultEdit: event.target.value });
-        };
-        this._onSelectedResultConfirmed = () => {
-            let selectedId = +this.state.selectedResultEdit;
-            if (selectedId > this.props.resultCount)
-                selectedId = this.props.resultCount;
-            else if (selectedId < 1)
-                selectedId = 1;
-            this.setState({ selectedResultInEditMode: false, selectedResultId: selectedId });
-            this.props.onSelectedChanged(selectedId);
-        };
-        this._onSelectedResultClick = () => {
-            this.setState((state) => ({
-                selectedResultInEditMode: true,
-                selectedResultEdit: state.selectedResultId.toString(),
-            }));
-        };
-        this._onSelectedResultKeyDown = (event) => {
-            if (event.key === appui_abstract_1.SpecialKey.Enter)
-                this._onSelectedResultConfirmed();
-        };
-        this.state = {
-            selectedResultId: props.resultCount ? 1 : 0,
-            selectedResultEdit: "",
-            selectedResultInEditMode: false,
-        };
-    }
-    get _maxSelectedResultInputLength() {
-        return this.props.resultCount.toString().length;
-    }
-    /** @internal */
-    componentDidMount() {
-        this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.resultCount !== prevProps.resultCount) {
-            this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);
-        }
-    }
-    /** @internal */
-    render() {
-        return (React.createElement("span", { className: (0, classnames_1.default)("components-result-selector", this.props.className), style: this.props.style },
-            React.createElement("button", { className: (0, classnames_1.default)("components-result-selector-button", "icon", "icon-chevron-left"), onClick: this._onClickPrevious, disabled: this.props.resultCount <= 0 }),
-            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 })));
-    }
-}
-exports.ResultSelector = ResultSelector;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Filtering
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResultSelector = void 0;
+require("./ResultSelector.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const UiComponents_1 = require("../UiComponents");
+/** Component for stepping through results/entries
+ * @public
+ */
+class ResultSelector extends React.PureComponent {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._ofLabel = UiComponents_1.UiComponents.translate("general.of");
+        this._onClickPrevious = () => {
+            if (this.state.selectedResultInEditMode) {
+                this._onSelectedResultConfirmed();
+                return;
+            }
+            if (this.state.selectedResultId > 1) {
+                this.props.onSelectedChanged(this.state.selectedResultId - 1);
+                this.setState((state) => ({ selectedResultId: state.selectedResultId - 1 }));
+            }
+        };
+        this._onClickNext = () => {
+            if (this.state.selectedResultInEditMode) {
+                this._onSelectedResultConfirmed();
+                return;
+            }
+            if (this.state.selectedResultId < this.props.resultCount) {
+                this.props.onSelectedChanged(this.state.selectedResultId + 1);
+                this.setState((state) => ({ selectedResultId: state.selectedResultId + 1 }));
+            }
+        };
+        this._onSelectedResultChanged = (event) => {
+            if (event.target.value.length <= this._maxSelectedResultInputLength)
+                this.setState({ selectedResultEdit: event.target.value });
+        };
+        this._onSelectedResultConfirmed = () => {
+            let selectedId = +this.state.selectedResultEdit;
+            if (selectedId > this.props.resultCount)
+                selectedId = this.props.resultCount;
+            else if (selectedId < 1)
+                selectedId = 1;
+            this.setState({ selectedResultInEditMode: false, selectedResultId: selectedId });
+            this.props.onSelectedChanged(selectedId);
+        };
+        this._onSelectedResultClick = () => {
+            this.setState((state) => ({
+                selectedResultInEditMode: true,
+                selectedResultEdit: state.selectedResultId.toString(),
+            }));
+        };
+        this._onSelectedResultKeyDown = (event) => {
+            if (event.key === appui_abstract_1.SpecialKey.Enter)
+                this._onSelectedResultConfirmed();
+        };
+        this.state = {
+            selectedResultId: props.resultCount ? 1 : 0,
+            selectedResultEdit: "",
+            selectedResultInEditMode: false,
+        };
+    }
+    get _maxSelectedResultInputLength() {
+        return this.props.resultCount.toString().length;
+    }
+    /** @internal */
+    componentDidMount() {
+        this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.resultCount !== prevProps.resultCount) {
+            this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);
+        }
+    }
+    /** @internal */
+    render() {
+        return (React.createElement("span", { className: (0, classnames_1.default)("components-result-selector", this.props.className), style: this.props.style },
+            React.createElement("button", { className: (0, classnames_1.default)("components-result-selector-button", "icon", "icon-chevron-left"), onClick: this._onClickPrevious, disabled: this.props.resultCount <= 0 }),
+            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 })));
+    }
+}
+exports.ResultSelector = ResultSelector;
 //# sourceMappingURL=ResultSelector.js.map

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 { CommonProps } from \"@itwin/core-react\";\r\nimport { UiComponents } from \"../UiComponents\";\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\", \"icon-chevron-left\")}\r\n          onClick={this._onClickPrevious}\r\n          disabled={this.props.resultCount <= 0} />\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 icon-chevron-right\"\r\n          onClick={this._onClickNext}\r\n          disabled={this.props.resultCount <= 0} />\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 { 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"]}

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

@@ -1,73 +1,73 @@
-/*---------------------------------------------------------------------------------------------
-* 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/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;
-}
-
-.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 {
-  @include iui-button;
-  @include iui-button-default;
-  font-size: 12px;
-  height: 20px;
-  width: 20px;
-  border-style: none;
-  color: $buic-foreground-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";
+@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;
+}
+
+.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 {
+  @include iui-button;
+  @include iui-button-default;
+  font-size: 12px;
+  height: 20px;
+  width: 20px;
+  border-style: none;
+  color: $buic-foreground-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

@@ -1,48 +1,48 @@
-/** @packageDocumentation
- * @module IconPicker
- */
-import "./IconPickerButton.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[IconPicker]] React component
- * @alpha @deprecated
- */
-export interface IconPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
-    /** active string */
-    icon: string;
-    /** available icons */
-    icons: string[];
-    /** function to run when user selects icon */
-    onIconChange?: ((icon: string) => void) | undefined;
-    /** Disabled or not */
-    disabled?: boolean;
-    /** Readonly or not */
-    readonly?: boolean;
-    /** Title to show at top of DropDown */
-    dropDownTitle?: string;
-    /** Number of columns */
-    numColumns: number;
-}
-/** @internal */
-interface IconPickerState {
-    showPopup: boolean;
-    icon: string;
-}
-/** IconPickerButton component
- * @alpha @deprecated
- */
-export declare class IconPickerButton extends React.PureComponent<IconPickerProps, IconPickerState> {
-    private _target;
-    /** @internal */
-    static defaultProps: Partial<IconPickerProps>;
-    /** @internal */
-    constructor(props: IconPickerProps);
-    private _togglePopup;
-    private _closePopup;
-    private _handleIconPicked;
-    private renderPopup;
-    /** @internal */
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module IconPicker
+ */
+import "./IconPickerButton.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[IconPicker]] React component
+ * @alpha @deprecated
+ */
+export interface IconPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** active string */
+    icon: string;
+    /** available icons */
+    icons: string[];
+    /** function to run when user selects icon */
+    onIconChange?: ((icon: string) => void) | undefined;
+    /** Disabled or not */
+    disabled?: boolean;
+    /** Readonly or not */
+    readonly?: boolean;
+    /** Title to show at top of DropDown */
+    dropDownTitle?: string;
+    /** Number of columns */
+    numColumns: number;
+}
+/** @internal */
+interface IconPickerState {
+    showPopup: boolean;
+    icon: string;
+}
+/** IconPickerButton component
+ * @alpha @deprecated
+ */
+export declare class IconPickerButton extends React.PureComponent<IconPickerProps, IconPickerState> {
+    private _target;
+    /** @internal */
+    static defaultProps: Partial<IconPickerProps>;
+    /** @internal */
+    constructor(props: IconPickerProps);
+    private _togglePopup;
+    private _closePopup;
+    private _handleIconPicked;
+    private renderPopup;
+    /** @internal */
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=IconPickerButton.d.ts.map