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

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

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 (179) hide show

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

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

@@ -55,7 +55,7 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: $buic-text-color;
+  color: var(--iui-color-text);
   font-size: 14px;
   height: 100%;
   width: 100%;
@@ -83,6 +83,6 @@
   }
   &:hover {
-    color: $buic-text-color-hover;
+    color: var(--iui-color-text-hover);
   }
 }

package/lib/esm/components-react/propertygrid/component/ColumnResizingPropertyListPropsSupplier.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnResizingPropertyListPropsSupplier.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/propertygrid/component/ColumnResizingPropertyListPropsSupplier.tsx"],"names":[],"mappings":"~~AAKA~~,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAiC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,gBAAgB;AAChB,oBAAY,oCAAoC,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,aAAa,GAAG,uBAAuB,GAAG,4BAA4B,GAAG,4BAA4B,GAAG,2BAA2B,GAAG,YAAY,GAAG,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC;AAEvR,gBAAgB;AAChB,MAAM,WAAW,4CAA4C;IAC3D,oCAAoC;IACpC,WAAW,EAAE,WAAW,CAAC;IACzB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4GAA4G;IAC5G,QAAQ,EAAE,CAAC,KAAK,EAAE,oCAAoC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED,gBAAgB;AAChB,MAAM,WAAW,4CAA4C;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,0BAA0B,EAAE,OAAO,CAAC;CACrC;AAED;;;GAGG;AACH,qBAAa,uCAAwC,SAAQ,KAAK,CAAC,SAAS,CAAC,4CAA4C,EAAE,4CAA4C,CAAC;IACtK,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAQ;IACtC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAQ;IACzC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAO;IACxC,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,SAAS,CAAyB;IAE1B,KAAK,EAAE,4CAA4C,CAIjE;IAEF,OAAc,YAAY,EAAE,OAAO,CAAC,4CAA4C,CAAC,CAI/E;IAEF,OAAO,CAAC,qBAAqB,CAO3B;IAGF,OAAO,CAAC,2BAA2B,CAEjC;IAEF,OAAO,CAAC,0BAA0B,CAEhC;IAEF,OAAO,CAAC,0BAA0B;IAgBlC,OAAO,CAAC,mBAAmB;IAIX,MAAM;CAmBvB"}
1	+ {"version":3,"file":"ColumnResizingPropertyListPropsSupplier.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/propertygrid/component/ColumnResizingPropertyListPropsSupplier.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAiC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,gBAAgB;AAChB,oBAAY,oCAAoC,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,aAAa,GAAG,uBAAuB,GAAG,4BAA4B,GAAG,4BAA4B,GAAG,2BAA2B,GAAG,YAAY,GAAG,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC;AAEvR,gBAAgB;AAChB,MAAM,WAAW,4CAA4C;IAC3D,oCAAoC;IACpC,WAAW,EAAE,WAAW,CAAC;IACzB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4GAA4G;IAC5G,QAAQ,EAAE,CAAC,KAAK,EAAE,oCAAoC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED,gBAAgB;AAChB,MAAM,WAAW,4CAA4C;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,0BAA0B,EAAE,OAAO,CAAC;CACrC;AAED;;;GAGG;AACH,qBAAa,uCAAwC,SAAQ,KAAK,CAAC,SAAS,CAAC,4CAA4C,EAAE,4CAA4C,CAAC;IACtK,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAQ;IACtC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAQ;IACzC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAO;IACxC,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,SAAS,CAAyB;IAE1B,KAAK,EAAE,4CAA4C,CAIjE;IAEF,OAAc,YAAY,EAAE,OAAO,CAAC,4CAA4C,CAAC,CAI/E;IAEF,OAAO,CAAC,qBAAqB,CAO3B;IAGF,OAAO,CAAC,2BAA2B,CAEjC;IAEF,OAAO,CAAC,0BAA0B,CAEhC;IAEF,OAAO,CAAC,0BAA0B;IAgBlC,OAAO,CAAC,mBAAmB;IAIX,MAAM;CAmBvB"}

package/lib/esm/components-react/propertygrid/component/ColumnResizingPropertyListPropsSupplier.js CHANGED Viewed

@@ -1,3 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import { Orientation, UiGeometry } from "@itwin/core-react";
 /**

package/lib/esm/components-react/propertygrid/component/ColumnResizingPropertyListPropsSupplier.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnResizingPropertyListPropsSupplier.js","sourceRoot":"","sources":["../../../../../src/components-react/propertygrid/component/ColumnResizingPropertyListPropsSupplier.tsx"],"names":[],"mappings":"~~AAKA~~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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\nimport ~~_ from \"lodash\";\r\nimport~~ * as React from \"react\";\r\nimport { Orientation, RatioChangeResult, UiGeometry } from \"@itwin/core-react\";\r\nimport { PropertyListProps } from \"./PropertyList\";\r\n\r\n/** @internal /\r\nexport type ColumnResizeRelatedPropertyListProps = Required<Pick<PropertyListProps, \"onColumnChanged\" \| \"columnRatio\" \| \"isResizeHandleHovered\" \| \"onResizeHandleHoverChanged\" \| \"isResizeHandleBeingDragged\" \| \"onResizeHandleDragChanged\" \| \"columnInfo\" \| \"orientation\" \| \"width\">>;\r\n\r\n/* @internal /\r\nexport interface ColumnResizingPropertyListPropsSupplierProps {\r\n /* Orientation of the properties /\r\n orientation: Orientation;\r\n /* Width of the property list /\r\n width: number;\r\n /* Minimum allowed label column width, after which resizing stops /\r\n minLabelWidth?: number;\r\n /* Minimum allowed value column width, after which resizing stops /\r\n minValueWidth?: number;\r\n /* Fixed action button column width /\r\n actionButtonWidth?: number;\r\n /* A callback that receives the required column-resize-related props for the [[PropertyList]] component /\r\n children: (props: ColumnResizeRelatedPropertyListProps) => React.ReactNode;\r\n}\r\n\r\n/* @internal /\r\nexport interface ColumnResizingPropertyListPropsSupplierState {\r\n columnRatio: number;\r\n isResizeHandleHovered: boolean;\r\n isResizeHandleBeingDragged: boolean;\r\n}\r\n\r\n/\r\n Wrapped PropertyCategoryBlock React component with list of properties and render optimization\r\n * @internal\r\n */\r\nexport class ColumnResizingPropertyListPropsSupplier extends React.Component<ColumnResizingPropertyListPropsSupplierProps, ColumnResizingPropertyListPropsSupplierState> {\r\n private readonly _initialRatio = 0.25;\r\n private readonly _defaultMinRatio = 0.15;\r\n private readonly _defaultMaxRatio = 0.6;\r\n private _minRatio = this._defaultMinRatio;\r\n private _maxRatio = this._defaultMaxRatio;\r\n\r\n public override state: ColumnResizingPropertyListPropsSupplierState = {\r\n columnRatio: this._initialRatio,\r\n isResizeHandleHovered: false,\r\n isResizeHandleBeingDragged: false,\r\n };\r\n\r\n public static defaultProps: Partial<ColumnResizingPropertyListPropsSupplierProps> = {\r\n minLabelWidth: 100,\r\n minValueWidth: 100,\r\n actionButtonWidth: 90,\r\n };\r\n\r\n private _onColumnRatioChanged = (ratio: number): RatioChangeResult => {\r\n ratio = UiGeometry.clamp(ratio, this._minRatio, this._maxRatio);\r\n if (this.state.columnRatio === ratio)\r\n return { ratio };\r\n\r\n this.setState({ columnRatio: ratio });\r\n return { ratio };\r\n };\r\n\r\n // istanbul ignore next\r\n private _onResizeHandleHoverChanged = (isHovered: boolean) => {\r\n this.setState({ isResizeHandleHovered: isHovered });\r\n };\r\n\r\n private _onResizeHandleDragChanged = (isDragStarted: boolean) => {\r\n this.setState({ isResizeHandleBeingDragged: isDragStarted });\r\n };\r\n\r\n private isMinimumColumnSizeEnabled() {\r\n if (this.props.orientation !== Orientation.Horizontal)\r\n return false;\r\n\r\n // default behavior for screens that are too small to have minimum column widths\r\n if (this.props.width < this.props.minLabelWidth! + 1 + this.props.minValueWidth! + this.props.actionButtonWidth!) {\r\n this._minRatio = this._defaultMinRatio;\r\n this._maxRatio = this._defaultMaxRatio;\r\n return false;\r\n }\r\n\r\n this._minRatio = this.props.minLabelWidth! / this.props.width;\r\n this._maxRatio = (this.props.width - this.props.actionButtonWidth! - this.props.minValueWidth!) / this.props.width;\r\n return true;\r\n }\r\n\r\n private getValidColumnRatio(): number {\r\n return UiGeometry.clamp(this.state.columnRatio, this._minRatio, this._maxRatio);\r\n }\r\n\r\n public override render() {\r\n const listProps: ColumnResizeRelatedPropertyListProps = {\r\n orientation: this.props.orientation,\r\n width: this.props.width,\r\n onColumnChanged: this._onColumnRatioChanged,\r\n columnRatio: this.getValidColumnRatio(),\r\n isResizeHandleHovered: this.state.isResizeHandleHovered,\r\n onResizeHandleHoverChanged: this._onResizeHandleHoverChanged,\r\n isResizeHandleBeingDragged: this.state.isResizeHandleBeingDragged,\r\n onResizeHandleDragChanged: this._onResizeHandleDragChanged,\r\n columnInfo: {\r\n minLabelWidth: this.props.minLabelWidth!,\r\n minValueWidth: this.props.minValueWidth!,\r\n actionButtonWidth: this.props.actionButtonWidth!,\r\n isMinimumColumnSizeEnabled: this.isMinimumColumnSizeEnabled(),\r\n },\r\n };\r\n return this.props.children(listProps);\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"ColumnResizingPropertyListPropsSupplier.js","sourceRoot":"","sources":["../../../../../src/components-react/propertygrid/component/ColumnResizingPropertyListPropsSupplier.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\nimport * as React from \"react\";\r\nimport { Orientation, RatioChangeResult, UiGeometry } from \"@itwin/core-react\";\r\nimport { PropertyListProps } from \"./PropertyList\";\r\n\r\n/** @internal /\r\nexport type ColumnResizeRelatedPropertyListProps = Required<Pick<PropertyListProps, \"onColumnChanged\" \| \"columnRatio\" \| \"isResizeHandleHovered\" \| \"onResizeHandleHoverChanged\" \| \"isResizeHandleBeingDragged\" \| \"onResizeHandleDragChanged\" \| \"columnInfo\" \| \"orientation\" \| \"width\">>;\r\n\r\n/* @internal /\r\nexport interface ColumnResizingPropertyListPropsSupplierProps {\r\n /* Orientation of the properties /\r\n orientation: Orientation;\r\n /* Width of the property list /\r\n width: number;\r\n /* Minimum allowed label column width, after which resizing stops /\r\n minLabelWidth?: number;\r\n /* Minimum allowed value column width, after which resizing stops /\r\n minValueWidth?: number;\r\n /* Fixed action button column width /\r\n actionButtonWidth?: number;\r\n /* A callback that receives the required column-resize-related props for the [[PropertyList]] component /\r\n children: (props: ColumnResizeRelatedPropertyListProps) => React.ReactNode;\r\n}\r\n\r\n/* @internal /\r\nexport interface ColumnResizingPropertyListPropsSupplierState {\r\n columnRatio: number;\r\n isResizeHandleHovered: boolean;\r\n isResizeHandleBeingDragged: boolean;\r\n}\r\n\r\n/\r\n Wrapped PropertyCategoryBlock React component with list of properties and render optimization\r\n * @internal\r\n */\r\nexport class ColumnResizingPropertyListPropsSupplier extends React.Component<ColumnResizingPropertyListPropsSupplierProps, ColumnResizingPropertyListPropsSupplierState> {\r\n private readonly _initialRatio = 0.25;\r\n private readonly _defaultMinRatio = 0.15;\r\n private readonly _defaultMaxRatio = 0.6;\r\n private _minRatio = this._defaultMinRatio;\r\n private _maxRatio = this._defaultMaxRatio;\r\n\r\n public override state: ColumnResizingPropertyListPropsSupplierState = {\r\n columnRatio: this._initialRatio,\r\n isResizeHandleHovered: false,\r\n isResizeHandleBeingDragged: false,\r\n };\r\n\r\n public static defaultProps: Partial<ColumnResizingPropertyListPropsSupplierProps> = {\r\n minLabelWidth: 100,\r\n minValueWidth: 100,\r\n actionButtonWidth: 90,\r\n };\r\n\r\n private _onColumnRatioChanged = (ratio: number): RatioChangeResult => {\r\n ratio = UiGeometry.clamp(ratio, this._minRatio, this._maxRatio);\r\n if (this.state.columnRatio === ratio)\r\n return { ratio };\r\n\r\n this.setState({ columnRatio: ratio });\r\n return { ratio };\r\n };\r\n\r\n // istanbul ignore next\r\n private _onResizeHandleHoverChanged = (isHovered: boolean) => {\r\n this.setState({ isResizeHandleHovered: isHovered });\r\n };\r\n\r\n private _onResizeHandleDragChanged = (isDragStarted: boolean) => {\r\n this.setState({ isResizeHandleBeingDragged: isDragStarted });\r\n };\r\n\r\n private isMinimumColumnSizeEnabled() {\r\n if (this.props.orientation !== Orientation.Horizontal)\r\n return false;\r\n\r\n // default behavior for screens that are too small to have minimum column widths\r\n if (this.props.width < this.props.minLabelWidth! + 1 + this.props.minValueWidth! + this.props.actionButtonWidth!) {\r\n this._minRatio = this._defaultMinRatio;\r\n this._maxRatio = this._defaultMaxRatio;\r\n return false;\r\n }\r\n\r\n this._minRatio = this.props.minLabelWidth! / this.props.width;\r\n this._maxRatio = (this.props.width - this.props.actionButtonWidth! - this.props.minValueWidth!) / this.props.width;\r\n return true;\r\n }\r\n\r\n private getValidColumnRatio(): number {\r\n return UiGeometry.clamp(this.state.columnRatio, this._minRatio, this._maxRatio);\r\n }\r\n\r\n public override render() {\r\n const listProps: ColumnResizeRelatedPropertyListProps = {\r\n orientation: this.props.orientation,\r\n width: this.props.width,\r\n onColumnChanged: this._onColumnRatioChanged,\r\n columnRatio: this.getValidColumnRatio(),\r\n isResizeHandleHovered: this.state.isResizeHandleHovered,\r\n onResizeHandleHoverChanged: this._onResizeHandleHoverChanged,\r\n isResizeHandleBeingDragged: this.state.isResizeHandleBeingDragged,\r\n onResizeHandleDragChanged: this._onResizeHandleDragChanged,\r\n columnInfo: {\r\n minLabelWidth: this.props.minLabelWidth!,\r\n minValueWidth: this.props.minValueWidth!,\r\n actionButtonWidth: this.props.actionButtonWidth!,\r\n isMinimumColumnSizeEnabled: this.isMinimumColumnSizeEnabled(),\r\n },\r\n };\r\n return this.props.children(listProps);\r\n }\r\n}\r\n"]}

package/lib/esm/components-react/propertygrid/component/PropertyGrid.scss CHANGED Viewed

@@ -26,7 +26,7 @@
   padding-bottom: 6px;
   user-select: none;
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
 }
 .components-property-grid-wrapper {
@@ -41,21 +41,22 @@
 @mixin components-property-list {
   width: 100%;
-  .components--selected {
-    background-color: $buic-row-selection;
-    outline: 1px solid $buic-foreground-primary;
+  .components--selected,
+  .components--selected:hover {
+    background-color: var(--iui-color-background-accent-muted);
+    outline: 1px solid var(--iui-color-border-accent);
   }
-  .components--clickable {
+  .components--clickable:where(:not(.components--selected)) {
     cursor: pointer;
     &:hover {
-      background: $buic-row-hover;
+      background: var(--iui-color-background-hover);
     }
   }
   .components--hoverable:hover {
-    background-color: $buic-row-hover;
+    background-color: var(--iui-color-background-hover);
   }
 }

package/lib/esm/components-react/propertygrid/component/VirtualizedPropertyGrid.js CHANGED Viewed

@@ -121,7 +121,7 @@ export class VirtualizedPropertyGrid extends React.Component {
      * @returns current height of node.
      */
     calculateNodeHeight(node) {
-        const categoryHeaderHeight = 35;
+        const categoryHeaderHeight = 38;
         const categoryHeaderPadding = 4;
         const categoryPropertyHeight = 27;
         const bottomBorderPadding = 5;