npm - @itwin/components-react - Versions diffs - 5.19.0 → 5.21.0 - Mend

@itwin/components-react 5.19.0 → 5.21.0

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

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

@@ -18,65 +18,65 @@ import { SvgChevronLeft, SvgChevronRight } from "@itwin/itwinui-icons-react";
 export class ResultSelector extends React.PureComponent {
     constructor(props) {
         super(props);
-        this._onClickPrevious = () => {
-            if (this.state.selectedResultInEditMode) {
-                this._onSelectedResultConfirmed();
-                return;
-            }
-            if (this.state.selectedResultId > 1) {
-                this.props.onSelectedChanged(this.state.selectedResultId - 1);
-                this.setState((state) => ({
-                    selectedResultId: state.selectedResultId - 1,
-                }));
-            }
-        };
-        this._onClickNext = () => {
-            if (this.state.selectedResultInEditMode) {
-                this._onSelectedResultConfirmed();
-                return;
-            }
-            if (this.state.selectedResultId < this.props.resultCount) {
-                this.props.onSelectedChanged(this.state.selectedResultId + 1);
-                this.setState((state) => ({
-                    selectedResultId: state.selectedResultId + 1,
-                }));
-            }
-        };
-        this._onSelectedResultChanged = (event) => {
-            if (event.target.value.length <= this._maxSelectedResultInputLength)
-                this.setState({ selectedResultEdit: event.target.value });
-        };
-        this._onSelectedResultConfirmed = () => {
-            let selectedId = +this.state.selectedResultEdit;
-            if (selectedId > this.props.resultCount)
-                selectedId = this.props.resultCount;
-            else if (selectedId < 1)
-                selectedId = 1;
-            this.setState({
-                selectedResultInEditMode: false,
-                selectedResultId: selectedId,
-            });
-            this.props.onSelectedChanged(selectedId);
-        };
-        this._onSelectedResultClick = () => {
-            this.setState((state) => ({
-                selectedResultInEditMode: true,
-                selectedResultEdit: state.selectedResultId.toString(),
-            }));
-        };
-        this._onSelectedResultKeyDown = (event) => {
-            if (event.key === Key.Enter.valueOf())
-                this._onSelectedResultConfirmed();
-        };
         this.state = {
             selectedResultId: props.resultCount ? 1 : 0,
             selectedResultEdit: "",
             selectedResultInEditMode: false,
         };
     }
+    _onClickPrevious = () => {
+        if (this.state.selectedResultInEditMode) {
+            this._onSelectedResultConfirmed();
+            return;
+        }
+        if (this.state.selectedResultId > 1) {
+            this.props.onSelectedChanged(this.state.selectedResultId - 1);
+            this.setState((state) => ({
+                selectedResultId: state.selectedResultId - 1,
+            }));
+        }
+    };
+    _onClickNext = () => {
+        if (this.state.selectedResultInEditMode) {
+            this._onSelectedResultConfirmed();
+            return;
+        }
+        if (this.state.selectedResultId < this.props.resultCount) {
+            this.props.onSelectedChanged(this.state.selectedResultId + 1);
+            this.setState((state) => ({
+                selectedResultId: state.selectedResultId + 1,
+            }));
+        }
+    };
     get _maxSelectedResultInputLength() {
         return this.props.resultCount.toString().length;
     }
+    _onSelectedResultChanged = (event) => {
+        if (event.target.value.length <= this._maxSelectedResultInputLength)
+            this.setState({ selectedResultEdit: event.target.value });
+    };
+    _onSelectedResultConfirmed = () => {
+        let selectedId = +this.state.selectedResultEdit;
+        if (selectedId > this.props.resultCount)
+            selectedId = this.props.resultCount;
+        else if (selectedId < 1)
+            selectedId = 1;
+        this.setState({
+            selectedResultInEditMode: false,
+            selectedResultId: selectedId,
+        });
+        this.props.onSelectedChanged(selectedId);
+    };
+    _onSelectedResultClick = () => {
+        this.setState((state) => ({
+            selectedResultInEditMode: true,
+            selectedResultEdit: state.selectedResultId.toString(),
+        }));
+    };
+    _onSelectedResultKeyDown = (event) => {
+        if (event.key === Key.Enter.valueOf())
+            this._onSelectedResultConfirmed();
+    };
     componentDidMount() {
         this.props.onSelectedChanged(this.props.resultCount ? 1 : 0);
     }

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

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

@@ -34,25 +34,28 @@ class IconItem extends React.PureComponent {
  * @internal
  */
 export class IconPickerButton extends React.PureComponent {
+    _target = React.createRef();
+    static defaultProps = {
+        numColumns: 4,
+    };
     constructor(props) {
         super(props);
-        this._target = React.createRef();
-        this._togglePopup = () => {
-            if (this.props.readonly)
-                return;
-            this.setState((prevState) => ({ showPopup: !prevState.showPopup }));
-        };
-        this._closePopup = () => {
-            this.setState({ showPopup: false });
-        };
-        this._handleIconPicked = (icon) => {
-            this.setState({ showPopup: false, icon }, () => {
-                if (this.props.onIconChange)
-                    this.props.onIconChange(icon);
-            });
-        };
         this.state = { showPopup: false, icon: this.props.icon };
     }
+    _togglePopup = () => {
+        if (this.props.readonly)
+            return;
+        this.setState((prevState) => ({ showPopup: !prevState.showPopup }));
+    };
+    _closePopup = () => {
+        this.setState({ showPopup: false });
+    };
+    _handleIconPicked = (icon) => {
+        this.setState({ showPopup: false, icon }, () => {
+            if (this.props.onIconChange)
+                this.props.onIconChange(icon);
+        });
+    };
     renderPopup(title) {
         const containerStyle = {
             gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)`,
@@ -72,7 +75,4 @@ export class IconPickerButton extends React.PureComponent {
             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))));
     }
 }
-IconPickerButton.defaultProps = {
-    numColumns: 4,
-};
 //# sourceMappingURL=IconPickerButton.js.map

package/lib/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;;;gGAGgG;AAChG;;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;AAEzD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAe5D;;GAEG;AACH,MAAM,QAAS,SAAQ,KAAK,CAAC,aAA4B;IACvD,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,MAAM,EACJ,OAAO,EACP,IAAI,EAAE,qCAAqC;QAC3C,GAAG,UAAU,EACd,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,WAAW,GAAG,CAAC,EAAoB,EAAE,EAAE;YAC3C,IAAI,OAAO;gBAAE,OAAO,EAAE,CAAC;QACzB,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,UAAU,CAAC,wBAAwB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAE3E,OAAO,CACL,mCACM,UAAU,EACd,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,WAAW;YAGpB,oBAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,GAAI,CACjB,CACV,CAAC;IACJ,CAAC;CACF;AA+BD;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAG3C;~~IAOC~~,YAAY,KAAsB;QAChC,KAAK,CAAC,KAAK,CAAC,CAAC;~~QAPP~~,~~YAAO~~,GAAG,KAAK,CAAC,~~SAAS~~,~~EAAqB~~,CAAC;~~QAY/C~~,~~iBAAY~~,GAAG,GAAG,EAAE;~~YAC1B~~,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ;~~gBAAE~~,OAAO;~~YAEhC~~,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,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE;~~gBAC7C~~,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;~~oBAAE~~,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;~~YAC7D~~,CAAC,CAAC,CAAC;~~QACL~~,CAAC,CAAC;~~QAjBA~~,~~IAAI,CAAC,KAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAC3D,CAAC;IAkBO,~~WAAW,CAAC,KAAyB;QAC3C,MAAM,cAAc,GAAwB;YAC1C,mBAAmB,EAAE,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,QAAQ;SAC7D,CAAC;QACF,OAAO,CACL,6BAAK,SAAS,EAAC,uCAAuC;YACnD,KAAK,IAAI,gCAAK,KAAK,CAAM;YAC1B,4CACc,mCAAmC,EAC/C,SAAS,EAAC,mCAAmC,EAC7C,KAAK,EAAE,cAAc,IAEpB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE,CAAC,CACrD,oBAAC,QAAQ,IACP,GAAG,EAAE,KAAK,EACV,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAChD,CACH,CAAC,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAEe,MAAM;QACpB,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAyB,CAAC;QACnE,MAAM,gBAAgB,GAAG,UAAU,CACjC,8BAA8B,EAC9B,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,UAAU,EACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL;YACE,+CACc,8BAA8B,EAC1C,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,GAAG,EAAE,IAAI,CAAC,OAAO;gBAGjB,oBAAC,IAAI,IACH,SAAS,EAAC,0BAA0B,EACpC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GACzB;gBACF,8BAAM,SAAS,EAAC,MAAM;oBAEpB,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,cAAc,OAAG,GAAI,CACjC,CACA;YAET,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,IAE3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CACrC,CACP,CACJ,CAAC;IACJ,CAAC~~;;AA1Fa,6BAAY,GAA6B;IACrD,UAAU,EAAE,CAAC;CACd,AAFyB,CAExB~~","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module IconPicker\n /\n\nimport \"./IconPickerButton.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup } from \"@itwin/core-react\";\nimport { SvgChevronDown } from \"@itwin/itwinui-icons-react\";\n\n/** Properties for the [[IconItem]] React component\n * @internal\n /\ninterface IconItemProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n CommonProps {\n /* icon specification /\n icon: string;\n /* function to run when user selects icon /\n onClick?: () => void;\n}\n\n/* IconItem Functional component\n * @internal\n /\nclass IconItem extends React.PureComponent<IconItemProps> {\n constructor(props: IconItemProps) {\n super(props);\n }\n\n public override render() {\n const {\n onClick,\n icon, // do not pass on item specific props\n ...otherProps\n } = this.props;\n\n const handleClick = (_e: React.MouseEvent) => {\n if (onClick) onClick();\n };\n\n const classes = classnames(\"components-icon-swatch\", this.props.className);\n\n return (\n <button\n {...otherProps}\n className={classes}\n style={this.props.style}\n onClick={handleClick}\n >\n {/ eslint-disable-next-line @typescript-eslint/no-deprecated /}\n <Icon iconSpec={icon} />\n </button>\n );\n }\n}\n\n/* Properties for the [[IconPicker]] React component\n * @internal\n /\nexport interface IconPickerProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n CommonProps {\n /* active string /\n icon: string;\n /* available icons /\n icons: string[];\n /* function to run when user selects icon /\n onIconChange?: ((icon: string) => void) \| undefined;\n /* Disabled or not /\n disabled?: boolean;\n /* Readonly or not /\n readonly?: boolean;\n /* Title to show at top of DropDown /\n dropDownTitle?: string;\n /* Number of columns /\n numColumns: number;\n}\n\n/* @internal /\ninterface IconPickerState {\n showPopup: boolean;\n icon: string;\n}\n\n/* IconPickerButton component\n * @internal\n /\nexport class IconPickerButton extends React.PureComponent<\n IconPickerProps,\n IconPickerState\n> {\n private _target = React.createRef<HTMLButtonElement>();\n\n public static defaultProps: Partial<IconPickerProps> = {\n numColumns: 4,\n };\n\n constructor(props: IconPickerProps) {\n super(props);\n\n this.state = { showPopup: false, icon: this.props.icon };\n }\n\n private _togglePopup = () => {\n if (this.props.readonly) return;\n\n this.setState((prevState) => ({ showPopup: !prevState.showPopup }));\n };\n\n private _closePopup = () => {\n this.setState({ showPopup: false });\n };\n\n private _handleIconPicked = (icon: string) => {\n this.setState({ showPopup: false, icon }, () => {\n if (this.props.onIconChange) this.props.onIconChange(icon);\n });\n };\n\n private renderPopup(title: string \| undefined) {\n const containerStyle: React.CSSProperties = {\n gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)`,\n };\n return (\n <div className=\"components-iconpicker-popup-container\">\n {title && <h4>{title}</h4>}\n <div\n data-testid=\"components-iconpicker-popup-icons\"\n className=\"components-iconpicker-popup-icons\"\n style={containerStyle}\n >\n {this.props.icons.map((icon: string, index: number) => (\n <IconItem\n key={index}\n icon={icon}\n onClick={this._handleIconPicked.bind(this, icon)}\n />\n ))}\n </div>\n </div>\n );\n }\n\n public override render() {\n const buttonStyle = { ...this.props.style } as React.CSSProperties;\n const buttonClassNames = classnames(\n \"components-iconpicker-button\",\n this.props.readonly && \"readonly\",\n this.props.className\n );\n\n return (\n <>\n <button\n data-testid=\"components-iconpicker-button\"\n onClick={this._togglePopup}\n className={buttonClassNames}\n style={buttonStyle}\n disabled={this.props.disabled}\n ref={this._target}\n >\n {/ eslint-disable-next-line @typescript-eslint/no-deprecated /}\n <Icon\n className=\"iconpicker-button-sprite\"\n iconSpec={this.state.icon}\n />\n <span className=\"icon\">\n {/ eslint-disable-next-line @typescript-eslint/no-deprecated /}\n <Icon iconSpec={<SvgChevronDown />} />\n </span>\n </button>\n {/ eslint-disable-next-line @typescript-eslint/no-deprecated */}\n <Popup\n className=\"components-iconpicker-popup\"\n isOpen={this.state.showPopup}\n position={RelativePosition.BottomLeft}\n onClose={this._closePopup}\n target={this._target.current}\n >\n {this.renderPopup(this.props.dropDownTitle)}\n </Popup>\n </>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"IconPickerButton.js","sourceRoot":"","sources":["../../../src/components-react/iconpicker/IconPickerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module IconPicker\n /\n\nimport \"./IconPickerButton.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup } from \"@itwin/core-react\";\nimport { SvgChevronDown } from \"@itwin/itwinui-icons-react\";\n\n/** Properties for the [[IconItem]] React component\n * @internal\n /\ninterface IconItemProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n CommonProps {\n /* icon specification /\n icon: string;\n /* function to run when user selects icon /\n onClick?: () => void;\n}\n\n/* IconItem Functional component\n * @internal\n /\nclass IconItem extends React.PureComponent<IconItemProps> {\n constructor(props: IconItemProps) {\n super(props);\n }\n\n public override render() {\n const {\n onClick,\n icon, // do not pass on item specific props\n ...otherProps\n } = this.props;\n\n const handleClick = (_e: React.MouseEvent) => {\n if (onClick) onClick();\n };\n\n const classes = classnames(\"components-icon-swatch\", this.props.className);\n\n return (\n <button\n {...otherProps}\n className={classes}\n style={this.props.style}\n onClick={handleClick}\n >\n {/ eslint-disable-next-line @typescript-eslint/no-deprecated /}\n <Icon iconSpec={icon} />\n </button>\n );\n }\n}\n\n/* Properties for the [[IconPicker]] React component\n * @internal\n /\nexport interface IconPickerProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n CommonProps {\n /* active string /\n icon: string;\n /* available icons /\n icons: string[];\n /* function to run when user selects icon /\n onIconChange?: ((icon: string) => void) \| undefined;\n /* Disabled or not /\n disabled?: boolean;\n /* Readonly or not /\n readonly?: boolean;\n /* Title to show at top of DropDown /\n dropDownTitle?: string;\n /* Number of columns /\n numColumns: number;\n}\n\n/* @internal /\ninterface IconPickerState {\n showPopup: boolean;\n icon: string;\n}\n\n/* IconPickerButton component\n * @internal\n /\nexport class IconPickerButton extends React.PureComponent<\n IconPickerProps,\n IconPickerState\n> {\n private _target = React.createRef<HTMLButtonElement>();\n\n public static defaultProps: Partial<IconPickerProps> = {\n numColumns: 4,\n };\n\n constructor(props: IconPickerProps) {\n super(props);\n\n this.state = { showPopup: false, icon: this.props.icon };\n }\n\n private _togglePopup = () => {\n if (this.props.readonly) return;\n\n this.setState((prevState) => ({ showPopup: !prevState.showPopup }));\n };\n\n private _closePopup = () => {\n this.setState({ showPopup: false });\n };\n\n private _handleIconPicked = (icon: string) => {\n this.setState({ showPopup: false, icon }, () => {\n if (this.props.onIconChange) this.props.onIconChange(icon);\n });\n };\n\n private renderPopup(title: string \| undefined) {\n const containerStyle: React.CSSProperties = {\n gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)`,\n };\n return (\n <div className=\"components-iconpicker-popup-container\">\n {title && <h4>{title}</h4>}\n <div\n data-testid=\"components-iconpicker-popup-icons\"\n className=\"components-iconpicker-popup-icons\"\n style={containerStyle}\n >\n {this.props.icons.map((icon: string, index: number) => (\n <IconItem\n key={index}\n icon={icon}\n onClick={this._handleIconPicked.bind(this, icon)}\n />\n ))}\n </div>\n </div>\n );\n }\n\n public override render() {\n const buttonStyle = { ...this.props.style } as React.CSSProperties;\n const buttonClassNames = classnames(\n \"components-iconpicker-button\",\n this.props.readonly && \"readonly\",\n this.props.className\n );\n\n return (\n <>\n <button\n data-testid=\"components-iconpicker-button\"\n onClick={this._togglePopup}\n className={buttonClassNames}\n style={buttonStyle}\n disabled={this.props.disabled}\n ref={this._target}\n >\n {/ eslint-disable-next-line @typescript-eslint/no-deprecated /}\n <Icon\n className=\"iconpicker-button-sprite\"\n iconSpec={this.state.icon}\n />\n <span className=\"icon\">\n {/ eslint-disable-next-line @typescript-eslint/no-deprecated /}\n <Icon iconSpec={<SvgChevronDown />} />\n </span>\n </button>\n {/ eslint-disable-next-line @typescript-eslint/no-deprecated */}\n <Popup\n className=\"components-iconpicker-popup\"\n isOpen={this.state.showPopup}\n position={RelativePosition.BottomLeft}\n onClose={this._closePopup}\n target={this._target.current}\n >\n {this.renderPopup(this.props.dropDownTitle)}\n </Popup>\n </>\n );\n }\n}\n"]}

package/lib/components-react/new-editors/editors/FormattedNumericInput.d.ts CHANGED Viewed

@@ -2,12 +2,13 @@
  * @module PropertyEditors
  */
 import * as React from "react";
+import { Input } from "@itwin/itwinui-react";
 import type { NumericValue } from "../values/Values.js";
 /**
  * Props for FormattedNumericInput component.
  * @beta
  */
-interface FormattedNumericInputProps {
+interface FormattedNumericInputProps extends Pick<React.ComponentPropsWithoutRef<typeof Input>, "onBlur" | "onFocus"> {
     value: NumericValue;
     onChange: (value: NumericValue) => void;
     parseValue: (value: string) => number | undefined;
@@ -19,6 +20,6 @@ interface FormattedNumericInputProps {
  * A numeric input that allows to pass custom parsing/formatting logic to handle values with units etc.
  * @beta
  */
-export declare function FormattedNumericInput({ onChange, value, parseValue, formatValue, disabled, size, }: FormattedNumericInputProps): React.JSX.Element;
+export declare function FormattedNumericInput({ onChange, value, parseValue, formatValue, disabled, size, ...props }: FormattedNumericInputProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=FormattedNumericInput.d.ts.map

package/lib/components-react/new-editors/editors/FormattedNumericInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormattedNumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/FormattedNumericInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAE~~/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAIxD;;;GAGG;AACH,UAAU,~~0BAA0B~~;~~IAClC~~,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC1B;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,IAAI,~~GACL~~,EAAE,0BAA0B,qBAgB5B"}
1	+ {"version":3,"file":"FormattedNumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/FormattedNumericInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAIxD;;;GAGG;AACH,UAAU,0BACR,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,OAAO,KAAK,CAAC,EAC5C,QAAQ,GAAG,SAAS,CACrB;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC1B;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,0BAA0B,qBAgB5B"}

package/lib/components-react/new-editors/editors/FormattedNumericInput.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { Input } from "@itwin/itwinui-react";
  * A numeric input that allows to pass custom parsing/formatting logic to handle values with units etc.
  * @beta
  */
-export function FormattedNumericInput({ onChange, value, parseValue, formatValue, disabled, size, }) {
+export function FormattedNumericInput({ onChange, value, parseValue, formatValue, disabled, size, ...props }) {
     const { currentValue, inputProps } = useParsedNumberInput({
         initialValue: value.rawValue,
         parseValue,
@@ -24,7 +24,7 @@ export function FormattedNumericInput({ onChange, value, parseValue, formatValue
     React.useEffect(() => {
         onChangeRef.current(currentValue);
     }, [currentValue]);
-    return React.createElement(Input, { disabled: disabled, size: size, ...inputProps });
+    return React.createElement(Input, { ...props, ...inputProps, disabled: disabled, size: size });
 }
 function useParsedNumberInput({ initialValue, formatValue, parseValue, }) {
     const [state, setState] = React.useState(() => {

package/lib/components-react/new-editors/editors/FormattedNumericInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormattedNumericInput.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/FormattedNumericInput.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;~~AAkB7C~~;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,IAAI,~~GACuB~~;IAC3B,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,oBAAoB,CAAC;QACxD,YAAY,EAAE,KAAK,CAAC,QAAQ;QAC5B,UAAU;QACV,WAAW;KACZ,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,oBAAC,KAAK,~~IAAC~~,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,~~KAAM,UAAU,~~GAAI,CAAC;~~AACnE~~,CAAC;AAED,SAAS,oBAAoB,CAAC,EAC5B,YAAY,EACZ,WAAW,EACX,UAAU,GAKX;IAMC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAQ,GAAG,EAAE;QACnD,OAAO;YACL,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EACV,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE;aAC9D;YACD,WAAW,EAAE,WAAW,CAAC,YAAY,IAAI,MAAM,CAAC;SACjD,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE;YACrB,OAAO;gBACL,GAAG,SAAS;gBACZ,KAAK,EAAE;oBACL,GAAG,SAAS,CAAC,KAAK;oBAClB,YAAY,EACV,SAAS,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS;wBACpC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC;wBACvC,CAAC,CAAC,EAAE;iBACT;gBACD,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC;aACjC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAEtC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE;YACrB,OAAO;gBACL,GAAG,SAAS;gBACZ,KAAK,EAAE;oBACL,GAAG,SAAS,CAAC,KAAK;oBAClB,QAAQ;oBACR,YAAY,EAAE,QAAQ;iBACvB;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO;QACL,YAAY,EAAE,KAAK,CAAC,KAAK;QACzB,UAAU,EAAE;YACV,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;YAC/B,WAAW,EAAE,KAAK,CAAC,WAAW;YAC9B,QAAQ,EAAE,YAAY;SACvB;KACF,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module PropertyEditors\n /\n\nimport as React from \"react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { NumericValue } from \"../values/Values.js\";\n\n/* v8 ignore start /\n\n/\n Props for FormattedNumericInput component.\n * @beta\n /\ninterface FormattedNumericInputProps {\n value: NumericValue;\n onChange: (value: NumericValue) => void;\n parseValue: (value: string) => number \| undefined;\n formatValue: (num: number) => string;\n disabled?: boolean;\n size?: \"small\" \| \"large\";\n}\n\n/\n A numeric input that allows to pass custom parsing/formatting logic to handle values with units etc.\n * @beta\n /\nexport function FormattedNumericInput({\n onChange,\n value,\n parseValue,\n formatValue,\n disabled,\n size,\n}: FormattedNumericInputProps) {\n const { currentValue, inputProps } = useParsedNumberInput({\n initialValue: value.rawValue,\n parseValue,\n formatValue,\n });\n const onChangeRef = React.useRef(onChange);\n React.useEffect(() => {\n onChangeRef.current = onChange;\n }, [onChange]);\n\n React.useEffect(() => {\n onChangeRef.current(currentValue);\n }, [currentValue]);\n\n return <Input disabled={disabled} size={size} ~~{...inputProps}~~ />;\n}\n\nfunction useParsedNumberInput({\n initialValue,\n formatValue,\n parseValue,\n}: {\n initialValue: number \| undefined;\n parseValue: (value: string) => number \| undefined;\n formatValue: (num: number) => string;\n}) {\n interface State {\n value: NumericValue;\n placeholder: string;\n }\n\n const [state, setState] = React.useState<State>(() => {\n return {\n value: {\n rawValue: initialValue,\n displayValue:\n initialValue !== undefined ? formatValue(initialValue) : \"\",\n },\n placeholder: formatValue(initialValue ?? 123.45),\n };\n });\n\n React.useEffect(() => {\n setState((prevState) => {\n return {\n ...prevState,\n value: {\n ...prevState.value,\n displayValue:\n prevState.value.rawValue !== undefined\n ? formatValue(prevState.value.rawValue)\n : \"\",\n },\n placeholder: formatValue(123.45),\n };\n });\n }, [formatValue]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n const rawValue = parseValue(newValue);\n\n setState((prevState) => {\n return {\n ...prevState,\n value: {\n ...prevState.value,\n rawValue,\n displayValue: newValue,\n },\n };\n });\n };\n\n return {\n currentValue: state.value,\n inputProps: {\n value: state.value.displayValue,\n placeholder: state.placeholder,\n onChange: handleChange,\n },\n };\n}\n\n/ v8 ignore stop */\n"]}
1	+ {"version":3,"file":"FormattedNumericInput.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/FormattedNumericInput.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsB7C;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACmB;IAC3B,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,oBAAoB,CAAC;QACxD,YAAY,EAAE,KAAK,CAAC,QAAQ;QAC5B,UAAU;QACV,WAAW;KACZ,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,oBAAC,KAAK,OAAK,KAAK,KAAM,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AAC9E,CAAC;AAED,SAAS,oBAAoB,CAAC,EAC5B,YAAY,EACZ,WAAW,EACX,UAAU,GAKX;IAMC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAQ,GAAG,EAAE;QACnD,OAAO;YACL,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EACV,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE;aAC9D;YACD,WAAW,EAAE,WAAW,CAAC,YAAY,IAAI,MAAM,CAAC;SACjD,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE;YACrB,OAAO;gBACL,GAAG,SAAS;gBACZ,KAAK,EAAE;oBACL,GAAG,SAAS,CAAC,KAAK;oBAClB,YAAY,EACV,SAAS,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS;wBACpC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC;wBACvC,CAAC,CAAC,EAAE;iBACT;gBACD,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC;aACjC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAEtC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE;YACrB,OAAO;gBACL,GAAG,SAAS;gBACZ,KAAK,EAAE;oBACL,GAAG,SAAS,CAAC,KAAK;oBAClB,QAAQ;oBACR,YAAY,EAAE,QAAQ;iBACvB;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO;QACL,YAAY,EAAE,KAAK,CAAC,KAAK;QACzB,UAAU,EAAE;YACV,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;YAC/B,WAAW,EAAE,KAAK,CAAC,WAAW;YAC9B,QAAQ,EAAE,YAAY;SACvB;KACF,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module PropertyEditors\n /\n\nimport as React from \"react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { NumericValue } from \"../values/Values.js\";\n\n/* v8 ignore start /\n\n/\n Props for FormattedNumericInput component.\n * @beta\n /\ninterface FormattedNumericInputProps\n extends Pick<\n React.ComponentPropsWithoutRef<typeof Input>,\n \"onBlur\" \| \"onFocus\"\n > {\n value: NumericValue;\n onChange: (value: NumericValue) => void;\n parseValue: (value: string) => number \| undefined;\n formatValue: (num: number) => string;\n disabled?: boolean;\n size?: \"small\" \| \"large\";\n}\n\n/\n A numeric input that allows to pass custom parsing/formatting logic to handle values with units etc.\n * @beta\n /\nexport function FormattedNumericInput({\n onChange,\n value,\n parseValue,\n formatValue,\n disabled,\n size,\n ...props\n}: FormattedNumericInputProps) {\n const { currentValue, inputProps } = useParsedNumberInput({\n initialValue: value.rawValue,\n parseValue,\n formatValue,\n });\n const onChangeRef = React.useRef(onChange);\n React.useEffect(() => {\n onChangeRef.current = onChange;\n }, [onChange]);\n\n React.useEffect(() => {\n onChangeRef.current(currentValue);\n }, [currentValue]);\n\n return <Input {...props} {...inputProps} disabled={disabled} size={size} />;\n}\n\nfunction useParsedNumberInput({\n initialValue,\n formatValue,\n parseValue,\n}: {\n initialValue: number \| undefined;\n parseValue: (value: string) => number \| undefined;\n formatValue: (num: number) => string;\n}) {\n interface State {\n value: NumericValue;\n placeholder: string;\n }\n\n const [state, setState] = React.useState<State>(() => {\n return {\n value: {\n rawValue: initialValue,\n displayValue:\n initialValue !== undefined ? formatValue(initialValue) : \"\",\n },\n placeholder: formatValue(initialValue ?? 123.45),\n };\n });\n\n React.useEffect(() => {\n setState((prevState) => {\n return {\n ...prevState,\n value: {\n ...prevState.value,\n displayValue:\n prevState.value.rawValue !== undefined\n ? formatValue(prevState.value.rawValue)\n : \"\",\n },\n placeholder: formatValue(123.45),\n };\n });\n }, [formatValue]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n const rawValue = parseValue(newValue);\n\n setState((prevState) => {\n return {\n ...prevState,\n value: {\n ...prevState.value,\n rawValue,\n displayValue: newValue,\n },\n };\n });\n };\n\n return {\n currentValue: state.value,\n inputProps: {\n value: state.value.displayValue,\n placeholder: state.placeholder,\n onChange: handleChange,\n },\n };\n}\n\n/ v8 ignore stop */\n"]}

package/lib/components-react/properties/ValueRendererManager.js CHANGED Viewed

@@ -23,13 +23,12 @@ export var PropertyContainerType;
  * @public
  */
 export class PropertyValueRendererManager {
-    constructor() {
-        this._propertyRenderers = new Map();
-        this._defaultPrimitiveValueRenderer = new PrimitivePropertyValueRenderer();
-        this._defaultArrayValueRenderer = new ArrayPropertyValueRenderer();
-        this._defaultStructValueRenderer = new StructPropertyValueRenderer();
-        this._defaultMergedValueRenderer = new MergedPropertyValueRenderer();
-    }
+    static _defaultRendererManager;
+    _propertyRenderers = new Map();
+    _defaultPrimitiveValueRenderer = new PrimitivePropertyValueRenderer();
+    _defaultArrayValueRenderer = new ArrayPropertyValueRenderer();
+    _defaultStructValueRenderer = new StructPropertyValueRenderer();
+    _defaultMergedValueRenderer = new MergedPropertyValueRenderer();
     getCustomRenderer(record) {
         if (record.property.renderer &&
             this._propertyRenderers.has(record.property.renderer.name))

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ValueRendererManager.js","sourceRoot":"","sources":["../../../src/components-react/properties/ValueRendererManager.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAIH,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;AAC7F,OAAO,EAAE,2BAA2B,EAAE,MAAM,kDAAkD,CAAC;AAC/F,OAAO,EAAE,8BAA8B,EAAE,MAAM,qDAAqD,CAAC;AACrG,OAAO,EAAE,2BAA2B,EAAE,MAAM,kDAAkD,CAAC;AAG/F;;GAEG;AACH,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC/B,8CAAqB,CAAA;IACrB,wCAAe,CAAA;IACf,sCAAa,CAAA;AACf,CAAC,EAJW,qBAAqB,KAArB,qBAAqB,QAIhC;AA8DD;;GAEG;AACH,MAAM,OAAO,4BAA4B;~~IAAzC~~;~~QAGY~~,~~uBAAkB~~,GAAwC,IAAI,GAAG,EAGxE,CAAC;~~QACM~~,~~mCAA8B~~,GACtC,IAAI,8BAA8B,EAAE,CAAC;~~QAC7B,+BAA0B~~,GAClC,IAAI,0BAA0B,EAAE,CAAC;~~QACzB~~,~~gCAA2B~~,GACnC,IAAI,2BAA2B,EAAE,CAAC;~~QAC1B~~,~~gCAA2B~~,GACnC,IAAI,2BAA2B,EAAE,CAAC;~~IAsFtC~~,~~CAAC;IApFS,~~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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Properties\n /\n\nimport type as React from \"react\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { ArrayPropertyValueRenderer } from \"./renderers/value/ArrayPropertyValueRenderer.js\";\nimport { MergedPropertyValueRenderer } from \"./renderers/value/MergedPropertyValueRenderer.js\";\nimport { PrimitivePropertyValueRenderer } from \"./renderers/value/PrimitivePropertyValueRenderer.js\";\nimport { StructPropertyValueRenderer } from \"./renderers/value/StructPropertyValueRenderer.js\";\nimport type { Orientation } from \"../common/Orientation.js\";\n\n/** Types of property containers\n * @public\n /\nexport enum PropertyContainerType {\n PropertyPane = \"pane\",\n Table = \"table\",\n Tree = \"tree\",\n}\n\n/* State of the Dialog component in a container which renders properties\n * @public\n /\nexport interface PropertyDialogState {\n title: string;\n content: React.ReactNode;\n}\n\n/* State of the Popup component in a container which renders properties\n * @public\n /\nexport interface PropertyPopupState {\n fixedPosition: { top: number; left: number };\n content: React.ReactNode;\n}\n\n/* Additional parameters to the renderer\n * @public\n /\nexport interface PropertyValueRendererContext {\n /* Type of container that holds the property /\n containerType?: string;\n /* Style that should be applied to the rendered element /\n style?: React.CSSProperties;\n /* Orientation of property/container /\n orientation?: Orientation;\n /* Callback to request for a Popup to be shown. /\n onPopupShow?: (popupState: PropertyPopupState) => void;\n /* Callback to request for a Popup to be hidden. /\n onPopupHide?: () => void;\n /* Callback to request for Dialog to be opened. /\n onDialogOpen?: (dialogState: PropertyDialogState) => void;\n /* Callback to highlight text /\n textHighlighter?: (text: string) => React.ReactNode;\n /* Default value to show if value rendering is asynchronous /\n defaultValue?: React.ReactNode;\n /* Whether property value is expanded. /\n isExpanded?: boolean;\n /* Called when property value expansion or collapse is requested. /\n onExpansionToggled?: () => void;\n /* Called when property value element height changes. /\n onHeightChanged?: (newHeight: number) => void;\n}\n\n/* Custom property value renderer interface\n * @public\n /\nexport interface IPropertyValueRenderer {\n /* Checks if the renderer can handle given property /\n canRender: (\n record: PropertyRecord,\n context?: PropertyValueRendererContext\n ) => boolean;\n /* Method that returns a JSX representation of PropertyRecord /\n render: (\n record: PropertyRecord,\n context?: PropertyValueRendererContext\n ) => React.ReactNode;\n}\n\n/* Default implementation of property value renderer manager\n * @public\n /\nexport class PropertyValueRendererManager {\n private static _defaultRendererManager: PropertyValueRendererManager;\n\n protected _propertyRenderers: Map<string, IPropertyValueRenderer> = new Map<\n string,\n IPropertyValueRenderer\n >();\n protected _defaultPrimitiveValueRenderer: IPropertyValueRenderer =\n new PrimitivePropertyValueRenderer();\n protected _defaultArrayValueRenderer: IPropertyValueRenderer =\n new ArrayPropertyValueRenderer();\n protected _defaultStructValueRenderer: IPropertyValueRenderer =\n new StructPropertyValueRenderer();\n protected _defaultMergedValueRenderer: IPropertyValueRenderer =\n new MergedPropertyValueRenderer();\n\n private getCustomRenderer(record: PropertyRecord) {\n if (\n record.property.renderer &&\n this._propertyRenderers.has(record.property.renderer.name)\n )\n return this._propertyRenderers.get(record.property.renderer.name);\n\n if (this._defaultMergedValueRenderer.canRender(record))\n return this._defaultMergedValueRenderer;\n\n if (this._propertyRenderers.has(record.property.typename))\n return this._propertyRenderers.get(record.property.typename)!;\n\n return undefined;\n }\n\n private selectRenderer(record: PropertyRecord) {\n const customRenderer = this.getCustomRenderer(record);\n if (customRenderer) return customRenderer;\n\n // Use one of default renderers\n switch (record.value.valueFormat) {\n case PropertyValueFormat.Primitive:\n return this._defaultPrimitiveValueRenderer;\n case PropertyValueFormat.Array:\n return this._defaultArrayValueRenderer;\n case PropertyValueFormat.Struct:\n return this._defaultStructValueRenderer;\n default:\n return undefined;\n }\n }\n\n /* Render property into JSX element /\n public render(\n record: PropertyRecord,\n context?: PropertyValueRendererContext\n ): React.ReactNode {\n const selectedRenderer = this.selectRenderer(record);\n\n if (!selectedRenderer \|\| !selectedRenderer.canRender(record, context))\n return undefined;\n\n return selectedRenderer.render(record, context);\n }\n\n /* Register a specified property type renderer /\n public registerRenderer(\n rendererType: string,\n propertyRenderer: IPropertyValueRenderer,\n overwrite = false\n ) {\n if (!overwrite && this._propertyRenderers.has(rendererType)) {\n throw Error(\n `PropertyValueRendererManager.registerRenderer error: type '${rendererType}' already registered to '${propertyRenderer.constructor.name}'`\n );\n }\n\n this._propertyRenderers.set(rendererType, propertyRenderer);\n }\n\n /* Unregister a specified property type renderer /\n public unregisterRenderer(rendererType: string) {\n this._propertyRenderers.delete(rendererType);\n }\n\n /* Get the specified property type renderer instance /\n public getRegisteredRenderer(rendererType: string) {\n return this._propertyRenderers.get(rendererType);\n }\n\n /* Check whether a property record has a custom renderer registered that can render it /\n public hasCustomRenderer(record: PropertyRecord): boolean {\n const customRenderer = this.getCustomRenderer(record);\n return !!(customRenderer && customRenderer.canRender(record));\n }\n\n /* Returns default PropertyValueRendererManager instance */\n public static get defaultManager() {\n if (!this._defaultRendererManager)\n this._defaultRendererManager = new PropertyValueRendererManager();\n\n return this._defaultRendererManager;\n }\n}\n"]}
1	+ {"version":3,"file":"ValueRendererManager.js","sourceRoot":"","sources":["../../../src/components-react/properties/ValueRendererManager.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Properties\n /\n\nimport type as React from \"react\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { ArrayPropertyValueRenderer } from \"./renderers/value/ArrayPropertyValueRenderer.js\";\nimport { MergedPropertyValueRenderer } from \"./renderers/value/MergedPropertyValueRenderer.js\";\nimport { PrimitivePropertyValueRenderer } from \"./renderers/value/PrimitivePropertyValueRenderer.js\";\nimport { StructPropertyValueRenderer } from \"./renderers/value/StructPropertyValueRenderer.js\";\nimport type { Orientation } from \"../common/Orientation.js\";\n\n/** Types of property containers\n * @public\n /\nexport enum PropertyContainerType {\n PropertyPane = \"pane\",\n Table = \"table\",\n Tree = \"tree\",\n}\n\n/* State of the Dialog component in a container which renders properties\n * @public\n /\nexport interface PropertyDialogState {\n title: string;\n content: React.ReactNode;\n}\n\n/* State of the Popup component in a container which renders properties\n * @public\n /\nexport interface PropertyPopupState {\n fixedPosition: { top: number; left: number };\n content: React.ReactNode;\n}\n\n/* Additional parameters to the renderer\n * @public\n /\nexport interface PropertyValueRendererContext {\n /* Type of container that holds the property /\n containerType?: string;\n /* Style that should be applied to the rendered element /\n style?: React.CSSProperties;\n /* Orientation of property/container /\n orientation?: Orientation;\n /* Callback to request for a Popup to be shown. /\n onPopupShow?: (popupState: PropertyPopupState) => void;\n /* Callback to request for a Popup to be hidden. /\n onPopupHide?: () => void;\n /* Callback to request for Dialog to be opened. /\n onDialogOpen?: (dialogState: PropertyDialogState) => void;\n /* Callback to highlight text /\n textHighlighter?: (text: string) => React.ReactNode;\n /* Default value to show if value rendering is asynchronous /\n defaultValue?: React.ReactNode;\n /* Whether property value is expanded. /\n isExpanded?: boolean;\n /* Called when property value expansion or collapse is requested. /\n onExpansionToggled?: () => void;\n /* Called when property value element height changes. /\n onHeightChanged?: (newHeight: number) => void;\n}\n\n/* Custom property value renderer interface\n * @public\n /\nexport interface IPropertyValueRenderer {\n /* Checks if the renderer can handle given property /\n canRender: (\n record: PropertyRecord,\n context?: PropertyValueRendererContext\n ) => boolean;\n /* Method that returns a JSX representation of PropertyRecord /\n render: (\n record: PropertyRecord,\n context?: PropertyValueRendererContext\n ) => React.ReactNode;\n}\n\n/* Default implementation of property value renderer manager\n * @public\n /\nexport class PropertyValueRendererManager {\n private static _defaultRendererManager: PropertyValueRendererManager;\n\n protected _propertyRenderers: Map<string, IPropertyValueRenderer> = new Map<\n string,\n IPropertyValueRenderer\n >();\n protected _defaultPrimitiveValueRenderer: IPropertyValueRenderer =\n new PrimitivePropertyValueRenderer();\n protected _defaultArrayValueRenderer: IPropertyValueRenderer =\n new ArrayPropertyValueRenderer();\n protected _defaultStructValueRenderer: IPropertyValueRenderer =\n new StructPropertyValueRenderer();\n protected _defaultMergedValueRenderer: IPropertyValueRenderer =\n new MergedPropertyValueRenderer();\n\n private getCustomRenderer(record: PropertyRecord) {\n if (\n record.property.renderer &&\n this._propertyRenderers.has(record.property.renderer.name)\n )\n return this._propertyRenderers.get(record.property.renderer.name);\n\n if (this._defaultMergedValueRenderer.canRender(record))\n return this._defaultMergedValueRenderer;\n\n if (this._propertyRenderers.has(record.property.typename))\n return this._propertyRenderers.get(record.property.typename)!;\n\n return undefined;\n }\n\n private selectRenderer(record: PropertyRecord) {\n const customRenderer = this.getCustomRenderer(record);\n if (customRenderer) return customRenderer;\n\n // Use one of default renderers\n switch (record.value.valueFormat) {\n case PropertyValueFormat.Primitive:\n return this._defaultPrimitiveValueRenderer;\n case PropertyValueFormat.Array:\n return this._defaultArrayValueRenderer;\n case PropertyValueFormat.Struct:\n return this._defaultStructValueRenderer;\n default:\n return undefined;\n }\n }\n\n /* Render property into JSX element /\n public render(\n record: PropertyRecord,\n context?: PropertyValueRendererContext\n ): React.ReactNode {\n const selectedRenderer = this.selectRenderer(record);\n\n if (!selectedRenderer \|\| !selectedRenderer.canRender(record, context))\n return undefined;\n\n return selectedRenderer.render(record, context);\n }\n\n /* Register a specified property type renderer /\n public registerRenderer(\n rendererType: string,\n propertyRenderer: IPropertyValueRenderer,\n overwrite = false\n ) {\n if (!overwrite && this._propertyRenderers.has(rendererType)) {\n throw Error(\n `PropertyValueRendererManager.registerRenderer error: type '${rendererType}' already registered to '${propertyRenderer.constructor.name}'`\n );\n }\n\n this._propertyRenderers.set(rendererType, propertyRenderer);\n }\n\n /* Unregister a specified property type renderer /\n public unregisterRenderer(rendererType: string) {\n this._propertyRenderers.delete(rendererType);\n }\n\n /* Get the specified property type renderer instance /\n public getRegisteredRenderer(rendererType: string) {\n return this._propertyRenderers.get(rendererType);\n }\n\n /* Check whether a property record has a custom renderer registered that can render it /\n public hasCustomRenderer(record: PropertyRecord): boolean {\n const customRenderer = this.getCustomRenderer(record);\n return !!(customRenderer && customRenderer.canRender(record));\n }\n\n /* Returns default PropertyValueRendererManager instance */\n public static get defaultManager() {\n if (!this._defaultRendererManager)\n this._defaultRendererManager = new PropertyValueRendererManager();\n\n return this._defaultRendererManager;\n }\n}\n"]}

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

@@ -16,26 +16,19 @@ import { PropertyView } from "./PropertyView.js";
  * @public
  */
 export class NonPrimitivePropertyRenderer extends React.Component {
+    state = {
+        /** If it's not collapsible, that means it's expanded by default and can't be collapsed */
+        isExpanded: !this.props.isCollapsible || this.props.propertyRecord.autoExpand,
+    };
     constructor(props) {
         super(props);
-        this.state = {
-            /** If it's not collapsible, that means it's expanded by default and can't be collapsed */
-            isExpanded: !this.props.isCollapsible || this.props.propertyRecord.autoExpand,
-        };
-        this._onExpanded = () => {
-            this.setState({ isExpanded: true });
-        };
-        this._onCollapsed = () => {
-            this.setState({ isExpanded: false });
-        };
-        this._renderPropertyForItem = (item) => {
-            const prefix = this.props.uniqueKey
-                ? this.props.uniqueKey
-                : this.props.propertyRecord.property.name;
-            const uniqueKey = `${prefix}_${item.property.name}`;
-            return (React.createElement(PropertyRenderer, { key: uniqueKey, uniqueKey: uniqueKey, propertyRecord: item, indentation: this.props.indentation ? this.props.indentation + 1 : 1, orientation: this.props.orientation, columnRatio: this.props.columnRatio, actionButtonRenderers: this.props.actionButtonRenderers, onColumnRatioChanged: this.props.onColumnRatioChanged, width: this.props.width, isResizeHandleHovered: this.props.isResizeHandleHovered, onResizeHandleHoverChanged: this.props.onResizeHandleHoverChanged, isResizeHandleBeingDragged: this.props.isResizeHandleBeingDragged, onResizeHandleDragChanged: this.props.onResizeHandleDragChanged, columnInfo: this.props.columnInfo }));
-        };
     }
+    _onExpanded = () => {
+        this.setState({ isExpanded: true });
+    };
+    _onCollapsed = () => {
+        this.setState({ isExpanded: false });
+    };
     getLabel(props, state) {
         const { orientation, indentation, width, columnRatio, columnInfo } = props;
         const minLabelWidth = columnInfo?.minLabelWidth;
@@ -54,6 +47,13 @@ export class NonPrimitivePropertyRenderer extends React.Component {
         });
         return modifiedProperties;
     }
+    _renderPropertyForItem = (item) => {
+        const prefix = this.props.uniqueKey
+            ? this.props.uniqueKey
+            : this.props.propertyRecord.property.name;
+        const uniqueKey = `${prefix}_${item.property.name}`;
+        return (React.createElement(PropertyRenderer, { key: uniqueKey, uniqueKey: uniqueKey, propertyRecord: item, indentation: this.props.indentation ? this.props.indentation + 1 : 1, orientation: this.props.orientation, columnRatio: this.props.columnRatio, actionButtonRenderers: this.props.actionButtonRenderers, onColumnRatioChanged: this.props.onColumnRatioChanged, width: this.props.width, isResizeHandleHovered: this.props.isResizeHandleHovered, onResizeHandleHoverChanged: this.props.onResizeHandleHoverChanged, isResizeHandleBeingDragged: this.props.isResizeHandleBeingDragged, onResizeHandleDragChanged: this.props.onResizeHandleDragChanged, columnInfo: this.props.columnInfo }));
+    };
     render() {
         let items = this.props.propertyRecord.getChildrenRecords();
         if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)

package/lib/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":"AAAA;;;gGAGgG;AAChG;;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,6BAA6B,CAAC;AACrE,OAAO,EAAE,iCAAiC,EAAE,MAAM,8CAA8C,CAAC;AAEjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAiBjD;;GAEG;AACH,MAAM,OAAO,4BAA6B,SAAQ,KAAK,CAAC,SAGvD;~~IAOC~~,~~YAAY,KAAwC;QAClD,~~KAAK,~~CAAC,KAAK,CAAC,CAAC;QAPU,UAAK,~~GAAsC;~~YAClE~~,0FAA0F;~~YAC1F~~,UAAU,EACR,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;~~SACpE~~,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;~~QAgDM~~,~~2BAAsB~~,~~GAAG~~,~~CAAC~~,~~IAAoB~~,~~EAAE,EAAE~~;~~YACxD~~,MAAM,~~MAAM~~,~~GAAG~~,~~IAAI~~,~~CAAC~~,KAAK,~~CAAC~~,~~SAAS;gBACjC~~,~~CAAC~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,KAAK,CAAC~~,SAAS~~;~~gBACtB~~,~~CAAC~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~KAAK~~,CAAC,~~cAAc~~,~~CAAC~~,~~QAAQ~~,CAAC,~~IAAI~~,~~CAAC;YAC5C~~,~~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~~;IA/EF~~,CAAC~~;IAUO~~,~~QAAQ~~,~~CACd~~,~~KAAwC~~,~~EACxC~~,~~KAAwC~~;~~QAExC~~,~~MAAM~~,~~EAAE~~,~~WAAW~~,~~EAAE~~,~~WAAW~~,~~EAAE~~,KAAK,EAAE,WAAW,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~GAAG~~,~~KAAK~~,CAAC;~~QAC3E~~,~~MAAM~~,~~aAAa~~,GAAG,~~UAAU~~,EAAE,~~aAAa,CAAC~~;~~QAChD~~,MAAM,MAAM,GAAG,~~sBAAsB~~,CAAC,~~cAAc~~,~~CAClD~~,~~WAAW~~,~~EACX~~,~~WAAW~~,~~EACX~~,KAAK,~~EACL~~,~~WAAW~~,~~EACX~~,~~aAAa,CACd,~~CAAC~~;QAEF~~,IAAI,~~YAAY~~,~~GAAG,~~KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,~~YAAY~~,CAAC;~~QAC9D~~,~~IACE~~,IAAI,CAAC,~~KAAK~~,CAAC,~~cAAc~~,CAAC,~~KAAK~~,~~CAAC~~,~~WAAW~~,~~KAAK~~,~~mBAAmB~~,~~CAAC~~,~~KAAK;YAEzE~~,~~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~~,~~CACpD~~,~~CAAC,~~IAAI,~~EAAE~~,KAAK,~~EAAkB~~,~~EAAE;YAC9B~~,~~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~~,~~CACF~~,CAAC;~~QAEF~~,~~OAAO,kBAAkB,~~CAAC~~;IAC5B~~,CAAC;~~IA2Be~~,MAAM;QACpB,IAAI,KAAK,GACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,kBAAkB,EAAE,CAAC;QACjD,IACE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,KAAK,mBAAmB,CAAC,KAAK;YAEzE,KAAK,GAAG,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC;QAEjD,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7C,OAAO,CACL;YACG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAC1B,oBAAC,YAAY,IACX,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAC/C,KAAK,GACT,CACH,CAAC,CAAC,CAAC,SAAS;YAEZ,IAAI,CAAC,KAAK,CAAC,UAAU;gBACpB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC;gBACxC,CAAC,CAAC,SAAS,CACZ,CACJ,CAAC;IACJ,CAAC;CACF","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Properties\n /\n\nimport \"./NonPrimitivePropertyRenderer.scss\";\nimport as React from \"react\";\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { CommonPropertyRenderer } from \"./CommonPropertyRenderer.js\";\nimport { NonPrimitivePropertyLabelRenderer } from \"./label/NonPrimitivePropertyLabelRenderer.js\";\nimport type { PrimitiveRendererProps } from \"./PrimitivePropertyRenderer.js\";\nimport { PropertyRenderer } from \"./PropertyRenderer.js\";\nimport { PropertyView } from \"./PropertyView.js\";\n\n/** Properties of [[NonPrimitivePropertyRenderer]] React component\n * @public\n /\nexport interface NonPrimitivePropertyRendererProps\n extends PrimitiveRendererProps {\n /* Can struct/array property be collapsed /\n isCollapsible?: boolean;\n}\n\n/* State of [[NonPrimitivePropertyRenderer]] React component. /\ninterface NonPrimitivePropertyRendererState {\n /* Is struct/array property expanded /\n isExpanded?: boolean;\n}\n\n/* React Component that renders struct and array properties\n * @public\n /\nexport class NonPrimitivePropertyRenderer extends React.Component<\n NonPrimitivePropertyRendererProps,\n NonPrimitivePropertyRendererState\n> {\n public override readonly state: NonPrimitivePropertyRendererState = {\n /* If it's not collapsible, that means it's expanded by default and can't be collapsed */\n isExpanded:\n !this.props.isCollapsible \|\| this.props.propertyRecord.autoExpand,\n };\n\n constructor(props: NonPrimitivePropertyRendererProps) {\n super(props);\n }\n\n private _onExpanded = () => {\n this.setState({ isExpanded: true });\n };\n\n private _onCollapsed = () => {\n this.setState({ isExpanded: false });\n };\n\n private getLabel(\n props: NonPrimitivePropertyRendererProps,\n state: NonPrimitivePropertyRendererState\n ): React.ReactNode {\n const { orientation, indentation, width, columnRatio, columnInfo } = props;\n const minLabelWidth = columnInfo?.minLabelWidth;\n const offset = CommonPropertyRenderer.getLabelOffset(\n indentation,\n orientation,\n width,\n columnRatio,\n minLabelWidth\n );\n\n let displayLabel = props.propertyRecord.property.displayLabel;\n if (\n this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\n )\n displayLabel = `${displayLabel} (${this.props.propertyRecord.value.items.length})`;\n\n return (\n <NonPrimitivePropertyLabelRenderer\n isExpanded={!!state.isExpanded}\n onExpand={this._onExpanded}\n onCollapse={this._onCollapsed}\n offset={offset}\n renderColon={false}\n >\n {displayLabel}\n </NonPrimitivePropertyLabelRenderer>\n );\n }\n\n private overrideArrayChildrenNames(items: PropertyRecord[]) {\n const modifiedProperties: PropertyRecord[] = items.map(\n (item, index): PropertyRecord => {\n const newProperty = { ...item.property };\n newProperty.displayLabel = `[${index + 1}]`;\n newProperty.name = `${newProperty.name}_${index}`;\n return new PropertyRecord(item.value, newProperty);\n }\n );\n\n return modifiedProperties;\n }\n\n private _renderPropertyForItem = (item: PropertyRecord) => {\n const prefix = this.props.uniqueKey\n ? this.props.uniqueKey\n : this.props.propertyRecord.property.name;\n const uniqueKey = `${prefix}_${item.property.name}`;\n return (\n <PropertyRenderer\n key={uniqueKey}\n uniqueKey={uniqueKey}\n propertyRecord={item}\n indentation={this.props.indentation ? this.props.indentation + 1 : 1}\n orientation={this.props.orientation}\n columnRatio={this.props.columnRatio}\n actionButtonRenderers={this.props.actionButtonRenderers}\n onColumnRatioChanged={this.props.onColumnRatioChanged}\n width={this.props.width}\n isResizeHandleHovered={this.props.isResizeHandleHovered}\n onResizeHandleHoverChanged={this.props.onResizeHandleHoverChanged}\n isResizeHandleBeingDragged={this.props.isResizeHandleBeingDragged}\n onResizeHandleDragChanged={this.props.onResizeHandleDragChanged}\n columnInfo={this.props.columnInfo}\n />\n );\n };\n\n public override render() {\n let items: PropertyRecord[] =\n this.props.propertyRecord.getChildrenRecords();\n if (\n this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\n )\n items = this.overrideArrayChildrenNames(items);\n\n const { indentation, ...props } = this.props;\n return (\n <>\n {this.props.isCollapsible ? (\n <PropertyView\n labelElement={this.getLabel(this.props, this.state)}\n {...props}\n />\n ) : undefined}\n\n {this.state.isExpanded\n ? items.map(this._renderPropertyForItem)\n : undefined}\n </>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"NonPrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../src/components-react/properties/renderers/NonPrimitivePropertyRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Properties\n /\n\nimport \"./NonPrimitivePropertyRenderer.scss\";\nimport as React from \"react\";\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { CommonPropertyRenderer } from \"./CommonPropertyRenderer.js\";\nimport { NonPrimitivePropertyLabelRenderer } from \"./label/NonPrimitivePropertyLabelRenderer.js\";\nimport type { PrimitiveRendererProps } from \"./PrimitivePropertyRenderer.js\";\nimport { PropertyRenderer } from \"./PropertyRenderer.js\";\nimport { PropertyView } from \"./PropertyView.js\";\n\n/** Properties of [[NonPrimitivePropertyRenderer]] React component\n * @public\n /\nexport interface NonPrimitivePropertyRendererProps\n extends PrimitiveRendererProps {\n /* Can struct/array property be collapsed /\n isCollapsible?: boolean;\n}\n\n/* State of [[NonPrimitivePropertyRenderer]] React component. /\ninterface NonPrimitivePropertyRendererState {\n /* Is struct/array property expanded /\n isExpanded?: boolean;\n}\n\n/* React Component that renders struct and array properties\n * @public\n /\nexport class NonPrimitivePropertyRenderer extends React.Component<\n NonPrimitivePropertyRendererProps,\n NonPrimitivePropertyRendererState\n> {\n public override readonly state: NonPrimitivePropertyRendererState = {\n /* If it's not collapsible, that means it's expanded by default and can't be collapsed */\n isExpanded:\n !this.props.isCollapsible \|\| this.props.propertyRecord.autoExpand,\n };\n\n constructor(props: NonPrimitivePropertyRendererProps) {\n super(props);\n }\n\n private _onExpanded = () => {\n this.setState({ isExpanded: true });\n };\n\n private _onCollapsed = () => {\n this.setState({ isExpanded: false });\n };\n\n private getLabel(\n props: NonPrimitivePropertyRendererProps,\n state: NonPrimitivePropertyRendererState\n ): React.ReactNode {\n const { orientation, indentation, width, columnRatio, columnInfo } = props;\n const minLabelWidth = columnInfo?.minLabelWidth;\n const offset = CommonPropertyRenderer.getLabelOffset(\n indentation,\n orientation,\n width,\n columnRatio,\n minLabelWidth\n );\n\n let displayLabel = props.propertyRecord.property.displayLabel;\n if (\n this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\n )\n displayLabel = `${displayLabel} (${this.props.propertyRecord.value.items.length})`;\n\n return (\n <NonPrimitivePropertyLabelRenderer\n isExpanded={!!state.isExpanded}\n onExpand={this._onExpanded}\n onCollapse={this._onCollapsed}\n offset={offset}\n renderColon={false}\n >\n {displayLabel}\n </NonPrimitivePropertyLabelRenderer>\n );\n }\n\n private overrideArrayChildrenNames(items: PropertyRecord[]) {\n const modifiedProperties: PropertyRecord[] = items.map(\n (item, index): PropertyRecord => {\n const newProperty = { ...item.property };\n newProperty.displayLabel = `[${index + 1}]`;\n newProperty.name = `${newProperty.name}_${index}`;\n return new PropertyRecord(item.value, newProperty);\n }\n );\n\n return modifiedProperties;\n }\n\n private _renderPropertyForItem = (item: PropertyRecord) => {\n const prefix = this.props.uniqueKey\n ? this.props.uniqueKey\n : this.props.propertyRecord.property.name;\n const uniqueKey = `${prefix}_${item.property.name}`;\n return (\n <PropertyRenderer\n key={uniqueKey}\n uniqueKey={uniqueKey}\n propertyRecord={item}\n indentation={this.props.indentation ? this.props.indentation + 1 : 1}\n orientation={this.props.orientation}\n columnRatio={this.props.columnRatio}\n actionButtonRenderers={this.props.actionButtonRenderers}\n onColumnRatioChanged={this.props.onColumnRatioChanged}\n width={this.props.width}\n isResizeHandleHovered={this.props.isResizeHandleHovered}\n onResizeHandleHoverChanged={this.props.onResizeHandleHoverChanged}\n isResizeHandleBeingDragged={this.props.isResizeHandleBeingDragged}\n onResizeHandleDragChanged={this.props.onResizeHandleDragChanged}\n columnInfo={this.props.columnInfo}\n />\n );\n };\n\n public override render() {\n let items: PropertyRecord[] =\n this.props.propertyRecord.getChildrenRecords();\n if (\n this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\n )\n items = this.overrideArrayChildrenNames(items);\n\n const { indentation, ...props } = this.props;\n return (\n <>\n {this.props.isCollapsible ? (\n <PropertyView\n labelElement={this.getLabel(this.props, this.state)}\n {...props}\n />\n ) : undefined}\n\n {this.state.isExpanded\n ? items.map(this._renderPropertyForItem)\n : undefined}\n </>\n );\n }\n}\n"]}

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

@@ -8,10 +8,11 @@
 import { Orientation } from "../../common/Orientation.js";
 /** @internal */
 export class PropertyGridColumnStyleProvider {
+    _minLabelWidth = 0;
+    _minValueWidth = 0;
+    _actionButtonWidth = 0;
+    _isMinimumColumnSizeEnabled;
     constructor(columnInfo) {
-        this._minLabelWidth = 0;
-        this._minValueWidth = 0;
-        this._actionButtonWidth = 0;
         if (!columnInfo) {
             this._isMinimumColumnSizeEnabled = false;
             return;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PropertyGridColumns.js","sourceRoot":"","sources":["../../../../src/components-react/properties/renderers/PropertyGridColumns.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAU1D,gBAAgB;AAChB,MAAM,OAAO,+BAA+B;~~IAM1C~~,~~YAAmB~~,~~UAA8C;QALzD,mBAAc,~~GAAW,CAAC,CAAC;~~QAC3B~~,~~mBAAc~~,GAAW,CAAC,CAAC;~~QAC3B~~,~~uBAAkB~~,GAAW,CAAC,CAAC;~~QAIrC~~,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;YACzC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC;QAC/C,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC;QAC/C,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC,iBAAiB,CAAC;QACvD,IAAI,CAAC,2BAA2B,GAAG,UAAU,CAAC,0BAA0B,CAAC;IAC3E,CAAC;IAED,IAAW,aAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAED,IAAW,aAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAED,IAAW,iBAAiB;QAC1B,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACjC,CAAC;IAED,IAAW,0BAA0B;QACnC,OAAO,IAAI,CAAC,2BAA2B,CAAC;IAC1C,CAAC;IAEM,QAAQ,CACb,WAAwB,EACxB,iBAA0B,EAC1B,KAAa,EACb,oBAA6B;QAE7B,QAAQ,WAAW,EAAE,CAAC;YACpB,KAAK,WAAW,CAAC,UAAU;gBACzB,OAAO,IAAI,CAAC,kBAAkB,CAC5B,iBAAiB,EACjB,KAAK,EACL,oBAAoB,CACrB,CAAC;YACJ,KAAK,WAAW,CAAC,QAAQ;gBACvB,OAAO,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;YAElD;gBACE,MAAM,wBAAwB,GAAU,WAAW,CAAC,CAAC,4CAA4C;gBACjG,MAAM,IAAI,KAAK,CACb,+BAA+B,MAAM,CACnC,wBAAwB,CACzB,gCAAgC,CAClC,CAAC;QACN,CAAC;IACH,CAAC;IAED,oFAAoF;IAC5E,kBAAkB,CACxB,OAAkC;QAElC,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;QACnD,OAAO,EAAE,mBAAmB,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;IACpD,CAAC;IAEO,kBAAkB,CACxB,iBAA0B,EAC1B,KAAa,EACb,oBAA6B;QAE7B,MAAM,eAAe,GAAG,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QAClE,MAAM,kBAAkB,GAAG,iBAAiB;YAC1C,CAAC,CAAC,IAAI,CAAC,iBAAiB;gBACtB,CAAC,CAAC,GAAG,IAAI,CAAC,iBAAiB,IAAI;gBAC/B,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,SAAS,CAAC;QACd,IAAI,CAAC,IAAI,CAAC,0BAA0B;YAClC,OAAO,IAAI,CAAC,kBAAkB,CAAC;gBAC7B,GAAG,KAAK,GAAG,GAAG,GAAG;gBACjB,eAAe;gBACf,MAAM;gBACN,kBAAkB;aACnB,CAAC,CAAC;QAEL,MAAM,WAAW,GAAG,UAAU,IAAI,CAAC,aAAa,OAAO,KAAK,GAAG,GAAG,IAAI,CAAC;QACvE,MAAM,WAAW,GAAG,UAAU,IAAI,CAAC,aAAa,UAAU,CAAC;QAE3D,OAAO,IAAI,CAAC,kBAAkB,CAAC;YAC7B,WAAW;YACX,eAAe;YACf,WAAW;YACX,kBAAkB;SACnB,CAAC,CAAC;IACL,CAAC;IAEO,gBAAgB,CAAC,iBAA0B;QACjD,OAAO,IAAI,CAAC,kBAAkB,CAAC;YAC7B,MAAM;YACN,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;SACvC,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Properties\n /\n\nimport { Orientation } from \"../../common/Orientation.js\";\n\n/* @internal /\nexport interface PropertyGridColumnInfo {\n minLabelWidth: number;\n minValueWidth: number;\n actionButtonWidth: number;\n isMinimumColumnSizeEnabled: boolean;\n}\n\n/* @internal /\nexport class PropertyGridColumnStyleProvider {\n private _minLabelWidth: number = 0;\n private _minValueWidth: number = 0;\n private _actionButtonWidth: number = 0;\n private _isMinimumColumnSizeEnabled: boolean;\n\n public constructor(columnInfo: PropertyGridColumnInfo \| undefined) {\n if (!columnInfo) {\n this._isMinimumColumnSizeEnabled = false;\n return;\n }\n\n this._minLabelWidth = columnInfo.minLabelWidth;\n this._minValueWidth = columnInfo.minValueWidth;\n this._actionButtonWidth = columnInfo.actionButtonWidth;\n this._isMinimumColumnSizeEnabled = columnInfo.isMinimumColumnSizeEnabled;\n }\n\n public get minLabelWidth() {\n return this._minLabelWidth;\n }\n\n public get minValueWidth() {\n return this._minValueWidth;\n }\n\n public get actionButtonWidth() {\n return this._actionButtonWidth;\n }\n\n public get isMinimumColumnSizeEnabled() {\n return this._isMinimumColumnSizeEnabled;\n }\n\n public getStyle(\n orientation: Orientation,\n needActionButtons: boolean,\n ratio: number,\n needElementSeparator: boolean\n ): React.CSSProperties {\n switch (orientation) {\n case Orientation.Horizontal:\n return this.getHorizontalStyle(\n needActionButtons,\n ratio,\n needElementSeparator\n );\n case Orientation.Vertical:\n return this.getVerticalStyle(needActionButtons);\n\n default:\n const unhandledOrientationType: never = orientation; // Compile time check that all cases handled\n throw new Error(\n `Unhandled orientation type: ${String(\n unhandledOrientationType\n )}. Was new orientation added ? `\n );\n }\n }\n\n /* Join columns together in sequence, filtering out undefined column definitions /\n private columnStyleBuilder(\n columns: Array<string \| undefined>\n ): React.CSSProperties {\n columns = columns.filter((el) => el !== undefined);\n return { gridTemplateColumns: columns.join(\" \") };\n }\n\n private getHorizontalStyle(\n needActionButtons: boolean,\n ratio: number,\n needElementSeparator: boolean\n ): React.CSSProperties {\n const separatorColumn = needElementSeparator ? \"auto\" : undefined;\n const actionButtonColumn = needActionButtons\n ? this.actionButtonWidth\n ? `${this.actionButtonWidth}px`\n : \"auto\"\n : undefined;\n if (!this.isMinimumColumnSizeEnabled)\n return this.columnStyleBuilder([\n `${ratio 100}%`,\n separatorColumn,\n \"auto\",\n actionButtonColumn,\n ]);\n\n const labelColumn = `minmax(${this.minLabelWidth}px, ${ratio * 100}%)`;\n const valueColumn = `minmax(${this.minValueWidth}px, 1fr)`;\n\n return this.columnStyleBuilder([\n labelColumn,\n separatorColumn,\n valueColumn,\n actionButtonColumn,\n ]);\n }\n\n private getVerticalStyle(needActionButtons: boolean): React.CSSProperties {\n return this.columnStyleBuilder([\n \"auto\",\n needActionButtons ? \"auto\" : undefined,\n ]);\n }\n}\n"]}
1	+ {"version":3,"file":"PropertyGridColumns.js","sourceRoot":"","sources":["../../../../src/components-react/properties/renderers/PropertyGridColumns.ts"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Properties\n /\n\nimport { Orientation } from \"../../common/Orientation.js\";\n\n/* @internal /\nexport interface PropertyGridColumnInfo {\n minLabelWidth: number;\n minValueWidth: number;\n actionButtonWidth: number;\n isMinimumColumnSizeEnabled: boolean;\n}\n\n/* @internal /\nexport class PropertyGridColumnStyleProvider {\n private _minLabelWidth: number = 0;\n private _minValueWidth: number = 0;\n private _actionButtonWidth: number = 0;\n private _isMinimumColumnSizeEnabled: boolean;\n\n public constructor(columnInfo: PropertyGridColumnInfo \| undefined) {\n if (!columnInfo) {\n this._isMinimumColumnSizeEnabled = false;\n return;\n }\n\n this._minLabelWidth = columnInfo.minLabelWidth;\n this._minValueWidth = columnInfo.minValueWidth;\n this._actionButtonWidth = columnInfo.actionButtonWidth;\n this._isMinimumColumnSizeEnabled = columnInfo.isMinimumColumnSizeEnabled;\n }\n\n public get minLabelWidth() {\n return this._minLabelWidth;\n }\n\n public get minValueWidth() {\n return this._minValueWidth;\n }\n\n public get actionButtonWidth() {\n return this._actionButtonWidth;\n }\n\n public get isMinimumColumnSizeEnabled() {\n return this._isMinimumColumnSizeEnabled;\n }\n\n public getStyle(\n orientation: Orientation,\n needActionButtons: boolean,\n ratio: number,\n needElementSeparator: boolean\n ): React.CSSProperties {\n switch (orientation) {\n case Orientation.Horizontal:\n return this.getHorizontalStyle(\n needActionButtons,\n ratio,\n needElementSeparator\n );\n case Orientation.Vertical:\n return this.getVerticalStyle(needActionButtons);\n\n default:\n const unhandledOrientationType: never = orientation; // Compile time check that all cases handled\n throw new Error(\n `Unhandled orientation type: ${String(\n unhandledOrientationType\n )}. Was new orientation added ? `\n );\n }\n }\n\n /* Join columns together in sequence, filtering out undefined column definitions /\n private columnStyleBuilder(\n columns: Array<string \| undefined>\n ): React.CSSProperties {\n columns = columns.filter((el) => el !== undefined);\n return { gridTemplateColumns: columns.join(\" \") };\n }\n\n private getHorizontalStyle(\n needActionButtons: boolean,\n ratio: number,\n needElementSeparator: boolean\n ): React.CSSProperties {\n const separatorColumn = needElementSeparator ? \"auto\" : undefined;\n const actionButtonColumn = needActionButtons\n ? this.actionButtonWidth\n ? `${this.actionButtonWidth}px`\n : \"auto\"\n : undefined;\n if (!this.isMinimumColumnSizeEnabled)\n return this.columnStyleBuilder([\n `${ratio 100}%`,\n separatorColumn,\n \"auto\",\n actionButtonColumn,\n ]);\n\n const labelColumn = `minmax(${this.minLabelWidth}px, ${ratio * 100}%)`;\n const valueColumn = `minmax(${this.minValueWidth}px, 1fr)`;\n\n return this.columnStyleBuilder([\n labelColumn,\n separatorColumn,\n valueColumn,\n actionButtonColumn,\n ]);\n }\n\n private getVerticalStyle(needActionButtons: boolean): React.CSSProperties {\n return this.columnStyleBuilder([\n \"auto\",\n needActionButtons ? \"auto\" : undefined,\n ]);\n }\n}\n"]}