@itwin/components-react 4.0.0-dev.1 → 4.0.0-dev.11

package/lib/esm/components-react/editors/ToggleEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/ToggleEditor.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 PropertyEditors\r\n */\r\n\r\nimport \"./ToggleEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\nimport { ToggleSwitch } from \"@itwin/itwinui-react\";\r\n\r\n/** @internal */\r\ninterface ToggleEditorState {\r\n  toggleValue: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/** ToggleEditor React component that is a property editor with checkbox input\r\n * @public\r\n */\r\nexport class ToggleEditor extends React.PureComponent<PropertyEditorProps, ToggleEditorState> implements TypeEditor {\r\n  private _isMounted = false;\r\n  private _inputElement = React.createRef<HTMLInputElement>();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<ToggleEditorState> = {\r\n    toggleValue: false,\r\n    isDisabled: false,\r\n  };\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    const record = this.props.propertyRecord;\r\n    let propertyValue: PropertyValue | undefined;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      propertyValue = {\r\n        valueFormat: PropertyValueFormat.Primitive,\r\n        value: this.state.toggleValue,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n    return propertyValue;\r\n  }\r\n\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._inputElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    return document.activeElement === this._inputElement.current;\r\n  }\r\n\r\n  private _updateToggleValue = (e: React.ChangeEvent<HTMLInputElement>): any => {\r\n    // istanbul ignore else\r\n    if (this._isMounted) {\r\n      // istanbul ignore else\r\n      if (this._isMounted) {\r\n        let toggleValue: boolean = false;\r\n\r\n        // istanbul ignore if\r\n        if (e.target.checked !== undefined)   // Needed for unit test environment\r\n          toggleValue = e.target.checked;\r\n        else {\r\n          // istanbul ignore else\r\n          if (e.target.value !== undefined && typeof e.target.value === \"boolean\")\r\n            toggleValue = e.target.value;\r\n        }\r\n\r\n        this.setState({\r\n          toggleValue,\r\n        }, async () => {\r\n          // istanbul ignore else\r\n          if (this.props.propertyRecord && this.props.onCommit) {\r\n            const propertyValue = await this.getPropertyValue();\r\n            // istanbul ignore else\r\n            if (propertyValue !== undefined) {\r\n              this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\r\n            }\r\n          }\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n    }\r\n  }\r\n\r\n  private async setStateFromProps() {\r\n    const { propertyRecord } = this.props;\r\n    let toggleValue = false;\r\n    let isDisabled = false;\r\n\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      const primitiveValue = propertyRecord.value.value;\r\n      toggleValue = primitiveValue as boolean;\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.isDisabled)\r\n      isDisabled = propertyRecord.isDisabled;\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState({ toggleValue, isDisabled });\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const className = classnames(\"components-cell-editor\", \"components-toggle-editor\", this.props.className);\r\n    const isChecked = this.state.toggleValue;\r\n    const isDisabled = !!this.state.isDisabled;\r\n\r\n    return (\r\n      <ToggleSwitch\r\n        ref={this._inputElement}\r\n        onBlur={this.props.onBlur}\r\n        className={className}\r\n        style={this.props.style}\r\n        checked={isChecked}\r\n        disabled={isDisabled}\r\n        onChange={this._updateToggleValue}\r\n        data-testid=\"components-toggle-editor\"\r\n        setFocus={this.props.setFocus} />\r\n    );\r\n  }\r\n}\r\n\r\n/** Toggle Property Editor registered for the \"bool\" and \"boolean\" type names and \"toggle\" editor name.\r\n * It uses the [[ToggleEditor]] React component.\r\n * @public\r\n */\r\nexport class TogglePropertyEditor extends PropertyEditorBase {\r\n  // istanbul ignore next\r\n  public override get containerHandlesBlur(): boolean {\r\n    return false;\r\n  }\r\n\r\n  public get reactNode(): React.ReactNode {\r\n    return <ToggleEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, TogglePropertyEditor, StandardEditorNames.Toggle);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, TogglePropertyEditor, StandardEditorNames.Toggle);\r\n"]}
+{"version":3,"file":"ToggleEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/ToggleEditor.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 PropertyEditors\r\n */\r\n\r\nimport \"./ToggleEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\nimport { ToggleSwitch } from \"@itwin/itwinui-react\";\r\n\r\n/** @internal */\r\ninterface ToggleEditorState {\r\n  toggleValue: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/** ToggleEditor React component that is a property editor with checkbox input\r\n * @public\r\n */\r\nexport class ToggleEditor extends React.PureComponent<PropertyEditorProps, ToggleEditorState> implements TypeEditor {\r\n  private _isMounted = false;\r\n  private _inputElement = React.createRef<HTMLInputElement>();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<ToggleEditorState> = {\r\n    toggleValue: false,\r\n    isDisabled: false,\r\n  };\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    const record = this.props.propertyRecord;\r\n    let propertyValue: PropertyValue | undefined;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      propertyValue = {\r\n        valueFormat: PropertyValueFormat.Primitive,\r\n        value: this.state.toggleValue,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n    return propertyValue;\r\n  }\r\n\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._inputElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    return document.activeElement === this._inputElement.current;\r\n  }\r\n\r\n  private _updateToggleValue = (e: React.ChangeEvent<HTMLInputElement>): any => {\r\n    // istanbul ignore else\r\n    if (this._isMounted) {\r\n      // istanbul ignore else\r\n      if (this._isMounted) {\r\n        const toggleValue = !!e.target.checked;\r\n\r\n        this.setState({\r\n          toggleValue,\r\n        }, async () => {\r\n          // istanbul ignore else\r\n          if (this.props.propertyRecord && this.props.onCommit) {\r\n            const propertyValue = await this.getPropertyValue();\r\n            // istanbul ignore else\r\n            if (propertyValue !== undefined) {\r\n              this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\r\n            }\r\n          }\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n    }\r\n  }\r\n\r\n  private async setStateFromProps() {\r\n    const { propertyRecord } = this.props;\r\n    let toggleValue = false;\r\n    let isDisabled = false;\r\n\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      const primitiveValue = propertyRecord.value.value;\r\n      toggleValue = primitiveValue as boolean;\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.isDisabled)\r\n      isDisabled = propertyRecord.isDisabled;\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState({ toggleValue, isDisabled });\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const className = classnames(\"components-cell-editor\", \"components-toggle-editor\", this.props.className);\r\n    const isChecked = this.state.toggleValue;\r\n    const isDisabled = !!this.state.isDisabled;\r\n\r\n    return (\r\n      <ToggleSwitch\r\n        ref={this._inputElement}\r\n        onBlur={this.props.onBlur}\r\n        className={className}\r\n        style={this.props.style}\r\n        checked={isChecked}\r\n        disabled={isDisabled}\r\n        onChange={this._updateToggleValue}\r\n        data-testid=\"components-toggle-editor\"\r\n        setFocus={this.props.setFocus} />\r\n    );\r\n  }\r\n}\r\n\r\n/** Toggle Property Editor registered for the \"bool\" and \"boolean\" type names and \"toggle\" editor name.\r\n * It uses the [[ToggleEditor]] React component.\r\n * @public\r\n */\r\nexport class TogglePropertyEditor extends PropertyEditorBase {\r\n  // istanbul ignore next\r\n  public override get containerHandlesBlur(): boolean {\r\n    return false;\r\n  }\r\n\r\n  public get reactNode(): React.ReactNode {\r\n    return <ToggleEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, TogglePropertyEditor, StandardEditorNames.Toggle);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, TogglePropertyEditor, StandardEditorNames.Toggle);\r\n"]}

package/lib/esm/components-react/editors/ToggleEditor.scss

@@ -2,24 +2,22 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/space";
-
 .components-property-list--horizontal {
   .components-toggle-editor {
-    margin-left:    $iui-xs;    // Clear the resizer in the PropertyGrid
+    margin-left: var(--iui-size-2xs); // Clear the resizer in the PropertyGrid
 
     &.iui-toggle-switch {
-      padding:      1px 0;
+      padding: 1px 0;
     }
   }
 }
 
 .components-property-list--vertical {
   .components-toggle-editor {
-    margin-left:    $iui-xxs;
+    margin-left: var(--iui-size-3xs);
 
     &.iui-toggle-switch {
-      padding:      1px 0;
+      padding: 1px 0;
     }
   }
 }

package/lib/esm/components-react/favorite/FavoritePropertiesRenderer.d.ts

@@ -1,13 +1,37 @@
 /** @packageDocumentation
  * @module Favorite
  */
+import * as React from "react";
 import { Orientation } from "@itwin/core-react";
 import { PropertyData } from "../propertygrid/PropertyDataProvider";
+/**
+ * Basic recreation of the `createRoot` function type, intentionally not exported.
+ */
+declare type CreateRoot = (container: Element | DocumentFragment) => {
+    render(children: React.ReactNode): void;
+};
 /** Renderer for Favorite Property List
  * @public
  */
 export declare class FavoritePropertiesRenderer {
+    /**
+     * Evaluates if a PropertyData contain Favorite records.
+     * @param propertyData PropertyData containing records
+     * @returns true if it contains Favorite records
+     */
     hasFavorites(propertyData: PropertyData): boolean;
-    renderFavorites(propertyData: PropertyData, orientation?: Orientation): HTMLElement | string;
+    /**
+     * Allow creating an HTMLElement containing the `<FavoritePropertyList />` component so it can be added outside of a React component (`showCard` is the main expected use)
+     *
+     * Note: When using React18, in order to remove the `ReactDOM.render` warning you will need to provide the `createRoot` function to this function,
+     * the parameter type is intentionally simplified to not depend on React18 type.
+     *
+     * @param propertyData PropertyData containing Favorite records to display.
+     * @param orientation Orientation of the items
+     * @param createRoot `createRoot` function imported from `import { createRoot } from "react-dom/client";`
+     * @returns a `div` HTMLElement with the `<FavoritePropertyList />` rendered within it.
+     */
+    renderFavorites(propertyData: PropertyData, orientation?: Orientation, createRoot?: CreateRoot): HTMLElement | string;
 }
+export {};
 //# sourceMappingURL=FavoritePropertiesRenderer.d.ts.map

package/lib/esm/components-react/favorite/FavoritePropertiesRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FavoritePropertiesRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components-react/favorite/FavoritePropertiesRenderer.ts"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAGpE;;GAEG;AACH,qBAAa,0BAA0B;IAE9B,YAAY,CAAC,YAAY,EAAE,YAAY,GAAG,OAAO;IAIjD,eAAe,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,MAAM;CAKpG"}
+{"version":3,"file":"FavoritePropertiesRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components-react/favorite/FavoritePropertiesRenderer.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAGpE;;GAEG;AACH,aAAK,UAAU,GAAG,CAAC,SAAS,EAAE,OAAO,GAAG,gBAAgB,KAAK;IAC3D,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,qBAAa,0BAA0B;IAErC;;;;OAIG;IACI,YAAY,CAAC,YAAY,EAAE,YAAY,GAAG,OAAO;IAIxD;;;;;;;;;;OAUG;IACI,eAAe,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,CAAC,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM;CAU7H"}

package/lib/esm/components-react/favorite/FavoritePropertiesRenderer.js

@@ -12,12 +12,34 @@ import { FavoritePropertyList } from "./FavoritePropertyList";
  * @public
  */
 export class FavoritePropertiesRenderer {
+    /**
+     * Evaluates if a PropertyData contain Favorite records.
+     * @param propertyData PropertyData containing records
+     * @returns true if it contains Favorite records
+     */
     hasFavorites(propertyData) {
         return propertyData.records.Favorite !== undefined;
     }
-    renderFavorites(propertyData, orientation) {
+    /**
+     * Allow creating an HTMLElement containing the `<FavoritePropertyList />` component so it can be added outside of a React component (`showCard` is the main expected use)
+     *
+     * Note: When using React18, in order to remove the `ReactDOM.render` warning you will need to provide the `createRoot` function to this function,
+     * the parameter type is intentionally simplified to not depend on React18 type.
+     *
+     * @param propertyData PropertyData containing Favorite records to display.
+     * @param orientation Orientation of the items
+     * @param createRoot `createRoot` function imported from `import { createRoot } from "react-dom/client";`
+     * @returns a `div` HTMLElement with the `<FavoritePropertyList />` rendered within it.
+     */
+    renderFavorites(propertyData, orientation, createRoot) {
         const div = document.createElement("div");
-        ReactDOM.render(React.createElement(FavoritePropertyList, { propertyData, orientation }, null), div);
+        const element = React.createElement(FavoritePropertyList, { propertyData, orientation }, null);
+        if (createRoot) {
+            createRoot(div).render(element);
+        }
+        else {
+            ReactDOM.render(element, div);
+        }
         return div;
     }
 }

package/lib/esm/components-react/favorite/FavoritePropertiesRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FavoritePropertiesRenderer.js","sourceRoot":"","sources":["../../../../src/components-react/favorite/FavoritePropertiesRenderer.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAC;AAGtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D;;GAEG;AACH,MAAM,OAAO,0BAA0B;IAE9B,YAAY,CAAC,YAA0B;QAC5C,OAAO,YAAY,CAAC,OAAO,CAAC,QAAQ,KAAK,SAAS,CAAC;IACrD,CAAC;IAEM,eAAe,CAAC,YAA0B,EAAE,WAAyB;QAC1E,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,oBAAoB,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;QACrG,OAAO,GAAG,CAAC;IACb,CAAC;CACF","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 Favorite\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { Orientation } from \"@itwin/core-react\";\r\nimport { PropertyData } from \"../propertygrid/PropertyDataProvider\";\r\nimport { FavoritePropertyList } from \"./FavoritePropertyList\";\r\n\r\n/** Renderer for Favorite Property List\r\n * @public\r\n */\r\nexport class FavoritePropertiesRenderer {\r\n\r\n  public hasFavorites(propertyData: PropertyData): boolean {\r\n    return propertyData.records.Favorite !== undefined;\r\n  }\r\n\r\n  public renderFavorites(propertyData: PropertyData, orientation?: Orientation): HTMLElement | string {\r\n    const div = document.createElement(\"div\");\r\n    ReactDOM.render(React.createElement(FavoritePropertyList, { propertyData, orientation }, null), div);\r\n    return div;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"FavoritePropertiesRenderer.js","sourceRoot":"","sources":["../../../../src/components-react/favorite/FavoritePropertiesRenderer.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAC;AAGtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAS9D;;GAEG;AACH,MAAM,OAAO,0BAA0B;IAErC;;;;OAIG;IACI,YAAY,CAAC,YAA0B;QAC5C,OAAO,YAAY,CAAC,OAAO,CAAC,QAAQ,KAAK,SAAS,CAAC;IACrD,CAAC;IAED;;;;;;;;;;OAUG;IACI,eAAe,CAAC,YAA0B,EAAE,WAAyB,EAAE,UAAuB;QACnG,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,IAAI,CAAC,CAAC;QAC/F,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;SACjC;aAAM;YACL,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;SAC/B;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF","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 Favorite\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { Orientation } from \"@itwin/core-react\";\r\nimport { PropertyData } from \"../propertygrid/PropertyDataProvider\";\r\nimport { FavoritePropertyList } from \"./FavoritePropertyList\";\r\n\r\n/**\r\n * Basic recreation of the `createRoot` function type, intentionally not exported.\r\n */\r\ntype CreateRoot = (container: Element | DocumentFragment) => {\r\n  render(children: React.ReactNode): void;\r\n};\r\n\r\n/** Renderer for Favorite Property List\r\n * @public\r\n */\r\nexport class FavoritePropertiesRenderer {\r\n\r\n  /**\r\n   * Evaluates if a PropertyData contain Favorite records.\r\n   * @param propertyData PropertyData containing records\r\n   * @returns true if it contains Favorite records\r\n   */\r\n  public hasFavorites(propertyData: PropertyData): boolean {\r\n    return propertyData.records.Favorite !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Allow creating an HTMLElement containing the `<FavoritePropertyList />` component so it can be added outside of a React component (`showCard` is the main expected use)\r\n   *\r\n   * Note: When using React18, in order to remove the `ReactDOM.render` warning you will need to provide the `createRoot` function to this function,\r\n   * the parameter type is intentionally simplified to not depend on React18 type.\r\n   *\r\n   * @param propertyData PropertyData containing Favorite records to display.\r\n   * @param orientation Orientation of the items\r\n   * @param createRoot `createRoot` function imported from `import { createRoot } from \"react-dom/client\";`\r\n   * @returns a `div` HTMLElement with the `<FavoritePropertyList />` rendered within it.\r\n   */\r\n  public renderFavorites(propertyData: PropertyData, orientation?: Orientation, createRoot?: CreateRoot): HTMLElement | string {\r\n    const div = document.createElement(\"div\");\r\n    const element = React.createElement(FavoritePropertyList, { propertyData, orientation }, null);\r\n    if (createRoot) {\r\n      createRoot(div).render(element);\r\n    } else {\r\n      ReactDOM.render(element, div);\r\n    }\r\n    return div;\r\n  }\r\n}\r\n"]}

package/lib/esm/components-react/filter-builder/FilterBuilderRule.scss

@@ -2,7 +2,6 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/index";
 
 .rule {
   display: grid;
@@ -12,17 +11,11 @@
   .rule-condition {
     display: grid;
     grid-template-columns: minmax(auto, 500px) 150px minmax(auto, 300px);
-    grid-column-gap: $iui-m;
-
-    .rule-property .iui-input {
-      padding-top: 1.5px;
-      padding-bottom: 1.5px;
-      min-height: 27px;
-    }
+    grid-column-gap: var(--iui-size-m);
   }
 
   .rule-remove-action {
-    padding-right: $iui-sm;
+    padding-right: var(--iui-size-s);
     visibility: hidden;
   }
 
@@ -42,4 +35,4 @@
   &:only-child {
     padding-top: 3px;
   }
-}
+}

package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.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 PropertyFilterBuilder\r\n */\r\n\r\nimport \"./FilterBuilderRuleGroup.scss\";\r\nimport * as React from \"react\";\r\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\r\nimport { Button, IconButton, Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { ActiveRuleGroupContext, PropertyFilterBuilderContext } from \"./FilterBuilderContext\";\r\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\r\nimport { isPropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroupItem } from \"./FilterBuilderState\";\r\nimport { PropertyFilterRuleGroupOperator } from \"./Operators\";\r\n\r\n/**\r\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\r\n  /** Path from [[PropertyFilterBuilder]] root to this rule group. */\r\n  path: string[];\r\n  /** Rule group to render. */\r\n  group: PropertyFilterBuilderRuleGroup;\r\n}\r\n\r\n/**\r\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\r\n * @internal\r\n */\r\nexport function PropertyFilterBuilderRuleGroupRenderer(props: PropertyFilterBuilderRuleGroupRendererProps) {\r\n  const { path, group } = props;\r\n  const { actions, ruleGroupDepthLimit } = React.useContext(PropertyFilterBuilderContext);\r\n  const groupRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  const addRule = () => actions.addItem(path, \"RULE\");\r\n  const addRuleGroup = () => actions.addItem(path, \"RULE_GROUP\");\r\n  const removeGroup = () => actions.removeItem(path);\r\n\r\n  const onOperatorChange = React.useCallback((operator) => {\r\n    actions.setRuleGroupOperator(path, operator);\r\n  }, [path, actions]);\r\n\r\n  const allowToAddGroup = ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;\r\n  const { activeElement, ...eventHandlers } = React.useContext(ActiveRuleGroupContext);\r\n\r\n  const showOperator = group.items.length > 1;\r\n\r\n  return <div\r\n    ref={groupRef}\r\n    className=\"rule-group\"\r\n    data-isactive={groupRef.current === activeElement}\r\n    {...eventHandlers}\r\n  >\r\n    <div className=\"rule-group-remove-action\">\r\n      {group.groupId !== undefined && <IconButton data-testid=\"rule-group-remove\" onClick={removeGroup} styleType=\"borderless\" size=\"small\"><SvgDelete /></IconButton>}\r\n    </div>\r\n    <div className=\"rule-group-content\">\r\n      {showOperator ? <PropertyFilterBuilderRuleGroupOperator operator={group.operator} onChange={onOperatorChange} /> : null}\r\n      <div className=\"rule-group-items\">\r\n        {group.items.map((item) => <PropertyFilterBuilderGroupOrRule key={item.id} path={path} item={item} />)}\r\n      </div>\r\n      <div className=\"rule-group-actions\">\r\n        <Button key=\"add-rule-button\" data-testid=\"rule-group-add-rule\" onClick={addRule} styleType=\"borderless\" size=\"small\" startIcon={<SvgAdd />}>\r\n          {UiComponents.translate(\"filterBuilder.rule\")}\r\n        </Button>\r\n        {allowToAddGroup && <Button key=\"add-rule-group-button\" data-testid=\"rule-group-add-rule-group\" onClick={addRuleGroup} styleType=\"borderless\" size=\"small\" startIcon={<SvgAdd />}>\r\n          {UiComponents.translate(\"filterBuilder.ruleGroup\")}\r\n        </Button>}\r\n      </div>\r\n    </div>\r\n  </div>;\r\n}\r\n\r\n/**\r\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\r\n  /** Currently selected operator. */\r\n  operator: PropertyFilterRuleGroupOperator;\r\n  /** Callback that is invoked when selected operator changes. */\r\n  onChange: (operator: PropertyFilterRuleGroupOperator) => void;\r\n}\r\n\r\n/**\r\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\r\n * @internal\r\n */\r\nexport function PropertyFilterBuilderRuleGroupOperator(props: PropertyFilterBuilderRuleGroupOperatorProps) {\r\n  const { operator, onChange } = props;\r\n\r\n  const options = React.useMemo<Array<SelectOption<PropertyFilterRuleGroupOperator>>>(() => ([\r\n    { value: PropertyFilterRuleGroupOperator.And, label: UiComponents.translate(\"filterBuilder.operators.and\") },\r\n    { value: PropertyFilterRuleGroupOperator.Or, label: UiComponents.translate(\"filterBuilder.operators.or\") },\r\n  ]), []);\r\n\r\n  return <div className=\"rule-group-operator\">\r\n    <Select options={options} value={operator} onChange={onChange} size=\"small\" />\r\n  </div>;\r\n}\r\ninterface PropertyFilterBuilderGroupOrRuleProps {\r\n  path: string[];\r\n  item: PropertyFilterBuilderRuleGroupItem;\r\n}\r\n\r\nconst PropertyFilterBuilderGroupOrRule = React.memo(\r\n  function PropertyFilterBuilderGroupOrRule({ path, item }: PropertyFilterBuilderGroupOrRuleProps) {\r\n    const itemPath = [...path, item.id];\r\n\r\n    if (isPropertyFilterBuilderRuleGroup(item))\r\n      return <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />;\r\n    return <PropertyFilterBuilderRuleRenderer path={itemPath} rule={item} />;\r\n  }\r\n);\r\n"]}
+{"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.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 PropertyFilterBuilder\r\n */\r\n\r\nimport \"./FilterBuilderRuleGroup.scss\";\r\nimport * as React from \"react\";\r\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\r\nimport { Button, IconButton, Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { ActiveRuleGroupContext, PropertyFilterBuilderContext } from \"./FilterBuilderContext\";\r\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\r\nimport { isPropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroupItem } from \"./FilterBuilderState\";\r\nimport { PropertyFilterRuleGroupOperator } from \"./Operators\";\r\n\r\n/**\r\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\r\n  /** Path from [[PropertyFilterBuilder]] root to this rule group. */\r\n  path: string[];\r\n  /** Rule group to render. */\r\n  group: PropertyFilterBuilderRuleGroup;\r\n}\r\n\r\n/**\r\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\r\n * @internal\r\n */\r\nexport function PropertyFilterBuilderRuleGroupRenderer(props: PropertyFilterBuilderRuleGroupRendererProps) {\r\n  const { path, group } = props;\r\n  const { actions, ruleGroupDepthLimit } = React.useContext(PropertyFilterBuilderContext);\r\n  const groupRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  const addRule = () => actions.addItem(path, \"RULE\");\r\n  const addRuleGroup = () => actions.addItem(path, \"RULE_GROUP\");\r\n  const removeGroup = () => actions.removeItem(path);\r\n\r\n  const onOperatorChange = React.useCallback((operator: PropertyFilterRuleGroupOperator) => {\r\n    actions.setRuleGroupOperator(path, operator);\r\n  }, [path, actions]);\r\n\r\n  const allowToAddGroup = ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;\r\n  const { activeElement, ...eventHandlers } = React.useContext(ActiveRuleGroupContext);\r\n\r\n  const showOperator = group.items.length > 1;\r\n\r\n  return <div\r\n    ref={groupRef}\r\n    className=\"rule-group\"\r\n    data-isactive={groupRef.current === activeElement}\r\n    {...eventHandlers}\r\n  >\r\n    <div className=\"rule-group-remove-action\">\r\n      {group.groupId !== undefined && <IconButton data-testid=\"rule-group-remove\" onClick={removeGroup} styleType=\"borderless\" size=\"small\"><SvgDelete /></IconButton>}\r\n    </div>\r\n    <div className=\"rule-group-content\">\r\n      {showOperator ? <PropertyFilterBuilderRuleGroupOperator operator={group.operator} onChange={onOperatorChange} /> : null}\r\n      <div className=\"rule-group-items\">\r\n        {group.items.map((item) => <PropertyFilterBuilderGroupOrRule key={item.id} path={path} item={item} />)}\r\n      </div>\r\n      <div className=\"rule-group-actions\">\r\n        <Button key=\"add-rule-button\" data-testid=\"rule-group-add-rule\" onClick={addRule} styleType=\"borderless\" size=\"small\" startIcon={<SvgAdd />}>\r\n          {UiComponents.translate(\"filterBuilder.rule\")}\r\n        </Button>\r\n        {allowToAddGroup && <Button key=\"add-rule-group-button\" data-testid=\"rule-group-add-rule-group\" onClick={addRuleGroup} styleType=\"borderless\" size=\"small\" startIcon={<SvgAdd />}>\r\n          {UiComponents.translate(\"filterBuilder.ruleGroup\")}\r\n        </Button>}\r\n      </div>\r\n    </div>\r\n  </div>;\r\n}\r\n\r\n/**\r\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\r\n  /** Currently selected operator. */\r\n  operator: PropertyFilterRuleGroupOperator;\r\n  /** Callback that is invoked when selected operator changes. */\r\n  onChange: (operator: PropertyFilterRuleGroupOperator) => void;\r\n}\r\n\r\n/**\r\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\r\n * @internal\r\n */\r\nexport function PropertyFilterBuilderRuleGroupOperator(props: PropertyFilterBuilderRuleGroupOperatorProps) {\r\n  const { operator, onChange } = props;\r\n\r\n  const options = React.useMemo<Array<SelectOption<PropertyFilterRuleGroupOperator>>>(() => ([\r\n    { value: PropertyFilterRuleGroupOperator.And, label: UiComponents.translate(\"filterBuilder.operators.and\") },\r\n    { value: PropertyFilterRuleGroupOperator.Or, label: UiComponents.translate(\"filterBuilder.operators.or\") },\r\n  ]), []);\r\n\r\n  return <div className=\"rule-group-operator\">\r\n    <Select options={options} value={operator} onChange={onChange} size=\"small\" />\r\n  </div>;\r\n}\r\ninterface PropertyFilterBuilderGroupOrRuleProps {\r\n  path: string[];\r\n  item: PropertyFilterBuilderRuleGroupItem;\r\n}\r\n\r\nconst PropertyFilterBuilderGroupOrRule = React.memo(\r\n  function PropertyFilterBuilderGroupOrRule({ path, item }: PropertyFilterBuilderGroupOrRuleProps) {\r\n    const itemPath = [...path, item.id];\r\n\r\n    if (isPropertyFilterBuilderRuleGroup(item))\r\n      return <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />;\r\n    return <PropertyFilterBuilderRuleRenderer path={itemPath} rule={item} />;\r\n  }\r\n);\r\n"]}

package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.scss

@@ -2,8 +2,6 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/index";
-@import "~@itwin/itwinui-css/scss/button/disabled";
 
 .filter-builder > .rule-group {
   & > .rule-group-content {
@@ -21,34 +19,31 @@
   grid-template-columns: min-content auto;
   padding: 11px 0;
 
-  &[data-isactive=true] > .rule-group-remove-action {
+  &[data-isactive="true"] > .rule-group-remove-action {
     visibility: visible;
   }
 
-  &[data-isactive=true] > .rule-group-content {
-    @include themed {
-      border-color: t(iui-color-background-1--light);
-    }
+  &[data-isactive="true"] > .rule-group-content {
+    border-color: var(--iui-color-border-foreground-hover);
   }
 
-  &[data-isactive=false] > .rule-group-content > .rule-group-actions .iui-button {
-    @include themed {
-      color: t(iui-icons-color);
-    }
+  &[data-isactive="false"]
+    > .rule-group-content
+    > .rule-group-actions
+    .iui-button {
+    color: var(--iui-color-icon);
   }
 
   .rule-group-remove-action {
-    padding: 3px $iui-sm 3px 0;
+    padding: 3px var(--iui-size-s) 3px 0;
     visibility: hidden;
   }
 
   .rule-group-content {
-    padding-left: $iui-sm;
+    padding-left: var(--iui-size-s);
     border-left: 1px solid;
     box-sizing: border-box;
-    @include themed {
-      border-color: t(iui-color-background-border);
-    }
+    border-color: var(--iui-color-border-subtle);
 
     .rule-group-operator {
       padding: 3px 0;
@@ -70,4 +65,4 @@
   &:last-child {
     padding-bottom: 11px;
   }
-}
+}

package/lib/esm/components-react/filter-builder/FilterBuilderRuleProperty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleProperty.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleProperty.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI5D;;;GAGG;AACH,MAAM,WAAW,sCAAsC;IACrD,oCAAoC;IACpC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,+DAA+D;IAC/D,yBAAyB,EAAE,CAAC,QAAQ,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACpE,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,sCAAsC,eAsC9F"}
+{"version":3,"file":"FilterBuilderRuleProperty.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleProperty.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI5D;;;GAGG;AACH,MAAM,WAAW,sCAAsC;IACrD,oCAAoC;IACpC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,+DAA+D;IAC/D,yBAAyB,EAAE,CAAC,QAAQ,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACpE,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,sCAAsC,eAuC9F"}

package/lib/esm/components-react/filter-builder/FilterBuilderRuleProperty.js

@@ -34,6 +34,7 @@ export function PropertyFilterBuilderRuleProperty(props) {
         React.createElement(ComboBox, { options: selectOptions, onChange: onPropertyChanged, value: selectedProperty === null || selectedProperty === void 0 ? void 0 : selectedProperty.name, inputProps: {
                 placeholder: UiComponents.translate("filterBuilder.chooseProperty"),
                 disabled: isDisabled,
+                size: "small",
             }, itemRenderer: itemRenderer, enableVirtualization: true }));
 }
 //# sourceMappingURL=FilterBuilderRuleProperty.js.map

package/lib/esm/components-react/filter-builder/FilterBuilderRuleProperty.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleProperty.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleProperty.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAmB/C;;;GAGG;AACH,MAAM,UAAU,iCAAiC,CAAC,KAA6C;IAC7F,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAExG,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAyB,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAC9F,EAAE,EAAE,QAAQ,CAAC,IAAI;QACjB,KAAK,EAAE,QAAQ,CAAC,YAAY;QAC5B,KAAK,EAAE,QAAQ,CAAC,IAAI;KACrB,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;QAC3D,yBAAyB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC;IACnF,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAE5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,MAAK,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,CAAA,CAAC,CAAC;QACxG,IAAI,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI,OAAK,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,CAAA;YAC1D,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,YAAkC,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE;QAChG,OAAO,oBAAC,QAAQ,IAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,IACrD,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CACpE,CAAC;IACd,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,6BAAK,SAAS,EAAC,eAAe;QACnC,oBAAC,QAAQ,IACP,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,EAC7B,UAAU,EAAE;gBACV,WAAW,EAAE,YAAY,CAAC,SAAS,CAAC,8BAA8B,CAAC;gBACnE,QAAQ,EAAE,UAAU;aACrB,EACD,YAAY,EAAE,YAAY,EAC1B,oBAAoB,EAAE,IAAI,GAC1B,CACE,CAAC;AACT,CAAC","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 PropertyFilterBuilder\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { PropertyDescription } from \"@itwin/appui-abstract\";\r\nimport { ComboBox, MenuItem, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\n\r\n/**\r\n * Props for [[PropertyFilterBuilderRuleProperty]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRulePropertyProps {\r\n  /** List of available properties. */\r\n  properties: PropertyDescription[];\r\n  /** Currently selected property. */\r\n  selectedProperty?: PropertyDescription;\r\n  /** Callback that is invoked when selected property changes. */\r\n  onSelectedPropertyChanged: (property?: PropertyDescription) => void;\r\n  /** Custom renderer for property item inside selector. */\r\n  propertyRenderer?: (name: string) => React.ReactNode;\r\n  /** Specifies whether selector should be disabled or not. */\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/**\r\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] property selector.\r\n * @internal\r\n */\r\nexport function PropertyFilterBuilderRuleProperty(props: PropertyFilterBuilderRulePropertyProps) {\r\n  const { selectedProperty, properties, onSelectedPropertyChanged, propertyRenderer, isDisabled } = props;\r\n\r\n  const selectOptions = React.useMemo<SelectOption<string>[]>(() => properties.map((property) => ({\r\n    id: property.name,\r\n    label: property.displayLabel,\r\n    value: property.name,\r\n  })), [properties]);\r\n\r\n  const onPropertyChanged = React.useCallback((name: string) => {\r\n    onSelectedPropertyChanged(properties.find((property) => property.name === name));\r\n  }, [properties, onSelectedPropertyChanged]);\r\n\r\n  React.useEffect(() => {\r\n    const currentSelectedProperty = properties.find((property) => property.name === selectedProperty?.name);\r\n    if (currentSelectedProperty?.name !== selectedProperty?.name)\r\n      onSelectedPropertyChanged(currentSelectedProperty);\r\n  }, [properties, selectedProperty, onSelectedPropertyChanged]);\r\n\r\n  const itemRenderer = React.useCallback((selectOption: SelectOption<string>, { isSelected, id }) => {\r\n    return <MenuItem key={id} id={id} isSelected={isSelected}>\r\n      {propertyRenderer ? propertyRenderer(selectOption.value) : selectOption.label}\r\n    </MenuItem>;\r\n  }, [propertyRenderer]);\r\n\r\n  return <div className=\"rule-property\">\r\n    <ComboBox\r\n      options={selectOptions}\r\n      onChange={onPropertyChanged}\r\n      value={selectedProperty?.name}\r\n      inputProps={{\r\n        placeholder: UiComponents.translate(\"filterBuilder.chooseProperty\"),\r\n        disabled: isDisabled,\r\n      }}\r\n      itemRenderer={itemRenderer}\r\n      enableVirtualization={true}\r\n    />\r\n  </div>;\r\n}\r\n"]}
+{"version":3,"file":"FilterBuilderRuleProperty.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleProperty.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAiB,QAAQ,EAAgB,MAAM,sBAAsB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAmB/C;;;GAGG;AACH,MAAM,UAAU,iCAAiC,CAAC,KAA6C;IAC7F,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAExG,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAyB,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAC9F,EAAE,EAAE,QAAQ,CAAC,IAAI;QACjB,KAAK,EAAE,QAAQ,CAAC,YAAY;QAC5B,KAAK,EAAE,QAAQ,CAAC,IAAI;KACrB,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;QAC3D,yBAAyB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC;IACnF,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAE5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,MAAK,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,CAAA,CAAC,CAAC;QACxG,IAAI,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI,OAAK,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,CAAA;YAC1D,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAkD,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE;QAC3H,OAAO,oBAAC,QAAQ,IAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,IACrD,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CACpE,CAAC;IACd,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,6BAAK,SAAS,EAAC,eAAe;QACnC,oBAAC,QAAQ,IACP,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,EAC7B,UAAU,EAAE;gBACV,WAAW,EAAE,YAAY,CAAC,SAAS,CAAC,8BAA8B,CAAC;gBACnE,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,OAAO;aACd,EACD,YAAY,EAAE,YAAY,EAC1B,oBAAoB,EAAE,IAAI,GAC1B,CACE,CAAC;AACT,CAAC","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 PropertyFilterBuilder\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { PropertyDescription } from \"@itwin/appui-abstract\";\r\nimport { ComboBox, ComboBoxProps, MenuItem, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\n\r\n/**\r\n * Props for [[PropertyFilterBuilderRuleProperty]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRulePropertyProps {\r\n  /** List of available properties. */\r\n  properties: PropertyDescription[];\r\n  /** Currently selected property. */\r\n  selectedProperty?: PropertyDescription;\r\n  /** Callback that is invoked when selected property changes. */\r\n  onSelectedPropertyChanged: (property?: PropertyDescription) => void;\r\n  /** Custom renderer for property item inside selector. */\r\n  propertyRenderer?: (name: string) => React.ReactNode;\r\n  /** Specifies whether selector should be disabled or not. */\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/**\r\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] property selector.\r\n * @internal\r\n */\r\nexport function PropertyFilterBuilderRuleProperty(props: PropertyFilterBuilderRulePropertyProps) {\r\n  const { selectedProperty, properties, onSelectedPropertyChanged, propertyRenderer, isDisabled } = props;\r\n\r\n  const selectOptions = React.useMemo<SelectOption<string>[]>(() => properties.map((property) => ({\r\n    id: property.name,\r\n    label: property.displayLabel,\r\n    value: property.name,\r\n  })), [properties]);\r\n\r\n  const onPropertyChanged = React.useCallback((name: string) => {\r\n    onSelectedPropertyChanged(properties.find((property) => property.name === name));\r\n  }, [properties, onSelectedPropertyChanged]);\r\n\r\n  React.useEffect(() => {\r\n    const currentSelectedProperty = properties.find((property) => property.name === selectedProperty?.name);\r\n    if (currentSelectedProperty?.name !== selectedProperty?.name)\r\n      onSelectedPropertyChanged(currentSelectedProperty);\r\n  }, [properties, selectedProperty, onSelectedPropertyChanged]);\r\n\r\n  const itemRenderer = React.useCallback<Required<ComboBoxProps<string>>[\"itemRenderer\"]>((selectOption, { isSelected, id }) => {\r\n    return <MenuItem key={id} id={id} isSelected={isSelected}>\r\n      {propertyRenderer ? propertyRenderer(selectOption.value) : selectOption.label}\r\n    </MenuItem>;\r\n  }, [propertyRenderer]);\r\n\r\n  return <div className=\"rule-property\">\r\n    <ComboBox\r\n      options={selectOptions}\r\n      onChange={onPropertyChanged}\r\n      value={selectedProperty?.name}\r\n      inputProps={{\r\n        placeholder: UiComponents.translate(\"filterBuilder.chooseProperty\"),\r\n        disabled: isDisabled,\r\n        size: \"small\",\r\n      }}\r\n      itemRenderer={itemRenderer}\r\n      enableVirtualization={true}\r\n    />\r\n  </div>;\r\n}\r\n"]}

package/lib/esm/components-react/filter-builder/FilterBuilderRuleValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleValue.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,mBAAmB,EAAkB,aAAa,EAAuB,MAAM,uBAAuB,CAAC;AAGhH;;;GAGG;AACH,MAAM,WAAW,mCAAmC;IAClD,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,qEAAqE;IACrE,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mCAAmC,eAmBxF"}
+{"version":3,"file":"FilterBuilderRuleValue.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,mBAAmB,EAAkB,aAAa,EAAuB,MAAM,uBAAuB,CAAC;AAGhH;;;GAGG;AACH,MAAM,WAAW,mCAAmC;IAClD,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,qEAAqE;IACrE,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mCAAmC,eAoBxF"}

package/lib/esm/components-react/filter-builder/FilterBuilderRuleValue.js

@@ -21,6 +21,6 @@ export function PropertyFilterBuilderRuleValue(props) {
         onChange(newValue);
     }, [onChange]);
     return React.createElement("div", { className: "rule-value" },
-        React.createElement(EditorContainer, { propertyRecord: propertyRecord, onCancel: /* istanbul ignore next */ () => { }, onCommit: onValueChange, setFocus: false }));
+        React.createElement(EditorContainer, { propertyRecord: propertyRecord, onCancel: /* istanbul ignore next */ () => { }, onCommit: onValueChange, setFocus: false, shouldCommitOnChange: true }));
 }
 //# sourceMappingURL=FilterBuilderRuleValue.js.map

package/lib/esm/components-react/filter-builder/FilterBuilderRuleValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleValue.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAuB,cAAc,EAAiB,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAChH,OAAO,EAAE,eAAe,EAAuB,MAAM,4BAA4B,CAAC;AAelF;;;GAGG;AACH,MAAM,UAAU,8BAA8B,CAAC,KAA0C;IACvF,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5C,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,IAAI,cAAc,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,WAAW,EAAE,mBAAmB,CAAC,SAAS,EAAE,EAAE,QAAQ,CAAC,CAAC;IAC/F,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,QAAQ,EAAuB,EAAE,EAAE;QAC5E,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,6BAAK,SAAS,EAAC,YAAY;QAChC,oBAAC,eAAe,IACd,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,0BAA0B,CAAC,GAAG,EAAE,GAAG,CAAC,EAC9C,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,KAAK,GACf,CACE,CAAC;AACT,CAAC","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 PropertyFilterBuilder\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { PropertyDescription, PropertyRecord, PropertyValue, PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { EditorContainer, PropertyUpdatedArgs } from \"../editors/EditorContainer\";\r\n\r\n/**\r\n * Props for [[PropertyFilterBuilderRuleValue]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleValueProps {\r\n  /** Currently entered value. */\r\n  value?: PropertyValue;\r\n  /** Property used in rule to which this value will be compared to. */\r\n  property: PropertyDescription;\r\n  /** Callback that is invoked when value changes. */\r\n  onChange: (value: PropertyValue) => void;\r\n}\r\n\r\n/**\r\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.\r\n * @internal\r\n */\r\nexport function PropertyFilterBuilderRuleValue(props: PropertyFilterBuilderRuleValueProps) {\r\n  const { value, property, onChange } = props;\r\n\r\n  const propertyRecord = React.useMemo(() => {\r\n    return new PropertyRecord(value ?? { valueFormat: PropertyValueFormat.Primitive }, property);\r\n  }, [value, property]);\r\n\r\n  const onValueChange = React.useCallback(({ newValue }: PropertyUpdatedArgs) => {\r\n    onChange(newValue);\r\n  }, [onChange]);\r\n\r\n  return <div className=\"rule-value\">\r\n    <EditorContainer\r\n      propertyRecord={propertyRecord}\r\n      onCancel={/* istanbul ignore next */ () => { }}\r\n      onCommit={onValueChange}\r\n      setFocus={false}\r\n    />\r\n  </div>;\r\n}\r\n"]}
+{"version":3,"file":"FilterBuilderRuleValue.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAuB,cAAc,EAAiB,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAChH,OAAO,EAAE,eAAe,EAAuB,MAAM,4BAA4B,CAAC;AAelF;;;GAGG;AACH,MAAM,UAAU,8BAA8B,CAAC,KAA0C;IACvF,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5C,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,IAAI,cAAc,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,WAAW,EAAE,mBAAmB,CAAC,SAAS,EAAE,EAAE,QAAQ,CAAC,CAAC;IAC/F,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,QAAQ,EAAuB,EAAE,EAAE;QAC5E,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,6BAAK,SAAS,EAAC,YAAY;QAChC,oBAAC,eAAe,IACd,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,0BAA0B,CAAC,GAAG,EAAE,GAAG,CAAC,EAC9C,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,KAAK,EACf,oBAAoB,EAAE,IAAI,GAC1B,CACE,CAAC;AACT,CAAC","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 PropertyFilterBuilder\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { PropertyDescription, PropertyRecord, PropertyValue, PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { EditorContainer, PropertyUpdatedArgs } from \"../editors/EditorContainer\";\r\n\r\n/**\r\n * Props for [[PropertyFilterBuilderRuleValue]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleValueProps {\r\n  /** Currently entered value. */\r\n  value?: PropertyValue;\r\n  /** Property used in rule to which this value will be compared to. */\r\n  property: PropertyDescription;\r\n  /** Callback that is invoked when value changes. */\r\n  onChange: (value: PropertyValue) => void;\r\n}\r\n\r\n/**\r\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.\r\n * @internal\r\n */\r\nexport function PropertyFilterBuilderRuleValue(props: PropertyFilterBuilderRuleValueProps) {\r\n  const { value, property, onChange } = props;\r\n\r\n  const propertyRecord = React.useMemo(() => {\r\n    return new PropertyRecord(value ?? { valueFormat: PropertyValueFormat.Primitive }, property);\r\n  }, [value, property]);\r\n\r\n  const onValueChange = React.useCallback(({ newValue }: PropertyUpdatedArgs) => {\r\n    onChange(newValue);\r\n  }, [onChange]);\r\n\r\n  return <div className=\"rule-value\">\r\n    <EditorContainer\r\n      propertyRecord={propertyRecord}\r\n      onCancel={/* istanbul ignore next */ () => { }}\r\n      onCommit={onValueChange}\r\n      setFocus={false}\r\n      shouldCommitOnChange={true}\r\n    />\r\n  </div>;\r\n}\r\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FilteringInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filtering/FilteringInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAU,MAAM,mBAAmB,CAAC;AAGxD,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE;;GAEG;AACH,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB;;;MAGE;IACF,aAAa,EAAE,OAAO,CAAC;IAEvB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,6BAA6B;IAC7B,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,oDAAoD;IACpD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,qDAAqD;IACrD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,MAAM,EAAE,oBAAoB,CAAC;IAC7B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,oBAAY,oBAAoB;IAC9B,mCAAmC;IACnC,aAAa,IAAA;IACb,gDAAgD;IAChD,mBAAmB,IAAA;IACnB,gDAAgD;IAChD,iBAAiB,IAAA;CAClB;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC/F,OAAO,CAAC,aAAa,CAAuC;IAC5D,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,YAAY,CAAqC;IACzD,OAAO,CAAC,WAAW,CAAsC;gBAE7C,KAAK,EAAE,mBAAmB;IAStC,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,oBAAoB,CAU1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,gBAAgB,CAUtB;IAEF,OAAO,CAAC,eAAe,CAKrB;IAEF,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjD,MAAM;CAwCvB"}
+{"version":3,"file":"FilteringInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filtering/FilteringInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvE;;GAEG;AACH,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB;;;MAGE;IACF,aAAa,EAAE,OAAO,CAAC;IAEvB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,6BAA6B;IAC7B,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,oDAAoD;IACpD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,qDAAqD;IACrD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,MAAM,EAAE,oBAAoB,CAAC;IAC7B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,oBAAY,oBAAoB;IAC9B,mCAAmC;IACnC,aAAa,IAAA;IACb,gDAAgD;IAChD,mBAAmB,IAAA;IACnB,gDAAgD;IAChD,iBAAiB,IAAA;CAClB;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC/F,OAAO,CAAC,aAAa,CAAuC;IAC5D,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,YAAY,CAAqC;IACzD,OAAO,CAAC,WAAW,CAAsC;gBAE7C,KAAK,EAAE,mBAAmB;IAStC,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,oBAAoB,CAU1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,gBAAgB,CAUtB;IAEF,OAAO,CAAC,eAAe,CAKrB;IAEF,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjD,MAAM;CAwCvB"}

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

@@ -9,10 +9,11 @@ import "./FilteringInput.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { Key } from "ts-key-enum";
-import { UiCore } from "@itwin/core-react";
+import { Icon, UiCore } from "@itwin/core-react";
 import { Input } from "@itwin/itwinui-react";
 import { UiComponents } from "../UiComponents";
 import { ResultSelector } from "./ResultSelector";
+import { SvgClose, SvgSearch } from "@itwin/itwinui-icons-react";
 /**
  * Enumeration of possible component contexts
  * @public
@@ -102,13 +103,19 @@ export class FilteringInput extends React.PureComponent {
                         React.createElement(ResultSelector, { key: this.state.resultSelectorKey, ...this.props.resultSelectorProps }) : undefined,
                     status === FilteringInputStatus.ReadyToFilter ?
                         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                        React.createElement("span", { className: "icon icon-search", onClick: this._onSearchButtonClick, role: "button", tabIndex: -1, title: this._searchLabel }) : undefined,
+                        React.createElement("span", { className: "icon", onClick: this._onSearchButtonClick, "data-testid": "filter-input-search", role: "button", tabIndex: -1, title: this._searchLabel },
+                            React.createElement(Icon, { iconSpec: React.createElement(SvgSearch, null) }),
+                            " ") : undefined,
                     status === FilteringInputStatus.FilteringInProgress ?
                         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                        React.createElement("span", { className: "icon icon-close", onClick: this._onCancelButtonClick, role: "button", tabIndex: -1, title: this._cancelLabel }) : undefined,
+                        React.createElement("span", { className: "icon", onClick: this._onCancelButtonClick, "data-testid": "filter-input-close", role: "button", tabIndex: -1, title: this._cancelLabel },
+                            React.createElement(Icon, { iconSpec: React.createElement(SvgClose, null) }),
+                            " ") : undefined,
                     status === FilteringInputStatus.FilteringFinished ?
                         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                        React.createElement("span", { className: "components-filtering-input-clear icon icon-close", onClick: this._onClearButtonClick, role: "button", tabIndex: -1, title: this._clearLabel }) : undefined))));
+                        React.createElement("span", { className: "components-filtering-input-clear icon", onClick: this._onClearButtonClick, "data-testid": "filter-input-close", role: "button", tabIndex: -1, title: this._clearLabel },
+                            React.createElement(Icon, { iconSpec: React.createElement(SvgClose, null) }),
+                            " ") : undefined))));
     }
 }
 //# sourceMappingURL=FilteringInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilteringInput.js","sourceRoot":"","sources":["../../../../src/components-react/filtering/FilteringInput.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAe,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAC;AA0CvE;;;GAGG;AACH,MAAM,CAAN,IAAY,oBAOX;AAPD,WAAY,oBAAoB;IAC9B,mCAAmC;IACnC,iFAAa,CAAA;IACb,gDAAgD;IAChD,6FAAmB,CAAA;IACnB,gDAAgD;IAChD,yFAAiB,CAAA;AACnB,CAAC,EAPW,oBAAoB,KAApB,oBAAoB,QAO/B;AAED;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,aAAuD;IAM/F,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QANP,kBAAa,GAAG,KAAK,CAAC,SAAS,EAAoB,CAAC;QACpD,iBAAY,GAAG,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;QAClD,iBAAY,GAAG,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QACjD,gBAAW,GAAG,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;QAiBjD,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;gBAC1B,0DAA0D;gBAC1D,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;gBACxD,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;gBAC3B,OAAO;aACR;YAED,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAChD,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;QAEM,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;YACxD,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAEM,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;YACxD,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;YAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAmC,EAAQ,EAAE;YACvE,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK;gBACrB,OAAO;YAET,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;gBACxB,OAAO;YAET,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAChD,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YACvC,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,CAAsC,EAAE,EAAE;YACnE,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;gBAC5B,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;aAC7B;YACD,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;QACtE,CAAC,CAAC;QAtDA,IAAI,CAAC,KAAK,GAAG;YACX,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,KAAK;YACpB,iBAAiB,EAAE,CAAC;SACrB,CAAC;IACJ,CAAC;IAEO,KAAK;QACX,uBAAuB;QACvB,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO;YAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACvC,CAAC;IA6CD,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,KAAK,SAAS,CAAC,mBAAmB,EAAE;YACpE,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;SAChF;IACH,CAAC;IAEe,MAAM;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACjC,OAAO;QACL,gDAAgD;QAChD,6BAAK,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,gCAAgC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC9G,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,IAAI,EAAC,cAAc;YAEnB,8BAAM,SAAS,EAAC,kCAAkC;gBAChD,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAChB,WAAW,EAAE,YAAY,CAAC,SAAS,CAAC,4BAA4B,CAAC;oBACjE,iDAAiD;oBACjD,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,IAAI,CAAC,eAAe,gBAClB,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAC9C,IAAI,EAAC,OAAO,GAAG;gBAEjB,8BAAM,SAAS,EAAC,6CAA6C;oBAC1D,MAAM,KAAK,oBAAoB,CAAC,iBAAiB,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;wBACpF,oBAAC,cAAc,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,KAAM,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAI,CAAC,CAAC,CAAC,SAAS;oBACtG,MAAM,KAAK,oBAAoB,CAAC,aAAa,CAAC,CAAC;wBAC9C,iEAAiE;wBACjE,8BAAM,SAAS,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EACnE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,GAAI,CAAC,CAAC,CAAC,SAAS;oBACvE,MAAM,KAAK,oBAAoB,CAAC,mBAAmB,CAAC,CAAC;wBACpD,iEAAiE;wBACjE,8BAAM,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,GAAI,CAAC,CAAC,CAAC,SAAS;oBACvE,MAAM,KAAK,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;wBAClD,iEAAiE;wBACjE,8BAAM,SAAS,EAAC,kDAAkD,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAClG,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,CAAC,SAAS,CAClE,CACF,CACH,CACP,CAAC;IACJ,CAAC;CACF","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 \"./FilteringInput.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Key } from \"ts-key-enum\";\r\nimport { CommonProps, UiCore } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { ResultSelector, ResultSelectorProps } from \"./ResultSelector\";\r\n\r\n/** [[FilteringInput]] React Component state\r\n * @internal\r\n */\r\ninterface FilteringInputState {\r\n  /** A string which will be used for search */\r\n  searchText: string;\r\n  /**\r\n   *  Tells the component if the search was started.\r\n   *  Gets reset to false if search is canceled/cleared or searchText is changed.\r\n  */\r\n  searchStarted: boolean;\r\n  /* Used for resetting the state of [[ResultSelector]] component */\r\n  resultSelectorKey: number;\r\n}\r\n\r\n/**\r\n * [[FilteringInput]] React Component properties\r\n * @public\r\n */\r\nexport interface FilteringInputProps extends CommonProps {\r\n  /** Filtering should start */\r\n  onFilterStart: (searchText: string) => void;\r\n  /** Filtering is canceled while still in progress */\r\n  onFilterCancel: () => void;\r\n  /** Filtering is cleared after everything's loaded */\r\n  onFilterClear: () => void;\r\n  /**\r\n   * Tells the component what is the status of filtering.\r\n   */\r\n  status: FilteringInputStatus;\r\n  /**\r\n   * [[ResultSelector]] React Component properties.\r\n   * Attribute should be memoized and updated when [[ResultSelector]] state needs to be reset.\r\n   * This allows resetting the selected active match index back to 0.\r\n   */\r\n  resultSelectorProps?: ResultSelectorProps;\r\n  /** Specify that the <input> element should automatically get focus */\r\n  autoFocus?: boolean;\r\n}\r\n\r\n/**\r\n * Enumeration of possible component contexts\r\n * @public\r\n */\r\nexport enum FilteringInputStatus {\r\n  /** Component is ready to filter */\r\n  ReadyToFilter,\r\n  /** Component's parent is currently filtering */\r\n  FilteringInProgress,\r\n  /** Component's parent has finished filtering */\r\n  FilteringFinished,\r\n}\r\n\r\n/** A helper component for filtering trees and stepping through results\r\n * @public\r\n */\r\nexport class FilteringInput extends React.PureComponent<FilteringInputProps, FilteringInputState> {\r\n  private _inputElement = React.createRef<HTMLInputElement>();\r\n  private _searchLabel = UiCore.translate(\"general.search\");\r\n  private _cancelLabel = UiCore.translate(\"dialog.cancel\");\r\n  private _clearLabel = UiCore.translate(\"general.search\");\r\n\r\n  constructor(props: FilteringInputProps) {\r\n    super(props);\r\n    this.state = {\r\n      searchText: \"\",\r\n      searchStarted: false,\r\n      resultSelectorKey: 0,\r\n    };\r\n  }\r\n\r\n  private focus() {\r\n    // istanbul ignore next\r\n    if (this._inputElement.current)\r\n      this._inputElement.current.focus();\r\n  }\r\n\r\n  private _onSearchButtonClick = () => {\r\n    if (!this.state.searchText) {\r\n      // Empty search string is the same as clearing the search.\r\n      this.setState({ searchStarted: false, searchText: \"\" });\r\n      this.props.onFilterClear();\r\n      return;\r\n    }\r\n\r\n    this.props.onFilterStart(this.state.searchText);\r\n    this.setState({ searchStarted: true });\r\n  };\r\n\r\n  private _onCancelButtonClick = () => {\r\n    this.setState({ searchStarted: false, searchText: \"\" });\r\n    this.props.onFilterCancel();\r\n    this.focus();\r\n  };\r\n\r\n  private _onClearButtonClick = () => {\r\n    this.setState({ searchStarted: false, searchText: \"\" });\r\n    this.props.onFilterClear();\r\n    this.focus();\r\n  };\r\n\r\n  private _onFilterKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\r\n    if (e.key !== Key.Enter)\r\n      return;\r\n\r\n    if (!this.state.searchText)\r\n      return;\r\n\r\n    this.props.onFilterStart(this.state.searchText);\r\n    this.setState({ searchStarted: true });\r\n    e.stopPropagation();\r\n  };\r\n\r\n  private _onInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (this.state.searchStarted) {\r\n      this.props.onFilterCancel();\r\n    }\r\n    this.setState({ searchText: e.target.value, searchStarted: false });\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: FilteringInputProps) {\r\n    if (this.props.resultSelectorProps !== prevProps.resultSelectorProps) {\r\n      this.setState((state) => ({ resultSelectorKey: state.resultSelectorKey + 1 }));\r\n    }\r\n  }\r\n\r\n  public override render() {\r\n    const status = this.props.status;\r\n    return (\r\n      // TODO: What is filtering-input-preload-images?\r\n      <div className={classnames(\"components-filtering-input\", \"filtering-input-preload-images\", this.props.className)}\r\n        style={this.props.style}\r\n        onKeyDown={this._onFilterKeyDown}\r\n        role=\"presentation\"\r\n      >\r\n        <span className=\"components-filtering-input-input\">\r\n          <Input type=\"text\"\r\n            placeholder={UiComponents.translate(\"filteringInput.placeholder\")}\r\n            // eslint-disable-next-line jsx-a11y/no-autofocus\r\n            autoFocus={this.props.autoFocus}\r\n            onKeyDown={this._onFilterKeyDown}\r\n            value={this.state.searchText}\r\n            onChange={this._onInputChanged}\r\n            aria-label={UiCore.translate(\"general.search\")}\r\n            size=\"small\" />\r\n\r\n          <span className=\"components-filtering-input-input-components\">\r\n            {status === FilteringInputStatus.FilteringFinished && this.props.resultSelectorProps ?\r\n              <ResultSelector key={this.state.resultSelectorKey} {...this.props.resultSelectorProps} /> : undefined}\r\n            {status === FilteringInputStatus.ReadyToFilter ?\r\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n              <span className=\"icon icon-search\" onClick={this._onSearchButtonClick}\r\n                role=\"button\" tabIndex={-1} title={this._searchLabel} /> : undefined}\r\n            {status === FilteringInputStatus.FilteringInProgress ?\r\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n              <span className=\"icon icon-close\" onClick={this._onCancelButtonClick}\r\n                role=\"button\" tabIndex={-1} title={this._cancelLabel} /> : undefined}\r\n            {status === FilteringInputStatus.FilteringFinished ?\r\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n              <span className=\"components-filtering-input-clear icon icon-close\" onClick={this._onClearButtonClick}\r\n                role=\"button\" tabIndex={-1} title={this._clearLabel} /> : undefined}\r\n          </span>\r\n        </span>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"FilteringInput.js","sourceRoot":"","sources":["../../../../src/components-react/filtering/FilteringInput.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAe,IAAI,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AA0CjE;;;GAGG;AACH,MAAM,CAAN,IAAY,oBAOX;AAPD,WAAY,oBAAoB;IAC9B,mCAAmC;IACnC,iFAAa,CAAA;IACb,gDAAgD;IAChD,6FAAmB,CAAA;IACnB,gDAAgD;IAChD,yFAAiB,CAAA;AACnB,CAAC,EAPW,oBAAoB,KAApB,oBAAoB,QAO/B;AAED;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,aAAuD;IAM/F,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QANP,kBAAa,GAAG,KAAK,CAAC,SAAS,EAAoB,CAAC;QACpD,iBAAY,GAAG,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;QAClD,iBAAY,GAAG,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QACjD,gBAAW,GAAG,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;QAiBjD,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;gBAC1B,0DAA0D;gBAC1D,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;gBACxD,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;gBAC3B,OAAO;aACR;YAED,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAChD,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;QAEM,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;YACxD,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAEM,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;YACxD,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;YAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAmC,EAAQ,EAAE;YACvE,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK;gBACrB,OAAO;YAET,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;gBACxB,OAAO;YAET,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAChD,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YACvC,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,CAAsC,EAAE,EAAE;YACnE,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;gBAC5B,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;aAC7B;YACD,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;QACtE,CAAC,CAAC;QAtDA,IAAI,CAAC,KAAK,GAAG;YACX,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,KAAK;YACpB,iBAAiB,EAAE,CAAC;SACrB,CAAC;IACJ,CAAC;IAEO,KAAK;QACX,uBAAuB;QACvB,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO;YAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACvC,CAAC;IA6CD,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,KAAK,SAAS,CAAC,mBAAmB,EAAE;YACpE,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;SAChF;IACH,CAAC;IAEe,MAAM;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACjC,OAAO;QACL,gDAAgD;QAChD,6BAAK,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,gCAAgC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC9G,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,IAAI,EAAC,cAAc;YAEnB,8BAAM,SAAS,EAAC,kCAAkC;gBAChD,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAChB,WAAW,EAAE,YAAY,CAAC,SAAS,CAAC,4BAA4B,CAAC;oBACjE,iDAAiD;oBACjD,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,IAAI,CAAC,eAAe,gBAClB,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAC9C,IAAI,EAAC,OAAO,GAAG;gBAEjB,8BAAM,SAAS,EAAC,6CAA6C;oBAC1D,MAAM,KAAK,oBAAoB,CAAC,iBAAiB,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;wBACpF,oBAAC,cAAc,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,KAAM,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAI,CAAC,CAAC,CAAC,SAAS;oBACtG,MAAM,KAAK,oBAAoB,CAAC,aAAa,CAAC,CAAC;wBAC9C,iEAAiE;wBACjE,8BAAM,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,iBAAc,qBAAqB,EAC1F,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY;4BAAE,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,SAAS,OAAG,GAAI;gCAAQ,CAAC,CAAC,CAAC,SAAS;oBAC9G,MAAM,KAAK,oBAAoB,CAAC,mBAAmB,CAAC,CAAC;wBACpD,iEAAiE;wBACjE,8BAAM,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,iBAAc,oBAAoB,EACzF,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY;4BAAE,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,QAAQ,OAAG,GAAI;gCAAQ,CAAC,CAAC,CAAC,SAAS;oBAC7G,MAAM,KAAK,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;wBAClD,iEAAiE;wBACjE,8BAAM,SAAS,EAAC,uCAAuC,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,iBAAc,oBAAoB,EACzH,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW;4BAAE,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,QAAQ,OAAG,GAAI;gCAAQ,CAAC,CAAC,CAAC,SAAS,CACxG,CACF,CACH,CACP,CAAC;IACJ,CAAC;CACF","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 \"./FilteringInput.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Key } from \"ts-key-enum\";\r\nimport { CommonProps, Icon, UiCore } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { ResultSelector, ResultSelectorProps } from \"./ResultSelector\";\r\nimport { SvgClose, SvgSearch } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** [[FilteringInput]] React Component state\r\n * @internal\r\n */\r\ninterface FilteringInputState {\r\n  /** A string which will be used for search */\r\n  searchText: string;\r\n  /**\r\n   *  Tells the component if the search was started.\r\n   *  Gets reset to false if search is canceled/cleared or searchText is changed.\r\n  */\r\n  searchStarted: boolean;\r\n  /* Used for resetting the state of [[ResultSelector]] component */\r\n  resultSelectorKey: number;\r\n}\r\n\r\n/**\r\n * [[FilteringInput]] React Component properties\r\n * @public\r\n */\r\nexport interface FilteringInputProps extends CommonProps {\r\n  /** Filtering should start */\r\n  onFilterStart: (searchText: string) => void;\r\n  /** Filtering is canceled while still in progress */\r\n  onFilterCancel: () => void;\r\n  /** Filtering is cleared after everything's loaded */\r\n  onFilterClear: () => void;\r\n  /**\r\n   * Tells the component what is the status of filtering.\r\n   */\r\n  status: FilteringInputStatus;\r\n  /**\r\n   * [[ResultSelector]] React Component properties.\r\n   * Attribute should be memoized and updated when [[ResultSelector]] state needs to be reset.\r\n   * This allows resetting the selected active match index back to 0.\r\n   */\r\n  resultSelectorProps?: ResultSelectorProps;\r\n  /** Specify that the <input> element should automatically get focus */\r\n  autoFocus?: boolean;\r\n}\r\n\r\n/**\r\n * Enumeration of possible component contexts\r\n * @public\r\n */\r\nexport enum FilteringInputStatus {\r\n  /** Component is ready to filter */\r\n  ReadyToFilter,\r\n  /** Component's parent is currently filtering */\r\n  FilteringInProgress,\r\n  /** Component's parent has finished filtering */\r\n  FilteringFinished,\r\n}\r\n\r\n/** A helper component for filtering trees and stepping through results\r\n * @public\r\n */\r\nexport class FilteringInput extends React.PureComponent<FilteringInputProps, FilteringInputState> {\r\n  private _inputElement = React.createRef<HTMLInputElement>();\r\n  private _searchLabel = UiCore.translate(\"general.search\");\r\n  private _cancelLabel = UiCore.translate(\"dialog.cancel\");\r\n  private _clearLabel = UiCore.translate(\"general.search\");\r\n\r\n  constructor(props: FilteringInputProps) {\r\n    super(props);\r\n    this.state = {\r\n      searchText: \"\",\r\n      searchStarted: false,\r\n      resultSelectorKey: 0,\r\n    };\r\n  }\r\n\r\n  private focus() {\r\n    // istanbul ignore next\r\n    if (this._inputElement.current)\r\n      this._inputElement.current.focus();\r\n  }\r\n\r\n  private _onSearchButtonClick = () => {\r\n    if (!this.state.searchText) {\r\n      // Empty search string is the same as clearing the search.\r\n      this.setState({ searchStarted: false, searchText: \"\" });\r\n      this.props.onFilterClear();\r\n      return;\r\n    }\r\n\r\n    this.props.onFilterStart(this.state.searchText);\r\n    this.setState({ searchStarted: true });\r\n  };\r\n\r\n  private _onCancelButtonClick = () => {\r\n    this.setState({ searchStarted: false, searchText: \"\" });\r\n    this.props.onFilterCancel();\r\n    this.focus();\r\n  };\r\n\r\n  private _onClearButtonClick = () => {\r\n    this.setState({ searchStarted: false, searchText: \"\" });\r\n    this.props.onFilterClear();\r\n    this.focus();\r\n  };\r\n\r\n  private _onFilterKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\r\n    if (e.key !== Key.Enter)\r\n      return;\r\n\r\n    if (!this.state.searchText)\r\n      return;\r\n\r\n    this.props.onFilterStart(this.state.searchText);\r\n    this.setState({ searchStarted: true });\r\n    e.stopPropagation();\r\n  };\r\n\r\n  private _onInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (this.state.searchStarted) {\r\n      this.props.onFilterCancel();\r\n    }\r\n    this.setState({ searchText: e.target.value, searchStarted: false });\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: FilteringInputProps) {\r\n    if (this.props.resultSelectorProps !== prevProps.resultSelectorProps) {\r\n      this.setState((state) => ({ resultSelectorKey: state.resultSelectorKey + 1 }));\r\n    }\r\n  }\r\n\r\n  public override render() {\r\n    const status = this.props.status;\r\n    return (\r\n      // TODO: What is filtering-input-preload-images?\r\n      <div className={classnames(\"components-filtering-input\", \"filtering-input-preload-images\", this.props.className)}\r\n        style={this.props.style}\r\n        onKeyDown={this._onFilterKeyDown}\r\n        role=\"presentation\"\r\n      >\r\n        <span className=\"components-filtering-input-input\">\r\n          <Input type=\"text\"\r\n            placeholder={UiComponents.translate(\"filteringInput.placeholder\")}\r\n            // eslint-disable-next-line jsx-a11y/no-autofocus\r\n            autoFocus={this.props.autoFocus}\r\n            onKeyDown={this._onFilterKeyDown}\r\n            value={this.state.searchText}\r\n            onChange={this._onInputChanged}\r\n            aria-label={UiCore.translate(\"general.search\")}\r\n            size=\"small\" />\r\n\r\n          <span className=\"components-filtering-input-input-components\">\r\n            {status === FilteringInputStatus.FilteringFinished && this.props.resultSelectorProps ?\r\n              <ResultSelector key={this.state.resultSelectorKey} {...this.props.resultSelectorProps} /> : undefined}\r\n            {status === FilteringInputStatus.ReadyToFilter ?\r\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n              <span className=\"icon\" onClick={this._onSearchButtonClick} data-testid=\"filter-input-search\"\r\n                role=\"button\" tabIndex={-1} title={this._searchLabel}><Icon iconSpec={<SvgSearch />} /> </span> : undefined}\r\n            {status === FilteringInputStatus.FilteringInProgress ?\r\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n              <span className=\"icon\" onClick={this._onCancelButtonClick} data-testid=\"filter-input-close\"\r\n                role=\"button\" tabIndex={-1} title={this._cancelLabel}><Icon iconSpec={<SvgClose />} /> </span> : undefined}\r\n            {status === FilteringInputStatus.FilteringFinished ?\r\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n              <span className=\"components-filtering-input-clear icon\" onClick={this._onClearButtonClick} data-testid=\"filter-input-close\"\r\n                role=\"button\" tabIndex={-1} title={this._clearLabel}><Icon iconSpec={<SvgClose />} /> </span> : undefined}\r\n          </span>\r\n        </span>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -5,9 +5,6 @@
 @import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 @import "~@itwin/core-react/lib/cjs/core-react/style/variables";
-@import "~@itwin/itwinui-css/scss/button/button";
-@import "~@itwin/itwinui-css/scss/button/default";
-@import "~@itwin/itwinui-css/scss/inputs/input";
 
 .components-filtering-input {
   display: flex;
@@ -40,7 +37,7 @@
   top: 1px;
   bottom: 0px;
 
-  >.icon {
+  > .icon {
     align-self: center;
     border: none;
     outline: none;
@@ -48,18 +45,12 @@
 }
 
 @mixin filtering-button-base {
-  @include iui-button;
-  @include iui-button-default;
   margin-left: 6px;
 }
 
-.components-filtering-input-button {
-  @include filtering-button-base;
-}
-
 .components-filtering-input-clear {
   @include filtering-button-base;
-  color: $buic-text-color-muted;
+  color: var(--iui-color-text-muted);
   font-size: "12px";
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"ResultSelector.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filtering/ResultSelector.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;GAEG;AACH,UAAU,mBAAmB;IAC3B,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB;IACnB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0DAA0D;IAC1D,wBAAwB,EAAE,OAAO,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,sCAAsC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC/F,OAAO,CAAC,QAAQ,CAAwC;IAExD,gBAAgB;gBACJ,KAAK,EAAE,mBAAmB;IAStC,OAAO,CAAC,gBAAgB,CAStB;IAEF,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,KAAK,6BAA6B,GAExC;IAED,OAAO,CAAC,wBAAwB,CAG9B;IAEF,OAAO,CAAC,0BAA0B,CAShC;IAEF,OAAO,CAAC,sBAAsB,CAK5B;IAEF,OAAO,CAAC,wBAAwB,CAG9B;IAEF,gBAAgB;IACA,iBAAiB;IAIjC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjE,gBAAgB;IACA,MAAM;CA4BvB"}
+{"version":3,"file":"ResultSelector.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filtering/ResultSelector.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAItD;;GAEG;AACH,UAAU,mBAAmB;IAC3B,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB;IACnB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0DAA0D;IAC1D,wBAAwB,EAAE,OAAO,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,sCAAsC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC/F,OAAO,CAAC,QAAQ,CAAwC;IAExD,gBAAgB;gBACJ,KAAK,EAAE,mBAAmB;IAStC,OAAO,CAAC,gBAAgB,CAStB;IAEF,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,KAAK,6BAA6B,GAExC;IAED,OAAO,CAAC,wBAAwB,CAG9B;IAEF,OAAO,CAAC,0BAA0B,CAShC;IAEF,OAAO,CAAC,sBAAsB,CAK5B;IAEF,OAAO,CAAC,wBAAwB,CAG9B;IAEF,gBAAgB;IACA,iBAAiB;IAIjC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjE,gBAAgB;IACA,MAAM;CA6BvB"}

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

@@ -9,7 +9,9 @@ import "./ResultSelector.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { SpecialKey } from "@itwin/appui-abstract";
+import { Icon } from "@itwin/core-react";
 import { UiComponents } from "../UiComponents";
+import { SvgChevronLeft, SvgChevronRight } from "@itwin/itwinui-icons-react";
 /** Component for stepping through results/entries
  * @public
  */
@@ -83,14 +85,16 @@ export class ResultSelector extends React.PureComponent {
     /** @internal */
     render() {
         return (React.createElement("span", { className: classnames("components-result-selector", this.props.className), style: this.props.style },
-            React.createElement("button", { className: classnames("components-result-selector-button", "icon", "icon-chevron-left"), onClick: this._onClickPrevious, disabled: this.props.resultCount <= 0 }),
+            React.createElement("button", { className: classnames("components-result-selector-button", "icon"), "data-testid": "previous-button", onClick: this._onClickPrevious, disabled: this.props.resultCount <= 0 },
+                React.createElement(Icon, { iconSpec: React.createElement(SvgChevronLeft, null) })),
             React.createElement("span", { style: { pointerEvents: this.props.resultCount ? "auto" : "none" }, className: "components-result-selector-current-result", onClick: this._onSelectedResultClick, role: "presentation" },
                 this.state.selectedResultInEditMode ?
                     React.createElement("input", { type: "number", style: { width: `${this.state.selectedResultEdit.length * 0.60 + 1}em` }, value: this.state.selectedResultEdit, onChange: this._onSelectedResultChanged, onBlur: this._onSelectedResultConfirmed, onKeyDown: this._onSelectedResultKeyDown }) :
                     this.state.selectedResultId,
                 React.createElement("span", { style: { marginLeft: "5px", marginRight: "5px" } }, this._ofLabel),
                 React.createElement("span", null, this.props.resultCount)),
-            React.createElement("button", { className: "components-result-selector-button icon icon-chevron-right", onClick: this._onClickNext, disabled: this.props.resultCount <= 0 })));
+            React.createElement("button", { className: "components-result-selector-button icon", "data-testid": "next-button", onClick: this._onClickNext, disabled: this.props.resultCount <= 0 },
+                React.createElement(Icon, { iconSpec: React.createElement(SvgChevronRight, null) }))));
     }
 }
 //# sourceMappingURL=ResultSelector.js.map