npm - @itwin/components-react - Versions diffs - 4.0.0-dev.10 → 4.0.0-dev.11 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (151) hide show

package/lib/cjs/components-react/editors/TextEditor.js CHANGED Viewed

@@ -57,6 +57,13 @@ class TextEditor extends React.PureComponent {
             if (this._isMounted)
                 this.setState({
                     inputValue: e.target.value,
+                }, async () => {
+                    if (this.props.shouldCommitOnChange && this.props.onCommit && this.props.propertyRecord) {
+                        const newValue = await this.getPropertyValue();
+                        // istanbul ignore else
+                        if (newValue)
+                            this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue });
+                    }
                 });
         };
     }

package/lib/cjs/components-react/editors/TextEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/TextEditor.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 \"./TextEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport {\r\n IconEditorParams, InputEditorSizeParams, PrimitiveValue, PropertyEditorParams, PropertyEditorParamTypes, PropertyValue, PropertyValueFormat,\r\n} from \"@itwin/appui-abstract\";\r\nimport { Icon, IconInput } from \"@itwin/core-react\";\r\nimport { Input, InputProps } from \"@itwin/itwinui-react\";\r\nimport { TypeConverterManager } from \"../converters/TypeConverterManager\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { UiComponents } from \"../UiComponents\";\r\n\r\n/** @internal /\r\ninterface TextEditorState {\r\n inputValue: string;\r\n readonly: boolean;\r\n isDisabled?: boolean;\r\n size?: number;\r\n maxLength?: number;\r\n iconSpec?: string;\r\n}\r\n\r\n/* TextEditor React component that is a property editor with text input\r\n * @public\r\n /\r\nexport class TextEditor extends React.PureComponent<PropertyEditorProps, TextEditorState> implements TypeEditor {\r\n private _isMounted = false;\r\n private _ariaLabel = UiComponents.translate(\"editor.text\");\r\n private _inputElement = React.createRef<HTMLInputElement>();\r\n\r\n /* @internal /\r\n public override readonly state: Readonly<TextEditorState> = {\r\n inputValue: \"\",\r\n readonly: 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 = await TypeConverterManager.getConverter(record.property.typename, record.property.converter?.name).convertFromStringToPropertyValue(this.state.inputValue, record);\r\n (propertyValue as PrimitiveValue).displayValue = this.state.inputValue;\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 _updateInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n // istanbul ignore else\r\n if (this._isMounted)\r\n this.setState({\r\n inputValue: e.target.value,\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 record = this.props.propertyRecord;\r\n let initialValue = \"\";\r\n\r\n // istanbul ignore else\r\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n const value = record.value.value;\r\n initialValue = await TypeConverterManager.getConverter(record.property.typename, record.property.converter?.name).convertPropertyToString(record.property, value);\r\n }\r\n\r\n const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\r\n let size: number \| undefined;\r\n let maxLength: number \| undefined;\r\n let iconSpec: string \| undefined;\r\n\r\n const isDisabled = record ? record.isDisabled : undefined;\r\n\r\n if (record && record.property && record.property.editor && record.property.editor.params) {\r\n const editorSizeParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.InputEditorSize) as InputEditorSizeParams;\r\n if (editorSizeParams) {\r\n // istanbul ignore else\r\n if (editorSizeParams.size)\r\n size = editorSizeParams.size;\r\n // istanbul ignore else\r\n if (editorSizeParams.maxLength)\r\n maxLength = editorSizeParams.maxLength;\r\n }\r\n\r\n const iconParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.Icon) as IconEditorParams;\r\n if (iconParams) {\r\n iconSpec = iconParams.definition.iconSpec;\r\n }\r\n }\r\n\r\n // istanbul ignore else\r\n if (this._isMounted)\r\n this.setState({ inputValue: initialValue, readonly, size, maxLength, isDisabled, iconSpec });\r\n }\r\n\r\n /* @internal /\r\n public override render(): React.ReactNode {\r\n const className = classnames(\"components-cell-editor\", \"components-text-editor\", this.props.className);\r\n const minSize = this.state.size ? this.state.size : 8;\r\n const minWidthStyle: React.CSSProperties = {\r\n minWidth: `${minSize 0.75}em`,\r\n };\r\n const inputProps: InputProps = {\r\n type: \"text\",\r\n className,\r\n style: this.props.style ? this.props.style : minWidthStyle,\r\n readOnly: this.state.readonly,\r\n disabled: this.state.isDisabled,\r\n maxLength: this.state.maxLength,\r\n value: this.state.inputValue,\r\n onBlur: this.props.onBlur,\r\n onChange: this._updateInputValue,\r\n setFocus: this.props.setFocus && !this.state.isDisabled,\r\n };\r\n\r\n inputProps[\"aria-label\"] = this._ariaLabel;\r\n\r\n let reactNode: React.ReactNode;\r\n if (this.state.iconSpec) {\r\n const icon = <Icon iconSpec={this.state.iconSpec} />;\r\n reactNode = (\r\n <IconInput\r\n {...inputProps}\r\n ref={this._inputElement}\r\n icon={icon}\r\n data-testid=\"components-text-editor\"\r\n />\r\n );\r\n } else {\r\n reactNode = (\r\n <Input\r\n {...inputProps}\r\n ref={this._inputElement}\r\n data-testid=\"components-text-editor\"\r\n size=\"small\"\r\n />\r\n );\r\n }\r\n\r\n return reactNode;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"TextEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/TextEditor.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 \"./TextEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport {\r\n IconEditorParams, InputEditorSizeParams, PrimitiveValue, PropertyEditorParams, PropertyEditorParamTypes, PropertyValue, PropertyValueFormat,\r\n} from \"@itwin/appui-abstract\";\r\nimport { Icon, IconInput } from \"@itwin/core-react\";\r\nimport { Input, InputProps } from \"@itwin/itwinui-react\";\r\nimport { TypeConverterManager } from \"../converters/TypeConverterManager\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { UiComponents } from \"../UiComponents\";\r\n\r\n/** @internal /\r\ninterface TextEditorState {\r\n inputValue: string;\r\n readonly: boolean;\r\n isDisabled?: boolean;\r\n size?: number;\r\n maxLength?: number;\r\n iconSpec?: string;\r\n}\r\n\r\n/* TextEditor React component that is a property editor with text input\r\n * @public\r\n /\r\nexport class TextEditor extends React.PureComponent<PropertyEditorProps, TextEditorState> implements TypeEditor {\r\n private _isMounted = false;\r\n private _ariaLabel = UiComponents.translate(\"editor.text\");\r\n private _inputElement = React.createRef<HTMLInputElement>();\r\n\r\n /* @internal /\r\n public override readonly state: Readonly<TextEditorState> = {\r\n inputValue: \"\",\r\n readonly: 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 = await TypeConverterManager.getConverter(record.property.typename, record.property.converter?.name).convertFromStringToPropertyValue(this.state.inputValue, record);\r\n (propertyValue as PrimitiveValue).displayValue = this.state.inputValue;\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 _updateInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n // istanbul ignore else\r\n if (this._isMounted)\r\n this.setState({\r\n inputValue: e.target.value,\r\n }, async () => {\r\n if (this.props.shouldCommitOnChange && this.props.onCommit && this.props.propertyRecord) {\r\n const newValue = await this.getPropertyValue();\r\n // istanbul ignore else\r\n if (newValue)\r\n this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue });\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 record = this.props.propertyRecord;\r\n let initialValue = \"\";\r\n\r\n // istanbul ignore else\r\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n const value = record.value.value;\r\n initialValue = await TypeConverterManager.getConverter(record.property.typename, record.property.converter?.name).convertPropertyToString(record.property, value);\r\n }\r\n\r\n const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\r\n let size: number \| undefined;\r\n let maxLength: number \| undefined;\r\n let iconSpec: string \| undefined;\r\n\r\n const isDisabled = record ? record.isDisabled : undefined;\r\n\r\n if (record && record.property && record.property.editor && record.property.editor.params) {\r\n const editorSizeParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.InputEditorSize) as InputEditorSizeParams;\r\n if (editorSizeParams) {\r\n // istanbul ignore else\r\n if (editorSizeParams.size)\r\n size = editorSizeParams.size;\r\n // istanbul ignore else\r\n if (editorSizeParams.maxLength)\r\n maxLength = editorSizeParams.maxLength;\r\n }\r\n\r\n const iconParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.Icon) as IconEditorParams;\r\n if (iconParams) {\r\n iconSpec = iconParams.definition.iconSpec;\r\n }\r\n }\r\n\r\n // istanbul ignore else\r\n if (this._isMounted)\r\n this.setState({ inputValue: initialValue, readonly, size, maxLength, isDisabled, iconSpec });\r\n }\r\n\r\n /* @internal /\r\n public override render(): React.ReactNode {\r\n const className = classnames(\"components-cell-editor\", \"components-text-editor\", this.props.className);\r\n const minSize = this.state.size ? this.state.size : 8;\r\n const minWidthStyle: React.CSSProperties = {\r\n minWidth: `${minSize 0.75}em`,\r\n };\r\n const inputProps: InputProps = {\r\n type: \"text\",\r\n className,\r\n style: this.props.style ? this.props.style : minWidthStyle,\r\n readOnly: this.state.readonly,\r\n disabled: this.state.isDisabled,\r\n maxLength: this.state.maxLength,\r\n value: this.state.inputValue,\r\n onBlur: this.props.onBlur,\r\n onChange: this._updateInputValue,\r\n setFocus: this.props.setFocus && !this.state.isDisabled,\r\n };\r\n\r\n inputProps[\"aria-label\"] = this._ariaLabel;\r\n\r\n let reactNode: React.ReactNode;\r\n if (this.state.iconSpec) {\r\n const icon = <Icon iconSpec={this.state.iconSpec} />;\r\n reactNode = (\r\n <IconInput\r\n {...inputProps}\r\n ref={this._inputElement}\r\n icon={icon}\r\n data-testid=\"components-text-editor\"\r\n />\r\n );\r\n } else {\r\n reactNode = (\r\n <Input\r\n {...inputProps}\r\n ref={this._inputElement}\r\n data-testid=\"components-text-editor\"\r\n size=\"small\"\r\n />\r\n );\r\n }\r\n\r\n return reactNode;\r\n }\r\n}\r\n"]}

package/lib/cjs/components-react/filter-builder/FilterBuilderRule.scss CHANGED Viewed

@@ -12,12 +12,6 @@
     display: grid;
     grid-template-columns: minmax(auto, 500px) 150px minmax(auto, 300px);
     grid-column-gap: var(--iui-size-m);
-    .rule-property .iui-input {
-      padding-top: 1.5px;
-      padding-bottom: 1.5px;
-      min-height: 27px;
-    }
   }
   .rule-remove-action {

package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.scss CHANGED Viewed

@@ -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 {
@@ -26,18 +24,14 @@
   }
   &[data-isactive="true"] > .rule-group-content {
-    @include themed {
-      border-color: t(iui-color-background-1--light);
-    }
+    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);
-    }
+    color: var(--iui-color-icon);
   }
   .rule-group-remove-action {
@@ -49,9 +43,7 @@
     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;

package/lib/cjs/components-react/filter-builder/FilterBuilderRuleProperty.d.ts.map CHANGED Viewed

	@@ -1 +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~~"}
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,eAuC9F"}

package/lib/cjs/components-react/filter-builder/FilterBuilderRuleProperty.js CHANGED Viewed

@@ -56,6 +56,7 @@ function PropertyFilterBuilderRuleProperty(props) {
         React.createElement(itwinui_react_1.ComboBox, { options: selectOptions, onChange: onPropertyChanged, value: selectedProperty === null || selectedProperty === void 0 ? void 0 : selectedProperty.name, inputProps: {
                 placeholder: UiComponents_1.UiComponents.translate("filterBuilder.chooseProperty"),
                 disabled: isDisabled,
+                size: "small",
             }, itemRenderer: itemRenderer, enableVirtualization: true }));
 }
 exports.PropertyFilterBuilderRuleProperty = PropertyFilterBuilderRuleProperty;

package/lib/cjs/components-react/filter-builder/FilterBuilderRuleProperty.js.map CHANGED Viewed

	@@ -1 +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,6CAA+B;AAE/B,wDAAuF;AACvF,kDAA+C;AAmB/C;;;GAGG;AACH,SAAgB,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,wBAAQ,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,wBAAQ,IACP,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,EAC7B,UAAU,EAAE;gBACV,WAAW,EAAE,2BAAY,CAAC,SAAS,CAAC,8BAA8B,CAAC;gBACnE,QAAQ,EAAE,UAAU;~~aACrB~~,EACD,YAAY,EAAE,YAAY,EAC1B,oBAAoB,EAAE,IAAI,GAC1B,CACE,CAAC;AACT,CAAC;~~AAtCD~~,~~8EAsCC~~","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 }}\r\n itemRenderer={itemRenderer}\r\n enableVirtualization={true}\r\n />\r\n </div>;\r\n}\r\n"]}
1	+ {"version":3,"file":"FilterBuilderRuleProperty.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleProperty.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAE/B,wDAAuF;AACvF,kDAA+C;AAmB/C;;;GAGG;AACH,SAAgB,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,wBAAQ,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,wBAAQ,IACP,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,EAC7B,UAAU,EAAE;gBACV,WAAW,EAAE,2BAAY,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;AAvCD,8EAuCC","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/cjs/components-react/filter-builder/FilterBuilderRuleValue.d.ts.map CHANGED Viewed

	@@ -1 +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~~"}
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,eAoBxF"}

package/lib/cjs/components-react/filter-builder/FilterBuilderRuleValue.js CHANGED Viewed

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

package/lib/cjs/components-react/filter-builder/FilterBuilderRuleValue.js.map CHANGED Viewed

	@@ -1 +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,6CAA+B;AAC/B,0DAAgH;AAChH,gEAAkF;AAelF;;;GAGG;AACH,SAAgB,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,+BAAc,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,WAAW,EAAE,oCAAmB,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,iCAAe,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;~~AAnBD~~,~~wEAmBC~~","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"]}
1	+ {"version":3,"file":"FilterBuilderRuleValue.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAC/B,0DAAgH;AAChH,gEAAkF;AAelF;;;GAGG;AACH,SAAgB,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,+BAAc,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,WAAW,EAAE,oCAAmB,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,iCAAe,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;AApBD,wEAoBC","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/cjs/components-react/filtering/FilteringInput.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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,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/cjs/components-react/filtering/FilteringInput.js CHANGED Viewed

@@ -38,6 +38,7 @@ const core_react_1 = require("@itwin/core-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const UiComponents_1 = require("../UiComponents");
 const ResultSelector_1 = require("./ResultSelector");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 /**
  * Enumeration of possible component contexts
  * @public
@@ -127,13 +128,19 @@ class FilteringInput extends React.PureComponent {
                         React.createElement(ResultSelector_1.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(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.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(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.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(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) }),
+                            " ") : undefined))));
     }
 }
 exports.FilteringInput = FilteringInput;

package/lib/cjs/components-react/filtering/FilteringInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilteringInput.js","sourceRoot":"","sources":["../../../../src/components-react/filtering/FilteringInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Filtering\r\n /\r\n\r\nimport \"./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"]}
1	+ {"version":3,"file":"FilteringInput.js","sourceRoot":"","sources":["../../../../src/components-react/filtering/FilteringInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Filtering\r\n /\r\n\r\nimport \"./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/cjs/components-react/filtering/FilteringInput.scss CHANGED Viewed

@@ -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/cjs/components-react/filtering/ResultSelector.d.ts.map CHANGED Viewed

	@@ -1 +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~~"}
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,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/cjs/components-react/filtering/ResultSelector.js CHANGED Viewed

@@ -34,7 +34,9 @@ require("./ResultSelector.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
 const UiComponents_1 = require("../UiComponents");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 /** Component for stepping through results/entries
  * @public
  */
@@ -108,14 +110,16 @@ class ResultSelector extends React.PureComponent {
     /** @internal */
     render() {
         return (React.createElement("span", { className: (0, classnames_1.default)("components-result-selector", this.props.className), style: this.props.style },
-            React.createElement("button", { className: (0, classnames_1.default)("components-result-selector-button", "icon", "icon-chevron-left"), onClick: this._onClickPrevious, disabled: this.props.resultCount <= 0 }),
+            React.createElement("button", { className: (0, classnames_1.default)("components-result-selector-button", "icon"), "data-testid": "previous-button", onClick: this._onClickPrevious, disabled: this.props.resultCount <= 0 },
+                React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgChevronLeft, null) })),
             React.createElement("span", { style: { pointerEvents: this.props.resultCount ? "auto" : "none" }, className: "components-result-selector-current-result", onClick: this._onSelectedResultClick, role: "presentation" },
                 this.state.selectedResultInEditMode ?
                     React.createElement("input", { type: "number", style: { width: `${this.state.selectedResultEdit.length * 0.60 + 1}em` }, value: this.state.selectedResultEdit, onChange: this._onSelectedResultChanged, onBlur: this._onSelectedResultConfirmed, onKeyDown: this._onSelectedResultKeyDown }) :
                     this.state.selectedResultId,
                 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(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgChevronRight, null) }))));
     }
 }
 exports.ResultSelector = ResultSelector;

package/lib/cjs/components-react/filtering/ResultSelector.js.map CHANGED Viewed

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

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

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

package/lib/cjs/components-react/iconpicker/IconPickerButton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconPickerButton.d.ts","sourceRoot":"","sources":["../../../../src/components-react/iconpicker/IconPickerButton.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;~~AA4C7D~~;;GAEG;AAEH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACjG,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,gBAAgB;AAChB,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AAEH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,EAAE,eAAe,CAAC;IACzF,OAAO,CAAC,OAAO,CAAwC;IAEvD,gBAAgB;IAChB,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAElD;IAEF,gBAAgB;gBACJ,KAAK,EAAE,eAAe;IAMlC,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,iBAAiB,CAQvB;IAEF,OAAO,CAAC,WAAW;IAYnB,gBAAgB;IACA,MAAM;CAyBvB"}
1	+ {"version":3,"file":"IconPickerButton.d.ts","sourceRoot":"","sources":["../../../../src/components-react/iconpicker/IconPickerButton.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AA6C7D;;GAEG;AAEH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACjG,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,gBAAgB;AAChB,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AAEH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,EAAE,eAAe,CAAC;IACzF,OAAO,CAAC,OAAO,CAAwC;IAEvD,gBAAgB;IAChB,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAElD;IAEF,gBAAgB;gBACJ,KAAK,EAAE,eAAe;IAMlC,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,iBAAiB,CAQvB;IAEF,OAAO,CAAC,WAAW;IAYnB,gBAAgB;IACA,MAAM;CAyBvB"}

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

@@ -36,6 +36,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_react_1 = require("@itwin/core-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 /** IconItem Functional component
  * @internal
  */
@@ -98,7 +99,10 @@ class IconPickerButton extends React.PureComponent {
         return (React.createElement(React.Fragment, null,
             React.createElement("button", { "data-testid": "components-iconpicker-button", onClick: this._togglePopup, className: buttonClassNames, style: buttonStyle, disabled: this.props.disabled, ref: this._target },
                 React.createElement(core_react_1.Icon, { className: "iconpicker-button-sprite", iconSpec: this.state.icon }),
-                React.createElement("span", { className: "icon icon-chevron-down" })),
+                React.createElement("span", { className: "icon" },
+                    " ",
+                    React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgChevronDown, null) }),
+                    " ")),
             React.createElement(core_react_1.Popup, { className: "components-iconpicker-popup", isOpen: this.state.showPopup, position: appui_abstract_1.RelativePosition.BottomLeft, onClose: this._closePopup, target: this._target.current }, this.renderPopup(this.props.dropDownTitle))));
     }
 }

package/lib/cjs/components-react/iconpicker/IconPickerButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconPickerButton.js","sourceRoot":"","sources":["../../../../src/components-react/iconpicker/IconPickerButton.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,mCAAiC;AACjC,4DAAoC;AACpC,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA6D;~~AAY7D~~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~~wBAAwB~~,~~GAAG~~,~~CACpC~~;YACT,oBAAC,kBAAK,IACJ,SAAS,EAAC,6BAA6B,EACvC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC5B,QAAQ,EAAE,iCAAgB,CAAC,UAAU,EACrC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,IAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CACrC,CACP,CACJ,CAAC;IACJ,CAAC;;AAxEH,4CA0EC;AAvEC,gBAAgB;AACF,6BAAY,GAA6B;IACrD,UAAU,EAAE,CAAC;CACd,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/* eslint-disable deprecation/deprecation /\r\n/* @packageDocumentation\r\n * @module IconPicker\r\n /\r\n\r\nimport \"./IconPickerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Icon, Popup } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[IconItem]] React component\r\n * @internal\r\n /\r\ninterface IconItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /* icon specification /\r\n icon: string;\r\n /* function to run when user selects icon /\r\n onClick?: () => void;\r\n}\r\n\r\n/* IconItem Functional component\r\n * @internal\r\n /\r\n// istanbul ignore next\r\nclass IconItem extends React.PureComponent<IconItemProps> {\r\n /* @internal /\r\n constructor(props: IconItemProps) {\r\n super(props);\r\n }\r\n\r\n public override render() {\r\n const {\r\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n onClick, icon, // do not pass on item specific props\r\n ...otherProps\r\n } = this.props;\r\n\r\n const handleClick = (_e: React.MouseEvent) => {\r\n if (onClick)\r\n onClick();\r\n };\r\n\r\n const classes = classnames(\"components-icon-swatch\", this.props.className);\r\n\r\n return (\r\n <button {...otherProps} className={classes} style={this.props.style} onClick={handleClick}>\r\n <Icon iconSpec={this.props.icon} />\r\n </button>\r\n );\r\n }\r\n}\r\n\r\n/* Properties for the [[IconPicker]] React component\r\n * @internal\r\n /\r\n// istanbul ignore next\r\nexport interface IconPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /* active string /\r\n icon: string;\r\n /* available icons /\r\n icons: string[];\r\n /* function to run when user selects icon /\r\n onIconChange?: ((icon: string) => void) \| undefined;\r\n /* Disabled or not /\r\n disabled?: boolean;\r\n /* Readonly or not /\r\n readonly?: boolean;\r\n /* Title to show at top of DropDown /\r\n dropDownTitle?: string;\r\n /* Number of columns /\r\n numColumns: number;\r\n}\r\n\r\n/* @internal /\r\ninterface IconPickerState {\r\n showPopup: boolean;\r\n icon: string;\r\n}\r\n\r\n/* IconPickerButton component\r\n * @internal\r\n /\r\n// istanbul ignore next\r\nexport class IconPickerButton extends React.PureComponent<IconPickerProps, IconPickerState> {\r\n private _target = React.createRef<HTMLButtonElement>();\r\n\r\n /* @internal /\r\n public static defaultProps: Partial<IconPickerProps> = {\r\n numColumns: 4,\r\n };\r\n\r\n /* @internal /\r\n constructor(props: IconPickerProps) {\r\n super(props);\r\n\r\n this.state = { showPopup: false, icon: this.props.icon };\r\n }\r\n\r\n private _togglePopup = () => {\r\n if (this.props.readonly)\r\n return;\r\n\r\n this.setState((prevState) => ({ showPopup: !prevState.showPopup }));\r\n };\r\n\r\n private _closePopup = () => {\r\n this.setState({ showPopup: false });\r\n };\r\n\r\n private _handleIconPicked = (icon: string) => {\r\n this.setState(\r\n { showPopup: false, icon },\r\n () => {\r\n // istanbul ignore else\r\n if (this.props.onIconChange)\r\n this.props.onIconChange(icon);\r\n });\r\n };\r\n\r\n private renderPopup(title: string \| undefined) {\r\n const containerStyle: React.CSSProperties = { gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)` };\r\n return (\r\n <div className=\"components-iconpicker-popup-container\">\r\n {title && <h4>{title}</h4>}\r\n <div data-testid=\"components-iconpicker-popup-icons\" className=\"components-iconpicker-popup-icons\" style={containerStyle}>\r\n {this.props.icons.map((icon: string, index: number) => <IconItem key={index} icon={icon} onClick={this._handleIconPicked.bind(this, icon)} />)}\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n /* @internal */\r\n public override render() {\r\n const buttonStyle = { ...this.props.style } as React.CSSProperties;\r\n const buttonClassNames = classnames(\"components-iconpicker-button\",\r\n this.props.readonly && \"readonly\",\r\n this.props.className,\r\n );\r\n\r\n return (\r\n <>\r\n <button data-testid=\"components-iconpicker-button\" onClick={this._togglePopup} className={buttonClassNames} style={buttonStyle} disabled={this.props.disabled} ref={this._target}>\r\n <Icon className=\"iconpicker-button-sprite\" iconSpec={this.state.icon} />\r\n <span className=\"icon ~~icon-chevron-down~~\" ~~/>\~~r\n </button>\r\n <Popup\r\n className=\"components-iconpicker-popup\"\r\n isOpen={this.state.showPopup}\r\n position={RelativePosition.BottomLeft}\r\n onClose={this._closePopup}\r\n target={this._target.current}>\r\n {this.renderPopup(this.props.dropDownTitle)}\r\n </Popup>\r\n </>\r\n );\r\n }\r\n\r\n}\r\n"]}
1	+ {"version":3,"file":"IconPickerButton.js","sourceRoot":"","sources":["../../../../src/components-react/iconpicker/IconPickerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/* eslint-disable deprecation/deprecation /\r\n/* @packageDocumentation\r\n * @module IconPicker\r\n /\r\n\r\nimport \"./IconPickerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Icon, Popup } from \"@itwin/core-react\";\r\nimport { SvgChevronDown } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Properties for the [[IconItem]] React component\r\n * @internal\r\n /\r\ninterface IconItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /* icon specification /\r\n icon: string;\r\n /* function to run when user selects icon /\r\n onClick?: () => void;\r\n}\r\n\r\n/* IconItem Functional component\r\n * @internal\r\n /\r\n// istanbul ignore next\r\nclass IconItem extends React.PureComponent<IconItemProps> {\r\n /* @internal /\r\n constructor(props: IconItemProps) {\r\n super(props);\r\n }\r\n\r\n public override render() {\r\n const {\r\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n onClick, icon, // do not pass on item specific props\r\n ...otherProps\r\n } = this.props;\r\n\r\n const handleClick = (_e: React.MouseEvent) => {\r\n if (onClick)\r\n onClick();\r\n };\r\n\r\n const classes = classnames(\"components-icon-swatch\", this.props.className);\r\n\r\n return (\r\n <button {...otherProps} className={classes} style={this.props.style} onClick={handleClick}>\r\n <Icon iconSpec={this.props.icon} />\r\n </button>\r\n );\r\n }\r\n}\r\n\r\n/* Properties for the [[IconPicker]] React component\r\n * @internal\r\n /\r\n// istanbul ignore next\r\nexport interface IconPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /* active string /\r\n icon: string;\r\n /* available icons /\r\n icons: string[];\r\n /* function to run when user selects icon /\r\n onIconChange?: ((icon: string) => void) \| undefined;\r\n /* Disabled or not /\r\n disabled?: boolean;\r\n /* Readonly or not /\r\n readonly?: boolean;\r\n /* Title to show at top of DropDown /\r\n dropDownTitle?: string;\r\n /* Number of columns /\r\n numColumns: number;\r\n}\r\n\r\n/* @internal /\r\ninterface IconPickerState {\r\n showPopup: boolean;\r\n icon: string;\r\n}\r\n\r\n/* IconPickerButton component\r\n * @internal\r\n /\r\n// istanbul ignore next\r\nexport class IconPickerButton extends React.PureComponent<IconPickerProps, IconPickerState> {\r\n private _target = React.createRef<HTMLButtonElement>();\r\n\r\n /* @internal /\r\n public static defaultProps: Partial<IconPickerProps> = {\r\n numColumns: 4,\r\n };\r\n\r\n /* @internal /\r\n constructor(props: IconPickerProps) {\r\n super(props);\r\n\r\n this.state = { showPopup: false, icon: this.props.icon };\r\n }\r\n\r\n private _togglePopup = () => {\r\n if (this.props.readonly)\r\n return;\r\n\r\n this.setState((prevState) => ({ showPopup: !prevState.showPopup }));\r\n };\r\n\r\n private _closePopup = () => {\r\n this.setState({ showPopup: false });\r\n };\r\n\r\n private _handleIconPicked = (icon: string) => {\r\n this.setState(\r\n { showPopup: false, icon },\r\n () => {\r\n // istanbul ignore else\r\n if (this.props.onIconChange)\r\n this.props.onIconChange(icon);\r\n });\r\n };\r\n\r\n private renderPopup(title: string \| undefined) {\r\n const containerStyle: React.CSSProperties = { gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)` };\r\n return (\r\n <div className=\"components-iconpicker-popup-container\">\r\n {title && <h4>{title}</h4>}\r\n <div data-testid=\"components-iconpicker-popup-icons\" className=\"components-iconpicker-popup-icons\" style={containerStyle}>\r\n {this.props.icons.map((icon: string, index: number) => <IconItem key={index} icon={icon} onClick={this._handleIconPicked.bind(this, icon)} />)}\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n /* @internal */\r\n public override render() {\r\n const buttonStyle = { ...this.props.style } as React.CSSProperties;\r\n const buttonClassNames = classnames(\"components-iconpicker-button\",\r\n this.props.readonly && \"readonly\",\r\n this.props.className,\r\n );\r\n\r\n return (\r\n <>\r\n <button data-testid=\"components-iconpicker-button\" onClick={this._togglePopup} className={buttonClassNames} style={buttonStyle} disabled={this.props.disabled} ref={this._target}>\r\n <Icon className=\"iconpicker-button-sprite\" iconSpec={this.state.icon} />\r\n <span className=\"icon\"> <Icon iconSpec={<SvgChevronDown />} /> </span>\r\n </button>\r\n <Popup\r\n className=\"components-iconpicker-popup\"\r\n isOpen={this.state.showPopup}\r\n position={RelativePosition.BottomLeft}\r\n onClose={this._closePopup}\r\n target={this._target.current}>\r\n {this.renderPopup(this.props.dropDownTitle)}\r\n </Popup>\r\n </>\r\n );\r\n }\r\n\r\n}\r\n"]}

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

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

package/lib/cjs/components-react/inputs/ParsedInput.scss CHANGED Viewed

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