@itwin/components-react 4.10.0 → 4.11.0

package/lib/esm/components-react/properties/renderers/CommonPropertyRenderer.js

@@ -35,7 +35,7 @@ export class CommonPropertyRenderer {
         return currentSize - minColumnLabelWidth;
     }
     static createNewDisplayValue(orientation, propertyRecord, indentation, propertyValueRendererManager, isExpanded, onExpansionToggled, onHeightChanged, highlight) {
-        const highlightCallback = highlight?.applyOnValue
+        const highlightCallback = (highlight === null || highlight === void 0 ? void 0 : highlight.applyOnValue)
             ? CommonPropertyRenderer.createHighlightCallback(highlight, propertyRecord)
             : undefined;
         const rendererContext = {
@@ -59,9 +59,10 @@ export class CommonPropertyRenderer {
         return displayValue;
     }
     static createHighlightCallback(highlight, propertyRecord) {
+        var _a;
         const activeMatch = highlight.activeHighlight;
-        const propertyName = activeMatch?.highlightedItemIdentifier;
-        const matchIndex = activeMatch?.highlightIndex ?? 0;
+        const propertyName = activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.highlightedItemIdentifier;
+        const matchIndex = (_a = activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.highlightIndex) !== null && _a !== void 0 ? _a : 0;
         let labelMatches;
         if (highlight.applyOnLabel) {
             labelMatches = countMatchesInString(propertyRecord.property.displayLabel.toLowerCase(), highlight.highlightedText);

package/lib/esm/components-react/properties/renderers/CommonPropertyRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonPropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/CommonPropertyRenderer.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 { Orientation } from \"@itwin/core-react\";\nimport { countMatchesInString } from \"../../common/countMatchesInString\";\nimport { HighlightedText } from \"../../common/HighlightedText\";\nimport type { HighlightingComponentProps } from \"../../common/HighlightingComponentProps\";\nimport type { PropertyValueRendererContext } from \"../ValueRendererManager\";\nimport {\n  PropertyContainerType,\n  PropertyValueRendererManager,\n} from \"../ValueRendererManager\";\n\n/**\n * @internal\n */\nexport class CommonPropertyRenderer {\n  public static getLabelOffset(\n    indentation?: number,\n    orientation?: Orientation,\n    width?: number,\n    columnRatio?: number,\n    minColumnLabelWidth?: number\n  ): number {\n    if (!indentation) return 0;\n\n    const maxIndent = 17;\n    const minIndent = 6;\n    if (\n      orientation !== Orientation.Horizontal ||\n      !width ||\n      !columnRatio ||\n      !minColumnLabelWidth\n    )\n      return indentation * maxIndent;\n\n    const currentSize = Math.ceil(width * columnRatio);\n    const shrinkThreshold = minColumnLabelWidth + maxIndent * indentation;\n    if (currentSize >= shrinkThreshold) return indentation * maxIndent;\n\n    const minShrink =\n      minColumnLabelWidth + minIndent + maxIndent * (indentation - 1);\n    if (currentSize <= minShrink)\n      return (\n        minIndent +\n        this.getLabelOffset(\n          indentation - 1,\n          orientation,\n          width,\n          columnRatio,\n          minColumnLabelWidth\n        )\n      );\n\n    return currentSize - minColumnLabelWidth;\n  }\n\n  public static createNewDisplayValue(\n    orientation: Orientation,\n    propertyRecord: PropertyRecord,\n    indentation?: number,\n    propertyValueRendererManager?: PropertyValueRendererManager,\n    isExpanded?: boolean,\n    onExpansionToggled?: () => void,\n    onHeightChanged?: (newHeight: number) => void,\n    highlight?: HighlightingComponentProps & {\n      applyOnLabel: boolean;\n      applyOnValue: boolean;\n    }\n  ) {\n    const highlightCallback = highlight?.applyOnValue\n      ? CommonPropertyRenderer.createHighlightCallback(\n          highlight,\n          propertyRecord\n        )\n      : undefined;\n    const rendererContext: PropertyValueRendererContext = {\n      orientation,\n      containerType: PropertyContainerType.PropertyPane,\n      isExpanded,\n      onExpansionToggled,\n      onHeightChanged,\n      textHighlighter: highlightCallback,\n    };\n\n    let displayValue: React.ReactNode | undefined;\n    if (propertyValueRendererManager)\n      displayValue = propertyValueRendererManager.render(\n        propertyRecord,\n        rendererContext\n      );\n    else\n      displayValue = PropertyValueRendererManager.defaultManager.render(\n        propertyRecord,\n        rendererContext\n      );\n\n    // Align value with label if orientation is vertical\n    if (orientation === Orientation.Vertical)\n      displayValue = (\n        <span\n          style={{\n            paddingLeft: CommonPropertyRenderer.getLabelOffset(\n              indentation,\n              orientation\n            ),\n          }}\n        >\n          {displayValue}\n        </span>\n      );\n\n    return displayValue;\n  }\n\n  private static createHighlightCallback(\n    highlight: HighlightingComponentProps & { applyOnLabel: boolean },\n    propertyRecord: PropertyRecord\n  ) {\n    const activeMatch = highlight.activeHighlight;\n    const propertyName = activeMatch?.highlightedItemIdentifier;\n    const matchIndex = activeMatch?.highlightIndex ?? 0;\n    let labelMatches: number;\n\n    if (highlight.applyOnLabel) {\n      labelMatches = countMatchesInString(\n        propertyRecord.property.displayLabel.toLowerCase(),\n        highlight.highlightedText\n      );\n    } else {\n      labelMatches = 0;\n    }\n\n    const activeMatchIndex =\n      propertyRecord.property.name === propertyName &&\n      matchIndex - labelMatches >= 0\n        ? matchIndex - labelMatches\n        : undefined;\n    const highlightCallback = (text: string) => (\n      <HighlightedText\n        text={text}\n        activeMatchIndex={activeMatchIndex}\n        searchText={highlight.highlightedText}\n      />\n    );\n\n    return highlightCallback;\n  }\n}\n"]}
+{"version":3,"file":"CommonPropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/CommonPropertyRenderer.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 { Orientation } from \"@itwin/core-react\";\nimport { countMatchesInString } from \"../../common/countMatchesInString\";\nimport { HighlightedText } from \"../../common/HighlightedText\";\nimport type { HighlightingComponentProps } from \"../../common/HighlightingComponentProps\";\nimport type { PropertyValueRendererContext } from \"../ValueRendererManager\";\nimport {\n  PropertyContainerType,\n  PropertyValueRendererManager,\n} from \"../ValueRendererManager\";\n\n/**\n * @internal\n */\nexport class CommonPropertyRenderer {\n  public static getLabelOffset(\n    indentation?: number,\n    orientation?: Orientation,\n    width?: number,\n    columnRatio?: number,\n    minColumnLabelWidth?: number\n  ): number {\n    if (!indentation) return 0;\n\n    const maxIndent = 17;\n    const minIndent = 6;\n    if (\n      orientation !== Orientation.Horizontal ||\n      !width ||\n      !columnRatio ||\n      !minColumnLabelWidth\n    )\n      return indentation * maxIndent;\n\n    const currentSize = Math.ceil(width * columnRatio);\n    const shrinkThreshold = minColumnLabelWidth + maxIndent * indentation;\n    if (currentSize >= shrinkThreshold) return indentation * maxIndent;\n\n    const minShrink =\n      minColumnLabelWidth + minIndent + maxIndent * (indentation - 1);\n    if (currentSize <= minShrink)\n      return (\n        minIndent +\n        this.getLabelOffset(\n          indentation - 1,\n          orientation,\n          width,\n          columnRatio,\n          minColumnLabelWidth\n        )\n      );\n\n    return currentSize - minColumnLabelWidth;\n  }\n\n  public static createNewDisplayValue(\n    orientation: Orientation,\n    propertyRecord: PropertyRecord,\n    indentation?: number,\n    propertyValueRendererManager?: PropertyValueRendererManager,\n    isExpanded?: boolean,\n    onExpansionToggled?: () => void,\n    onHeightChanged?: (newHeight: number) => void,\n    highlight?: HighlightingComponentProps & {\n      applyOnLabel: boolean;\n      applyOnValue: boolean;\n    }\n  ) {\n    const highlightCallback = highlight?.applyOnValue\n      ? CommonPropertyRenderer.createHighlightCallback(\n          highlight,\n          propertyRecord\n        )\n      : undefined;\n    const rendererContext: PropertyValueRendererContext = {\n      orientation,\n      containerType: PropertyContainerType.PropertyPane,\n      isExpanded,\n      onExpansionToggled,\n      onHeightChanged,\n      textHighlighter: highlightCallback,\n    };\n\n    let displayValue: React.ReactNode | undefined;\n    if (propertyValueRendererManager)\n      displayValue = propertyValueRendererManager.render(\n        propertyRecord,\n        rendererContext\n      );\n    else\n      displayValue = PropertyValueRendererManager.defaultManager.render(\n        propertyRecord,\n        rendererContext\n      );\n\n    // Align value with label if orientation is vertical\n    if (orientation === Orientation.Vertical)\n      displayValue = (\n        <span\n          style={{\n            paddingLeft: CommonPropertyRenderer.getLabelOffset(\n              indentation,\n              orientation\n            ),\n          }}\n        >\n          {displayValue}\n        </span>\n      );\n\n    return displayValue;\n  }\n\n  private static createHighlightCallback(\n    highlight: HighlightingComponentProps & { applyOnLabel: boolean },\n    propertyRecord: PropertyRecord\n  ) {\n    const activeMatch = highlight.activeHighlight;\n    const propertyName = activeMatch?.highlightedItemIdentifier;\n    const matchIndex = activeMatch?.highlightIndex ?? 0;\n    let labelMatches: number;\n\n    if (highlight.applyOnLabel) {\n      labelMatches = countMatchesInString(\n        propertyRecord.property.displayLabel.toLowerCase(),\n        highlight.highlightedText\n      );\n    } else {\n      labelMatches = 0;\n    }\n\n    const activeMatchIndex =\n      propertyRecord.property.name === propertyName &&\n      matchIndex - labelMatches >= 0\n        ? matchIndex - labelMatches\n        : undefined;\n    const highlightCallback = (text: string) => (\n      <HighlightedText\n        text={text}\n        activeMatchIndex={activeMatchIndex}\n        searchText={highlight.highlightedText}\n      />\n    );\n\n    return highlightCallback;\n  }\n}\n"]}

package/lib/esm/components-react/properties/renderers/CustomizablePropertyRenderer.d.ts

@@ -0,0 +1,25 @@
+/** @packageDocumentation
+ * @module Properties
+ */
+import * as React from "react";
+import type { HighlightingComponentProps } from "../../common/HighlightingComponentProps";
+import type { SharedRendererProps } from "./PropertyRenderer";
+/** Properties of [[CustomizablePropertyRenderer]] React component
+ * @public
+ */
+interface CustomizablePropertyRendererProps 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 customizable properties
+ * @public
+ */
+export declare function CustomizablePropertyRenderer(props: CustomizablePropertyRendererProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CustomizablePropertyRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizablePropertyRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/CustomizablePropertyRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAG1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D;;GAEG;AACH,UAAU,iCAAkC,SAAQ,mBAAmB;IACrE,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,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,iCAAiC,qBAuCzC"}

package/lib/esm/components-react/properties/renderers/CustomizablePropertyRenderer.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Orientation } from "@itwin/core-react";
+import { HighlightedText } from "../../common/HighlightedText";
+import { CommonPropertyRenderer } from "./CommonPropertyRenderer";
+import { PrimitivePropertyLabelRenderer } from "./label/PrimitivePropertyLabelRenderer";
+import { PropertyView } from "./PropertyView";
+/** React Component that renders customizable properties
+ * @public
+ */
+export function CustomizablePropertyRenderer(props) {
+    var _a, _b;
+    const { indentation, highlight, ...passthroughProps } = props;
+    const displayLabel = props.propertyRecord.property.displayLabel;
+    const offset = CommonPropertyRenderer.getLabelOffset(indentation, passthroughProps.orientation, passthroughProps.width, passthroughProps.columnRatio, (_a = passthroughProps.columnInfo) === null || _a === void 0 ? void 0 : _a.minLabelWidth);
+    const activeMatchIndex = props.propertyRecord.property.name ===
+        ((_b = highlight === null || highlight === void 0 ? void 0 : highlight.activeHighlight) === null || _b === void 0 ? void 0 : _b.highlightedItemIdentifier)
+        ? highlight.activeHighlight.highlightIndex
+        : undefined;
+    const label = highlight
+        ? HighlightedText({
+            text: displayLabel,
+            searchText: highlight.highlightedText,
+            activeMatchIndex,
+        })
+        : displayLabel;
+    return (React.createElement(PropertyView, { ...passthroughProps, labelElement: React.createElement(PrimitivePropertyLabelRenderer, { offset: offset, renderColon: props.orientation === Orientation.Horizontal, tooltip: displayLabel }, label) }));
+}
+//# sourceMappingURL=CustomizablePropertyRenderer.js.map

package/lib/esm/components-react/properties/renderers/CustomizablePropertyRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizablePropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/CustomizablePropertyRenderer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAExF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAgB9C;;GAEG;AACH,MAAM,UAAU,4BAA4B,CAC1C,KAAwC;;IAExC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC;IAChE,MAAM,MAAM,GAAG,sBAAsB,CAAC,cAAc,CAClD,WAAW,EACX,gBAAgB,CAAC,WAAW,EAC5B,gBAAgB,CAAC,KAAK,EACtB,gBAAgB,CAAC,WAAW,EAC5B,MAAA,gBAAgB,CAAC,UAAU,0CAAE,aAAa,CAC3C,CAAC;IAEF,MAAM,gBAAgB,GACpB,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI;SAClC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,eAAe,0CAAE,yBAAyB,CAAA;QACnD,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,cAAc;QAC1C,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,KAAK,GAAG,SAAS;QACrB,CAAC,CAAC,eAAe,CAAC;YACd,IAAI,EAAE,YAAY;YAClB,UAAU,EAAE,SAAS,CAAC,eAAe;YACrC,gBAAgB;SACjB,CAAC;QACJ,CAAC,CAAC,YAAY,CAAC;IAEjB,OAAO,CACL,oBAAC,YAAY,OACP,gBAAgB,EACpB,YAAY,EACV,oBAAC,8BAA8B,IAC7B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,EACzD,OAAO,EAAE,YAAY,IAEpB,KAAK,CACyB,GAEnC,CACH,CAAC;AACJ,CAAC","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 { Orientation } from \"@itwin/core-react\";\nimport { HighlightedText } from \"../../common/HighlightedText\";\nimport type { HighlightingComponentProps } from \"../../common/HighlightingComponentProps\";\nimport { CommonPropertyRenderer } from \"./CommonPropertyRenderer\";\nimport { PrimitivePropertyLabelRenderer } from \"./label/PrimitivePropertyLabelRenderer\";\nimport type { SharedRendererProps } from \"./PropertyRenderer\";\nimport { PropertyView } from \"./PropertyView\";\n\n/** Properties of [[CustomizablePropertyRenderer]] React component\n * @public\n */\ninterface CustomizablePropertyRendererProps 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 customizable properties\n * @public\n */\nexport function CustomizablePropertyRenderer(\n  props: CustomizablePropertyRendererProps\n) {\n  const { indentation, highlight, ...passthroughProps } = props;\n  const displayLabel = props.propertyRecord.property.displayLabel;\n  const offset = CommonPropertyRenderer.getLabelOffset(\n    indentation,\n    passthroughProps.orientation,\n    passthroughProps.width,\n    passthroughProps.columnRatio,\n    passthroughProps.columnInfo?.minLabelWidth\n  );\n\n  const activeMatchIndex =\n    props.propertyRecord.property.name ===\n    highlight?.activeHighlight?.highlightedItemIdentifier\n      ? highlight.activeHighlight.highlightIndex\n      : undefined;\n  const label = highlight\n    ? HighlightedText({\n        text: displayLabel,\n        searchText: highlight.highlightedText,\n        activeMatchIndex,\n      })\n    : displayLabel;\n\n  return (\n    <PropertyView\n      {...passthroughProps}\n      labelElement={\n        <PrimitivePropertyLabelRenderer\n          offset={offset}\n          renderColon={props.orientation === Orientation.Horizontal}\n          tooltip={displayLabel}\n        >\n          {label}\n        </PrimitivePropertyLabelRenderer>\n      }\n    />\n  );\n}\n"]}

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

@@ -40,7 +40,7 @@ export class NonPrimitivePropertyRenderer extends React.Component {
     getLabel(props, state) {
         const { orientation, indentation, width, columnRatio, columnInfo } = props;
         // istanbul ignore next
-        const minLabelWidth = columnInfo?.minLabelWidth;
+        const minLabelWidth = columnInfo === null || columnInfo === void 0 ? void 0 : 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)

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

@@ -1 +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\";\nimport { NonPrimitivePropertyLabelRenderer } from \"./label/NonPrimitivePropertyLabelRenderer\";\nimport type { PrimitiveRendererProps } from \"./PrimitivePropertyRenderer\";\nimport { PropertyRenderer } from \"./PropertyRenderer\";\nimport { PropertyView } from \"./PropertyView\";\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\n * @internal\n */\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  /** @internal */\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    // istanbul ignore next\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  /** @internal */\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"]}
+{"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\";\nimport { NonPrimitivePropertyLabelRenderer } from \"./label/NonPrimitivePropertyLabelRenderer\";\nimport type { PrimitiveRendererProps } from \"./PrimitivePropertyRenderer\";\nimport { PropertyRenderer } from \"./PropertyRenderer\";\nimport { PropertyView } from \"./PropertyView\";\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\n * @internal\n */\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  /** @internal */\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    // istanbul ignore next\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  /** @internal */\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/esm/components-react/properties/renderers/PrimitivePropertyRenderer.d.ts

@@ -1,21 +1,20 @@
 /** @packageDocumentation
  * @module Properties
  */
-import * as React from "react";
 import type { HighlightingComponentProps } from "../../common/HighlightingComponentProps";
 import type { SharedRendererProps } from "./PropertyRenderer";
+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. */
+    /** 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
-     */
+    /** Properties used for highlighting */
     highlight?: HighlightingComponentProps;
 }
 /** React Component that renders primitive properties

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

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePropertyRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/PrimitivePropertyRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAG1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,mBAAmB;IACjE,wCAAwC;IACxC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC7C,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;OACG;IACH,SAAS,CAAC,EAAE,0BAA0B,CAAC;CACxC;AAED;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC;gBACxE,KAAK,EAAE,sBAAsB;IAIzC,gBAAgB;IACA,MAAM;CAuCvB"}
+{"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,yCAAyC,CAAC;AAC1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,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;IAIzC,gBAAgB;IACA,MAAM;CAGvB"}

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

@@ -5,12 +5,8 @@
 /** @packageDocumentation
  * @module Properties
  */
-import * as React from "react";
-import { Orientation } from "@itwin/core-react";
-import { HighlightedText } from "../../common/HighlightedText";
-import { CommonPropertyRenderer } from "./CommonPropertyRenderer";
-import { PrimitivePropertyLabelRenderer } from "./label/PrimitivePropertyLabelRenderer";
-import { PropertyView } from "./PropertyView";
+import { CustomizablePropertyRenderer } from "./CustomizablePropertyRenderer";
+import React from "react";
 /** React Component that renders primitive properties
  * @public
  */
@@ -20,21 +16,7 @@ export class PrimitivePropertyRenderer extends React.Component {
     }
     /** @internal */
     render() {
-        const { indentation, highlight, ...props } = this.props;
-        const displayLabel = this.props.propertyRecord.property.displayLabel;
-        const offset = CommonPropertyRenderer.getLabelOffset(indentation, props.orientation, props.width, props.columnRatio, props.columnInfo?.minLabelWidth);
-        const activeMatchIndex = this.props.propertyRecord.property.name ===
-            highlight?.activeHighlight?.highlightedItemIdentifier
-            ? highlight.activeHighlight.highlightIndex
-            : undefined;
-        const label = highlight
-            ? HighlightedText({
-                text: displayLabel,
-                searchText: highlight.highlightedText,
-                activeMatchIndex,
-            })
-            : displayLabel;
-        return (React.createElement(PropertyView, { ...props, labelElement: React.createElement(PrimitivePropertyLabelRenderer, { offset: offset, renderColon: this.props.orientation === Orientation.Horizontal, tooltip: displayLabel }, label) }));
+        return React.createElement(CustomizablePropertyRenderer, { ...this.props });
     }
 }
 //# sourceMappingURL=PrimitivePropertyRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/PrimitivePropertyRenderer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAExF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,KAAK,CAAC,SAAiC;IACpF,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACxD,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC;QACrE,MAAM,MAAM,GAAG,sBAAsB,CAAC,cAAc,CAClD,WAAW,EACX,KAAK,CAAC,WAAW,EACjB,KAAK,CAAC,KAAK,EACX,KAAK,CAAC,WAAW,EACjB,KAAK,CAAC,UAAU,EAAE,aAAa,CAChC,CAAC;QAEF,MAAM,gBAAgB,GACpB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI;YACvC,SAAS,EAAE,eAAe,EAAE,yBAAyB;YACnD,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,cAAc;YAC1C,CAAC,CAAC,SAAS,CAAC;QAChB,MAAM,KAAK,GAAG,SAAS;YACrB,CAAC,CAAC,eAAe,CAAC;gBACd,IAAI,EAAE,YAAY;gBAClB,UAAU,EAAE,SAAS,CAAC,eAAe;gBACrC,gBAAgB;aACjB,CAAC;YACJ,CAAC,CAAC,YAAY,CAAC;QAEjB,OAAO,CACL,oBAAC,YAAY,OACP,KAAK,EACT,YAAY,EACV,oBAAC,8BAA8B,IAC7B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,EAC9D,OAAO,EAAE,YAAY,IAEpB,KAAK,CACyB,GAEnC,CACH,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 * as React from \"react\";\nimport { Orientation } from \"@itwin/core-react\";\nimport { HighlightedText } from \"../../common/HighlightedText\";\nimport type { HighlightingComponentProps } from \"../../common/HighlightingComponentProps\";\nimport { CommonPropertyRenderer } from \"./CommonPropertyRenderer\";\nimport { PrimitivePropertyLabelRenderer } from \"./label/PrimitivePropertyLabelRenderer\";\nimport type { SharedRendererProps } from \"./PropertyRenderer\";\nimport { PropertyView } from \"./PropertyView\";\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   */\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  /** @internal */\n  public override render() {\n    const { indentation, highlight, ...props } = this.props;\n    const displayLabel = this.props.propertyRecord.property.displayLabel;\n    const offset = CommonPropertyRenderer.getLabelOffset(\n      indentation,\n      props.orientation,\n      props.width,\n      props.columnRatio,\n      props.columnInfo?.minLabelWidth\n    );\n\n    const activeMatchIndex =\n      this.props.propertyRecord.property.name ===\n      highlight?.activeHighlight?.highlightedItemIdentifier\n        ? highlight.activeHighlight.highlightIndex\n        : undefined;\n    const label = highlight\n      ? HighlightedText({\n          text: displayLabel,\n          searchText: highlight.highlightedText,\n          activeMatchIndex,\n        })\n      : displayLabel;\n\n    return (\n      <PropertyView\n        {...props}\n        labelElement={\n          <PrimitivePropertyLabelRenderer\n            offset={offset}\n            renderColon={this.props.orientation === Orientation.Horizontal}\n            tooltip={displayLabel}\n          >\n            {label}\n          </PrimitivePropertyLabelRenderer>\n        }\n      />\n    );\n  }\n}\n"]}
+{"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,gCAAgC,CAAC;AAC9E,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;IAED,gBAAgB;IACA,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\";\nimport type { SharedRendererProps } from \"./PropertyRenderer\";\nimport { CustomizablePropertyRenderer } from \"./CustomizablePropertyRenderer\";\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  /** @internal */\n  public override render() {\n    return <CustomizablePropertyRenderer {...this.props} />;\n  }\n}\n"]}

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

@@ -12,7 +12,7 @@ export interface PropertyViewProps extends SharedRendererProps {
     labelElement: React.ReactNode;
     /** Property value as a React element */
     valueElement?: React.ReactNode;
-    /** Render callback for property value. If specified, `valueElement` is ignored. */
+    /** Render callback for property value. If specified, `valueElement` is ignored */
     valueElementRenderer?: () => React.ReactNode;
 }
 /** @internal */

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

@@ -1 +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;AAK/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D;;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,mFAAmF;IACnF,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,CAOpB;IAEF,OAAO,CAAC,YAAY;IAWpB,gBAAgB;IACA,MAAM;CA6DvB"}
+{"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,oBAAoB,CAAC;AAE9D;;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,CAOpB;IAEF,OAAO,CAAC,YAAY;IAWpB,gBAAgB;IACA,MAAM;CA+DvB"}

package/lib/esm/components-react/properties/renderers/PropertyView.js

@@ -7,7 +7,6 @@
  */
 import "./PropertyView.scss";
 import * as React from "react";
-import { PropertyValueFormat } from "@itwin/appui-abstract";
 import { ElementSeparator, Orientation } from "@itwin/core-react";
 import { ActionButtonList } from "./ActionButtonList";
 import { PropertyGridColumnStyleProvider } from "./PropertyGridColumns";
@@ -61,11 +60,11 @@ export class PropertyView extends React.Component {
             !!this.props.onColumnRatioChanged;
         const needActionButtons = !!this.props.actionButtonRenderers;
         const columnsStyleProvider = new PropertyGridColumnStyleProvider(this.props.columnInfo);
+        const renderValueElement = !!(this.props.valueElement || this.props.valueElementRenderer);
         return (React.createElement("div", { style: columnsStyleProvider.getStyle(this.props.orientation, needActionButtons, ratio, needElementSeparator), className: this.getClassName(this.props), onClick: this._onClick, onContextMenu: this._onContextMenu, onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, role: "presentation" },
             React.createElement("div", { className: "components-property-record-label" }, this.props.labelElement),
             needElementSeparator ? (React.createElement(ElementSeparator, { movableArea: this.props.width, onRatioChanged: this.props.onColumnRatioChanged, ratio: ratio, orientation: this.props.orientation, isResizeHandleHovered: this.props.isResizeHandleHovered, onResizeHandleHoverChanged: this.props.onResizeHandleHoverChanged, isResizeHandleBeingDragged: this.props.isResizeHandleBeingDragged, onResizeHandleDragChanged: this.props.onResizeHandleDragChanged })) : undefined,
-            this.props.propertyRecord.value.valueFormat ===
-                PropertyValueFormat.Primitive ? (React.createElement("div", { className: "components-property-record-value" },
+            renderValueElement ? (React.createElement("div", { className: "components-property-record-value" },
                 React.createElement("span", null, this.props.valueElementRenderer
                     ? this.props.valueElementRenderer()
                     : this.props.valueElement))) : undefined,

package/lib/esm/components-react/properties/renderers/PropertyView.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyView.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/PropertyView.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 \"./PropertyView.scss\";\nimport * as React from \"react\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { ElementSeparator, Orientation } from \"@itwin/core-react\";\nimport { ActionButtonList } from \"./ActionButtonList\";\nimport { PropertyGridColumnStyleProvider } from \"./PropertyGridColumns\";\nimport type { SharedRendererProps } from \"./PropertyRenderer\";\n\n/** Properties of [[PropertyView]] React component\n * @public\n */\nexport interface PropertyViewProps extends SharedRendererProps {\n  /** Property label as a React element */\n  labelElement: React.ReactNode;\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}\n\n/** @internal */\ninterface PropertyViewState {\n  isHovered: boolean;\n}\n\n/**\n * A React component that renders property as label/value pair\n * @public\n */\nexport class PropertyView extends React.Component<\n  PropertyViewProps,\n  PropertyViewState\n> {\n  constructor(props: PropertyViewProps) {\n    super(props);\n    this.state = {\n      isHovered: false,\n    };\n  }\n\n  private _onClick = () => {\n    if (this.props.onClick)\n      this.props.onClick(this.props.propertyRecord, this.props.uniqueKey);\n  };\n\n  private _onMouseEnter = () => {\n    if (this.props.isHoverable) this.setState({ isHovered: true });\n  };\n\n  private _onMouseLeave = () => {\n    if (this.props.isHoverable) this.setState({ isHovered: false });\n  };\n\n  private _onContextMenu = (e: React.MouseEvent) => {\n    if (this.props.onContextMenu)\n      this.props.onContextMenu(this.props.propertyRecord, e);\n    if (this.props.onRightClick)\n      this.props.onRightClick(this.props.propertyRecord, this.props.uniqueKey);\n    e.preventDefault();\n    return false;\n  };\n\n  private getClassName(props: PropertyViewProps) {\n    let propertyRecordClassName =\n      props.orientation === Orientation.Horizontal\n        ? \"components-property-record--horizontal\"\n        : \"components-property-record--vertical\";\n    if (props.isSelected) propertyRecordClassName += \" components--selected\";\n    if (props.onClick) propertyRecordClassName += \" components--clickable\";\n    if (props.isHoverable) propertyRecordClassName += \" components--hoverable\";\n    return propertyRecordClassName;\n  }\n\n  /** @internal */\n  public override render() {\n    const ratio = this.props.columnRatio ? this.props.columnRatio : 0.25;\n    const needElementSeparator =\n      this.props.orientation === Orientation.Horizontal &&\n      !!this.props.onColumnRatioChanged;\n    const needActionButtons = !!this.props.actionButtonRenderers;\n    const columnsStyleProvider = new PropertyGridColumnStyleProvider(\n      this.props.columnInfo\n    );\n\n    return (\n      <div\n        style={columnsStyleProvider.getStyle(\n          this.props.orientation,\n          needActionButtons,\n          ratio,\n          needElementSeparator\n        )}\n        className={this.getClassName(this.props)}\n        onClick={this._onClick}\n        onContextMenu={this._onContextMenu}\n        onMouseEnter={this._onMouseEnter}\n        onMouseLeave={this._onMouseLeave}\n        role=\"presentation\"\n      >\n        <div className=\"components-property-record-label\">\n          {this.props.labelElement}\n        </div>\n        {needElementSeparator ? (\n          <ElementSeparator\n            movableArea={this.props.width}\n            onRatioChanged={this.props.onColumnRatioChanged}\n            ratio={ratio}\n            orientation={this.props.orientation}\n            isResizeHandleHovered={this.props.isResizeHandleHovered}\n            onResizeHandleHoverChanged={this.props.onResizeHandleHoverChanged}\n            isResizeHandleBeingDragged={this.props.isResizeHandleBeingDragged}\n            onResizeHandleDragChanged={this.props.onResizeHandleDragChanged}\n          />\n        ) : undefined}\n        {this.props.propertyRecord.value.valueFormat ===\n        PropertyValueFormat.Primitive ? (\n          <div className=\"components-property-record-value\">\n            <span>\n              {this.props.valueElementRenderer\n                ? this.props.valueElementRenderer()\n                : this.props.valueElement}\n            </span>\n          </div>\n        ) : undefined}\n        {this.props.actionButtonRenderers ? (\n          <ActionButtonList\n            orientation={this.props.orientation}\n            property={this.props.propertyRecord}\n            isPropertyHovered={this.state.isHovered}\n            actionButtonRenderers={this.props.actionButtonRenderers}\n          />\n        ) : undefined}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"PropertyView.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/PropertyView.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 \"./PropertyView.scss\";\nimport * as React from \"react\";\nimport { ElementSeparator, Orientation } from \"@itwin/core-react\";\nimport { ActionButtonList } from \"./ActionButtonList\";\nimport { PropertyGridColumnStyleProvider } from \"./PropertyGridColumns\";\nimport type { SharedRendererProps } from \"./PropertyRenderer\";\n\n/** Properties of [[PropertyView]] React component\n * @public\n */\nexport interface PropertyViewProps extends SharedRendererProps {\n  /** Property label as a React element */\n  labelElement: React.ReactNode;\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}\n\n/** @internal */\ninterface PropertyViewState {\n  isHovered: boolean;\n}\n\n/**\n * A React component that renders property as label/value pair\n * @public\n */\nexport class PropertyView extends React.Component<\n  PropertyViewProps,\n  PropertyViewState\n> {\n  constructor(props: PropertyViewProps) {\n    super(props);\n    this.state = {\n      isHovered: false,\n    };\n  }\n\n  private _onClick = () => {\n    if (this.props.onClick)\n      this.props.onClick(this.props.propertyRecord, this.props.uniqueKey);\n  };\n\n  private _onMouseEnter = () => {\n    if (this.props.isHoverable) this.setState({ isHovered: true });\n  };\n\n  private _onMouseLeave = () => {\n    if (this.props.isHoverable) this.setState({ isHovered: false });\n  };\n\n  private _onContextMenu = (e: React.MouseEvent) => {\n    if (this.props.onContextMenu)\n      this.props.onContextMenu(this.props.propertyRecord, e);\n    if (this.props.onRightClick)\n      this.props.onRightClick(this.props.propertyRecord, this.props.uniqueKey);\n    e.preventDefault();\n    return false;\n  };\n\n  private getClassName(props: PropertyViewProps) {\n    let propertyRecordClassName =\n      props.orientation === Orientation.Horizontal\n        ? \"components-property-record--horizontal\"\n        : \"components-property-record--vertical\";\n    if (props.isSelected) propertyRecordClassName += \" components--selected\";\n    if (props.onClick) propertyRecordClassName += \" components--clickable\";\n    if (props.isHoverable) propertyRecordClassName += \" components--hoverable\";\n    return propertyRecordClassName;\n  }\n\n  /** @internal */\n  public override render() {\n    const ratio = this.props.columnRatio ? this.props.columnRatio : 0.25;\n    const needElementSeparator =\n      this.props.orientation === Orientation.Horizontal &&\n      !!this.props.onColumnRatioChanged;\n    const needActionButtons = !!this.props.actionButtonRenderers;\n    const columnsStyleProvider = new PropertyGridColumnStyleProvider(\n      this.props.columnInfo\n    );\n    const renderValueElement = !!(\n      this.props.valueElement || this.props.valueElementRenderer\n    );\n\n    return (\n      <div\n        style={columnsStyleProvider.getStyle(\n          this.props.orientation,\n          needActionButtons,\n          ratio,\n          needElementSeparator\n        )}\n        className={this.getClassName(this.props)}\n        onClick={this._onClick}\n        onContextMenu={this._onContextMenu}\n        onMouseEnter={this._onMouseEnter}\n        onMouseLeave={this._onMouseLeave}\n        role=\"presentation\"\n      >\n        <div className=\"components-property-record-label\">\n          {this.props.labelElement}\n        </div>\n        {needElementSeparator ? (\n          <ElementSeparator\n            movableArea={this.props.width}\n            onRatioChanged={this.props.onColumnRatioChanged}\n            ratio={ratio}\n            orientation={this.props.orientation}\n            isResizeHandleHovered={this.props.isResizeHandleHovered}\n            onResizeHandleHoverChanged={this.props.onResizeHandleHoverChanged}\n            isResizeHandleBeingDragged={this.props.isResizeHandleBeingDragged}\n            onResizeHandleDragChanged={this.props.onResizeHandleDragChanged}\n          />\n        ) : undefined}\n        {renderValueElement ? (\n          <div className=\"components-property-record-value\">\n            <span>\n              {this.props.valueElementRenderer\n                ? this.props.valueElementRenderer()\n                : this.props.valueElement}\n            </span>\n          </div>\n        ) : undefined}\n        {this.props.actionButtonRenderers ? (\n          <ActionButtonList\n            orientation={this.props.orientation}\n            property={this.props.propertyRecord}\n            isPropertyHovered={this.state.isHovered}\n            actionButtonRenderers={this.props.actionButtonRenderers}\n          />\n        ) : undefined}\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/components-react/properties/renderers/label/PropertyLabelRenderer.js

@@ -18,10 +18,10 @@ export class PropertyLabelRenderer extends React.PureComponent {
         };
     }
     render() {
-        const title = this.props.tooltip ??
-            (typeof this.props.children == "string"
-                ? this.props.children
-                : /* istanbul ignore next */ undefined);
+        var _a;
+        const title = (_a = this.props.tooltip) !== null && _a !== void 0 ? _a : (typeof this.props.children == "string"
+            ? this.props.children
+            : /* istanbul ignore next */ undefined);
         return (React.createElement(React.Fragment, null,
             React.createElement("span", { className: "components-property-label-renderer", title: title }, this.props.children),
             this.props.renderColon ? (React.createElement("span", { className: "components-property-label-renderer-colon" }, ":")) : undefined));

package/lib/esm/components-react/properties/renderers/label/PropertyLabelRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyLabelRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/label/PropertyLabelRenderer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,gBAAgB;AAChB,MAAM,OAAO,qBAAsB,SAAQ,KAAK,CAAC,aAAyC;IACxF,6EAA6E;IACtE,MAAM,CAAC,QAAQ,CAAC,MAAe;QACpC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7B,OAAO;YACL,WAAW,EAAE,MAAM;YACnB,KAAK,EAAE,eAAe,MAAM,KAAK;SAClC,CAAC;IACJ,CAAC;IAEe,MAAM;QACpB,MAAM,KAAK,GACT,IAAI,CAAC,KAAK,CAAC,OAAO;YAClB,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ;gBACrC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;gBACrB,CAAC,CAAC,0BAA0B,CAAC,SAAS,CAAC,CAAC;QAC5C,OAAO,CACL;YACE,8BAAM,SAAS,EAAC,oCAAoC,EAAC,KAAK,EAAE,KAAK,IAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,CACf;YACN,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CACxB,8BAAM,SAAS,EAAC,0CAA0C,QAAS,CACpE,CAAC,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 \"./PropertyLabelRenderer.scss\";\nimport * as React from \"react\";\n\n/** Base properties for a property label renderer\n * @public\n */\nexport interface PropertyLabelRendererProps {\n  /** Label to be rendered */\n  children: string | React.ReactElement;\n  /** Indicates whether to render a colon after the label */\n  renderColon?: boolean;\n  /** Custom tooltip for the component. */\n  tooltip?: string;\n}\n\n/** @internal */\nexport class PropertyLabelRenderer extends React.PureComponent<PropertyLabelRendererProps> {\n  /** Get React CSS style object based on provided offset from the left side */\n  public static getStyle(offset?: number): React.CSSProperties {\n    offset = offset ? offset : 0;\n    return {\n      paddingLeft: offset,\n      width: `calc(100% - ${offset}px)`,\n    };\n  }\n\n  public override render() {\n    const title =\n      this.props.tooltip ??\n      (typeof this.props.children == \"string\"\n        ? this.props.children\n        : /* istanbul ignore next */ undefined);\n    return (\n      <>\n        <span className=\"components-property-label-renderer\" title={title}>\n          {this.props.children}\n        </span>\n        {this.props.renderColon ? (\n          <span className=\"components-property-label-renderer-colon\">:</span>\n        ) : undefined}\n      </>\n    );\n  }\n}\n"]}
+{"version":3,"file":"PropertyLabelRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/label/PropertyLabelRenderer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,gBAAgB;AAChB,MAAM,OAAO,qBAAsB,SAAQ,KAAK,CAAC,aAAyC;IACxF,6EAA6E;IACtE,MAAM,CAAC,QAAQ,CAAC,MAAe;QACpC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7B,OAAO;YACL,WAAW,EAAE,MAAM;YACnB,KAAK,EAAE,eAAe,MAAM,KAAK;SAClC,CAAC;IACJ,CAAC;IAEe,MAAM;;QACpB,MAAM,KAAK,GACT,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,mCAClB,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ;YACrC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;YACrB,CAAC,CAAC,0BAA0B,CAAC,SAAS,CAAC,CAAC;QAC5C,OAAO,CACL;YACE,8BAAM,SAAS,EAAC,oCAAoC,EAAC,KAAK,EAAE,KAAK,IAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,CACf;YACN,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CACxB,8BAAM,SAAS,EAAC,0CAA0C,QAAS,CACpE,CAAC,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 \"./PropertyLabelRenderer.scss\";\nimport * as React from \"react\";\n\n/** Base properties for a property label renderer\n * @public\n */\nexport interface PropertyLabelRendererProps {\n  /** Label to be rendered */\n  children: string | React.ReactElement;\n  /** Indicates whether to render a colon after the label */\n  renderColon?: boolean;\n  /** Custom tooltip for the component. */\n  tooltip?: string;\n}\n\n/** @internal */\nexport class PropertyLabelRenderer extends React.PureComponent<PropertyLabelRendererProps> {\n  /** Get React CSS style object based on provided offset from the left side */\n  public static getStyle(offset?: number): React.CSSProperties {\n    offset = offset ? offset : 0;\n    return {\n      paddingLeft: offset,\n      width: `calc(100% - ${offset}px)`,\n    };\n  }\n\n  public override render() {\n    const title =\n      this.props.tooltip ??\n      (typeof this.props.children == \"string\"\n        ? this.props.children\n        : /* istanbul ignore next */ undefined);\n    return (\n      <>\n        <span className=\"components-property-label-renderer\" title={title}>\n          {this.props.children}\n        </span>\n        {this.props.renderColon ? (\n          <span className=\"components-property-label-renderer-colon\">:</span>\n        ) : undefined}\n      </>\n    );\n  }\n}\n"]}

package/lib/esm/components-react/properties/renderers/value/Common.js

@@ -1,8 +1,9 @@
 import { TypeConverterManager } from "../../../converters/TypeConverterManager";
 /** @internal */
 export function convertRecordToString(record) {
+    var _a;
     const primitive = record.value;
     return (primitive.displayValue ||
-        TypeConverterManager.getConverter(record.property.typename, record.property.converter?.name).convertPropertyToString(record.property, primitive.value));
+        TypeConverterManager.getConverter(record.property.typename, (_a = record.property.converter) === null || _a === void 0 ? void 0 : _a.name).convertPropertyToString(record.property, primitive.value));
 }
 //# sourceMappingURL=Common.js.map

package/lib/esm/components-react/properties/renderers/value/Common.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/value/Common.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAEhF,gBAAgB;AAChB,MAAM,UAAU,qBAAqB,CACnC,MAAsB;IAEtB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAuB,CAAC;IACjD,OAAO,CACL,SAAS,CAAC,YAAY;QACtB,oBAAoB,CAAC,YAAY,CAC/B,MAAM,CAAC,QAAQ,CAAC,QAAQ,EACxB,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,IAAI,CAChC,CAAC,uBAAuB,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,CAC5D,CAAC;AACJ,CAAC","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 *--------------------------------------------------------------------------------------------*/\nimport type { PrimitiveValue, PropertyRecord } from \"@itwin/appui-abstract\";\nimport { TypeConverterManager } from \"../../../converters/TypeConverterManager\";\n\n/** @internal */\nexport function convertRecordToString(\n  record: PropertyRecord\n): string | Promise<string> {\n  const primitive = record.value as PrimitiveValue;\n  return (\n    primitive.displayValue ||\n    TypeConverterManager.getConverter(\n      record.property.typename,\n      record.property.converter?.name\n    ).convertPropertyToString(record.property, primitive.value)\n  );\n}\n"]}
+{"version":3,"file":"Common.js","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/value/Common.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAEhF,gBAAgB;AAChB,MAAM,UAAU,qBAAqB,CACnC,MAAsB;;IAEtB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAuB,CAAC;IACjD,OAAO,CACL,SAAS,CAAC,YAAY;QACtB,oBAAoB,CAAC,YAAY,CAC/B,MAAM,CAAC,QAAQ,CAAC,QAAQ,EACxB,MAAA,MAAM,CAAC,QAAQ,CAAC,SAAS,0CAAE,IAAI,CAChC,CAAC,uBAAuB,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,CAC5D,CAAC;AACJ,CAAC","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 *--------------------------------------------------------------------------------------------*/\nimport type { PrimitiveValue, PropertyRecord } from \"@itwin/appui-abstract\";\nimport { TypeConverterManager } from \"../../../converters/TypeConverterManager\";\n\n/** @internal */\nexport function convertRecordToString(\n  record: PropertyRecord\n): string | Promise<string> {\n  const primitive = record.value as PrimitiveValue;\n  return (\n    primitive.displayValue ||\n    TypeConverterManager.getConverter(\n      record.property.typename,\n      record.property.converter?.name\n    ).convertPropertyToString(record.property, primitive.value)\n  );\n}\n"]}

package/lib/esm/components-react/properties/renderers/value/MultilineTextPropertyValueRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultilineTextPropertyValueRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/value/MultilineTextPropertyValueRenderer.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EACV,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,4BAA4B,CAAC;AAKpC,gBAAgB;AAChB,qBAAa,kCACX,YAAW,sBAAsB;IAE1B,SAAS,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO;IAI1C,MAAM,CACX,MAAM,EAAE,cAAc,EACtB,OAAO,CAAC,EAAE,4BAA4B,GACrC,KAAK,CAAC,SAAS;CAQnB;AA6BD,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAqDtE,CAAC"}
+{"version":3,"file":"MultilineTextPropertyValueRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/value/MultilineTextPropertyValueRenderer.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EACV,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,4BAA4B,CAAC;AAMpC,gBAAgB;AAChB,qBAAa,kCACX,YAAW,sBAAsB;IAE1B,SAAS,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO;IAI1C,MAAM,CACX,MAAM,EAAE,cAAc,EACtB,OAAO,CAAC,EAAE,4BAA4B,GACrC,KAAK,CAAC,SAAS;CAQnB;AA6BD,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA+CtE,CAAC"}

package/lib/esm/components-react/properties/renderers/value/MultilineTextPropertyValueRenderer.js

@@ -10,10 +10,10 @@ import * as React from "react";
 import { useLayoutEffect, useRef, useState } from "react";
 import { assert } from "@itwin/core-bentley";
 import { PropertyValueFormat } from "@itwin/appui-abstract";
-import { UiComponents } from "../../../UiComponents";
 import { useRenderedStringValue } from "./PrimitivePropertyValueRenderer";
 import classnames from "classnames";
 import { convertRecordToString } from "./Common";
+import { useTranslation } from "../../../useTranslation";
 /** @internal */
 export class MultilineTextPropertyValueRenderer {
     canRender(record) {
@@ -24,27 +24,24 @@ export class MultilineTextPropertyValueRenderer {
     }
 }
 const MultilineTextPropertyValueRendererImpl = (props) => {
+    var _a, _b, _c, _d;
     const { stringValue, element } = useRenderedStringValue(props.record, convertRecordToString, props.context);
-    return (React.createElement(MultilineTextRenderer, { style: props.context?.style, stringValue: stringValue, isExpanded: props.context?.isExpanded, onExpansionToggled: props.context?.onExpansionToggled, onHeightChanged: props.context?.onHeightChanged }, element));
+    return (React.createElement(MultilineTextRenderer, { style: (_a = props.context) === null || _a === void 0 ? void 0 : _a.style, stringValue: stringValue, isExpanded: (_b = props.context) === null || _b === void 0 ? void 0 : _b.isExpanded, onExpansionToggled: (_c = props.context) === null || _c === void 0 ? void 0 : _c.onExpansionToggled, onHeightChanged: (_d = props.context) === null || _d === void 0 ? void 0 : _d.onHeightChanged }, element));
 };
 /** @internal */
 export const MultilineTextRenderer = (props) => {
+    const { translate } = useTranslation();
     const spanRef = useRef(null);
     const divRef = useRef(null);
-    const previousHeightRef = useRef(0);
     const [contentOverflows, setContentOverflows] = useState(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useLayoutEffect(() => {
         assert(divRef.current !== null && spanRef.current !== null);
         setContentOverflows(spanRef.current.clientWidth < spanRef.current.scrollWidth);
-        const currentHeight = Math.max(divRef.current.offsetHeight, 27);
-        if (currentHeight !== previousHeightRef.current) {
-            props.onHeightChanged?.(currentHeight);
-            previousHeightRef.current = currentHeight;
-        }
     });
     const handleExpansionToggleClick = (event) => {
-        props.onExpansionToggled?.();
+        var _a;
+        (_a = props.onExpansionToggled) === null || _a === void 0 ? void 0 : _a.call(props);
         event.stopPropagation();
     };
     // In order to always trigger onMouseLeave event on PropertyView, collapse button must remain mounted at all times.
@@ -52,7 +49,7 @@ export const MultilineTextRenderer = (props) => {
     return (React.createElement("div", { ref: divRef, className: "multiline" },
         React.createElement("span", { ref: spanRef, className: classnames("content", { expanded: props.isExpanded }), style: props.style, title: props.isExpanded ? undefined : props.stringValue },
             props.children,
-            React.createElement("button", { className: "expand-toggle", style: { display: props.isExpanded ? "inline-block" : "none" }, onClick: handleExpansionToggleClick }, UiComponents.translate("property.collapse"))),
-        contentOverflows && !props.isExpanded && (React.createElement("button", { className: "expand-toggle", onClick: handleExpansionToggleClick }, UiComponents.translate("property.expand")))));
+            React.createElement("button", { className: "expand-toggle", style: { display: props.isExpanded ? "inline-block" : "none" }, onClick: handleExpansionToggleClick }, translate("property.collapse"))),
+        contentOverflows && !props.isExpanded && (React.createElement("button", { className: "expand-toggle", onClick: handleExpansionToggleClick }, translate("property.expand")))));
 };
 //# sourceMappingURL=MultilineTextPropertyValueRenderer.js.map

package/lib/esm/components-react/properties/renderers/value/MultilineTextPropertyValueRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultilineTextPropertyValueRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/value/MultilineTextPropertyValueRenderer.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/**\n * @packageDocumentation\n * @module Properties\n */\n\nimport * as React from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { UiComponents } from \"../../../UiComponents\";\nimport type {\n  IPropertyValueRenderer,\n  PropertyValueRendererContext,\n} from \"../../ValueRendererManager\";\nimport { useRenderedStringValue } from \"./PrimitivePropertyValueRenderer\";\nimport classnames from \"classnames\";\nimport { convertRecordToString } from \"./Common\";\n\n/** @internal */\nexport class MultilineTextPropertyValueRenderer\n  implements IPropertyValueRenderer\n{\n  public canRender(record: PropertyRecord): boolean {\n    return record.value.valueFormat === PropertyValueFormat.Primitive;\n  }\n\n  public render(\n    record: PropertyRecord,\n    context?: PropertyValueRendererContext\n  ): React.ReactNode {\n    return (\n      <MultilineTextPropertyValueRendererImpl\n        record={record}\n        context={context}\n      />\n    );\n  }\n}\n\ninterface MultilineTextPropertyValueRendererImplProps {\n  record: PropertyRecord;\n  context?: PropertyValueRendererContext;\n  children?: never;\n}\n\nconst MultilineTextPropertyValueRendererImpl: React.FC<\n  MultilineTextPropertyValueRendererImplProps\n> = (props) => {\n  const { stringValue, element } = useRenderedStringValue(\n    props.record,\n    convertRecordToString,\n    props.context\n  );\n  return (\n    <MultilineTextRenderer\n      style={props.context?.style}\n      stringValue={stringValue}\n      isExpanded={props.context?.isExpanded}\n      onExpansionToggled={props.context?.onExpansionToggled}\n      onHeightChanged={props.context?.onHeightChanged}\n    >\n      {element}\n    </MultilineTextRenderer>\n  );\n};\n\ninterface MultilineTextRendererProps {\n  stringValue?: string;\n  isExpanded?: boolean;\n  onExpansionToggled?: () => void;\n  onHeightChanged?: (newHeight: number) => void;\n  style?: React.CSSProperties;\n  /** Content */\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport const MultilineTextRenderer: React.FC<MultilineTextRendererProps> = (\n  props\n) => {\n  const spanRef = useRef<HTMLSpanElement>(null);\n  const divRef = useRef<HTMLDivElement>(null);\n  const previousHeightRef = useRef(0);\n  const [contentOverflows, setContentOverflows] = useState<boolean>(false);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => {\n    assert(divRef.current !== null && spanRef.current !== null);\n\n    setContentOverflows(\n      spanRef.current.clientWidth < spanRef.current.scrollWidth\n    );\n\n    const currentHeight = Math.max(divRef.current.offsetHeight, 27);\n    if (currentHeight !== previousHeightRef.current) {\n      props.onHeightChanged?.(currentHeight);\n      previousHeightRef.current = currentHeight;\n    }\n  });\n\n  const handleExpansionToggleClick = (event: React.MouseEvent) => {\n    props.onExpansionToggled?.();\n    event.stopPropagation();\n  };\n\n  // In order to always trigger onMouseLeave event on PropertyView, collapse button must remain mounted at all times.\n  // https://github.com/facebook/react/issues/6807\n  return (\n    <div ref={divRef} className=\"multiline\">\n      <span\n        ref={spanRef}\n        className={classnames(\"content\", { expanded: props.isExpanded })}\n        style={props.style}\n        title={props.isExpanded ? undefined : props.stringValue}\n      >\n        {props.children}\n        <button\n          className=\"expand-toggle\"\n          style={{ display: props.isExpanded ? \"inline-block\" : \"none\" }}\n          onClick={handleExpansionToggleClick}\n        >\n          {UiComponents.translate(\"property.collapse\")}\n        </button>\n      </span>\n      {contentOverflows && !props.isExpanded && (\n        <button className=\"expand-toggle\" onClick={handleExpansionToggleClick}>\n          {UiComponents.translate(\"property.expand\")}\n        </button>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"MultilineTextPropertyValueRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/properties/renderers/value/MultilineTextPropertyValueRenderer.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/**\n * @packageDocumentation\n * @module Properties\n */\n\nimport * as React from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type {\n  IPropertyValueRenderer,\n  PropertyValueRendererContext,\n} from \"../../ValueRendererManager\";\nimport { useRenderedStringValue } from \"./PrimitivePropertyValueRenderer\";\nimport classnames from \"classnames\";\nimport { convertRecordToString } from \"./Common\";\nimport { useTranslation } from \"../../../useTranslation\";\n\n/** @internal */\nexport class MultilineTextPropertyValueRenderer\n  implements IPropertyValueRenderer\n{\n  public canRender(record: PropertyRecord): boolean {\n    return record.value.valueFormat === PropertyValueFormat.Primitive;\n  }\n\n  public render(\n    record: PropertyRecord,\n    context?: PropertyValueRendererContext\n  ): React.ReactNode {\n    return (\n      <MultilineTextPropertyValueRendererImpl\n        record={record}\n        context={context}\n      />\n    );\n  }\n}\n\ninterface MultilineTextPropertyValueRendererImplProps {\n  record: PropertyRecord;\n  context?: PropertyValueRendererContext;\n  children?: never;\n}\n\nconst MultilineTextPropertyValueRendererImpl: React.FC<\n  MultilineTextPropertyValueRendererImplProps\n> = (props) => {\n  const { stringValue, element } = useRenderedStringValue(\n    props.record,\n    convertRecordToString,\n    props.context\n  );\n  return (\n    <MultilineTextRenderer\n      style={props.context?.style}\n      stringValue={stringValue}\n      isExpanded={props.context?.isExpanded}\n      onExpansionToggled={props.context?.onExpansionToggled}\n      onHeightChanged={props.context?.onHeightChanged}\n    >\n      {element}\n    </MultilineTextRenderer>\n  );\n};\n\ninterface MultilineTextRendererProps {\n  stringValue?: string;\n  isExpanded?: boolean;\n  onExpansionToggled?: () => void;\n  onHeightChanged?: (newHeight: number) => void;\n  style?: React.CSSProperties;\n  /** Content */\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport const MultilineTextRenderer: React.FC<MultilineTextRendererProps> = (\n  props\n) => {\n  const { translate } = useTranslation();\n  const spanRef = useRef<HTMLSpanElement>(null);\n  const divRef = useRef<HTMLDivElement>(null);\n  const [contentOverflows, setContentOverflows] = useState<boolean>(false);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => {\n    assert(divRef.current !== null && spanRef.current !== null);\n\n    setContentOverflows(\n      spanRef.current.clientWidth < spanRef.current.scrollWidth\n    );\n  });\n\n  const handleExpansionToggleClick = (event: React.MouseEvent) => {\n    props.onExpansionToggled?.();\n    event.stopPropagation();\n  };\n\n  // In order to always trigger onMouseLeave event on PropertyView, collapse button must remain mounted at all times.\n  // https://github.com/facebook/react/issues/6807\n  return (\n    <div ref={divRef} className=\"multiline\">\n      <span\n        ref={spanRef}\n        className={classnames(\"content\", { expanded: props.isExpanded })}\n        style={props.style}\n        title={props.isExpanded ? undefined : props.stringValue}\n      >\n        {props.children}\n        <button\n          className=\"expand-toggle\"\n          style={{ display: props.isExpanded ? \"inline-block\" : \"none\" }}\n          onClick={handleExpansionToggleClick}\n        >\n          {translate(\"property.collapse\")}\n        </button>\n      </span>\n      {contentOverflows && !props.isExpanded && (\n        <button className=\"expand-toggle\" onClick={handleExpansionToggleClick}>\n          {translate(\"property.expand\")}\n        </button>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/esm/components-react/properties/renderers/value/PrimitivePropertyValueRenderer.js

@@ -29,13 +29,15 @@ export class PrimitivePropertyValueRenderer {
  * @internal
  */
 export function convertPrimitiveRecordToString(record) {
+    var _a;
     const primitive = record.value;
-    return TypeConverterManager.getConverter(record.property.typename, record.property.converter?.name).convertPropertyToString(record.property, primitive.value);
+    return TypeConverterManager.getConverter(record.property.typename, (_a = record.property.converter) === null || _a === void 0 ? void 0 : _a.name).convertPropertyToString(record.property, primitive.value);
 }
 /** @internal */
 export function PrimitivePropertyValueRendererImpl(props) {
+    var _a;
     const { stringValue, element } = useRenderedStringValue(props.record, props.stringValueCalculator, props.context, props.linksHandler);
-    return (React.createElement("span", { style: props.context?.style, title: stringValue }, element));
+    return (React.createElement("span", { style: (_a = props.context) === null || _a === void 0 ? void 0 : _a.style, title: stringValue }, element));
 }
 /**
  * Default link handler used for handling records,
@@ -51,8 +53,9 @@ export const DEFAULT_LINKS_HANDLER = {
 };
 /** @internal */
 export function useRenderedStringValue(record, stringValueCalculator, context, linksHandler) {
+    var _a, _b;
     const stringValue = useAsyncValue(stringValueCalculator(record));
-    const el = stringValue === undefined ? (context?.defaultValue) : (React.createElement(LinksRenderer, { value: stringValue, links: record.links ?? linksHandler ?? DEFAULT_LINKS_HANDLER, highlighter: context?.textHighlighter }));
+    const el = stringValue === undefined ? (context === null || context === void 0 ? void 0 : context.defaultValue) : (React.createElement(LinksRenderer, { value: stringValue, links: (_b = (_a = record.links) !== null && _a !== void 0 ? _a : linksHandler) !== null && _b !== void 0 ? _b : DEFAULT_LINKS_HANDLER, highlighter: context === null || context === void 0 ? void 0 : context.textHighlighter }));
     return { stringValue, element: el };
 }
 //# sourceMappingURL=PrimitivePropertyValueRenderer.js.map