@itwin/components-react 4.17.6 → 5.0.0-dev.3

package/lib/components-react/properties/renderers/NonPrimitivePropertyRenderer.d.ts

@@ -0,0 +1,33 @@
+/** @packageDocumentation
+ * @module Properties
+ */
+import "./NonPrimitivePropertyRenderer.scss";
+import * as React from "react";
+import type { PrimitiveRendererProps } from "./PrimitivePropertyRenderer.js";
+/** Properties of [[NonPrimitivePropertyRenderer]] React component
+ * @public
+ */
+export interface NonPrimitivePropertyRendererProps extends PrimitiveRendererProps {
+    /** Can struct/array property be collapsed */
+    isCollapsible?: boolean;
+}
+/** State of [[NonPrimitivePropertyRenderer]] React component. */
+interface NonPrimitivePropertyRendererState {
+    /** Is struct/array property expanded */
+    isExpanded?: boolean;
+}
+/** React Component that renders struct and array properties
+ * @public
+ */
+export declare class NonPrimitivePropertyRenderer extends React.Component<NonPrimitivePropertyRendererProps, NonPrimitivePropertyRendererState> {
+    readonly state: NonPrimitivePropertyRendererState;
+    constructor(props: NonPrimitivePropertyRendererProps);
+    private _onExpanded;
+    private _onCollapsed;
+    private getLabel;
+    private overrideArrayChildrenNames;
+    private _renderPropertyForItem;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=NonPrimitivePropertyRenderer.d.ts.map

package/lib/components-react/properties/renderers/NonPrimitivePropertyRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NonPrimitivePropertyRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/renderers/NonPrimitivePropertyRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qCAAqC,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAI7E;;GAEG;AACH,MAAM,WAAW,iCACf,SAAQ,sBAAsB;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,iEAAiE;AACjE,UAAU,iCAAiC;IACzC,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,4BAA6B,SAAQ,KAAK,CAAC,SAAS,CAC/D,iCAAiC,EACjC,iCAAiC,CAClC;IACC,SAAyB,KAAK,EAAE,iCAAiC,CAI/D;gBAEU,KAAK,EAAE,iCAAiC;IAIpD,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,QAAQ;IAiChB,OAAO,CAAC,0BAA0B;IAalC,OAAO,CAAC,sBAAsB,CAuB5B;IAEc,MAAM;CAwBvB"}

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

@@ -0,0 +1,69 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Properties
+ */
+import "./NonPrimitivePropertyRenderer.scss";
+import * as React from "react";
+import { PropertyRecord, PropertyValueFormat } from "@itwin/appui-abstract";
+import { CommonPropertyRenderer } from "./CommonPropertyRenderer.js";
+import { NonPrimitivePropertyLabelRenderer } from "./label/NonPrimitivePropertyLabelRenderer.js";
+import { PropertyRenderer } from "./PropertyRenderer.js";
+import { PropertyView } from "./PropertyView.js";
+/** React Component that renders struct and array properties
+ * @public
+ */
+export class NonPrimitivePropertyRenderer extends React.Component {
+    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 }));
+        };
+    }
+    getLabel(props, state) {
+        const { orientation, indentation, width, columnRatio, columnInfo } = props;
+        const minLabelWidth = columnInfo?.minLabelWidth;
+        const offset = CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, minLabelWidth);
+        let displayLabel = props.propertyRecord.property.displayLabel;
+        if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)
+            displayLabel = `${displayLabel} (${this.props.propertyRecord.value.items.length})`;
+        return (React.createElement(NonPrimitivePropertyLabelRenderer, { isExpanded: !!state.isExpanded, onExpand: this._onExpanded, onCollapse: this._onCollapsed, offset: offset, renderColon: false }, displayLabel));
+    }
+    overrideArrayChildrenNames(items) {
+        const modifiedProperties = items.map((item, index) => {
+            const newProperty = { ...item.property };
+            newProperty.displayLabel = `[${index + 1}]`;
+            newProperty.name = `${newProperty.name}_${index}`;
+            return new PropertyRecord(item.value, newProperty);
+        });
+        return modifiedProperties;
+    }
+    render() {
+        let items = this.props.propertyRecord.getChildrenRecords();
+        if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array)
+            items = this.overrideArrayChildrenNames(items);
+        const { indentation, ...props } = this.props;
+        return (React.createElement(React.Fragment, null,
+            this.props.isCollapsible ? (React.createElement(PropertyView, { labelElement: this.getLabel(this.props, this.state), ...props })) : undefined,
+            this.state.isExpanded
+                ? items.map(this._renderPropertyForItem)
+                : undefined));
+    }
+}
+//# sourceMappingURL=NonPrimitivePropertyRenderer.js.map

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

@@ -0,0 +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/NonPrimitivePropertyRenderer.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+@use "~@itwin/core-react/lib/core-react/style/colors" as *;
+
+.components-nonprimitive-property {
+  padding: 10px;
+  display: grid;
+  grid-row-gap: 10px;
+
+  border-radius: var(--iui-border-radius-1);
+  border: solid 1px $uicore-gray-9;
+
+  background-color: #ffffff;
+}

package/lib/components-react/properties/renderers/PrimitivePropertyRenderer.d.ts

@@ -0,0 +1,27 @@
+/** @packageDocumentation
+ * @module Properties
+ */
+import type { HighlightingComponentProps } from "../../common/HighlightingComponentProps.js";
+import type { SharedRendererProps } from "./PropertyRenderer.js";
+import React from "react";
+/** Properties of [[PrimitivePropertyRenderer]] React component
+ * @public
+ */
+export interface PrimitiveRendererProps extends SharedRendererProps {
+    /** Property value as a React element */
+    valueElement?: React.ReactNode;
+    /** Render callback for property value. If specified, `valueElement` is ignored */
+    valueElementRenderer?: () => React.ReactNode;
+    /** Multiplier of how much the property is indented to the right */
+    indentation?: number;
+    /** Properties used for highlighting */
+    highlight?: HighlightingComponentProps;
+}
+/** React Component that renders primitive properties
+ * @public
+ */
+export declare class PrimitivePropertyRenderer extends React.Component<PrimitiveRendererProps> {
+    constructor(props: PrimitiveRendererProps);
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=PrimitivePropertyRenderer.d.ts.map

package/lib/components-react/properties/renderers/PrimitivePropertyRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitivePropertyRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/renderers/PrimitivePropertyRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAC7F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,mBAAmB;IACjE,wCAAwC;IACxC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,kFAAkF;IAClF,oBAAoB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC7C,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,0BAA0B,CAAC;CACxC;AAED;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC;gBACxE,KAAK,EAAE,sBAAsB;IAIzB,MAAM;CAGvB"}

package/lib/components-react/properties/renderers/PrimitivePropertyRenderer.js

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Properties
+ */
+import { CustomizablePropertyRenderer } from "./CustomizablePropertyRenderer.js";
+import React from "react";
+/** React Component that renders primitive properties
+ * @public
+ */
+export class PrimitivePropertyRenderer extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return React.createElement(CustomizablePropertyRenderer, { ...this.props });
+    }
+}
+//# sourceMappingURL=PrimitivePropertyRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../src/components-react/properties/renderers/PrimitivePropertyRenderer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAIH,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AACjF,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,KAAK,CAAC,SAAiC;IACpF,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,OAAO,oBAAC,4BAA4B,OAAK,IAAI,CAAC,KAAK,GAAI,CAAC;IAC1D,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 type { HighlightingComponentProps } from \"../../common/HighlightingComponentProps.js\";\nimport type { SharedRendererProps } from \"./PropertyRenderer.js\";\nimport { CustomizablePropertyRenderer } from \"./CustomizablePropertyRenderer.js\";\nimport React from \"react\";\n\n/** Properties of [[PrimitivePropertyRenderer]] React component\n * @public\n */\nexport interface PrimitiveRendererProps extends SharedRendererProps {\n  /** Property value as a React element */\n  valueElement?: React.ReactNode;\n  /** Render callback for property value. If specified, `valueElement` is ignored */\n  valueElementRenderer?: () => React.ReactNode;\n  /** Multiplier of how much the property is indented to the right */\n  indentation?: number;\n  /** Properties used for highlighting */\n  highlight?: HighlightingComponentProps;\n}\n\n/** React Component that renders primitive properties\n * @public\n */\nexport class PrimitivePropertyRenderer extends React.Component<PrimitiveRendererProps> {\n  constructor(props: PrimitiveRendererProps) {\n    super(props);\n  }\n\n  public override render() {\n    return <CustomizablePropertyRenderer {...this.props} />;\n  }\n}\n"]}

package/lib/components-react/properties/renderers/PropertyGridColumns.d.ts

@@ -0,0 +1,29 @@
+/** @packageDocumentation
+ * @module Properties
+ */
+import { Orientation } from "../../common/Orientation.js";
+/** @internal */
+export interface PropertyGridColumnInfo {
+    minLabelWidth: number;
+    minValueWidth: number;
+    actionButtonWidth: number;
+    isMinimumColumnSizeEnabled: boolean;
+}
+/** @internal */
+export declare class PropertyGridColumnStyleProvider {
+    private _minLabelWidth;
+    private _minValueWidth;
+    private _actionButtonWidth;
+    private _isMinimumColumnSizeEnabled;
+    constructor(columnInfo: PropertyGridColumnInfo | undefined);
+    get minLabelWidth(): number;
+    get minValueWidth(): number;
+    get actionButtonWidth(): number;
+    get isMinimumColumnSizeEnabled(): boolean;
+    getStyle(orientation: Orientation, needActionButtons: boolean, ratio: number, needElementSeparator: boolean): React.CSSProperties;
+    /** Join columns together in sequence, filtering out undefined column definitions */
+    private columnStyleBuilder;
+    private getHorizontalStyle;
+    private getVerticalStyle;
+}
+//# sourceMappingURL=PropertyGridColumns.d.ts.map

package/lib/components-react/properties/renderers/PropertyGridColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyGridColumns.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/renderers/PropertyGridColumns.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,gBAAgB;AAChB,MAAM,WAAW,sBAAsB;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,EAAE,OAAO,CAAC;CACrC;AAED,gBAAgB;AAChB,qBAAa,+BAA+B;IAC1C,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,2BAA2B,CAAU;gBAE1B,UAAU,EAAE,sBAAsB,GAAG,SAAS;IAYjE,IAAW,aAAa,WAEvB;IAED,IAAW,aAAa,WAEvB;IAED,IAAW,iBAAiB,WAE3B;IAED,IAAW,0BAA0B,YAEpC;IAEM,QAAQ,CACb,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,OAAO,EAC1B,KAAK,EAAE,MAAM,EACb,oBAAoB,EAAE,OAAO,GAC5B,KAAK,CAAC,aAAa;IAmBtB,oFAAoF;IACpF,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,kBAAkB;IA8B1B,OAAO,CAAC,gBAAgB;CAMzB"}

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

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Properties
+ */
+import { Orientation } from "../../common/Orientation.js";
+/** @internal */
+export class PropertyGridColumnStyleProvider {
+    constructor(columnInfo) {
+        this._minLabelWidth = 0;
+        this._minValueWidth = 0;
+        this._actionButtonWidth = 0;
+        if (!columnInfo) {
+            this._isMinimumColumnSizeEnabled = false;
+            return;
+        }
+        this._minLabelWidth = columnInfo.minLabelWidth;
+        this._minValueWidth = columnInfo.minValueWidth;
+        this._actionButtonWidth = columnInfo.actionButtonWidth;
+        this._isMinimumColumnSizeEnabled = columnInfo.isMinimumColumnSizeEnabled;
+    }
+    get minLabelWidth() {
+        return this._minLabelWidth;
+    }
+    get minValueWidth() {
+        return this._minValueWidth;
+    }
+    get actionButtonWidth() {
+        return this._actionButtonWidth;
+    }
+    get isMinimumColumnSizeEnabled() {
+        return this._isMinimumColumnSizeEnabled;
+    }
+    getStyle(orientation, needActionButtons, ratio, needElementSeparator) {
+        switch (orientation) {
+            case Orientation.Horizontal:
+                return this.getHorizontalStyle(needActionButtons, ratio, needElementSeparator);
+            case Orientation.Vertical:
+                return this.getVerticalStyle(needActionButtons);
+            default:
+                const unhandledOrientationType = orientation; // Compile time check that all cases handled
+                throw new Error(`Unhandled orientation type: ${unhandledOrientationType}. Was new orientation added ? `);
+        }
+    }
+    /** Join columns together in sequence, filtering out undefined column definitions */
+    columnStyleBuilder(columns) {
+        columns = columns.filter((el) => el !== undefined);
+        return { gridTemplateColumns: columns.join(" ") };
+    }
+    getHorizontalStyle(needActionButtons, ratio, needElementSeparator) {
+        const separatorColumn = needElementSeparator ? "auto" : undefined;
+        const actionButtonColumn = needActionButtons
+            ? this.actionButtonWidth
+                ? `${this.actionButtonWidth}px`
+                : "auto"
+            : undefined;
+        if (!this.isMinimumColumnSizeEnabled)
+            return this.columnStyleBuilder([
+                `${ratio * 100}%`,
+                separatorColumn,
+                "auto",
+                actionButtonColumn,
+            ]);
+        const labelColumn = `minmax(${this.minLabelWidth}px, ${ratio * 100}%)`;
+        const valueColumn = `minmax(${this.minValueWidth}px, 1fr)`;
+        return this.columnStyleBuilder([
+            labelColumn,
+            separatorColumn,
+            valueColumn,
+            actionButtonColumn,
+        ]);
+    }
+    getVerticalStyle(needActionButtons) {
+        return this.columnStyleBuilder([
+            "auto",
+            needActionButtons ? "auto" : undefined,
+        ]);
+    }
+}
+//# sourceMappingURL=PropertyGridColumns.js.map

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

@@ -0,0 +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: ${unhandledOrientationType}. 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"]}

package/lib/components-react/properties/renderers/PropertyRenderer.d.ts

@@ -0,0 +1,79 @@
+/** @packageDocumentation
+ * @module Properties
+ */
+import * as React from "react";
+import type { PropertyRecord } from "@itwin/appui-abstract";
+import type { HighlightingComponentProps } from "../../common/HighlightingComponentProps.js";
+import type { PropertyUpdatedArgs } from "../../editors/EditorContainer.js";
+import type { PropertyValueRendererManager } from "../ValueRendererManager.js";
+import type { ActionButtonRenderer } from "./ActionButtonRenderer.js";
+import type { PropertyGridColumnInfo } from "./PropertyGridColumns.js";
+import type { Orientation } from "../../common/Orientation.js";
+/** Properties shared by all renderers and PropertyView
+ * @public
+ */
+export interface SharedRendererProps {
+    /** PropertyRecord to render */
+    propertyRecord: PropertyRecord;
+    /** Unique string, that identifies this property component. Should be used if onClick or onRightClick are provided */
+    uniqueKey?: string;
+    /** Orientation to use for displaying the property */
+    orientation: Orientation;
+    /** Controls component selection */
+    isSelected?: boolean;
+    /** Called when property gets clicked. If undefined, clicking is disabled */
+    onClick?: (property: PropertyRecord, key?: string) => void;
+    /** Called when property gets right clicked. If undefined, right clicking is not working */
+    onRightClick?: (property: PropertyRecord, key?: string) => void;
+    /** Called to show a context menu for properties */
+    onContextMenu?: (property: PropertyRecord, e: React.MouseEvent) => void;
+    /** Ratio between label and value cells */
+    columnRatio?: number;
+    /** Callback to column ratio changed event */
+    onColumnRatioChanged?: (ratio: number) => void | {
+        ratio: number;
+    };
+    /** Indicates that properties have *hover* effect */
+    isHoverable?: boolean;
+    /** Indicates that properties can be selected */
+    isSelectable?: boolean;
+    /** Width of the whole property element */
+    width?: number;
+    /** Array of action button renderers */
+    actionButtonRenderers?: ActionButtonRenderer[];
+    /** Is resize handle hovered */
+    isResizeHandleHovered?: boolean;
+    /** Callback to hover event change */
+    onResizeHandleHoverChanged?: (isHovered: boolean) => void;
+    /** Is resize handle being dragged */
+    isResizeHandleBeingDragged?: boolean;
+    /** Callback to drag event change */
+    onResizeHandleDragChanged?: (isDragStarted: boolean) => void;
+    /** Information for styling property grid columns */
+    columnInfo?: PropertyGridColumnInfo;
+}
+/** Properties of [[PropertyRenderer]] React component
+ * @public
+ */
+export interface PropertyRendererProps extends SharedRendererProps {
+    /** Custom value renderer */
+    propertyValueRendererManager?: PropertyValueRendererManager;
+    /** Multiplier of how much the property is indented to the right */
+    indentation?: number;
+    /** Indicates property is being edited  */
+    isEditing?: boolean;
+    /** Called when property edit is committed. */
+    onEditCommit?: (args: PropertyUpdatedArgs) => void;
+    /** Called when property edit is cancelled. */
+    onEditCancel?: () => void;
+    /** Props used for highlighting. */
+    highlight?: HighlightingComponentProps;
+}
+/**  A React component that renders properties
+ * @public
+ */
+export declare const PropertyRenderer: {
+    (props: PropertyRendererProps): React.JSX.Element;
+    getLabelOffset(indentation?: number, orientation?: Orientation, width?: number, columnRatio?: number, minColumnLabelWidth?: number): number;
+};
+//# sourceMappingURL=PropertyRenderer.d.ts.map

package/lib/components-react/properties/renderers/PropertyRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/renderers/PropertyRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAC7F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAE5E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAKtE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG/D;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,+BAA+B;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,qHAAqH;IACrH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,WAAW,EAAE,WAAW,CAAC;IACzB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,2FAA2F;IAC3F,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxE,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG;QAC/C,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,qBAAqB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC/C,+BAA+B;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qCAAqC;IACrC,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,qCAAqC;IACrC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,oCAAoC;IACpC,yBAAyB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,oDAAoD;IACpD,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB;IAChE,4BAA4B;IAC5B,4BAA4B,CAAC,EAAE,4BAA4B,CAAC;IAC5D,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACnD,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mCAAmC;IACnC,SAAS,CAAC,EAAE,0BAA0B,CAAC;CACxC;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB;YAAW,qBAAqB;iCAyF7C,MAAM,gBACN,WAAW,UACjB,MAAM,gBACA,MAAM,wBACE,MAAM;CAP7B,CAAC"}

package/lib/components-react/properties/renderers/PropertyRenderer.js

@@ -0,0 +1,68 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Properties
+ */
+import * as React from "react";
+import { PropertyValueFormat } from "@itwin/appui-abstract";
+import { EditorContainer } from "../../editors/EditorContainer.js";
+import { CommonPropertyRenderer } from "./CommonPropertyRenderer.js";
+import { NonPrimitivePropertyRenderer } from "./NonPrimitivePropertyRenderer.js";
+import { PrimitivePropertyRenderer } from "./PrimitivePropertyRenderer.js";
+import { useTranslation } from "../../l10n/useTranslation.js";
+/**  A React component that renders properties
+ * @public
+ */
+export const PropertyRenderer = (props) => {
+    const { translate } = useTranslation();
+    const [displayValue, setDisplayValue] = React.useState(() => translate("general.loading"));
+    const { isEditing, orientation, propertyRecord, indentation, propertyValueRendererManager, onEditCommit, onEditCancel, ...restProps } = props;
+    const onCommit = React.useCallback((args) => {
+        if (onEditCommit)
+            onEditCommit(args);
+    }, [onEditCommit]);
+    const onCancel = React.useCallback(() => {
+        if (onEditCancel)
+            onEditCancel();
+    }, [onEditCancel]);
+    React.useEffect(() => {
+        if (isEditing) {
+            setDisplayValue(React.createElement(EditorContainer, { propertyRecord: propertyRecord, onCommit: onCommit, onCancel: onCancel, setFocus: true }));
+            return;
+        }
+        setDisplayValue(CommonPropertyRenderer.createNewDisplayValue(orientation, propertyRecord, indentation, propertyValueRendererManager));
+    }, [
+        orientation,
+        propertyRecord,
+        indentation,
+        propertyValueRendererManager,
+        onCommit,
+        onCancel,
+        isEditing,
+    ]);
+    const primitiveRendererProps = {
+        ...restProps,
+        propertyRecord,
+        orientation,
+        indentation,
+        valueElement: displayValue,
+    };
+    switch (props.propertyRecord.value.valueFormat) {
+        case PropertyValueFormat.Primitive:
+            return React.createElement(PrimitivePropertyRenderer, { ...primitiveRendererProps });
+        case PropertyValueFormat.Array:
+            // If array is empty, render it as a primitive property
+            if (props.propertyRecord.value.valueFormat === PropertyValueFormat.Array &&
+                props.propertyRecord.value.items.length === 0)
+                return React.createElement(PrimitivePropertyRenderer, { ...primitiveRendererProps });
+        // eslint-disable-next-line no-fallthrough
+        case PropertyValueFormat.Struct:
+            return (React.createElement(NonPrimitivePropertyRenderer, { isCollapsible: true, ...primitiveRendererProps }));
+    }
+};
+PropertyRenderer.getLabelOffset = (indentation, orientation, width, columnRatio, minColumnLabelWidth) => {
+    return CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, minColumnLabelWidth);
+};
+//# sourceMappingURL=PropertyRenderer.js.map

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

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

package/lib/components-react/properties/renderers/PropertyView.d.ts

@@ -0,0 +1,36 @@
+/** @packageDocumentation
+ * @module Properties
+ */
+import "./PropertyView.scss";
+import * as React from "react";
+import type { SharedRendererProps } from "./PropertyRenderer.js";
+/** Properties of [[PropertyView]] React component
+ * @public
+ */
+export interface PropertyViewProps extends SharedRendererProps {
+    /** Property label as a React element */
+    labelElement: React.ReactNode;
+    /** Property value as a React element */
+    valueElement?: React.ReactNode;
+    /** Render callback for property value. If specified, `valueElement` is ignored */
+    valueElementRenderer?: () => React.ReactNode;
+}
+/** @internal */
+interface PropertyViewState {
+    isHovered: boolean;
+}
+/**
+ * A React component that renders property as label/value pair
+ * @public
+ */
+export declare class PropertyView extends React.Component<PropertyViewProps, PropertyViewState> {
+    constructor(props: PropertyViewProps);
+    private _onClick;
+    private _onMouseEnter;
+    private _onMouseLeave;
+    private _onContextMenu;
+    private getClassName;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=PropertyView.d.ts.map

package/lib/components-react/properties/renderers/PropertyView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyView.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/renderers/PropertyView.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAGjE;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,wCAAwC;IACxC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wCAAwC;IACxC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,kFAAkF;IAClF,oBAAoB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC9C;AAED,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAC/C,iBAAiB,EACjB,iBAAiB,CAClB;gBACa,KAAK,EAAE,iBAAiB;IAOpC,OAAO,CAAC,QAAQ,CAGd;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,cAAc,CAUpB;IAEF,OAAO,CAAC,YAAY;IAWJ,MAAM;CAiEvB"}