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

@itwin/components-react 4.0.0-dev.1 → 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 (644) hide show

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;
 }
@@ -70,4 +65,4 @@
 .components-result-selector-button[disabled]:hover {
   background-color: $buic-background-control-disabled;
   cursor: default;
-}
+}

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

@@ -5,7 +5,7 @@ import "./IconPickerButton.scss";
 import * as React from "react";
 import { CommonProps } from "@itwin/core-react";
 /** Properties for the [[IconPicker]] React component
- * @alpha @deprecated in 3.0.
+ * @internal
  */
 export interface IconPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
     /** active string */
@@ -29,7 +29,7 @@ interface IconPickerState {
     icon: string;
 }
 /** IconPickerButton component
- * @alpha @deprecated in 3.0.
+ * @internal
  */
 export declare class IconPickerButton extends React.PureComponent<IconPickerProps, IconPickerState> {
     private _target;

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,~~EAAoB~~,MAAM,mBAAmB,CAAC;~~AA4ClE~~;;GAEG;AAEH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACjG,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,gBAAgB;AAChB,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AAEH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,EAAE,eAAe,CAAC;IACzF,OAAO,CAAC,OAAO,CAAwC;IAEvD,gBAAgB;IAChB,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAElD;IAEF,gBAAgB;gBACJ,KAAK,EAAE,eAAe;IAMlC,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,iBAAiB,CAQvB;IAEF,OAAO,CAAC,WAAW;IAYnB,gBAAgB;IACA,MAAM;CAyBvB"}
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

@@ -10,9 +10,10 @@ import "./IconPickerButton.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { RelativePosition } from "@itwin/appui-abstract";
-import { Popup, SvgSprite } from "@itwin/core-react";
+import { Icon, Popup } from "@itwin/core-react";
+import { SvgChevronDown } from "@itwin/itwinui-icons-react";
 /** IconItem Functional component
- * @alpha @deprecated in 3.0.
+ * @internal
  */
 // istanbul ignore next
 class IconItem extends React.PureComponent {
@@ -31,11 +32,11 @@ class IconItem extends React.PureComponent {
         };
         const classes = classnames("components-icon-swatch", this.props.className);
         return (React.createElement("button", { ...otherProps, className: classes, style: this.props.style, onClick: handleClick },
-            React.createElement(SvgSprite, { src: this.props.icon })));
+            React.createElement(Icon, { iconSpec: this.props.icon })));
     }
 }
 /** IconPickerButton component
- * @alpha @deprecated in 3.0.
+ * @internal
  */
 // istanbul ignore next
 export class IconPickerButton extends React.PureComponent {
@@ -72,8 +73,11 @@ export class IconPickerButton extends React.PureComponent {
         const buttonClassNames = classnames("components-iconpicker-button", this.props.readonly && "readonly", this.props.className);
         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(SvgSprite, { className: "iconpicker-button-sprite", src: this.state.icon }),
-                React.createElement("span", { className: "icon icon-chevron-down" })),
+                React.createElement(Icon, { className: "iconpicker-button-sprite", iconSpec: this.state.icon }),
+                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,~~KAAK~~,EAAE,~~SAAS~~,EAAE,MAAM,mBAAmB,CAAC;~~AAYlE~~;;GAEG;AACH,uBAAuB;AACvB,MAAM,QAAS,SAAQ,KAAK,CAAC,aAA4B;IACvD,gBAAgB;IAChB,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,MAAM;QACJ,6DAA6D;QAC7D,OAAO,EAAE,IAAI,EAAE,qCAAqC;QACpD,GAAG,UAAU,EACd,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,WAAW,GAAG,CAAC,EAAoB,EAAE,EAAE;YAC3C,IAAI,OAAO;gBACT,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,UAAU,CAAC,wBAAwB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAE3E,OAAO,CACL,mCAAY,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW;YACvF,oBAAC,~~SAAS~~,IAAC,~~GAAG~~,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,CAC5B,CACV,CAAC;IACJ,CAAC;CACF;AA6BD;;GAEG;AACH,uBAAuB;AACvB,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAA+C;IAQzF,gBAAgB;IAChB,YAAY,KAAsB;QAChC,KAAK,CAAC,KAAK,CAAC,CAAC;QATP,YAAO,GAAG,KAAK,CAAC,SAAS,EAAqB,CAAC;QAc/C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ;gBACrB,OAAO;YAET,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QACtE,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QACtC,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,IAAY,EAAE,EAAE;YAC3C,IAAI,CAAC,QAAQ,CACX,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAC1B,GAAG,EAAE;gBACH,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;oBACzB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAtBA,IAAI,CAAC,KAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAC3D,CAAC;IAuBO,WAAW,CAAC,KAAyB;QAC3C,MAAM,cAAc,GAAwB,EAAE,mBAAmB,EAAE,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,QAAQ,EAAE,CAAC;QAC7G,OAAO,CACL,6BAAK,SAAS,EAAC,uCAAuC;YACnD,KAAK,IAAI,gCAAK,KAAK,CAAM;YAC1B,4CAAiB,mCAAmC,EAAC,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAE,cAAc,IACrH,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE,CAAC,oBAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAI,CAAC,CAC1I,CACF,CACP,CAAC;IACJ,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAyB,CAAC;QACnE,MAAM,gBAAgB,GAAG,UAAU,CAAC,8BAA8B,EAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,UAAU,EACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL;YACE,+CAAoB,8BAA8B,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO;gBAC9K,oBAAC,~~SAAS~~,IAAC,SAAS,EAAC,0BAA0B,EAAC,~~GAAG~~,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI;gBACxE,8BAAM,SAAS,EAAC,~~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, ~~Popup~~, ~~SvgSprite~~ } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[IconItem]] React component\r\n * @~~alpha @deprecated in 3.0.\~~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 * @~~alpha @deprecated in 3.0.\~~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 <~~SvgSprite~~ ~~src~~={this.props.icon} />\r\n </button>\r\n );\r\n }\r\n}\r\n\r\n/* Properties for the [[IconPicker]] React component\r\n * @~~alpha @deprecated in 3.0.\~~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 * @~~alpha @deprecated in 3.0.\~~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 <~~SvgSprite~~ className=\"iconpicker-button-sprite\" ~~src~~={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":"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;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAY5D;;GAEG;AACH,uBAAuB;AACvB,MAAM,QAAS,SAAQ,KAAK,CAAC,aAA4B;IACvD,gBAAgB;IAChB,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,MAAM;QACJ,6DAA6D;QAC7D,OAAO,EAAE,IAAI,EAAE,qCAAqC;QACpD,GAAG,UAAU,EACd,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,WAAW,GAAG,CAAC,EAAoB,EAAE,EAAE;YAC3C,IAAI,OAAO;gBACT,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,UAAU,CAAC,wBAAwB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAE3E,OAAO,CACL,mCAAY,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW;YACvF,oBAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,CAC5B,CACV,CAAC;IACJ,CAAC;CACF;AA6BD;;GAEG;AACH,uBAAuB;AACvB,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAA+C;IAQzF,gBAAgB;IAChB,YAAY,KAAsB;QAChC,KAAK,CAAC,KAAK,CAAC,CAAC;QATP,YAAO,GAAG,KAAK,CAAC,SAAS,EAAqB,CAAC;QAc/C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ;gBACrB,OAAO;YAET,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QACtE,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QACtC,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,IAAY,EAAE,EAAE;YAC3C,IAAI,CAAC,QAAQ,CACX,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAC1B,GAAG,EAAE;gBACH,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;oBACzB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAtBA,IAAI,CAAC,KAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAC3D,CAAC;IAuBO,WAAW,CAAC,KAAyB;QAC3C,MAAM,cAAc,GAAwB,EAAE,mBAAmB,EAAE,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,QAAQ,EAAE,CAAC;QAC7G,OAAO,CACL,6BAAK,SAAS,EAAC,uCAAuC;YACnD,KAAK,IAAI,gCAAK,KAAK,CAAM;YAC1B,4CAAiB,mCAAmC,EAAC,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAE,cAAc,IACrH,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE,CAAC,oBAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAI,CAAC,CAC1I,CACF,CACP,CAAC;IACJ,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAyB,CAAC;QACnE,MAAM,gBAAgB,GAAG,UAAU,CAAC,8BAA8B,EAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,UAAU,EACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL;YACE,+CAAoB,8BAA8B,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO;gBAC9K,oBAAC,IAAI,IAAC,SAAS,EAAC,0BAA0B,EAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI;gBACxE,8BAAM,SAAS,EAAC,MAAM;;oBAAE,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,cAAc,OAAG,GAAI;wBAAQ,CAC/D;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\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,11 +6,11 @@
 @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-radius: 3px;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
   display: flex;
   align-items: center;
   width: fit-content;
@@ -24,7 +24,7 @@
   .icon {
     margin-left: 4px;
     font-size: 10px;
-    transition: color .1s ease;
+    transition: color 0.1s ease;
   }
   &:not(.readonly) {
@@ -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 {
@@ -54,7 +54,7 @@
         height: 34px;
         padding: 4px;
         border-width: 1px;
-        border-radius: 3px;
+        border-radius: var(--iui-border-radius-1);
         border-style: solid;
         border-color: rgba(0, 0, 0, 0.2);
         background: $buic-background-control;
@@ -67,9 +67,9 @@
         }
         &[disabled] {
-          opacity: .2;
+          opacity: 0.2;
         }
       }
     }
   }
-}
+}

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/ItemStyle.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@
  * @module Properties
  */
 import { CSSProperties } from "react";
-/** Style properties for styled item like [[CellItem]] and [[TreeNodeItem]]
+/** Style properties for styled item like [[TreeNodeItem]]
  * @public
  */
 export interface ItemStyle {
@@ -27,7 +27,7 @@ export interface ItemColorOverrides {
     backgroundColorSelected?: number;
 }
 /**
- * Style provider for stylable items like [[CellItem]] and [[TreeNodeItem]]
+ * Style provider for stylable items like [[TreeNodeItem]]
  * @public
  */
 export declare const ItemStyleProvider: {

package/lib/esm/components-react/properties/ItemStyle.js CHANGED Viewed

@@ -30,7 +30,7 @@ function getForegroundColor(isSelected, colorOverrides) {
     return undefined;
 }
 /**
- * Style provider for stylable items like [[CellItem]] and [[TreeNodeItem]]
+ * Style provider for stylable items like [[TreeNodeItem]]
  * @public
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention

package/lib/esm/components-react/properties/ItemStyle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ItemStyle.js","sourceRoot":"","sources":["../../../../src/components-react/properties/ItemStyle.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAIH,qEAAqE;AACrE,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AA4B3F,SAAS,kBAAkB,CAAC,UAAmB,EAAE,cAAmC;IAClF,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,IAAI,UAAU;QACZ,OAAO,cAAc,CAAC,uBAAuB,KAAK,SAAS;YACzD,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC,uBAAuB,CAAC;YAC3D,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,cAAc,CAAC,eAAe;QAChC,OAAO,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAE3D,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,kBAAkB,CAAC,UAAmB,EAAE,cAAmC;IAClF,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,IAAI,UAAU;QACZ,OAAO,cAAc,CAAC,aAAa,KAAK,SAAS;YAC/C,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC,aAAa,CAAC;YACjD,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,cAAc,CAAC,KAAK;QACtB,OAAO,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAEjD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;GAGG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B;;OAEG;IACH,WAAW,EAAE,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAa,EAAE,UAAoB,EAAiB,EAAE,CAAC,CAAC;QACtG,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,cAAc,CAAC;QACvD,eAAe,EAAE,kBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,cAAc,CAAC;QACjE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACvC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;KAC3C,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC;;OAEG;IACH,WAAW,EAAE,CAAC,EAAE,KAAK,EAAE,eAAe,EAAsB,EAAiB,EAAE,CAAC,CAAC;QAC/E,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;QACnD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;KAClF,CAAC;CACH,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 Properties\r\n /\r\n\r\nimport { CSSProperties } from \"react\";\r\n\r\n/* Converts a color value from a number to an HTML/CSS hex string /\r\nconst colorDecimalToHex = (decimal: number) => `#${decimal.toString(16).padStart(6, \"0\")}`;\r\n\r\n/* Style properties for styled item like [[~~CellItem]] and [[~~TreeNodeItem]]\r\n * @public\r\n /\r\nexport interface ItemStyle {\r\n /* Is text bolded /\r\n isBold?: boolean;\r\n /* Is text italic /\r\n isItalic?: boolean;\r\n /* Color overrides for styled item /\r\n colorOverrides?: ItemColorOverrides;\r\n}\r\n\r\n/* Color overrides for styled item\r\n * @public\r\n /\r\nexport interface ItemColorOverrides {\r\n /* Text/foreground color /\r\n color?: number;\r\n /* Background color /\r\n backgroundColor?: number;\r\n /* Selected item text/foreground color /\r\n colorSelected?: number;\r\n /* Selected item background color /\r\n backgroundColorSelected?: number;\r\n}\r\n\r\nfunction getBackgroundColor(isSelected: boolean, colorOverrides?: ItemColorOverrides) {\r\n if (!colorOverrides)\r\n return undefined;\r\n\r\n if (isSelected)\r\n return colorOverrides.backgroundColorSelected !== undefined\r\n ? colorDecimalToHex(colorOverrides.backgroundColorSelected)\r\n : undefined;\r\n\r\n if (colorOverrides.backgroundColor)\r\n return colorDecimalToHex(colorOverrides.backgroundColor);\r\n\r\n return undefined;\r\n}\r\n\r\nfunction getForegroundColor(isSelected: boolean, colorOverrides?: ItemColorOverrides) {\r\n if (!colorOverrides)\r\n return undefined;\r\n\r\n if (isSelected)\r\n return colorOverrides.colorSelected !== undefined\r\n ? colorDecimalToHex(colorOverrides.colorSelected)\r\n : undefined;\r\n\r\n if (colorOverrides.color)\r\n return colorDecimalToHex(colorOverrides.color);\r\n\r\n return undefined;\r\n}\r\n\r\n/\r\n Style provider for stylable items like [[~~CellItem]] and [[~~TreeNodeItem]]\r\n * @public\r\n /\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const ItemStyleProvider = {\r\n /\r\n Create CSS style from [[ItemStyle]]\r\n /\r\n createStyle: ({ colorOverrides, isBold, isItalic }: ItemStyle, isSelected?: boolean): CSSProperties => ({\r\n color: getForegroundColor(!!isSelected, colorOverrides),\r\n backgroundColor: getBackgroundColor(!!isSelected, colorOverrides),\r\n fontWeight: isBold ? \"bold\" : undefined,\r\n fontStyle: isItalic ? \"italic\" : undefined,\r\n }),\r\n};\r\n\r\n/\r\n Style provider for table rows\r\n * @public\r\n /\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const TableRowStyleProvider = {\r\n /\r\n Create CSS style from [[ItemStyle]]\r\n */\r\n createStyle: ({ color, backgroundColor }: ItemColorOverrides): CSSProperties => ({\r\n color: color ? colorDecimalToHex(color) : undefined,\r\n backgroundColor: backgroundColor ? colorDecimalToHex(backgroundColor) : undefined,\r\n }),\r\n};\r\n"]}
1	+ {"version":3,"file":"ItemStyle.js","sourceRoot":"","sources":["../../../../src/components-react/properties/ItemStyle.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAIH,qEAAqE;AACrE,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AA4B3F,SAAS,kBAAkB,CAAC,UAAmB,EAAE,cAAmC;IAClF,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,IAAI,UAAU;QACZ,OAAO,cAAc,CAAC,uBAAuB,KAAK,SAAS;YACzD,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC,uBAAuB,CAAC;YAC3D,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,cAAc,CAAC,eAAe;QAChC,OAAO,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAE3D,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,kBAAkB,CAAC,UAAmB,EAAE,cAAmC;IAClF,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,IAAI,UAAU;QACZ,OAAO,cAAc,CAAC,aAAa,KAAK,SAAS;YAC/C,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC,aAAa,CAAC;YACjD,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,cAAc,CAAC,KAAK;QACtB,OAAO,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAEjD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;GAGG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B;;OAEG;IACH,WAAW,EAAE,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAa,EAAE,UAAoB,EAAiB,EAAE,CAAC,CAAC;QACtG,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,cAAc,CAAC;QACvD,eAAe,EAAE,kBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,cAAc,CAAC;QACjE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACvC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;KAC3C,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC;;OAEG;IACH,WAAW,EAAE,CAAC,EAAE,KAAK,EAAE,eAAe,EAAsB,EAAiB,EAAE,CAAC,CAAC;QAC/E,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;QACnD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;KAClF,CAAC;CACH,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 Properties\r\n /\r\n\r\nimport { CSSProperties } from \"react\";\r\n\r\n/* Converts a color value from a number to an HTML/CSS hex string /\r\nconst colorDecimalToHex = (decimal: number) => `#${decimal.toString(16).padStart(6, \"0\")}`;\r\n\r\n/* Style properties for styled item like [[TreeNodeItem]]\r\n * @public\r\n /\r\nexport interface ItemStyle {\r\n /* Is text bolded /\r\n isBold?: boolean;\r\n /* Is text italic /\r\n isItalic?: boolean;\r\n /* Color overrides for styled item /\r\n colorOverrides?: ItemColorOverrides;\r\n}\r\n\r\n/* Color overrides for styled item\r\n * @public\r\n /\r\nexport interface ItemColorOverrides {\r\n /* Text/foreground color /\r\n color?: number;\r\n /* Background color /\r\n backgroundColor?: number;\r\n /* Selected item text/foreground color /\r\n colorSelected?: number;\r\n /* Selected item background color /\r\n backgroundColorSelected?: number;\r\n}\r\n\r\nfunction getBackgroundColor(isSelected: boolean, colorOverrides?: ItemColorOverrides) {\r\n if (!colorOverrides)\r\n return undefined;\r\n\r\n if (isSelected)\r\n return colorOverrides.backgroundColorSelected !== undefined\r\n ? colorDecimalToHex(colorOverrides.backgroundColorSelected)\r\n : undefined;\r\n\r\n if (colorOverrides.backgroundColor)\r\n return colorDecimalToHex(colorOverrides.backgroundColor);\r\n\r\n return undefined;\r\n}\r\n\r\nfunction getForegroundColor(isSelected: boolean, colorOverrides?: ItemColorOverrides) {\r\n if (!colorOverrides)\r\n return undefined;\r\n\r\n if (isSelected)\r\n return colorOverrides.colorSelected !== undefined\r\n ? colorDecimalToHex(colorOverrides.colorSelected)\r\n : undefined;\r\n\r\n if (colorOverrides.color)\r\n return colorDecimalToHex(colorOverrides.color);\r\n\r\n return undefined;\r\n}\r\n\r\n/\r\n Style provider for stylable items like [[TreeNodeItem]]\r\n * @public\r\n /\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const ItemStyleProvider = {\r\n /\r\n Create CSS style from [[ItemStyle]]\r\n /\r\n createStyle: ({ colorOverrides, isBold, isItalic }: ItemStyle, isSelected?: boolean): CSSProperties => ({\r\n color: getForegroundColor(!!isSelected, colorOverrides),\r\n backgroundColor: getBackgroundColor(!!isSelected, colorOverrides),\r\n fontWeight: isBold ? \"bold\" : undefined,\r\n fontStyle: isItalic ? \"italic\" : undefined,\r\n }),\r\n};\r\n\r\n/\r\n Style provider for table rows\r\n * @public\r\n /\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const TableRowStyleProvider = {\r\n /\r\n Create CSS style from [[ItemStyle]]\r\n */\r\n createStyle: ({ color, backgroundColor }: ItemColorOverrides): CSSProperties => ({\r\n color: color ? colorDecimalToHex(color) : undefined,\r\n backgroundColor: backgroundColor ? colorDecimalToHex(backgroundColor) : undefined,\r\n }),\r\n};\r\n"]}

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

@@ -59,7 +59,7 @@ export class NonPrimitivePropertyRenderer extends React.Component {
         let items = this.props.propertyRecord.getChildrenRecords();
         if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)
             items = this.overrideArrayChildrenNames(items);
-        const { children, indentation, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        const { indentation, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
         return (React.createElement(React.Fragment, null,
             this.props.isCollapsible
                 ?

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NonPrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/NonPrimitivePropertyRenderer.tsx"],"names":[],"mappings":"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~~QAAQ,EAAE,~~WAAW,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;~~QAChH~~,OAAO,CACL;YACG,IAAI,CAAC,KAAK,CAAC,aAAa;gBACvB,CAAC;oBACD,oBAAC,YAAY,IACX,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAC/C,KAAK,GACT;gBACF,CAAC,CAAC,SAAS;YAEZ,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,SAAS,CAC1E,CACJ,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 \"./NonPrimitivePropertyRenderer.scss\";\r\nimport as React from \"react\";\r\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { CommonPropertyRenderer } from \"./CommonPropertyRenderer\";\r\nimport { NonPrimitivePropertyLabelRenderer } from \"./label/NonPrimitivePropertyLabelRenderer\";\r\nimport { PrimitiveRendererProps } from \"./PrimitivePropertyRenderer\";\r\nimport { PropertyRenderer } from \"./PropertyRenderer\";\r\nimport { PropertyView } from \"./PropertyView\";\r\n\r\n/** Properties of [[NonPrimitivePropertyRenderer]] React component\r\n * @public\r\n /\r\nexport interface NonPrimitivePropertyRendererProps extends PrimitiveRendererProps {\r\n /* Can struct/array property be collapsed /\r\n isCollapsible?: boolean;\r\n}\r\n\r\n/* State of [[NonPrimitivePropertyRenderer]] React component\r\n * @internal\r\n /\r\ninterface NonPrimitivePropertyRendererState {\r\n /* Is struct/array property expanded /\r\n isExpanded?: boolean;\r\n}\r\n\r\n/* React Component that renders struct and array properties\r\n * @public\r\n /\r\nexport class NonPrimitivePropertyRenderer extends React.Component<NonPrimitivePropertyRendererProps, NonPrimitivePropertyRendererState> {\r\n /* @internal /\r\n public override readonly state: NonPrimitivePropertyRendererState = {\r\n /* If it's not collapsible, that means it's expanded by default and can't be collapsed /\r\n isExpanded: !this.props.isCollapsible \|\| this.props.propertyRecord.autoExpand,\r\n };\r\n\r\n constructor(props: NonPrimitivePropertyRendererProps) {\r\n super(props);\r\n }\r\n\r\n private _onExpanded = () => {\r\n this.setState({ isExpanded: true });\r\n };\r\n\r\n private _onCollapsed = () => {\r\n this.setState({ isExpanded: false });\r\n };\r\n\r\n private getLabel(props: NonPrimitivePropertyRendererProps, state: NonPrimitivePropertyRendererState): React.ReactNode {\r\n const { orientation, indentation, width, columnRatio, columnInfo } = props;\r\n // istanbul ignore next\r\n const minLabelWidth = columnInfo?.minLabelWidth;\r\n const offset = CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, minLabelWidth);\r\n\r\n let displayLabel = props.propertyRecord.property.displayLabel;\r\n if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)\r\n displayLabel = `${displayLabel} (${this.props.propertyRecord.value.items.length})`;\r\n\r\n return (\r\n <NonPrimitivePropertyLabelRenderer\r\n isExpanded={!!state.isExpanded}\r\n onExpand={this._onExpanded}\r\n onCollapse={this._onCollapsed}\r\n offset={offset}\r\n renderColon={false}\r\n >\r\n {displayLabel}\r\n </NonPrimitivePropertyLabelRenderer>\r\n );\r\n }\r\n\r\n private overrideArrayChildrenNames(items: PropertyRecord[]) {\r\n const modifiedProperties: PropertyRecord[] = items.map((item, index): PropertyRecord => {\r\n const newProperty = { ...item.property };\r\n newProperty.displayLabel = `[${index + 1}]`;\r\n newProperty.name = `${newProperty.name}_${index}`;\r\n return new PropertyRecord(item.value, newProperty);\r\n });\r\n\r\n return modifiedProperties;\r\n }\r\n\r\n private _renderPropertyForItem = (item: PropertyRecord) => {\r\n const prefix = this.props.uniqueKey ? this.props.uniqueKey : this.props.propertyRecord.property.name;\r\n const uniqueKey = `${prefix}_${item.property.name}`;\r\n return (\r\n <PropertyRenderer\r\n key={uniqueKey}\r\n uniqueKey={uniqueKey}\r\n propertyRecord={item}\r\n indentation={this.props.indentation ? this.props.indentation + 1 : 1}\r\n orientation={this.props.orientation}\r\n columnRatio={this.props.columnRatio}\r\n actionButtonRenderers={this.props.actionButtonRenderers}\r\n onColumnRatioChanged={this.props.onColumnRatioChanged}\r\n width={this.props.width}\r\n isResizeHandleHovered={this.props.isResizeHandleHovered}\r\n onResizeHandleHoverChanged={this.props.onResizeHandleHoverChanged}\r\n isResizeHandleBeingDragged={this.props.isResizeHandleBeingDragged}\r\n onResizeHandleDragChanged={this.props.onResizeHandleDragChanged}\r\n columnInfo={this.props.columnInfo}\r\n />\r\n );\r\n };\r\n\r\n /* @internal */\r\n public override render() {\r\n let items: PropertyRecord[] = this.props.propertyRecord.getChildrenRecords();\r\n if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)\r\n items = this.overrideArrayChildrenNames(items);\r\n\r\n const { ~~children,~~ indentation, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n return (\r\n <>\r\n {this.props.isCollapsible\r\n ?\r\n <PropertyView\r\n labelElement={this.getLabel(this.props, this.state)}\r\n {...props}\r\n />\r\n : undefined}\r\n\r\n {this.state.isExpanded ? items.map(this._renderPropertyForItem) : undefined}\r\n </>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"NonPrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/NonPrimitivePropertyRenderer.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,qCAAqC,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC;AAE9F,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAkB9C;;GAEG;AACH,MAAM,OAAO,4BAA6B,SAAQ,KAAK,CAAC,SAA+E;IAOrI,YAAY,KAAwC;QAClD,KAAK,CAAC,KAAK,CAAC,CAAC;QAPf,gBAAgB;QACS,UAAK,GAAsC;YAClE,0FAA0F;YAC1F,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;SAC9E,CAAC;QAMM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QACtC,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;QACvC,CAAC,CAAC;QAoCM,2BAAsB,GAAG,CAAC,IAAoB,EAAE,EAAE;YACxD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC;YACrG,MAAM,SAAS,GAAG,GAAG,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACpD,OAAO,CACL,oBAAC,gBAAgB,IACf,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,IAAI,EACpB,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EACpE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACnC,qBAAqB,EAAE,IAAI,CAAC,KAAK,CAAC,qBAAqB,EACvD,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,EACrD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,qBAAqB,EAAE,IAAI,CAAC,KAAK,CAAC,qBAAqB,EACvD,0BAA0B,EAAE,IAAI,CAAC,KAAK,CAAC,0BAA0B,EACjE,0BAA0B,EAAE,IAAI,CAAC,KAAK,CAAC,0BAA0B,EACjE,yBAAyB,EAAE,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAC/D,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GACjC,CACH,CAAC;QACJ,CAAC,CAAC;IAjEF,CAAC;IAUO,QAAQ,CAAC,KAAwC,EAAE,KAAwC;QACjG,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;QAC3E,uBAAuB;QACvB,MAAM,aAAa,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC;QAChD,MAAM,MAAM,GAAG,sBAAsB,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;QAElH,IAAI,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC;QAC9D,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,KAAK,mBAAmB,CAAC,KAAK;YAC3E,YAAY,GAAG,GAAG,YAAY,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;QAErF,OAAO,CACL,oBAAC,iCAAiC,IAChC,UAAU,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU,EAC9B,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,UAAU,EAAE,IAAI,CAAC,YAAY,EAC7B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,KAAK,IAEjB,YAAY,CACqB,CACrC,CAAC;IACJ,CAAC;IAEO,0BAA0B,CAAC,KAAuB;QACxD,MAAM,kBAAkB,GAAqB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAkB,EAAE;YACrF,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YACzC,WAAW,CAAC,YAAY,GAAG,IAAI,KAAK,GAAG,CAAC,GAAG,CAAC;YAC5C,WAAW,CAAC,IAAI,GAAG,GAAG,WAAW,CAAC,IAAI,IAAI,KAAK,EAAE,CAAC;YAClD,OAAO,IAAI,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;QAEH,OAAO,kBAAkB,CAAC;IAC5B,CAAC;IAyBD,gBAAgB;IACA,MAAM;QACpB,IAAI,KAAK,GAAqB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,kBAAkB,EAAE,CAAC;QAC7E,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,KAAK,mBAAmB,CAAC,KAAK;YAC3E,KAAK,GAAG,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC;QAEjD,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;QACtG,OAAO,CACL;YACG,IAAI,CAAC,KAAK,CAAC,aAAa;gBACvB,CAAC;oBACD,oBAAC,YAAY,IACX,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAC/C,KAAK,GACT;gBACF,CAAC,CAAC,SAAS;YAEZ,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,SAAS,CAC1E,CACJ,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 \"./NonPrimitivePropertyRenderer.scss\";\r\nimport as React from \"react\";\r\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { CommonPropertyRenderer } from \"./CommonPropertyRenderer\";\r\nimport { NonPrimitivePropertyLabelRenderer } from \"./label/NonPrimitivePropertyLabelRenderer\";\r\nimport { PrimitiveRendererProps } from \"./PrimitivePropertyRenderer\";\r\nimport { PropertyRenderer } from \"./PropertyRenderer\";\r\nimport { PropertyView } from \"./PropertyView\";\r\n\r\n/** Properties of [[NonPrimitivePropertyRenderer]] React component\r\n * @public\r\n /\r\nexport interface NonPrimitivePropertyRendererProps extends PrimitiveRendererProps {\r\n /* Can struct/array property be collapsed /\r\n isCollapsible?: boolean;\r\n}\r\n\r\n/* State of [[NonPrimitivePropertyRenderer]] React component\r\n * @internal\r\n /\r\ninterface NonPrimitivePropertyRendererState {\r\n /* Is struct/array property expanded /\r\n isExpanded?: boolean;\r\n}\r\n\r\n/* React Component that renders struct and array properties\r\n * @public\r\n /\r\nexport class NonPrimitivePropertyRenderer extends React.Component<NonPrimitivePropertyRendererProps, NonPrimitivePropertyRendererState> {\r\n /* @internal /\r\n public override readonly state: NonPrimitivePropertyRendererState = {\r\n /* If it's not collapsible, that means it's expanded by default and can't be collapsed /\r\n isExpanded: !this.props.isCollapsible \|\| this.props.propertyRecord.autoExpand,\r\n };\r\n\r\n constructor(props: NonPrimitivePropertyRendererProps) {\r\n super(props);\r\n }\r\n\r\n private _onExpanded = () => {\r\n this.setState({ isExpanded: true });\r\n };\r\n\r\n private _onCollapsed = () => {\r\n this.setState({ isExpanded: false });\r\n };\r\n\r\n private getLabel(props: NonPrimitivePropertyRendererProps, state: NonPrimitivePropertyRendererState): React.ReactNode {\r\n const { orientation, indentation, width, columnRatio, columnInfo } = props;\r\n // istanbul ignore next\r\n const minLabelWidth = columnInfo?.minLabelWidth;\r\n const offset = CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, minLabelWidth);\r\n\r\n let displayLabel = props.propertyRecord.property.displayLabel;\r\n if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)\r\n displayLabel = `${displayLabel} (${this.props.propertyRecord.value.items.length})`;\r\n\r\n return (\r\n <NonPrimitivePropertyLabelRenderer\r\n isExpanded={!!state.isExpanded}\r\n onExpand={this._onExpanded}\r\n onCollapse={this._onCollapsed}\r\n offset={offset}\r\n renderColon={false}\r\n >\r\n {displayLabel}\r\n </NonPrimitivePropertyLabelRenderer>\r\n );\r\n }\r\n\r\n private overrideArrayChildrenNames(items: PropertyRecord[]) {\r\n const modifiedProperties: PropertyRecord[] = items.map((item, index): PropertyRecord => {\r\n const newProperty = { ...item.property };\r\n newProperty.displayLabel = `[${index + 1}]`;\r\n newProperty.name = `${newProperty.name}_${index}`;\r\n return new PropertyRecord(item.value, newProperty);\r\n });\r\n\r\n return modifiedProperties;\r\n }\r\n\r\n private _renderPropertyForItem = (item: PropertyRecord) => {\r\n const prefix = this.props.uniqueKey ? this.props.uniqueKey : this.props.propertyRecord.property.name;\r\n const uniqueKey = `${prefix}_${item.property.name}`;\r\n return (\r\n <PropertyRenderer\r\n key={uniqueKey}\r\n uniqueKey={uniqueKey}\r\n propertyRecord={item}\r\n indentation={this.props.indentation ? this.props.indentation + 1 : 1}\r\n orientation={this.props.orientation}\r\n columnRatio={this.props.columnRatio}\r\n actionButtonRenderers={this.props.actionButtonRenderers}\r\n onColumnRatioChanged={this.props.onColumnRatioChanged}\r\n width={this.props.width}\r\n isResizeHandleHovered={this.props.isResizeHandleHovered}\r\n onResizeHandleHoverChanged={this.props.onResizeHandleHoverChanged}\r\n isResizeHandleBeingDragged={this.props.isResizeHandleBeingDragged}\r\n onResizeHandleDragChanged={this.props.onResizeHandleDragChanged}\r\n columnInfo={this.props.columnInfo}\r\n />\r\n );\r\n };\r\n\r\n /* @internal */\r\n public override render() {\r\n let items: PropertyRecord[] = this.props.propertyRecord.getChildrenRecords();\r\n if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)\r\n items = this.overrideArrayChildrenNames(items);\r\n\r\n const { indentation, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n return (\r\n <>\r\n {this.props.isCollapsible\r\n ?\r\n <PropertyView\r\n labelElement={this.getLabel(this.props, this.state)}\r\n {...props}\r\n />\r\n : undefined}\r\n\r\n {this.state.isExpanded ? items.map(this._renderPropertyForItem) : undefined}\r\n </>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -10,8 +10,8 @@
   display: grid;
   grid-row-gap: 10px;
-  border-radius: 3px;
+  border-radius: var(--iui-border-radius-1);
   border: solid 1px $uicore-gray-9;
   background-color: #ffffff;
-}
+}

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

@@ -21,7 +21,7 @@ export class PrimitivePropertyRenderer extends React.Component {
     /** @internal */
     render() {
         var _a, _b;
-        const { children, indentation, highlight, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        const { indentation, highlight, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
         const displayLabel = this.props.propertyRecord.property.displayLabel;
         const offset = CommonPropertyRenderer.getLabelOffset(indentation, props.orientation, props.width, props.columnRatio, (_a = props.columnInfo) === null || _a === void 0 ? void 0 : _a.minLabelWidth);
         const activeMatchIndex = this.props.propertyRecord.property.name === ((_b = highlight === null || highlight === void 0 ? void 0 : highlight.activeHighlight) === null || _b === void 0 ? void 0 : _b.highlightedItemIdentifier) ? highlight.activeHighlight.highlightIndex : undefined;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/PrimitivePropertyRenderer.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAExF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,KAAK,CAAC,SAAiC;IACpF,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAED,gBAAgB;IACA,MAAM;;QACpB,MAAM,EAAE,~~QAAQ,EAAE,~~WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;~~QAC3H~~,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC;QACrE,MAAM,MAAM,GAAG,sBAAsB,CAAC,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAAC,CAAC;QAEtJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,MAAK,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,eAAe,0CAAE,yBAAyB,CAAA,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;QAClL,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC;YACvB,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,CAAC,eAAe,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;YACpG,YAAY,CAAC;QAEf,OAAO,CACL,oBAAC,YAAY,OACP,KAAK,EACT,YAAY,EACV,oBAAC,8BAA8B,IAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE,YAAY,IAClI,KAAK,CACyB,GACnC,CACH,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 as React from \"react\";\r\nimport { Orientation } from \"@itwin/core-react\";\r\nimport { HighlightedText } from \"../../common/HighlightedText\";\r\nimport { HighlightingComponentProps } from \"../../common/HighlightingComponentProps\";\r\nimport { CommonPropertyRenderer } from \"./CommonPropertyRenderer\";\r\nimport { PrimitivePropertyLabelRenderer } from \"./label/PrimitivePropertyLabelRenderer\";\r\nimport { SharedRendererProps } from \"./PropertyRenderer\";\r\nimport { PropertyView } from \"./PropertyView\";\r\n\r\n/** Properties of [[PrimitivePropertyRenderer]] React component\r\n * @public\r\n /\r\nexport interface PrimitiveRendererProps extends SharedRendererProps {\r\n /* Property value as a React element /\r\n valueElement?: React.ReactNode;\r\n /* Render callback for property value. If specified, `valueElement` is ignored. /\r\n valueElementRenderer?: () => React.ReactNode;\r\n /* Multiplier of how much the property is indented to the right /\r\n indentation?: number;\r\n /* Properties used for highlighting\r\n /\r\n highlight?: HighlightingComponentProps;\r\n}\r\n\r\n/* React Component that renders primitive properties\r\n * @public\r\n /\r\nexport class PrimitivePropertyRenderer extends React.Component<PrimitiveRendererProps> {\r\n constructor(props: PrimitiveRendererProps) {\r\n super(props);\r\n }\r\n\r\n /* @internal */\r\n public override render() {\r\n const { ~~children,~~ indentation, highlight, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n const displayLabel = this.props.propertyRecord.property.displayLabel;\r\n const offset = CommonPropertyRenderer.getLabelOffset(indentation, props.orientation, props.width, props.columnRatio, props.columnInfo?.minLabelWidth);\r\n\r\n const activeMatchIndex = this.props.propertyRecord.property.name === highlight?.activeHighlight?.highlightedItemIdentifier ? highlight.activeHighlight.highlightIndex : undefined;\r\n const label = highlight ?\r\n (HighlightedText({ text: displayLabel, searchText: highlight.highlightedText, activeMatchIndex })) :\r\n displayLabel;\r\n\r\n return (\r\n <PropertyView\r\n {...props}\r\n labelElement={\r\n <PrimitivePropertyLabelRenderer offset={offset} renderColon={this.props.orientation === Orientation.Horizontal} tooltip={displayLabel}>\r\n {label}\r\n </PrimitivePropertyLabelRenderer>}\r\n />\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"PrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/PrimitivePropertyRenderer.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAExF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,KAAK,CAAC,SAAiC;IACpF,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAED,gBAAgB;IACA,MAAM;;QACpB,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;QACjH,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC;QACrE,MAAM,MAAM,GAAG,sBAAsB,CAAC,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAAC,CAAC;QAEtJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,MAAK,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,eAAe,0CAAE,yBAAyB,CAAA,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;QAClL,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC;YACvB,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,CAAC,eAAe,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;YACpG,YAAY,CAAC;QAEf,OAAO,CACL,oBAAC,YAAY,OACP,KAAK,EACT,YAAY,EACV,oBAAC,8BAA8B,IAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE,YAAY,IAClI,KAAK,CACyB,GACnC,CACH,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 as React from \"react\";\r\nimport { Orientation } from \"@itwin/core-react\";\r\nimport { HighlightedText } from \"../../common/HighlightedText\";\r\nimport { HighlightingComponentProps } from \"../../common/HighlightingComponentProps\";\r\nimport { CommonPropertyRenderer } from \"./CommonPropertyRenderer\";\r\nimport { PrimitivePropertyLabelRenderer } from \"./label/PrimitivePropertyLabelRenderer\";\r\nimport { SharedRendererProps } from \"./PropertyRenderer\";\r\nimport { PropertyView } from \"./PropertyView\";\r\n\r\n/** Properties of [[PrimitivePropertyRenderer]] React component\r\n * @public\r\n /\r\nexport interface PrimitiveRendererProps extends SharedRendererProps {\r\n /* Property value as a React element /\r\n valueElement?: React.ReactNode;\r\n /* Render callback for property value. If specified, `valueElement` is ignored. /\r\n valueElementRenderer?: () => React.ReactNode;\r\n /* Multiplier of how much the property is indented to the right /\r\n indentation?: number;\r\n /* Properties used for highlighting\r\n /\r\n highlight?: HighlightingComponentProps;\r\n}\r\n\r\n/* React Component that renders primitive properties\r\n * @public\r\n /\r\nexport class PrimitivePropertyRenderer extends React.Component<PrimitiveRendererProps> {\r\n constructor(props: PrimitiveRendererProps) {\r\n super(props);\r\n }\r\n\r\n /* @internal */\r\n public override render() {\r\n const { indentation, highlight, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n const displayLabel = this.props.propertyRecord.property.displayLabel;\r\n const offset = CommonPropertyRenderer.getLabelOffset(indentation, props.orientation, props.width, props.columnRatio, props.columnInfo?.minLabelWidth);\r\n\r\n const activeMatchIndex = this.props.propertyRecord.property.name === highlight?.activeHighlight?.highlightedItemIdentifier ? highlight.activeHighlight.highlightIndex : undefined;\r\n const label = highlight ?\r\n (HighlightedText({ text: displayLabel, searchText: highlight.highlightedText, activeMatchIndex })) :\r\n displayLabel;\r\n\r\n return (\r\n <PropertyView\r\n {...props}\r\n labelElement={\r\n <PrimitivePropertyLabelRenderer offset={offset} renderColon={this.props.orientation === Orientation.Horizontal} tooltip={displayLabel}>\r\n {label}\r\n </PrimitivePropertyLabelRenderer>}\r\n />\r\n );\r\n }\r\n}\r\n"]}

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

@@ -63,7 +63,7 @@ export class PropertyRenderer extends React.Component {
     }
     /** @internal */
     render() {
-        const { children, propertyValueRendererManager, isEditing, onEditCommit, onEditCancel, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        const { propertyValueRendererManager, isEditing, onEditCommit, onEditCancel, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
         const primitiveRendererProps = {
             ...props,
             valueElement: this.state.displayValue,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/PropertyRenderer.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 Properties\r\n /\r\n\r\nimport as React from \"react\";\r\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { Orientation, RatioChangeResult } from \"@itwin/core-react\";\r\nimport { HighlightingComponentProps } from \"../../common/HighlightingComponentProps\";\r\nimport { EditorContainer, PropertyUpdatedArgs } from \"../../editors/EditorContainer\";\r\nimport { UiComponents } from \"../../UiComponents\";\r\nimport { PropertyValueRendererManager } from \"../ValueRendererManager\";\r\nimport { ActionButtonRenderer } from \"./ActionButtonRenderer\";\r\nimport { CommonPropertyRenderer } from \"./CommonPropertyRenderer\";\r\nimport { NonPrimitivePropertyRenderer } from \"./NonPrimitivePropertyRenderer\";\r\nimport { PrimitivePropertyRenderer, PrimitiveRendererProps } from \"./PrimitivePropertyRenderer\";\r\nimport { PropertyGridColumnInfo } from \"./PropertyGridColumns\";\r\n\r\n/** Properties shared by all renderers and PropertyView\r\n * @public\r\n /\r\nexport interface SharedRendererProps {\r\n /* PropertyRecord to render /\r\n propertyRecord: PropertyRecord;\r\n /* Unique string, that identifies this property component. Should be used if onClick or onRightClick are provided /\r\n uniqueKey?: string;\r\n /* Orientation to use for displaying the property /\r\n orientation: Orientation;\r\n /* Controls component selection /\r\n isSelected?: boolean;\r\n /* Called when property gets clicked. If undefined, clicking is disabled /\r\n onClick?: (property: PropertyRecord, key?: string) => void;\r\n /* Called when property gets right clicked. If undefined, right clicking is not working /\r\n onRightClick?: (property: PropertyRecord, key?: string) => void;\r\n /* Called to show a context menu for properties /\r\n onContextMenu?: (property: PropertyRecord, e: React.MouseEvent) => void;\r\n /* Ratio between label and value cells /\r\n columnRatio?: number;\r\n /* Callback to column ratio changed event /\r\n onColumnRatioChanged?: (ratio: number) => void \| RatioChangeResult;\r\n /* Indicates that properties have hover effect /\r\n isHoverable?: boolean;\r\n /* Indicates that properties can be selected /\r\n isSelectable?: boolean;\r\n /* Width of the whole property element /\r\n width?: number;\r\n /* Array of action button renderers /\r\n actionButtonRenderers?: ActionButtonRenderer[];\r\n /* Is resize handle hovered /\r\n isResizeHandleHovered?: boolean;\r\n /* Callback to hover event change /\r\n onResizeHandleHoverChanged?: (isHovered: boolean) => void;\r\n /* Is resize handle being dragged /\r\n isResizeHandleBeingDragged?: boolean;\r\n /* Callback to drag event change /\r\n onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\r\n /* Information for styling property grid columns /\r\n columnInfo?: PropertyGridColumnInfo;\r\n}\r\n\r\n/* Properties of [[PropertyRenderer]] React component\r\n * @public\r\n /\r\nexport interface PropertyRendererProps extends SharedRendererProps {\r\n /* Custom value renderer /\r\n propertyValueRendererManager?: PropertyValueRendererManager;\r\n /* Multiplier of how much the property is indented to the right /\r\n indentation?: number;\r\n /* Indicates property is being edited /\r\n isEditing?: boolean;\r\n /* Called when property edit is committed. /\r\n onEditCommit?: (args: PropertyUpdatedArgs) => void;\r\n /* Called when property edit is cancelled. /\r\n onEditCancel?: () => void;\r\n /* Props used for highlighting. /\r\n highlight?: HighlightingComponentProps;\r\n}\r\n\r\n/* State of [[PropertyRenderer]] React component\r\n * @internal\r\n /\r\ninterface PropertyRendererState {\r\n /* Currently loaded property value /\r\n displayValue?: React.ReactNode;\r\n}\r\n\r\n/* A React component that renders properties\r\n * @public\r\n /\r\nexport class PropertyRenderer extends React.Component<PropertyRendererProps, PropertyRendererState> {\r\n /* @internal /\r\n public override readonly state: Readonly<PropertyRendererState> = {\r\n displayValue: UiComponents.translate(\"general.loading\"),\r\n };\r\n\r\n constructor(props: PropertyRendererProps) {\r\n super(props);\r\n }\r\n\r\n public static getLabelOffset(indentation?: number, orientation?: Orientation, width?: number, columnRatio?: number, minColumnLabelWidth?: number): number {\r\n return CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, minColumnLabelWidth);\r\n }\r\n\r\n private updateDisplayValue(props: PropertyRendererProps) {\r\n if (props.isEditing) {\r\n this.updateDisplayValueAsEditor(props);\r\n return;\r\n }\r\n\r\n const displayValue = CommonPropertyRenderer.createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager);\r\n this.setState({ displayValue });\r\n }\r\n\r\n private _onEditCommit = (args: PropertyUpdatedArgs) => {\r\n // istanbul ignore else\r\n if (this.props.onEditCommit)\r\n this.props.onEditCommit(args);\r\n };\r\n\r\n private _onEditCancel = () => {\r\n // istanbul ignore else\r\n if (this.props.onEditCancel)\r\n this.props.onEditCancel();\r\n };\r\n\r\n /* Display property record value in an editor /\r\n public updateDisplayValueAsEditor(props: PropertyRendererProps) {\r\n this.setState({\r\n displayValue:\r\n <EditorContainer\r\n propertyRecord={props.propertyRecord}\r\n onCommit={this._onEditCommit}\r\n onCancel={this._onEditCancel}\r\n setFocus={true}\r\n />,\r\n });\r\n }\r\n\r\n /* @internal /\r\n public override componentDidMount() {\r\n this.updateDisplayValue(this.props);\r\n }\r\n\r\n /* @internal /\r\n public override componentDidUpdate(prevProps: PropertyRendererProps) {\r\n if (prevProps.propertyRecord !== this.props.propertyRecord \|\|\r\n prevProps.isEditing !== this.props.isEditing \|\|\r\n prevProps.orientation !== this.props.orientation)\r\n this.updateDisplayValue(this.props);\r\n }\r\n\r\n /* @internal */\r\n public override render() {\r\n const { children, propertyValueRendererManager, isEditing, onEditCommit, onEditCancel, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n const primitiveRendererProps: PrimitiveRendererProps = {\r\n ...props,\r\n valueElement: this.state.displayValue,\r\n indentation: this.props.indentation,\r\n };\r\n\r\n switch (this.props.propertyRecord.value.valueFormat) {\r\n case PropertyValueFormat.Primitive:\r\n return (\r\n <PrimitivePropertyRenderer {...primitiveRendererProps} />\r\n );\r\n case PropertyValueFormat.Array:\r\n // If array is empty, render it as a primitive property\r\n if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\r\n && this.props.propertyRecord.value.items.length === 0)\r\n return (\r\n <PrimitivePropertyRenderer {...primitiveRendererProps} />\r\n );\r\n // eslint-disable-next-line no-fallthrough\r\n case PropertyValueFormat.Struct:\r\n return (\r\n <NonPrimitivePropertyRenderer\r\n isCollapsible={true}\r\n {...primitiveRendererProps}\r\n />\r\n );\r\n }\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"PropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/PropertyRenderer.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 Properties\r\n /\r\n\r\nimport as React from \"react\";\r\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { Orientation, RatioChangeResult } from \"@itwin/core-react\";\r\nimport { HighlightingComponentProps } from \"../../common/HighlightingComponentProps\";\r\nimport { EditorContainer, PropertyUpdatedArgs } from \"../../editors/EditorContainer\";\r\nimport { UiComponents } from \"../../UiComponents\";\r\nimport { PropertyValueRendererManager } from \"../ValueRendererManager\";\r\nimport { ActionButtonRenderer } from \"./ActionButtonRenderer\";\r\nimport { CommonPropertyRenderer } from \"./CommonPropertyRenderer\";\r\nimport { NonPrimitivePropertyRenderer } from \"./NonPrimitivePropertyRenderer\";\r\nimport { PrimitivePropertyRenderer, PrimitiveRendererProps } from \"./PrimitivePropertyRenderer\";\r\nimport { PropertyGridColumnInfo } from \"./PropertyGridColumns\";\r\n\r\n/** Properties shared by all renderers and PropertyView\r\n * @public\r\n /\r\nexport interface SharedRendererProps {\r\n /* PropertyRecord to render /\r\n propertyRecord: PropertyRecord;\r\n /* Unique string, that identifies this property component. Should be used if onClick or onRightClick are provided /\r\n uniqueKey?: string;\r\n /* Orientation to use for displaying the property /\r\n orientation: Orientation;\r\n /* Controls component selection /\r\n isSelected?: boolean;\r\n /* Called when property gets clicked. If undefined, clicking is disabled /\r\n onClick?: (property: PropertyRecord, key?: string) => void;\r\n /* Called when property gets right clicked. If undefined, right clicking is not working /\r\n onRightClick?: (property: PropertyRecord, key?: string) => void;\r\n /* Called to show a context menu for properties /\r\n onContextMenu?: (property: PropertyRecord, e: React.MouseEvent) => void;\r\n /* Ratio between label and value cells /\r\n columnRatio?: number;\r\n /* Callback to column ratio changed event /\r\n onColumnRatioChanged?: (ratio: number) => void \| RatioChangeResult;\r\n /* Indicates that properties have hover effect /\r\n isHoverable?: boolean;\r\n /* Indicates that properties can be selected /\r\n isSelectable?: boolean;\r\n /* Width of the whole property element /\r\n width?: number;\r\n /* Array of action button renderers /\r\n actionButtonRenderers?: ActionButtonRenderer[];\r\n /* Is resize handle hovered /\r\n isResizeHandleHovered?: boolean;\r\n /* Callback to hover event change /\r\n onResizeHandleHoverChanged?: (isHovered: boolean) => void;\r\n /* Is resize handle being dragged /\r\n isResizeHandleBeingDragged?: boolean;\r\n /* Callback to drag event change /\r\n onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\r\n /* Information for styling property grid columns /\r\n columnInfo?: PropertyGridColumnInfo;\r\n}\r\n\r\n/* Properties of [[PropertyRenderer]] React component\r\n * @public\r\n /\r\nexport interface PropertyRendererProps extends SharedRendererProps {\r\n /* Custom value renderer /\r\n propertyValueRendererManager?: PropertyValueRendererManager;\r\n /* Multiplier of how much the property is indented to the right /\r\n indentation?: number;\r\n /* Indicates property is being edited /\r\n isEditing?: boolean;\r\n /* Called when property edit is committed. /\r\n onEditCommit?: (args: PropertyUpdatedArgs) => void;\r\n /* Called when property edit is cancelled. /\r\n onEditCancel?: () => void;\r\n /* Props used for highlighting. /\r\n highlight?: HighlightingComponentProps;\r\n}\r\n\r\n/* State of [[PropertyRenderer]] React component\r\n * @internal\r\n /\r\ninterface PropertyRendererState {\r\n /* Currently loaded property value /\r\n displayValue?: React.ReactNode;\r\n}\r\n\r\n/* A React component that renders properties\r\n * @public\r\n /\r\nexport class PropertyRenderer extends React.Component<PropertyRendererProps, PropertyRendererState> {\r\n /* @internal /\r\n public override readonly state: Readonly<PropertyRendererState> = {\r\n displayValue: UiComponents.translate(\"general.loading\"),\r\n };\r\n\r\n constructor(props: PropertyRendererProps) {\r\n super(props);\r\n }\r\n\r\n public static getLabelOffset(indentation?: number, orientation?: Orientation, width?: number, columnRatio?: number, minColumnLabelWidth?: number): number {\r\n return CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, minColumnLabelWidth);\r\n }\r\n\r\n private updateDisplayValue(props: PropertyRendererProps) {\r\n if (props.isEditing) {\r\n this.updateDisplayValueAsEditor(props);\r\n return;\r\n }\r\n\r\n const displayValue = CommonPropertyRenderer.createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager);\r\n this.setState({ displayValue });\r\n }\r\n\r\n private _onEditCommit = (args: PropertyUpdatedArgs) => {\r\n // istanbul ignore else\r\n if (this.props.onEditCommit)\r\n this.props.onEditCommit(args);\r\n };\r\n\r\n private _onEditCancel = () => {\r\n // istanbul ignore else\r\n if (this.props.onEditCancel)\r\n this.props.onEditCancel();\r\n };\r\n\r\n /* Display property record value in an editor /\r\n public updateDisplayValueAsEditor(props: PropertyRendererProps) {\r\n this.setState({\r\n displayValue:\r\n <EditorContainer\r\n propertyRecord={props.propertyRecord}\r\n onCommit={this._onEditCommit}\r\n onCancel={this._onEditCancel}\r\n setFocus={true}\r\n />,\r\n });\r\n }\r\n\r\n /* @internal /\r\n public override componentDidMount() {\r\n this.updateDisplayValue(this.props);\r\n }\r\n\r\n /* @internal /\r\n public override componentDidUpdate(prevProps: PropertyRendererProps) {\r\n if (prevProps.propertyRecord !== this.props.propertyRecord \|\|\r\n prevProps.isEditing !== this.props.isEditing \|\|\r\n prevProps.orientation !== this.props.orientation)\r\n this.updateDisplayValue(this.props);\r\n }\r\n\r\n /* @internal */\r\n public override render() {\r\n const { propertyValueRendererManager, isEditing, onEditCommit, onEditCancel, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n const primitiveRendererProps: PrimitiveRendererProps = {\r\n ...props,\r\n valueElement: this.state.displayValue,\r\n indentation: this.props.indentation,\r\n };\r\n\r\n switch (this.props.propertyRecord.value.valueFormat) {\r\n case PropertyValueFormat.Primitive:\r\n return (\r\n <PrimitivePropertyRenderer {...primitiveRendererProps} />\r\n );\r\n case PropertyValueFormat.Array:\r\n // If array is empty, render it as a primitive property\r\n if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\r\n && this.props.propertyRecord.value.items.length === 0)\r\n return (\r\n <PrimitivePropertyRenderer {...primitiveRendererProps} />\r\n );\r\n // eslint-disable-next-line no-fallthrough\r\n case PropertyValueFormat.Struct:\r\n return (\r\n <NonPrimitivePropertyRenderer\r\n isCollapsible={true}\r\n {...primitiveRendererProps}\r\n />\r\n );\r\n }\r\n }\r\n}\r\n"]}

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

@@ -3,10 +3,9 @@
 * 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/style/typography";
-$text-font-size: $iui-font-size;
-$text-font-color: $buic-text-color;
+$text-font-size: var(--iui-font-size-1);
+$text-font-color: var(--iui-color-text);
 .components-property-record--horizontal {
   height: 100%;
@@ -14,8 +13,8 @@ $text-font-color: $buic-text-color;
   padding: 0 8px;
   .components-property-record-label {
-    font-size: $iui-font-size-small;
-    color: $buic-foreground-muted;
+    font-size: var(--iui-font-size-0);
+    color: var(--iui-color-text-muted);
   }
   .components-property-record-value {
@@ -33,8 +32,8 @@ $text-font-color: $buic-text-color;
   align-content: center;
   .components-property-record-label {
-    font-size: $iui-font-size-small;
-    color: $buic-foreground-muted;
+    font-size: var(--iui-font-size-0);
+    color: var(--iui-color-text-muted);
   }
   .components-property-record-value {
@@ -102,4 +101,4 @@ $text-font-color: $buic-text-color;
       outline: none;
     }
   }
-}
+}

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