@itwin/grouping-mapping-widget 0.11.0 → 0.11.1

package/lib/cjs/widget/components/property-grid/PropertyRender.js

@@ -30,6 +30,7 @@ const components_react_1 = require("@itwin/components-react");
 const NonPrimitivePropertyRenderer_1 = require("./NonPrimitivePropertyRenderer");
 const PrimitivePropertyRenderer_1 = require("./PrimitivePropertyRenderer");
 const CommonPropertyRenderer_1 = require("@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer");
+const createNewDisplayValue_1 = require("./createNewDisplayValue");
 /**  A React component that renders properties
  * @public
  */
@@ -61,7 +62,7 @@ class PropertyRenderer extends React.Component {
             this.updateDisplayValueAsEditor(props);
             return;
         }
-        const displayValue = CommonPropertyRenderer_1.CommonPropertyRenderer.createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager);
+        const displayValue = createNewDisplayValue_1.createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager);
         this.setState({ displayValue });
     }
     /** Display property record value in an editor */

package/lib/cjs/widget/components/property-grid/PropertyRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyRender.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/PropertyRender.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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type { Orientation, RatioChangeResult } from \"@itwin/core-react\";\nimport type {\n  ActionButtonRenderer,\n  PrimitiveRendererProps,\n  PropertyUpdatedArgs,\n  PropertyValueRendererManager,\n} from \"@itwin/components-react\";\nimport {\n  EditorContainer,\n  UiComponents,\n} from \"@itwin/components-react\";\n\nimport { NonPrimitivePropertyRenderer } from \"./NonPrimitivePropertyRenderer\";\nimport { PrimitivePropertyRenderer } from \"./PrimitivePropertyRenderer\";\nimport type { PropertyGridColumnInfo } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/PropertyGridColumns\";\nimport type { HighlightingComponentProps } from \"@itwin/components-react/lib/cjs/components-react/common/HighlightingComponentProps\";\nimport { CommonPropertyRenderer } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer\";\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 | RatioChangeResult;\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 @beta */\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 @beta */\n  isEditing?: boolean;\n  /** Called when property edit is committed. @beta */\n  onEditCommit?: (args: PropertyUpdatedArgs) => void;\n  /** Called when property edit is cancelled. @beta */\n  onEditCancel?: () => void;\n  /** Props used for highlighting. @beta */\n  highlight?: HighlightingComponentProps;\n}\n\n/** State of [[PropertyRenderer]] React component\n * @internal\n */\ninterface PropertyRendererState {\n  /** Currently loaded property value */\n  displayValue?: React.ReactNode;\n}\n\n/**  A React component that renders properties\n * @public\n */\nexport class PropertyRenderer extends React.Component<\nPropertyRendererProps,\nPropertyRendererState\n> {\n  /** @internal */\n  public override readonly state: Readonly<PropertyRendererState> = {\n    displayValue: UiComponents.translate(\"general.loading\"),\n  };\n\n  public static getLabelOffset(\n    indentation?: number,\n    orientation?: Orientation,\n    width?: number,\n    columnRatio?: number,\n    minColumnLabelWidth?: number,\n  ): number {\n    return CommonPropertyRenderer.getLabelOffset(\n      indentation,\n      orientation,\n      width,\n      columnRatio,\n      minColumnLabelWidth,\n    );\n  }\n\n  private updateDisplayValue(props: PropertyRendererProps) {\n    if (props.isEditing) {\n      this.updateDisplayValueAsEditor(props);\n      return;\n    }\n\n    const displayValue = CommonPropertyRenderer.createNewDisplayValue(\n      props.orientation,\n      props.propertyRecord,\n      props.indentation,\n      props.propertyValueRendererManager,\n    );\n    this.setState({ displayValue });\n  }\n\n  private _onEditCommit = (args: PropertyUpdatedArgs) => {\n    // istanbul ignore else\n    if (this.props.onEditCommit) {\n      this.props.onEditCommit(args);\n    }\n  };\n\n  private _onEditCancel = () => {\n    // istanbul ignore else\n    if (this.props.onEditCancel) {\n      this.props.onEditCancel();\n    }\n  };\n\n  /** Display property record value in an editor */\n  public updateDisplayValueAsEditor(props: PropertyRendererProps) {\n    this.setState({\n      displayValue: (\n        <EditorContainer\n          propertyRecord={props.propertyRecord}\n          onCommit={this._onEditCommit}\n          onCancel={this._onEditCancel}\n          setFocus={true}\n        />\n      ),\n    });\n  }\n\n  /** @internal */\n  public override componentDidMount() {\n    this.updateDisplayValue(this.props);\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyRendererProps) {\n    if (\n      prevProps.propertyRecord !== this.props.propertyRecord ||\n      prevProps.isEditing !== this.props.isEditing ||\n      prevProps.orientation !== this.props.orientation\n    ) {\n      this.updateDisplayValue(this.props);\n    }\n  }\n\n  /** @internal */\n  public override render() {\n    const { ...props } = this.props;\n    const primitiveRendererProps: PrimitiveRendererProps = {\n      ...props,\n      valueElement: this.state.displayValue,\n      indentation: this.props.indentation,\n    };\n\n    switch (this.props.propertyRecord.value.valueFormat) {\n      case PropertyValueFormat.Primitive:\n        return (\n          <PrimitivePropertyRenderer {...primitiveRendererProps} />\n        );\n      case PropertyValueFormat.Array:\n        // If array is empty, render it as a primitive property\n        if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\n          && this.props.propertyRecord.value.items.length === 0)\n          return (\n            <PrimitivePropertyRenderer {...primitiveRendererProps} />\n          );\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}\n"]}
+{"version":3,"file":"PropertyRender.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/PropertyRender.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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type { Orientation, RatioChangeResult } from \"@itwin/core-react\";\nimport type {\n  ActionButtonRenderer,\n  PrimitiveRendererProps,\n  PropertyUpdatedArgs,\n  PropertyValueRendererManager,\n} from \"@itwin/components-react\";\nimport {\n  EditorContainer,\n  UiComponents,\n} from \"@itwin/components-react\";\n\nimport { NonPrimitivePropertyRenderer } from \"./NonPrimitivePropertyRenderer\";\nimport { PrimitivePropertyRenderer } from \"./PrimitivePropertyRenderer\";\nimport type { PropertyGridColumnInfo } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/PropertyGridColumns\";\nimport type { HighlightingComponentProps } from \"@itwin/components-react/lib/cjs/components-react/common/HighlightingComponentProps\";\nimport { CommonPropertyRenderer } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer\";\nimport { createNewDisplayValue } from \"./createNewDisplayValue\";\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 | RatioChangeResult;\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 @beta */\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 @beta */\n  isEditing?: boolean;\n  /** Called when property edit is committed. @beta */\n  onEditCommit?: (args: PropertyUpdatedArgs) => void;\n  /** Called when property edit is cancelled. @beta */\n  onEditCancel?: () => void;\n  /** Props used for highlighting. @beta */\n  highlight?: HighlightingComponentProps;\n}\n\n/** State of [[PropertyRenderer]] React component\n * @internal\n */\ninterface PropertyRendererState {\n  /** Currently loaded property value */\n  displayValue?: React.ReactNode;\n}\n\n/**  A React component that renders properties\n * @public\n */\nexport class PropertyRenderer extends React.Component<\nPropertyRendererProps,\nPropertyRendererState\n> {\n  /** @internal */\n  public override readonly state: Readonly<PropertyRendererState> = {\n    displayValue: UiComponents.translate(\"general.loading\"),\n  };\n\n  public static getLabelOffset(\n    indentation?: number,\n    orientation?: Orientation,\n    width?: number,\n    columnRatio?: number,\n    minColumnLabelWidth?: number,\n  ): number {\n    return CommonPropertyRenderer.getLabelOffset(\n      indentation,\n      orientation,\n      width,\n      columnRatio,\n      minColumnLabelWidth,\n    );\n  }\n\n  private updateDisplayValue(props: PropertyRendererProps) {\n    if (props.isEditing) {\n      this.updateDisplayValueAsEditor(props);\n      return;\n    }\n\n    const displayValue = createNewDisplayValue(\n      props.orientation,\n      props.propertyRecord,\n      props.indentation,\n      props.propertyValueRendererManager,\n    );\n    this.setState({ displayValue });\n  }\n\n  private _onEditCommit = (args: PropertyUpdatedArgs) => {\n    // istanbul ignore else\n    if (this.props.onEditCommit) {\n      this.props.onEditCommit(args);\n    }\n  };\n\n  private _onEditCancel = () => {\n    // istanbul ignore else\n    if (this.props.onEditCancel) {\n      this.props.onEditCancel();\n    }\n  };\n\n  /** Display property record value in an editor */\n  public updateDisplayValueAsEditor(props: PropertyRendererProps) {\n    this.setState({\n      displayValue: (\n        <EditorContainer\n          propertyRecord={props.propertyRecord}\n          onCommit={this._onEditCommit}\n          onCancel={this._onEditCancel}\n          setFocus={true}\n        />\n      ),\n    });\n  }\n\n  /** @internal */\n  public override componentDidMount() {\n    this.updateDisplayValue(this.props);\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyRendererProps) {\n    if (\n      prevProps.propertyRecord !== this.props.propertyRecord ||\n      prevProps.isEditing !== this.props.isEditing ||\n      prevProps.orientation !== this.props.orientation\n    ) {\n      this.updateDisplayValue(this.props);\n    }\n  }\n\n  /** @internal */\n  public override render() {\n    const { ...props } = this.props;\n    const primitiveRendererProps: PrimitiveRendererProps = {\n      ...props,\n      valueElement: this.state.displayValue,\n      indentation: this.props.indentation,\n    };\n\n    switch (this.props.propertyRecord.value.valueFormat) {\n      case PropertyValueFormat.Primitive:\n        return (\n          <PrimitivePropertyRenderer {...primitiveRendererProps} />\n        );\n      case PropertyValueFormat.Array:\n        // If array is empty, render it as a primitive property\n        if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\n          && this.props.propertyRecord.value.items.length === 0)\n          return (\n            <PrimitivePropertyRenderer {...primitiveRendererProps} />\n          );\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}\n"]}

package/lib/cjs/widget/components/property-grid/countMatchesInString.d.ts

@@ -0,0 +1,8 @@
+/** @packageDocumentation
+ * @module Common
+ */
+/** Counts how many times string 'lookup' is repeated in string 'str'.
+ * @internal
+ */
+export declare function countMatchesInString(str: string, lookup: string): number;
+//# sourceMappingURL=countMatchesInString.d.ts.map

package/lib/cjs/widget/components/property-grid/countMatchesInString.js

@@ -0,0 +1,32 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* @author Vitim.us https://gist.github.com/victornpb/7736865 */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.countMatchesInString = void 0;
+/** @packageDocumentation
+ * @module Common
+ */
+/** Counts how many times string 'lookup' is repeated in string 'str'.
+ * @internal
+ */
+function countMatchesInString(str, lookup) {
+    if (!str.length || !lookup.length)
+        return 0;
+    let n = 0, pos = 0;
+    const step = lookup.length;
+    while (true) {
+        pos = str.indexOf(lookup, pos);
+        if (pos >= 0) {
+            ++n;
+            pos += step;
+        }
+        else
+            break;
+    }
+    return n;
+}
+exports.countMatchesInString = countMatchesInString;
+//# sourceMappingURL=countMatchesInString.js.map

package/lib/cjs/widget/components/property-grid/countMatchesInString.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countMatchesInString.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/countMatchesInString.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,gEAAgE;;;AAEhE;;GAEG;AAEH;;GAEG;AACH,SAAgB,oBAAoB,CAAC,GAAW,EAAE,MAAc;IAC9D,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM;QAC/B,OAAO,CAAC,CAAC;IAEX,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;IACnB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC;IAE3B,OAAO,IAAI,EAAE;QACX,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC/B,IAAI,GAAG,IAAI,CAAC,EAAE;YACZ,EAAE,CAAC,CAAC;YACJ,GAAG,IAAI,IAAI,CAAC;SACb;;YACC,MAAM;KACT;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAhBD,oDAgBC","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/* @author Vitim.us https://gist.github.com/victornpb/7736865 */\n\n/** @packageDocumentation\n * @module Common\n */\n\n/** Counts how many times string 'lookup' is repeated in string 'str'.\n * @internal\n */\nexport function countMatchesInString(str: string, lookup: string) {\n  if (!str.length || !lookup.length)\n    return 0;\n\n  let n = 0, pos = 0;\n  const step = lookup.length;\n\n  while (true) {\n    pos = str.indexOf(lookup, pos);\n    if (pos >= 0) {\n      ++n;\n      pos += step;\n    } else\n      break;\n  }\n  return n;\n}\n"]}

package/lib/cjs/widget/components/property-grid/createNewDisplayValue.d.ts

@@ -0,0 +1,10 @@
+import type { PropertyRecord } from "@itwin/appui-abstract";
+import type { HighlightingComponentProps } from "@itwin/components-react";
+import { PropertyValueRendererManager } from "@itwin/components-react";
+import { Orientation } from "@itwin/core-react";
+import * as React from "react";
+export declare function createNewDisplayValue(orientation: Orientation, propertyRecord: PropertyRecord, indentation?: number, propertyValueRendererManager?: PropertyValueRendererManager, isExpanded?: boolean, onExpansionToggled?: () => void, onHeightChanged?: (newHeight: number) => void, highlight?: HighlightingComponentProps & {
+    applyOnLabel: boolean;
+    applyOnValue: boolean;
+}): React.ReactNode;
+//# sourceMappingURL=createNewDisplayValue.d.ts.map

package/lib/cjs/widget/components/property-grid/createNewDisplayValue.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNewDisplayValue = void 0;
+const components_react_1 = require("@itwin/components-react");
+const CommonPropertyRenderer_1 = require("@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer");
+const core_react_1 = require("@itwin/core-react");
+const React = __importStar(require("react"));
+const countMatchesInString_1 = require("./countMatchesInString");
+function createHighlightCallback(highlight, propertyRecord) {
+    var _a;
+    const activeMatch = highlight.activeHighlight;
+    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_1.countMatchesInString(propertyRecord.property.displayLabel.toLowerCase(), highlight.highlightedText);
+    }
+    else {
+        labelMatches = 0;
+    }
+    const activeMatchIndex = (propertyRecord.property.name === propertyName) && ((matchIndex - labelMatches) >= 0) ? (matchIndex - labelMatches) : undefined;
+    const highlightCallback = (text) => (React.createElement(components_react_1.HighlightedText, { text: text, activeMatchIndex: activeMatchIndex, searchText: highlight.highlightedText }));
+    return highlightCallback;
+}
+function createNewDisplayValue(orientation, propertyRecord, indentation, propertyValueRendererManager, isExpanded, onExpansionToggled, onHeightChanged, highlight) {
+    const highlightCallback = (highlight === null || highlight === void 0 ? void 0 : highlight.applyOnValue) ? (createHighlightCallback(highlight, propertyRecord)) : undefined;
+    const rendererContext = {
+        orientation,
+        containerType: components_react_1.PropertyContainerType.PropertyPane,
+        isExpanded,
+        onExpansionToggled,
+        onHeightChanged,
+        textHighlighter: highlightCallback,
+    };
+    let displayValue;
+    if (propertyValueRendererManager)
+        displayValue = propertyValueRendererManager.render(propertyRecord, rendererContext);
+    else
+        displayValue = components_react_1.PropertyValueRendererManager.defaultManager.render(propertyRecord, rendererContext);
+    // Align value with label if orientation is vertical
+    if (orientation === core_react_1.Orientation.Vertical)
+        displayValue = React.createElement("span", { style: { paddingLeft: CommonPropertyRenderer_1.CommonPropertyRenderer.getLabelOffset(indentation, orientation) } }, displayValue);
+    return displayValue;
+}
+exports.createNewDisplayValue = createNewDisplayValue;
+//# sourceMappingURL=createNewDisplayValue.js.map

package/lib/cjs/widget/components/property-grid/createNewDisplayValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createNewDisplayValue.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/createNewDisplayValue.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAMA,8DAA+G;AAC/G,yIAAsI;AACtI,kDAAgD;AAChD,6CAA+B;AAC/B,iEAA8D;AAE9D,SAAS,uBAAuB,CAAC,SAAiE,EAAE,cAA8B;;IAChI,MAAM,WAAW,GAAG,SAAS,CAAC,eAAe,CAAC;IAC9C,MAAM,YAAY,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB,CAAC;IAC5D,MAAM,UAAU,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,mCAAI,CAAC,CAAC;IACpD,IAAI,YAAoB,CAAC;IAEzB,IAAI,SAAS,CAAC,YAAY,EAAE;QAC1B,YAAY,GAAG,2CAAoB,CAAC,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;KACpH;SAAM;QACL,YAAY,GAAG,CAAC,CAAC;KAClB;IAED,MAAM,gBAAgB,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACzJ,MAAM,iBAAiB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,oBAAC,kCAAe,IAAC,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,CAAC,eAAe,GAAI,CAAC,CAAC;IAEzJ,OAAO,iBAAiB,CAAC;AAC3B,CAAC;AAED,SAAgB,qBAAqB,CACnC,WAAwB,EACxB,cAA8B,EAC9B,WAAoB,EACpB,4BAA2D,EAC3D,UAAoB,EACpB,kBAA+B,EAC/B,eAA6C,EAC7C,SAAyF;IAEzF,MAAM,iBAAiB,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,EAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACrH,MAAM,eAAe,GAAiC;QACpD,WAAW;QACX,aAAa,EAAE,wCAAqB,CAAC,YAAY;QACjD,UAAU;QACV,kBAAkB;QAClB,eAAe;QACf,eAAe,EAAE,iBAAiB;KACnC,CAAC;IAEF,IAAI,YAAyC,CAAC;IAC9C,IAAI,4BAA4B;QAC9B,YAAY,GAAG,4BAA4B,CAAC,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;;QAEpF,YAAY,GAAG,+CAA4B,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IAErG,oDAAoD;IACpD,IAAI,WAAW,KAAK,wBAAW,CAAC,QAAQ;QACtC,YAAY,GAAG,8BAAM,KAAK,EAAE,EAAE,WAAW,EAAE,+CAAsB,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,IAAG,YAAY,CAAQ,CAAC;IAEtI,OAAO,YAAY,CAAC;AACtB,CAAC;AA/BD,sDA+BC","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 { PropertyRecord } from \"@itwin/appui-abstract\";\nimport type { HighlightingComponentProps, PropertyValueRendererContext } from \"@itwin/components-react\";\nimport { HighlightedText, PropertyContainerType, PropertyValueRendererManager } from \"@itwin/components-react\";\nimport { CommonPropertyRenderer } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer\";\nimport { Orientation } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport { countMatchesInString } from \"./countMatchesInString\";\n\nfunction createHighlightCallback(highlight: HighlightingComponentProps & { applyOnLabel: boolean }, propertyRecord: PropertyRecord) {\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(propertyRecord.property.displayLabel.toLowerCase(), highlight.highlightedText);\n  } else {\n    labelMatches = 0;\n  }\n\n  const activeMatchIndex = (propertyRecord.property.name === propertyName) && ((matchIndex - labelMatches) >= 0) ? (matchIndex - labelMatches) : undefined;\n  const highlightCallback = (text: string) => (<HighlightedText text={text} activeMatchIndex={activeMatchIndex} searchText={highlight.highlightedText} />);\n\n  return highlightCallback;\n}\n\nexport function 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 & { applyOnLabel: boolean, applyOnValue: boolean }\n) {\n  const highlightCallback = highlight?.applyOnValue ? (createHighlightCallback(highlight, propertyRecord)) : 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(propertyRecord, rendererContext);\n  else\n    displayValue = PropertyValueRendererManager.defaultManager.render(propertyRecord, rendererContext);\n\n  // Align value with label if orientation is vertical\n  if (orientation === Orientation.Vertical)\n    displayValue = <span style={{ paddingLeft: CommonPropertyRenderer.getLabelOffset(indentation, orientation) }}>{displayValue}</span>;\n\n  return displayValue;\n}\n"]}

package/lib/esm/widget/components/property-grid/PropertyRender.js

@@ -8,6 +8,7 @@ import { EditorContainer, UiComponents, } from "@itwin/components-react";
 import { NonPrimitivePropertyRenderer } from "./NonPrimitivePropertyRenderer";
 import { PrimitivePropertyRenderer } from "./PrimitivePropertyRenderer";
 import { CommonPropertyRenderer } from "@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer";
+import { createNewDisplayValue } from "./createNewDisplayValue";
 /**  A React component that renders properties
  * @public
  */
@@ -39,7 +40,7 @@ export class PropertyRenderer extends React.Component {
             this.updateDisplayValueAsEditor(props);
             return;
         }
-        const displayValue = CommonPropertyRenderer.createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager);
+        const displayValue = createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager);
         this.setState({ displayValue });
     }
     /** Display property record value in an editor */

package/lib/esm/widget/components/property-grid/PropertyRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyRender.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/PropertyRender.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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type { Orientation, RatioChangeResult } from \"@itwin/core-react\";\nimport type {\n  ActionButtonRenderer,\n  PrimitiveRendererProps,\n  PropertyUpdatedArgs,\n  PropertyValueRendererManager,\n} from \"@itwin/components-react\";\nimport {\n  EditorContainer,\n  UiComponents,\n} from \"@itwin/components-react\";\n\nimport { NonPrimitivePropertyRenderer } from \"./NonPrimitivePropertyRenderer\";\nimport { PrimitivePropertyRenderer } from \"./PrimitivePropertyRenderer\";\nimport type { PropertyGridColumnInfo } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/PropertyGridColumns\";\nimport type { HighlightingComponentProps } from \"@itwin/components-react/lib/cjs/components-react/common/HighlightingComponentProps\";\nimport { CommonPropertyRenderer } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer\";\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 | RatioChangeResult;\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 @beta */\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 @beta */\n  isEditing?: boolean;\n  /** Called when property edit is committed. @beta */\n  onEditCommit?: (args: PropertyUpdatedArgs) => void;\n  /** Called when property edit is cancelled. @beta */\n  onEditCancel?: () => void;\n  /** Props used for highlighting. @beta */\n  highlight?: HighlightingComponentProps;\n}\n\n/** State of [[PropertyRenderer]] React component\n * @internal\n */\ninterface PropertyRendererState {\n  /** Currently loaded property value */\n  displayValue?: React.ReactNode;\n}\n\n/**  A React component that renders properties\n * @public\n */\nexport class PropertyRenderer extends React.Component<\nPropertyRendererProps,\nPropertyRendererState\n> {\n  /** @internal */\n  public override readonly state: Readonly<PropertyRendererState> = {\n    displayValue: UiComponents.translate(\"general.loading\"),\n  };\n\n  public static getLabelOffset(\n    indentation?: number,\n    orientation?: Orientation,\n    width?: number,\n    columnRatio?: number,\n    minColumnLabelWidth?: number,\n  ): number {\n    return CommonPropertyRenderer.getLabelOffset(\n      indentation,\n      orientation,\n      width,\n      columnRatio,\n      minColumnLabelWidth,\n    );\n  }\n\n  private updateDisplayValue(props: PropertyRendererProps) {\n    if (props.isEditing) {\n      this.updateDisplayValueAsEditor(props);\n      return;\n    }\n\n    const displayValue = CommonPropertyRenderer.createNewDisplayValue(\n      props.orientation,\n      props.propertyRecord,\n      props.indentation,\n      props.propertyValueRendererManager,\n    );\n    this.setState({ displayValue });\n  }\n\n  private _onEditCommit = (args: PropertyUpdatedArgs) => {\n    // istanbul ignore else\n    if (this.props.onEditCommit) {\n      this.props.onEditCommit(args);\n    }\n  };\n\n  private _onEditCancel = () => {\n    // istanbul ignore else\n    if (this.props.onEditCancel) {\n      this.props.onEditCancel();\n    }\n  };\n\n  /** Display property record value in an editor */\n  public updateDisplayValueAsEditor(props: PropertyRendererProps) {\n    this.setState({\n      displayValue: (\n        <EditorContainer\n          propertyRecord={props.propertyRecord}\n          onCommit={this._onEditCommit}\n          onCancel={this._onEditCancel}\n          setFocus={true}\n        />\n      ),\n    });\n  }\n\n  /** @internal */\n  public override componentDidMount() {\n    this.updateDisplayValue(this.props);\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyRendererProps) {\n    if (\n      prevProps.propertyRecord !== this.props.propertyRecord ||\n      prevProps.isEditing !== this.props.isEditing ||\n      prevProps.orientation !== this.props.orientation\n    ) {\n      this.updateDisplayValue(this.props);\n    }\n  }\n\n  /** @internal */\n  public override render() {\n    const { ...props } = this.props;\n    const primitiveRendererProps: PrimitiveRendererProps = {\n      ...props,\n      valueElement: this.state.displayValue,\n      indentation: this.props.indentation,\n    };\n\n    switch (this.props.propertyRecord.value.valueFormat) {\n      case PropertyValueFormat.Primitive:\n        return (\n          <PrimitivePropertyRenderer {...primitiveRendererProps} />\n        );\n      case PropertyValueFormat.Array:\n        // If array is empty, render it as a primitive property\n        if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\n          && this.props.propertyRecord.value.items.length === 0)\n          return (\n            <PrimitivePropertyRenderer {...primitiveRendererProps} />\n          );\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}\n"]}
+{"version":3,"file":"PropertyRender.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/PropertyRender.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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type { Orientation, RatioChangeResult } from \"@itwin/core-react\";\nimport type {\n  ActionButtonRenderer,\n  PrimitiveRendererProps,\n  PropertyUpdatedArgs,\n  PropertyValueRendererManager,\n} from \"@itwin/components-react\";\nimport {\n  EditorContainer,\n  UiComponents,\n} from \"@itwin/components-react\";\n\nimport { NonPrimitivePropertyRenderer } from \"./NonPrimitivePropertyRenderer\";\nimport { PrimitivePropertyRenderer } from \"./PrimitivePropertyRenderer\";\nimport type { PropertyGridColumnInfo } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/PropertyGridColumns\";\nimport type { HighlightingComponentProps } from \"@itwin/components-react/lib/cjs/components-react/common/HighlightingComponentProps\";\nimport { CommonPropertyRenderer } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer\";\nimport { createNewDisplayValue } from \"./createNewDisplayValue\";\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 | RatioChangeResult;\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 @beta */\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 @beta */\n  isEditing?: boolean;\n  /** Called when property edit is committed. @beta */\n  onEditCommit?: (args: PropertyUpdatedArgs) => void;\n  /** Called when property edit is cancelled. @beta */\n  onEditCancel?: () => void;\n  /** Props used for highlighting. @beta */\n  highlight?: HighlightingComponentProps;\n}\n\n/** State of [[PropertyRenderer]] React component\n * @internal\n */\ninterface PropertyRendererState {\n  /** Currently loaded property value */\n  displayValue?: React.ReactNode;\n}\n\n/**  A React component that renders properties\n * @public\n */\nexport class PropertyRenderer extends React.Component<\nPropertyRendererProps,\nPropertyRendererState\n> {\n  /** @internal */\n  public override readonly state: Readonly<PropertyRendererState> = {\n    displayValue: UiComponents.translate(\"general.loading\"),\n  };\n\n  public static getLabelOffset(\n    indentation?: number,\n    orientation?: Orientation,\n    width?: number,\n    columnRatio?: number,\n    minColumnLabelWidth?: number,\n  ): number {\n    return CommonPropertyRenderer.getLabelOffset(\n      indentation,\n      orientation,\n      width,\n      columnRatio,\n      minColumnLabelWidth,\n    );\n  }\n\n  private updateDisplayValue(props: PropertyRendererProps) {\n    if (props.isEditing) {\n      this.updateDisplayValueAsEditor(props);\n      return;\n    }\n\n    const displayValue = createNewDisplayValue(\n      props.orientation,\n      props.propertyRecord,\n      props.indentation,\n      props.propertyValueRendererManager,\n    );\n    this.setState({ displayValue });\n  }\n\n  private _onEditCommit = (args: PropertyUpdatedArgs) => {\n    // istanbul ignore else\n    if (this.props.onEditCommit) {\n      this.props.onEditCommit(args);\n    }\n  };\n\n  private _onEditCancel = () => {\n    // istanbul ignore else\n    if (this.props.onEditCancel) {\n      this.props.onEditCancel();\n    }\n  };\n\n  /** Display property record value in an editor */\n  public updateDisplayValueAsEditor(props: PropertyRendererProps) {\n    this.setState({\n      displayValue: (\n        <EditorContainer\n          propertyRecord={props.propertyRecord}\n          onCommit={this._onEditCommit}\n          onCancel={this._onEditCancel}\n          setFocus={true}\n        />\n      ),\n    });\n  }\n\n  /** @internal */\n  public override componentDidMount() {\n    this.updateDisplayValue(this.props);\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyRendererProps) {\n    if (\n      prevProps.propertyRecord !== this.props.propertyRecord ||\n      prevProps.isEditing !== this.props.isEditing ||\n      prevProps.orientation !== this.props.orientation\n    ) {\n      this.updateDisplayValue(this.props);\n    }\n  }\n\n  /** @internal */\n  public override render() {\n    const { ...props } = this.props;\n    const primitiveRendererProps: PrimitiveRendererProps = {\n      ...props,\n      valueElement: this.state.displayValue,\n      indentation: this.props.indentation,\n    };\n\n    switch (this.props.propertyRecord.value.valueFormat) {\n      case PropertyValueFormat.Primitive:\n        return (\n          <PrimitivePropertyRenderer {...primitiveRendererProps} />\n        );\n      case PropertyValueFormat.Array:\n        // If array is empty, render it as a primitive property\n        if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\n          && this.props.propertyRecord.value.items.length === 0)\n          return (\n            <PrimitivePropertyRenderer {...primitiveRendererProps} />\n          );\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}\n"]}

package/lib/esm/widget/components/property-grid/countMatchesInString.d.ts

@@ -0,0 +1,8 @@
+/** @packageDocumentation
+ * @module Common
+ */
+/** Counts how many times string 'lookup' is repeated in string 'str'.
+ * @internal
+ */
+export declare function countMatchesInString(str: string, lookup: string): number;
+//# sourceMappingURL=countMatchesInString.d.ts.map

package/lib/esm/widget/components/property-grid/countMatchesInString.js

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* @author Vitim.us https://gist.github.com/victornpb/7736865 */
+/** @packageDocumentation
+ * @module Common
+ */
+/** Counts how many times string 'lookup' is repeated in string 'str'.
+ * @internal
+ */
+export function countMatchesInString(str, lookup) {
+    if (!str.length || !lookup.length)
+        return 0;
+    let n = 0, pos = 0;
+    const step = lookup.length;
+    while (true) {
+        pos = str.indexOf(lookup, pos);
+        if (pos >= 0) {
+            ++n;
+            pos += step;
+        }
+        else
+            break;
+    }
+    return n;
+}
+//# sourceMappingURL=countMatchesInString.js.map

package/lib/esm/widget/components/property-grid/countMatchesInString.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countMatchesInString.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/countMatchesInString.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,gEAAgE;AAEhE;;GAEG;AAEH;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,GAAW,EAAE,MAAc;IAC9D,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM;QAC/B,OAAO,CAAC,CAAC;IAEX,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;IACnB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC;IAE3B,OAAO,IAAI,EAAE;QACX,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC/B,IAAI,GAAG,IAAI,CAAC,EAAE;YACZ,EAAE,CAAC,CAAC;YACJ,GAAG,IAAI,IAAI,CAAC;SACb;;YACC,MAAM;KACT;IACD,OAAO,CAAC,CAAC;AACX,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/* @author Vitim.us https://gist.github.com/victornpb/7736865 */\n\n/** @packageDocumentation\n * @module Common\n */\n\n/** Counts how many times string 'lookup' is repeated in string 'str'.\n * @internal\n */\nexport function countMatchesInString(str: string, lookup: string) {\n  if (!str.length || !lookup.length)\n    return 0;\n\n  let n = 0, pos = 0;\n  const step = lookup.length;\n\n  while (true) {\n    pos = str.indexOf(lookup, pos);\n    if (pos >= 0) {\n      ++n;\n      pos += step;\n    } else\n      break;\n  }\n  return n;\n}\n"]}

package/lib/esm/widget/components/property-grid/createNewDisplayValue.d.ts

@@ -0,0 +1,10 @@
+import type { PropertyRecord } from "@itwin/appui-abstract";
+import type { HighlightingComponentProps } from "@itwin/components-react";
+import { PropertyValueRendererManager } from "@itwin/components-react";
+import { Orientation } from "@itwin/core-react";
+import * as React from "react";
+export declare function createNewDisplayValue(orientation: Orientation, propertyRecord: PropertyRecord, indentation?: number, propertyValueRendererManager?: PropertyValueRendererManager, isExpanded?: boolean, onExpansionToggled?: () => void, onHeightChanged?: (newHeight: number) => void, highlight?: HighlightingComponentProps & {
+    applyOnLabel: boolean;
+    applyOnValue: boolean;
+}): React.ReactNode;
+//# sourceMappingURL=createNewDisplayValue.d.ts.map

package/lib/esm/widget/components/property-grid/createNewDisplayValue.js

@@ -0,0 +1,42 @@
+import { HighlightedText, PropertyContainerType, PropertyValueRendererManager } from "@itwin/components-react";
+import { CommonPropertyRenderer } from "@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer";
+import { Orientation } from "@itwin/core-react";
+import * as React from "react";
+import { countMatchesInString } from "./countMatchesInString";
+function createHighlightCallback(highlight, propertyRecord) {
+    var _a;
+    const activeMatch = highlight.activeHighlight;
+    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);
+    }
+    else {
+        labelMatches = 0;
+    }
+    const activeMatchIndex = (propertyRecord.property.name === propertyName) && ((matchIndex - labelMatches) >= 0) ? (matchIndex - labelMatches) : undefined;
+    const highlightCallback = (text) => (React.createElement(HighlightedText, { text: text, activeMatchIndex: activeMatchIndex, searchText: highlight.highlightedText }));
+    return highlightCallback;
+}
+export function createNewDisplayValue(orientation, propertyRecord, indentation, propertyValueRendererManager, isExpanded, onExpansionToggled, onHeightChanged, highlight) {
+    const highlightCallback = (highlight === null || highlight === void 0 ? void 0 : highlight.applyOnValue) ? (createHighlightCallback(highlight, propertyRecord)) : undefined;
+    const rendererContext = {
+        orientation,
+        containerType: PropertyContainerType.PropertyPane,
+        isExpanded,
+        onExpansionToggled,
+        onHeightChanged,
+        textHighlighter: highlightCallback,
+    };
+    let displayValue;
+    if (propertyValueRendererManager)
+        displayValue = propertyValueRendererManager.render(propertyRecord, rendererContext);
+    else
+        displayValue = PropertyValueRendererManager.defaultManager.render(propertyRecord, rendererContext);
+    // Align value with label if orientation is vertical
+    if (orientation === Orientation.Vertical)
+        displayValue = React.createElement("span", { style: { paddingLeft: CommonPropertyRenderer.getLabelOffset(indentation, orientation) } }, displayValue);
+    return displayValue;
+}
+//# sourceMappingURL=createNewDisplayValue.js.map

package/lib/esm/widget/components/property-grid/createNewDisplayValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createNewDisplayValue.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/createNewDisplayValue.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAC;AAC/G,OAAO,EAAE,sBAAsB,EAAE,MAAM,8FAA8F,CAAC;AACtI,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,SAAS,uBAAuB,CAAC,SAAiE,EAAE,cAA8B;;IAChI,MAAM,WAAW,GAAG,SAAS,CAAC,eAAe,CAAC;IAC9C,MAAM,YAAY,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB,CAAC;IAC5D,MAAM,UAAU,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,mCAAI,CAAC,CAAC;IACpD,IAAI,YAAoB,CAAC;IAEzB,IAAI,SAAS,CAAC,YAAY,EAAE;QAC1B,YAAY,GAAG,oBAAoB,CAAC,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;KACpH;SAAM;QACL,YAAY,GAAG,CAAC,CAAC;KAClB;IAED,MAAM,gBAAgB,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACzJ,MAAM,iBAAiB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,CAAC,eAAe,GAAI,CAAC,CAAC;IAEzJ,OAAO,iBAAiB,CAAC;AAC3B,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,WAAwB,EACxB,cAA8B,EAC9B,WAAoB,EACpB,4BAA2D,EAC3D,UAAoB,EACpB,kBAA+B,EAC/B,eAA6C,EAC7C,SAAyF;IAEzF,MAAM,iBAAiB,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,EAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACrH,MAAM,eAAe,GAAiC;QACpD,WAAW;QACX,aAAa,EAAE,qBAAqB,CAAC,YAAY;QACjD,UAAU;QACV,kBAAkB;QAClB,eAAe;QACf,eAAe,EAAE,iBAAiB;KACnC,CAAC;IAEF,IAAI,YAAyC,CAAC;IAC9C,IAAI,4BAA4B;QAC9B,YAAY,GAAG,4BAA4B,CAAC,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;;QAEpF,YAAY,GAAG,4BAA4B,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IAErG,oDAAoD;IACpD,IAAI,WAAW,KAAK,WAAW,CAAC,QAAQ;QACtC,YAAY,GAAG,8BAAM,KAAK,EAAE,EAAE,WAAW,EAAE,sBAAsB,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,IAAG,YAAY,CAAQ,CAAC;IAEtI,OAAO,YAAY,CAAC;AACtB,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 { PropertyRecord } from \"@itwin/appui-abstract\";\nimport type { HighlightingComponentProps, PropertyValueRendererContext } from \"@itwin/components-react\";\nimport { HighlightedText, PropertyContainerType, PropertyValueRendererManager } from \"@itwin/components-react\";\nimport { CommonPropertyRenderer } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer\";\nimport { Orientation } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport { countMatchesInString } from \"./countMatchesInString\";\n\nfunction createHighlightCallback(highlight: HighlightingComponentProps & { applyOnLabel: boolean }, propertyRecord: PropertyRecord) {\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(propertyRecord.property.displayLabel.toLowerCase(), highlight.highlightedText);\n  } else {\n    labelMatches = 0;\n  }\n\n  const activeMatchIndex = (propertyRecord.property.name === propertyName) && ((matchIndex - labelMatches) >= 0) ? (matchIndex - labelMatches) : undefined;\n  const highlightCallback = (text: string) => (<HighlightedText text={text} activeMatchIndex={activeMatchIndex} searchText={highlight.highlightedText} />);\n\n  return highlightCallback;\n}\n\nexport function 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 & { applyOnLabel: boolean, applyOnValue: boolean }\n) {\n  const highlightCallback = highlight?.applyOnValue ? (createHighlightCallback(highlight, propertyRecord)) : 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(propertyRecord, rendererContext);\n  else\n    displayValue = PropertyValueRendererManager.defaultManager.render(propertyRecord, rendererContext);\n\n  // Align value with label if orientation is vertical\n  if (orientation === Orientation.Vertical)\n    displayValue = <span style={{ paddingLeft: CommonPropertyRenderer.getLabelOffset(indentation, orientation) }}>{displayValue}</span>;\n\n  return displayValue;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/grouping-mapping-widget",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "An iTwin.js 3D Viewer Widget that interfaces with the iTwin Reporting Platform.",
   "keywords": [
     "Bentley",