@itwin/components-react 4.0.0-dev.8 → 4.0.0

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

@@ -1,49 +1,49 @@
-/** @packageDocumentation
- * @module Filtering
- */
-import "./ResultSelector.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** [[ResultSelector]] React Component state
- * @internal
- */
-interface ResultSelectorState {
-    /** Currently selected result/entry index */
-    selectedResultId: number;
-    /** Input string */
-    selectedResultEdit: string;
-    /** Informs if selectedResult is currently being edited */
-    selectedResultInEditMode: boolean;
-}
-/** [[ResultSelector]] React Component properties
- * @public
- */
-export interface ResultSelectorProps extends CommonProps {
-    /** Total number of results/entries */
-    resultCount: number;
-    /** Callback to currently selected result/entry change */
-    onSelectedChanged: (index: number) => void;
-}
-/** Component for stepping through results/entries
- * @public
- */
-export declare class ResultSelector extends React.PureComponent<ResultSelectorProps, ResultSelectorState> {
-    private _ofLabel;
-    /** @internal */
-    constructor(props: ResultSelectorProps);
-    private _onClickPrevious;
-    private _onClickNext;
-    private get _maxSelectedResultInputLength();
-    private _onSelectedResultChanged;
-    private _onSelectedResultConfirmed;
-    private _onSelectedResultClick;
-    private _onSelectedResultKeyDown;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: ResultSelectorProps): void;
-    /** @internal */
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module Filtering
+ */
+import "./ResultSelector.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** [[ResultSelector]] React Component state
+ * @internal
+ */
+interface ResultSelectorState {
+    /** Currently selected result/entry index */
+    selectedResultId: number;
+    /** Input string */
+    selectedResultEdit: string;
+    /** Informs if selectedResult is currently being edited */
+    selectedResultInEditMode: boolean;
+}
+/** [[ResultSelector]] React Component properties
+ * @public
+ */
+export interface ResultSelectorProps extends CommonProps {
+    /** Total number of results/entries */
+    resultCount: number;
+    /** Callback to currently selected result/entry change */
+    onSelectedChanged: (index: number) => void;
+}
+/** Component for stepping through results/entries
+ * @public
+ */
+export declare class ResultSelector extends React.PureComponent<ResultSelectorProps, ResultSelectorState> {
+    private _ofLabel;
+    /** @internal */
+    constructor(props: ResultSelectorProps);
+    private _onClickPrevious;
+    private _onClickNext;
+    private get _maxSelectedResultInputLength();
+    private _onSelectedResultChanged;
+    private _onSelectedResultConfirmed;
+    private _onSelectedResultClick;
+    private _onSelectedResultKeyDown;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: ResultSelectorProps): void;
+    /** @internal */
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=ResultSelector.d.ts.map

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

@@ -1,96 +1,100 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Filtering
- */
-import "./ResultSelector.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { UiComponents } from "../UiComponents";
-/** Component for stepping through results/entries
- * @public
- */
-export class ResultSelector extends React.PureComponent {
-    /** @internal */
-    constructor(props) {
-        super(props);
-        this._ofLabel = 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 === 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: 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("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 })));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Filtering
+ */
+import "./ResultSelector.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { 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
+ */
+export class ResultSelector extends React.PureComponent {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._ofLabel = 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 === 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: classnames("components-result-selector", this.props.className), style: this.props.style },
+            React.createElement("button", { className: classnames("components-result-selector-button", "icon"), "data-testid": "previous-button", onClick: this._onClickPrevious, disabled: this.props.resultCount <= 0 },
+                React.createElement(Icon, { iconSpec: React.createElement(SvgChevronLeft, null) })),
+            React.createElement("span", { style: { pointerEvents: this.props.resultCount ? "auto" : "none" }, className: "components-result-selector-current-result", onClick: this._onSelectedResultClick, role: "presentation" },
+                this.state.selectedResultInEditMode ?
+                    React.createElement("input", { type: "number", style: { width: `${this.state.selectedResultEdit.length * 0.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", "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":["/*---------------------------------------------------------------------------------------------\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, 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

@@ -1,73 +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";
-@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";
+
+.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/esm/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 in 3.0.
- */
-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 in 3.0.
- */
-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
+ * @internal
+ */
+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
+ * @internal
+ */
+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

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"}