@itwin/components-react 4.17.1 → 5.0.0-dev.2

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,79 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./PropertyView.scss";
+import * as React from "react";
+import { ElementSeparator } from "@itwin/core-react";
+import { ActionButtonList } from "./ActionButtonList.js";
+import { PropertyGridColumnStyleProvider } from "./PropertyGridColumns.js";
+import { Orientation } from "../../common/Orientation.js";
+/**
+ * A React component that renders property as label/value pair
+ * @public
+ */
+export class PropertyView extends React.Component {
+    constructor(props) {
+        super(props);
+        this._onClick = () => {
+            if (this.props.onClick)
+                this.props.onClick(this.props.propertyRecord, this.props.uniqueKey);
+        };
+        this._onMouseEnter = () => {
+            if (this.props.isHoverable)
+                this.setState({ isHovered: true });
+        };
+        this._onMouseLeave = () => {
+            if (this.props.isHoverable)
+                this.setState({ isHovered: false });
+        };
+        this._onContextMenu = (e) => {
+            if (this.props.onContextMenu) {
+                this.props.onContextMenu(this.props.propertyRecord, e);
+                e.preventDefault();
+            }
+            if (this.props.onRightClick) {
+                this.props.onRightClick(this.props.propertyRecord, this.props.uniqueKey);
+                e.preventDefault();
+            }
+            return false;
+        };
+        this.state = {
+            isHovered: false,
+        };
+    }
+    getClassName(props) {
+        let propertyRecordClassName = props.orientation === Orientation.Horizontal
+            ? "components-property-record--horizontal"
+            : "components-property-record--vertical";
+        if (props.isSelected)
+            propertyRecordClassName += " components--selected";
+        if (props.onClick)
+            propertyRecordClassName += " components--clickable";
+        if (props.isHoverable)
+            propertyRecordClassName += " components--hoverable";
+        return propertyRecordClassName;
+    }
+    render() {
+        const ratio = this.props.columnRatio ? this.props.columnRatio : 0.25;
+        const needElementSeparator = this.props.orientation === Orientation.Horizontal &&
+            !!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 ? (
+            // eslint-disable-next-line deprecation/deprecation
+            React.createElement(ElementSeparator, { style: { margin: 0 }, 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,
+            renderValueElement ? (React.createElement("div", { className: "components-property-record-value" },
+                React.createElement("span", null, this.props.valueElementRenderer
+                    ? this.props.valueElementRenderer()
+                    : this.props.valueElement))) : undefined,
+            this.props.actionButtonRenderers ? (React.createElement(ActionButtonList, { orientation: this.props.orientation, property: this.props.propertyRecord, isPropertyHovered: this.state.isHovered, actionButtonRenderers: this.props.actionButtonRenderers })) : undefined));
+    }
+}
+//# sourceMappingURL=PropertyView.js.map

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

@@ -0,0 +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 { ElementSeparator } from \"@itwin/core-react\";\nimport { ActionButtonList } from \"./ActionButtonList.js\";\nimport { PropertyGridColumnStyleProvider } from \"./PropertyGridColumns.js\";\nimport type { SharedRendererProps } from \"./PropertyRenderer.js\";\nimport { Orientation } from \"../../common/Orientation.js\";\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      e.preventDefault();\n    }\n    if (this.props.onRightClick) {\n      this.props.onRightClick(this.props.propertyRecord, this.props.uniqueKey);\n      e.preventDefault();\n    }\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  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          // eslint-disable-next-line deprecation/deprecation\n          <ElementSeparator\n            style={{ margin: 0 }}\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/components-react/properties/renderers/PropertyView.scss

@@ -0,0 +1,110 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$text-font-size: var(--iui-font-size-1);
+$text-font-color: var(--iui-color-text);
+
+.components-property-record--horizontal {
+  height: 100%;
+  display: grid;
+  padding: 0 8px;
+
+  .components-property-record-label {
+    font-size: var(--iui-font-size-0);
+    color: var(--iui-color-text-muted);
+  }
+
+  .components-property-record-value {
+    min-height: 24px;
+    font-size: $text-font-size;
+    color: $text-font-color;
+    padding: 0px 5px;
+  }
+}
+
+.components-property-record--vertical {
+  height: 100%;
+  padding: 0 8px;
+  display: grid;
+  align-content: center;
+
+  .components-property-record-label {
+    font-size: var(--iui-font-size-0);
+    color: var(--iui-color-text-muted);
+  }
+
+  .components-property-record-value {
+    min-height: 22px;
+    font-size: $text-font-size;
+    color: $text-font-color;
+  }
+}
+
+@mixin record-cell {
+  display: flex;
+  align-items: center;
+}
+
+.components-property-record-label {
+  @include record-cell;
+  overflow: hidden;
+}
+
+.components-property-record-value {
+  @include record-cell;
+  overflow: hidden;
+
+  & > span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .core-underlined-button {
+    // Offset by 2px, because value is centered vertically
+    // and the button has an underline which offsets it's content,
+    // which in turn makes it not in line with the rest of text
+    margin-top: 2px;
+  }
+
+  .multiline {
+    display: flex;
+    align-items: baseline;
+
+    .content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .expanded {
+    white-space: pre-wrap;
+    margin-top: 4px;
+    margin-bottom: 4px;
+
+    .expand-toggle {
+      float: right;
+      margin-top: 2px;
+    }
+  }
+
+  .expand-toggle {
+    padding: 0;
+    white-space: nowrap;
+    border: none;
+    background: none;
+    color: var(--iui-color-icon-accent);
+    font-size: 12px;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:active {
+      outline: none;
+    }
+  }
+}

package/lib/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.d.ts

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module Properties
+ */
+import "./PropertyLabelRenderer.scss";
+import * as React from "react";
+import type { PrimitivePropertyLabelRendererProps } from "./PrimitivePropertyLabelRenderer.js";
+/** Properties for the [[NonPrimitivePropertyLabelRenderer]] React component
+ * @public
+ */
+export interface NonPrimitivePropertyLabelRendererProps extends PrimitivePropertyLabelRendererProps {
+    isExpanded: boolean;
+    onExpand: () => void;
+    onCollapse: () => void;
+}
+/**
+ * A React component that renders a non-primitive property label.
+ * It renders an animated arrow with text which expands when label is clicked.
+ * @public
+ */
+export declare class NonPrimitivePropertyLabelRenderer extends React.PureComponent<NonPrimitivePropertyLabelRendererProps> {
+    private _onClick;
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=NonPrimitivePropertyLabelRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NonPrimitivePropertyLabelRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAG/F;;GAEG;AACH,MAAM,WAAW,sCACf,SAAQ,mCAAmC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;GAIG;AACH,qBAAa,iCAAkC,SAAQ,KAAK,CAAC,aAAa,CAAC,sCAAsC,CAAC;IAChH,OAAO,CAAC,QAAQ,CAGd;IAEc,MAAM;CAmBvB"}

package/lib/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.js

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./PropertyLabelRenderer.scss";
+import * as React from "react";
+import { SvgChevronRight } from "@itwin/itwinui-icons-react";
+import { PropertyLabelRenderer } from "./PropertyLabelRenderer.js";
+/**
+ * A React component that renders a non-primitive property label.
+ * It renders an animated arrow with text which expands when label is clicked.
+ * @public
+ */
+export class NonPrimitivePropertyLabelRenderer extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._onClick = () => {
+            if (this.props.isExpanded)
+                this.props.onCollapse();
+            else
+                this.props.onExpand();
+        };
+    }
+    render() {
+        return (React.createElement("div", { style: PropertyLabelRenderer.getStyle(this.props.offset), className: `components-nonprimitive-property-label-renderer ${this.props.className ? this.props.className : ""}`, onClick: this._onClick, role: "presentation" },
+            React.createElement("div", { className: this.props.isExpanded ? "components-expanded" : "" },
+                React.createElement(SvgChevronRight, null)),
+            React.createElement(PropertyLabelRenderer, { renderColon: this.props.renderColon }, this.props.children)));
+    }
+}
+//# sourceMappingURL=NonPrimitivePropertyLabelRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NonPrimitivePropertyLabelRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAYnE;;;;GAIG;AACH,MAAM,OAAO,iCAAkC,SAAQ,KAAK,CAAC,aAAqD;IAAlH;;QACU,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU;gBAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;;gBAC9C,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC7B,CAAC,CAAC;IAqBJ,CAAC;IAnBiB,MAAM;QACpB,OAAO,CACL,6BACE,KAAK,EAAE,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACxD,SAAS,EAAE,mDACT,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAChD,EAAE,EACF,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,cAAc;YAEnB,6BAAK,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;gBAChE,oBAAC,eAAe,OAAG,CACf;YACN,oBAAC,qBAAqB,IAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,IACvD,IAAI,CAAC,KAAK,CAAC,QAAQ,CACE,CACpB,CACP,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\";\nimport { SvgChevronRight } from \"@itwin/itwinui-icons-react\";\nimport type { PrimitivePropertyLabelRendererProps } from \"./PrimitivePropertyLabelRenderer.js\";\nimport { PropertyLabelRenderer } from \"./PropertyLabelRenderer.js\";\n\n/** Properties for the [[NonPrimitivePropertyLabelRenderer]] React component\n * @public\n */\nexport interface NonPrimitivePropertyLabelRendererProps\n  extends PrimitivePropertyLabelRendererProps {\n  isExpanded: boolean;\n  onExpand: () => void;\n  onCollapse: () => void;\n}\n\n/**\n * A React component that renders a non-primitive property label.\n * It renders an animated arrow with text which expands when label is clicked.\n * @public\n */\nexport class NonPrimitivePropertyLabelRenderer extends React.PureComponent<NonPrimitivePropertyLabelRendererProps> {\n  private _onClick = () => {\n    if (this.props.isExpanded) this.props.onCollapse();\n    else this.props.onExpand();\n  };\n\n  public override render() {\n    return (\n      <div\n        style={PropertyLabelRenderer.getStyle(this.props.offset)}\n        className={`components-nonprimitive-property-label-renderer ${\n          this.props.className ? this.props.className : \"\"\n        }`}\n        onClick={this._onClick}\n        role=\"presentation\"\n      >\n        <div className={this.props.isExpanded ? \"components-expanded\" : \"\"}>\n          <SvgChevronRight />\n        </div>\n        <PropertyLabelRenderer renderColon={this.props.renderColon}>\n          {this.props.children}\n        </PropertyLabelRenderer>\n      </div>\n    );\n  }\n}\n"]}

package/lib/components-react/properties/renderers/label/PrimitivePropertyLabelRenderer.d.ts

@@ -0,0 +1,22 @@
+/** @packageDocumentation
+ * @module Properties
+ */
+import "./PropertyLabelRenderer.scss";
+import * as React from "react";
+import type { PropertyLabelRendererProps } from "./PropertyLabelRenderer.js";
+/** Properties of a [[PrimitivePropertyLabelRenderer]] React component
+ * @public
+ */
+export interface PrimitivePropertyLabelRendererProps extends PropertyLabelRendererProps {
+    /** Additional class name for the label wrapper */
+    className?: string;
+    /** Offset from the left side in pixels. */
+    offset?: number;
+}
+/** A React component that renders a primitive property label
+ * @public
+ */
+export declare class PrimitivePropertyLabelRenderer extends React.PureComponent<PrimitivePropertyLabelRendererProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=PrimitivePropertyLabelRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitivePropertyLabelRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/label/PrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;GAEG;AACH,MAAM,WAAW,mCACf,SAAQ,0BAA0B;IAClC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,qBAAa,8BAA+B,SAAQ,KAAK,CAAC,aAAa,CAAC,mCAAmC,CAAC;IAC1F,MAAM;CAavB"}

package/lib/components-react/properties/renderers/label/PrimitivePropertyLabelRenderer.js

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Properties
+ */
+import "./PropertyLabelRenderer.scss";
+import * as React from "react";
+import { PropertyLabelRenderer } from "./PropertyLabelRenderer.js";
+/** A React component that renders a primitive property label
+ * @public
+ */
+export class PrimitivePropertyLabelRenderer extends React.PureComponent {
+    render() {
+        const { className, offset, children, ...rest } = this.props;
+        return (React.createElement("span", { className: `components-primitive-property-label-renderer ${className ? className : ""}`, style: PropertyLabelRenderer.getStyle(offset) },
+            React.createElement(PropertyLabelRenderer, { ...rest }, children)));
+    }
+}
+//# sourceMappingURL=PrimitivePropertyLabelRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitivePropertyLabelRenderer.js","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/label/PrimitivePropertyLabelRenderer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAanE;;GAEG;AACH,MAAM,OAAO,8BAA+B,SAAQ,KAAK,CAAC,aAAkD;IAC1F,MAAM;QACpB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5D,OAAO,CACL,8BACE,SAAS,EAAE,gDACT,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAC1B,EAAE,EACF,KAAK,EAAE,qBAAqB,CAAC,QAAQ,CAAC,MAAM,CAAC;YAE7C,oBAAC,qBAAqB,OAAK,IAAI,IAAG,QAAQ,CAAyB,CAC9D,CACR,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\";\nimport type { PropertyLabelRendererProps } from \"./PropertyLabelRenderer.js\";\nimport { PropertyLabelRenderer } from \"./PropertyLabelRenderer.js\";\n\n/** Properties of a [[PrimitivePropertyLabelRenderer]] React component\n * @public\n */\nexport interface PrimitivePropertyLabelRendererProps\n  extends PropertyLabelRendererProps {\n  /** Additional class name for the label wrapper */\n  className?: string;\n  /** Offset from the left side in pixels. */\n  offset?: number;\n}\n\n/** A React component that renders a primitive property label\n * @public\n */\nexport class PrimitivePropertyLabelRenderer extends React.PureComponent<PrimitivePropertyLabelRendererProps> {\n  public override render() {\n    const { className, offset, children, ...rest } = this.props;\n    return (\n      <span\n        className={`components-primitive-property-label-renderer ${\n          className ? className : \"\"\n        }`}\n        style={PropertyLabelRenderer.getStyle(offset)}\n      >\n        <PropertyLabelRenderer {...rest}>{children}</PropertyLabelRenderer>\n      </span>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyLabelRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/label/PropertyLabelRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACtC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,gBAAgB;AAChB,qBAAa,qBAAsB,SAAQ,KAAK,CAAC,aAAa,CAAC,0BAA0B,CAAC;IACxF,6EAA6E;WAC/D,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa;IAQ5C,MAAM;CAoBvB"}

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

@@ -0,0 +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,OAAO,UAAU,MAAM,YAAY,CAAC;AAcpC,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,SAAS,CAAC,CAAC;QACjB,OAAO,CACL;YACE,8BACE,SAAS,EAAE,UAAU,CACnB,oCAAoC,EACpC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,0CAA0C,CACrE,EACD,KAAK,EAAE,KAAK,IAEX,IAAI,CAAC,KAAK,CAAC,QAAQ,CACf,CACN,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\";\nimport classnames from \"classnames\";\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        : undefined);\n    return (\n      <>\n        <span\n          className={classnames(\n            \"components-property-label-renderer\",\n            this.props.renderColon && \"components-property-label-renderer-colon\"\n          )}\n          title={title}\n        >\n          {this.props.children}\n        </span>\n      </>\n    );\n  }\n}\n"]}

package/lib/components-react/properties/renderers/label/PropertyLabelRenderer.scss

@@ -0,0 +1,87 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@mixin rotate($amount) {
+  -webkit-transform: rotate($amount);
+  -ms-transform: rotate($amount);
+  transform: rotate($amount);
+}
+
+@mixin transition($seconds, $type) {
+  -webkit-transition: -webkit-transform $seconds $type;
+  -ms-transition: -ms-transform $seconds $type;
+  transition: transform $seconds $type;
+}
+
+.components-property-label-renderer {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-block: auto;
+
+  &-colon::after {
+    content: ":";
+    margin-inline-end: var(--iui-size-2xs);
+  }
+}
+
+@mixin specific-property-label-renderer {
+  position: relative;
+  display: flex;
+
+  .components-label-popup {
+    background: var(--iui-color-background-hover);
+    width: max-content;
+    padding: 5px;
+  }
+}
+
+.components-primitive-property-label-renderer {
+  @include specific-property-label-renderer;
+}
+
+.components-property-record--vertical {
+  .components-nonprimitive-property-label-renderer {
+    margin-bottom: 4px;
+  }
+}
+
+.components-nonprimitive-property-label-renderer {
+  align-items: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--iui-color-text);
+  font-size: 14px;
+  height: 100%;
+  width: 100%;
+  transition: transform var(--iui-duration-1) ease-in-out,
+    -webkit-transform var(--iui-duration-1) ease-in-out;
+
+  @include specific-property-label-renderer;
+
+  > .components-property-label-renderer {
+    flex: 1;
+    padding-left: var(--iui-size-2xs);
+  }
+
+  > div {
+    @include transition(var(--iui-duration-1), ease-in-out);
+
+    svg {
+      width: var(--iui-size-s);
+      height: var(--iui-size-s);
+      fill: var(--iui-color-icon);
+      display: block;
+    }
+
+    &.components-expanded {
+      @include rotate(90deg);
+    }
+  }
+
+  &:hover {
+    color: var(--iui-color-text-hover);
+  }
+}

package/lib/components-react/properties/renderers/value/ArrayPropertyValueRenderer.d.ts

@@ -0,0 +1,16 @@
+/** @packageDocumentation
+ * @module Properties
+ */
+import * as React from "react";
+import type { PropertyRecord } from "@itwin/appui-abstract";
+import type { IPropertyValueRenderer, PropertyValueRendererContext } from "../../ValueRendererManager.js";
+/** Default Array Property Renderer
+ * @public
+ */
+export declare class ArrayPropertyValueRenderer implements IPropertyValueRenderer {
+    /** Checks if the renderer can handle given property */
+    canRender(record: PropertyRecord): boolean;
+    /** Method that returns a JSX representation of PropertyRecord */
+    render(record: PropertyRecord, context?: PropertyValueRendererContext): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+}
+//# sourceMappingURL=ArrayPropertyValueRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayPropertyValueRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/properties/renderers/value/ArrayPropertyValueRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAExE,OAAO,KAAK,EACV,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,+BAA+B,CAAC;AAMvC;;GAEG;AACH,qBAAa,0BAA2B,YAAW,sBAAsB;IACvE,uDAAuD;IAChD,SAAS,CAAC,MAAM,EAAE,cAAc;IAIvC,iEAAiE;IAC1D,MAAM,CACX,MAAM,EAAE,cAAc,EACtB,OAAO,CAAC,EAAE,4BAA4B;CA+BzC"}

package/lib/components-react/properties/renderers/value/ArrayPropertyValueRenderer.js

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Properties
+ */
+import * as React from "react";
+import { PropertyValueFormat } from "@itwin/appui-abstract";
+import { PropertyContainerType } from "../../ValueRendererManager.js";
+import { TableArrayValueRenderer } from "./table/ArrayValueRenderer.js";
+import { withContextStyle } from "./WithContextStyle.js";
+import { Orientation } from "../../../common/Orientation.js";
+/** Default Array Property Renderer
+ * @public
+ */
+export class ArrayPropertyValueRenderer {
+    /** Checks if the renderer can handle given property */
+    canRender(record) {
+        return record.value.valueFormat === PropertyValueFormat.Array;
+    }
+    /** Method that returns a JSX representation of PropertyRecord */
+    render(record, context) {
+        const recordItems = record.value.items;
+        if (context && context.containerType === PropertyContainerType.Table) {
+            return withContextStyle(React.createElement(TableArrayValueRenderer, { propertyRecord: record, onDialogOpen: context.onDialogOpen, orientation: context.orientation ? context.orientation : Orientation.Horizontal }), context);
+        }
+        if (context &&
+            context.containerType === PropertyContainerType.PropertyPane) {
+            return withContextStyle("", context);
+        }
+        return withContextStyle(recordItems.length !== 0
+            ? `${record.value.itemsTypeName}[${recordItems.length}]`
+            : `${record.value.itemsTypeName}[]`, context);
+    }
+}
+//# sourceMappingURL=ArrayPropertyValueRenderer.js.map