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/esm/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/esm/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/esm/components-react/filter-builder/FilterBuilderRuleProperty.js CHANGED Viewed

@@ -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 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,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;~~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, 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,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 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/esm/components-react/filter-builder/FilterBuilderRuleValue.js CHANGED Viewed

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

@@ -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 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/esm/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/esm/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/esm/components-react/filtering/ResultSelector.js CHANGED Viewed

@@ -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

package/lib/esm/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/esm/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/esm/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/esm/components-react/iconpicker/IconPickerButton.js CHANGED Viewed

@@ -11,6 +11,7 @@ import classnames from "classnames";
 import * as React from "react";
 import { RelativePosition } from "@itwin/appui-abstract";
 import { Icon, Popup } from "@itwin/core-react";
+import { SvgChevronDown } from "@itwin/itwinui-icons-react";
 /** IconItem Functional component
  * @internal
  */
@@ -73,7 +74,10 @@ export 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(Icon, { className: "iconpicker-button-sprite", iconSpec: this.state.icon }),
-                React.createElement("span", { className: "icon icon-chevron-down" })),
+                React.createElement("span", { className: "icon" },
+                    " ",
+                    React.createElement(Icon, { iconSpec: React.createElement(SvgChevronDown, null) }),
+                    " ")),
             React.createElement(Popup, { className: "components-iconpicker-popup", isOpen: this.state.showPopup, position: RelativePosition.BottomLeft, onClose: this._closePopup, target: this._target.current }, this.renderPopup(this.props.dropDownTitle))));
     }
 }

package/lib/esm/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,OAAO,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAe,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;~~AAY7D~~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~~wBAAwB~~,~~GAAG~~,~~CACpC~~;YACT,oBAAC,KAAK,IACJ,SAAS,EAAC,6BAA6B,EACvC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC5B,QAAQ,EAAE,gBAAgB,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;;AArED,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/esm/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/esm/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;
   }

package/lib/esm/components-react/properties/renderers/PropertyView.scss CHANGED Viewed

@@ -5,7 +5,7 @@
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 $text-font-size: var(--iui-font-size-1);
-$text-font-color: $buic-text-color;
+$text-font-color: var(--iui-color-text);
 .components-property-record--horizontal {
   height: 100%;
@@ -14,7 +14,7 @@ $text-font-color: $buic-text-color;
   .components-property-record-label {
     font-size: var(--iui-font-size-0);
-    color: $buic-foreground-muted;
+    color: var(--iui-color-text-muted);
   }
   .components-property-record-value {
@@ -33,7 +33,7 @@ $text-font-color: $buic-text-color;
   .components-property-record-label {
     font-size: var(--iui-font-size-0);
-    color: $buic-foreground-muted;
+    color: var(--iui-color-text-muted);
   }
   .components-property-record-value {

package/lib/esm/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NonPrimitivePropertyLabelRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mCAAmC,EAAE,MAAM,kCAAkC,CAAC;~~AAGvF~~;;GAEG;AACH,MAAM,WAAW,sCAAuC,SAAQ,mCAAmC;IACjG,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;GAIG;AACH,qBAAa,iCAAkC,SAAQ,KAAK,CAAC,aAAa,CAAC,sCAAsC,CAAC;IAChH,OAAO,CAAC,QAAQ,CAKd;IAEc,MAAM;CAevB"}
1	+ {"version":3,"file":"NonPrimitivePropertyLabelRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mCAAmC,EAAE,MAAM,kCAAkC,CAAC;AAKvF;;GAEG;AACH,MAAM,WAAW,sCAAuC,SAAQ,mCAAmC;IACjG,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;GAIG;AACH,qBAAa,iCAAkC,SAAQ,KAAK,CAAC,aAAa,CAAC,sCAAsC,CAAC;IAChH,OAAO,CAAC,QAAQ,CAKd;IAEc,MAAM;CAevB"}

package/lib/esm/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.js CHANGED Viewed

@@ -8,6 +8,8 @@
 import "./PropertyLabelRenderer.scss";
 import * as React from "react";
 import { PropertyLabelRenderer } from "./PropertyLabelRenderer";
+import { SvgChevronRight } from "@itwin/itwinui-icons-react";
+import { Icon } from "@itwin/core-react";
 /**
  * A React component that renders a non-primitive property label.
  * It renders an animated arrow with text which expands when label is clicked.
@@ -26,7 +28,7 @@ export class NonPrimitivePropertyLabelRenderer extends React.PureComponent {
     render() {
         return (React.createElement("div", { style: PropertyLabelRenderer.getStyle(this.props.offset), className: `components-nonprimitive-property-label-renderer ${this.props.className ? this.props.className : ""}`, onClick: this._onClick, role: "presentation" },
             React.createElement("div", { className: (this.props.isExpanded ? " components-expanded" : "") },
-                React.createElement("i", { className: "icon icon-chevron-right" })),
+                React.createElement(Icon, { iconSpec: React.createElement(SvgChevronRight, null) })),
             React.createElement(PropertyLabelRenderer, { renderColon: this.props.renderColon }, this.props.children)));
     }
 }

package/lib/esm/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NonPrimitivePropertyLabelRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;~~AAWhE~~;;;;GAIG;AACH,MAAM,OAAO,iCAAkC,SAAQ,KAAK,CAAC,aAAqD;IAAlH;;QACU,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU;gBACvB,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;;gBAExB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC1B,CAAC,CAAC;IAiBJ,CAAC;IAfiB,MAAM;QACpB,OAAO,CACL,6BACE,KAAK,EAAE,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACxD,SAAS,EAAE,mDAAmD,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAChH,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,cAAc;YAEnB,6BAAK,SAAS,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;gBACnE,~~2BAAG~~,~~SAAS~~,~~EAAC~~,~~yBAAyB~~,GAAG,~~CACrC~~;YACN,oBAAC,qBAAqB,IAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,IAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAyB,CACrG,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 Properties\r\n /\r\n\r\nimport \"./PropertyLabelRenderer.scss\";\r\nimport as React from \"react\";\r\nimport { PrimitivePropertyLabelRendererProps } from \"./PrimitivePropertyLabelRenderer\";\r\nimport { PropertyLabelRenderer } from \"./PropertyLabelRenderer\";\r\n\r\n/** Properties for the [[NonPrimitivePropertyLabelRenderer]] React component\r\n * @public\r\n /\r\nexport interface NonPrimitivePropertyLabelRendererProps extends PrimitivePropertyLabelRendererProps {\r\n isExpanded: boolean;\r\n onExpand: () => void;\r\n onCollapse: () => void;\r\n}\r\n\r\n/\r\n A React component that renders a non-primitive property label.\r\n * It renders an animated arrow with text which expands when label is clicked.\r\n * @public\r\n */\r\nexport class NonPrimitivePropertyLabelRenderer extends React.PureComponent<NonPrimitivePropertyLabelRendererProps> {\r\n private _onClick = () => {\r\n if (this.props.isExpanded)\r\n this.props.onCollapse();\r\n else\r\n this.props.onExpand();\r\n };\r\n\r\n public override render() {\r\n return (\r\n <div\r\n style={PropertyLabelRenderer.getStyle(this.props.offset)}\r\n className={`components-nonprimitive-property-label-renderer ${this.props.className ? this.props.className : \"\"}`}\r\n onClick={this._onClick}\r\n role=\"presentation\"\r\n >\r\n <div className={(this.props.isExpanded ? \" components-expanded\" : \"\")}>\r\n <i ~~className=\"icon~~ ~~icon-chevron-right\"~~ />\r\n </div>\r\n <PropertyLabelRenderer renderColon={this.props.renderColon}>{this.props.children}</PropertyLabelRenderer>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"NonPrimitivePropertyLabelRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAWzC;;;;GAIG;AACH,MAAM,OAAO,iCAAkC,SAAQ,KAAK,CAAC,aAAqD;IAAlH;;QACU,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU;gBACvB,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;;gBAExB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC1B,CAAC,CAAC;IAiBJ,CAAC;IAfiB,MAAM;QACpB,OAAO,CACL,6BACE,KAAK,EAAE,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACxD,SAAS,EAAE,mDAAmD,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAChH,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,cAAc;YAEnB,6BAAK,SAAS,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;gBACnE,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,eAAe,OAAG,GAAG,CAClC;YACN,oBAAC,qBAAqB,IAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,IAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAyB,CACrG,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 Properties\r\n /\r\n\r\nimport \"./PropertyLabelRenderer.scss\";\r\nimport as React from \"react\";\r\nimport { PrimitivePropertyLabelRendererProps } from \"./PrimitivePropertyLabelRenderer\";\r\nimport { PropertyLabelRenderer } from \"./PropertyLabelRenderer\";\r\nimport { SvgChevronRight } from \"@itwin/itwinui-icons-react\";\r\nimport { Icon } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[NonPrimitivePropertyLabelRenderer]] React component\r\n * @public\r\n /\r\nexport interface NonPrimitivePropertyLabelRendererProps extends PrimitivePropertyLabelRendererProps {\r\n isExpanded: boolean;\r\n onExpand: () => void;\r\n onCollapse: () => void;\r\n}\r\n\r\n/\r\n A React component that renders a non-primitive property label.\r\n * It renders an animated arrow with text which expands when label is clicked.\r\n * @public\r\n */\r\nexport class NonPrimitivePropertyLabelRenderer extends React.PureComponent<NonPrimitivePropertyLabelRendererProps> {\r\n private _onClick = () => {\r\n if (this.props.isExpanded)\r\n this.props.onCollapse();\r\n else\r\n this.props.onExpand();\r\n };\r\n\r\n public override render() {\r\n return (\r\n <div\r\n style={PropertyLabelRenderer.getStyle(this.props.offset)}\r\n className={`components-nonprimitive-property-label-renderer ${this.props.className ? this.props.className : \"\"}`}\r\n onClick={this._onClick}\r\n role=\"presentation\"\r\n >\r\n <div className={(this.props.isExpanded ? \" components-expanded\" : \"\")}>\r\n <Icon iconSpec={<SvgChevronRight />}/>\r\n </div>\r\n <PropertyLabelRenderer renderColon={this.props.renderColon}>{this.props.children}</PropertyLabelRenderer>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}