@itwin/components-react 4.0.0-dev.12 → 4.0.0-dev.14

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

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

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

@@ -1,86 +1,86 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-import { UiComponents } from "../../UiComponents";
-import { CommonPropertyRenderer } from "./CommonPropertyRenderer";
-import { NonPrimitivePropertyRenderer } from "./NonPrimitivePropertyRenderer";
-import { PrimitivePropertyRenderer } from "./PrimitivePropertyRenderer";
-/**  A React component that renders properties
- * @public
- */
-export class PropertyRenderer extends React.Component {
-    constructor(props) {
-        super(props);
-        /** @internal */
-        this.state = {
-            displayValue: UiComponents.translate("general.loading"),
-        };
-        this._onEditCommit = (args) => {
-            // istanbul ignore else
-            if (this.props.onEditCommit)
-                this.props.onEditCommit(args);
-        };
-        this._onEditCancel = () => {
-            // istanbul ignore else
-            if (this.props.onEditCancel)
-                this.props.onEditCancel();
-        };
-    }
-    static getLabelOffset(indentation, orientation, width, columnRatio, minColumnLabelWidth) {
-        return CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, minColumnLabelWidth);
-    }
-    updateDisplayValue(props) {
-        if (props.isEditing) {
-            this.updateDisplayValueAsEditor(props);
-            return;
-        }
-        const displayValue = CommonPropertyRenderer.createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager);
-        this.setState({ displayValue });
-    }
-    /** Display property record value in an editor */
-    updateDisplayValueAsEditor(props) {
-        this.setState({
-            displayValue: React.createElement(EditorContainer, { propertyRecord: props.propertyRecord, onCommit: this._onEditCommit, onCancel: this._onEditCancel, setFocus: true }),
-        });
-    }
-    /** @internal */
-    componentDidMount() {
-        this.updateDisplayValue(this.props);
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (prevProps.propertyRecord !== this.props.propertyRecord ||
-            prevProps.isEditing !== this.props.isEditing ||
-            prevProps.orientation !== this.props.orientation)
-            this.updateDisplayValue(this.props);
-    }
-    /** @internal */
-    render() {
-        const { propertyValueRendererManager, isEditing, onEditCommit, onEditCancel, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
-        const primitiveRendererProps = {
-            ...props,
-            valueElement: this.state.displayValue,
-            indentation: this.props.indentation,
-        };
-        switch (this.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 (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array
-                    && this.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 }));
-        }
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+import { UiComponents } from "../../UiComponents";
+import { CommonPropertyRenderer } from "./CommonPropertyRenderer";
+import { NonPrimitivePropertyRenderer } from "./NonPrimitivePropertyRenderer";
+import { PrimitivePropertyRenderer } from "./PrimitivePropertyRenderer";
+/**  A React component that renders properties
+ * @public
+ */
+export class PropertyRenderer extends React.Component {
+    constructor(props) {
+        super(props);
+        /** @internal */
+        this.state = {
+            displayValue: UiComponents.translate("general.loading"),
+        };
+        this._onEditCommit = (args) => {
+            // istanbul ignore else
+            if (this.props.onEditCommit)
+                this.props.onEditCommit(args);
+        };
+        this._onEditCancel = () => {
+            // istanbul ignore else
+            if (this.props.onEditCancel)
+                this.props.onEditCancel();
+        };
+    }
+    static getLabelOffset(indentation, orientation, width, columnRatio, minColumnLabelWidth) {
+        return CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, minColumnLabelWidth);
+    }
+    updateDisplayValue(props) {
+        if (props.isEditing) {
+            this.updateDisplayValueAsEditor(props);
+            return;
+        }
+        const displayValue = CommonPropertyRenderer.createNewDisplayValue(props.orientation, props.propertyRecord, props.indentation, props.propertyValueRendererManager);
+        this.setState({ displayValue });
+    }
+    /** Display property record value in an editor */
+    updateDisplayValueAsEditor(props) {
+        this.setState({
+            displayValue: React.createElement(EditorContainer, { propertyRecord: props.propertyRecord, onCommit: this._onEditCommit, onCancel: this._onEditCancel, setFocus: true }),
+        });
+    }
+    /** @internal */
+    componentDidMount() {
+        this.updateDisplayValue(this.props);
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (prevProps.propertyRecord !== this.props.propertyRecord ||
+            prevProps.isEditing !== this.props.isEditing ||
+            prevProps.orientation !== this.props.orientation)
+            this.updateDisplayValue(this.props);
+    }
+    /** @internal */
+    render() {
+        const { propertyValueRendererManager, isEditing, onEditCommit, onEditCancel, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        const primitiveRendererProps = {
+            ...props,
+            valueElement: this.state.displayValue,
+            indentation: this.props.indentation,
+        };
+        switch (this.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 (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array
+                    && this.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 }));
+        }
+    }
+}
 //# sourceMappingURL=PropertyRenderer.js.map

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

@@ -1,37 +1,37 @@
-/** @packageDocumentation
- * @module Properties
- */
-import "./PropertyView.scss";
-import * as React from "react";
-import { SharedRendererProps } from "./PropertyRenderer";
-/** 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;
-    /** @internal */
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module Properties
+ */
+import "./PropertyView.scss";
+import * as React from "react";
+import { SharedRendererProps } from "./PropertyRenderer";
+/** 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;
+    /** @internal */
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=PropertyView.d.ts.map

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

@@ -1,79 +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 { PropertyValueFormat } from "@itwin/appui-abstract";
-import { ElementSeparator, Orientation } from "@itwin/core-react";
-import { ActionButtonList } from "./ActionButtonList";
-import { PropertyGridColumnStyleProvider } from "./PropertyGridColumns";
-/**
- * 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);
-            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;
-    }
-    /** @internal */
-    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);
-        return (React.createElement("div", { style: columnsStyleProvider.getStyle(this.props.orientation, needActionButtons, ratio, needElementSeparator), className: this.getClassName(this.props), onClick: this._onClick, onContextMenu: this._onContextMenu, onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, role: "presentation" },
-            React.createElement("div", { className: "components-property-record-label" }, this.props.labelElement),
-            needElementSeparator
-                ? React.createElement(ElementSeparator, { movableArea: this.props.width, onRatioChanged: this.props.onColumnRatioChanged, ratio: ratio, orientation: this.props.orientation, isResizeHandleHovered: this.props.isResizeHandleHovered, onResizeHandleHoverChanged: this.props.onResizeHandleHoverChanged, isResizeHandleBeingDragged: this.props.isResizeHandleBeingDragged, onResizeHandleDragChanged: this.props.onResizeHandleDragChanged })
-                : undefined,
-            this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Primitive
-                ? React.createElement("div", { className: "components-property-record-value" },
-                    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));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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 { PropertyValueFormat } from "@itwin/appui-abstract";
+import { ElementSeparator, Orientation } from "@itwin/core-react";
+import { ActionButtonList } from "./ActionButtonList";
+import { PropertyGridColumnStyleProvider } from "./PropertyGridColumns";
+/**
+ * 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);
+            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;
+    }
+    /** @internal */
+    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);
+        return (React.createElement("div", { style: columnsStyleProvider.getStyle(this.props.orientation, needActionButtons, ratio, needElementSeparator), className: this.getClassName(this.props), onClick: this._onClick, onContextMenu: this._onContextMenu, onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, role: "presentation" },
+            React.createElement("div", { className: "components-property-record-label" }, this.props.labelElement),
+            needElementSeparator
+                ? React.createElement(ElementSeparator, { movableArea: this.props.width, onRatioChanged: this.props.onColumnRatioChanged, ratio: ratio, orientation: this.props.orientation, isResizeHandleHovered: this.props.isResizeHandleHovered, onResizeHandleHoverChanged: this.props.onResizeHandleHoverChanged, isResizeHandleBeingDragged: this.props.isResizeHandleBeingDragged, onResizeHandleDragChanged: this.props.onResizeHandleDragChanged })
+                : undefined,
+            this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Primitive
+                ? React.createElement("div", { className: "components-property-record-value" },
+                    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/esm/components-react/properties/renderers/label/NonPrimitivePropertyLabelRenderer.d.ts

@@ -1,24 +1,24 @@
-/** @packageDocumentation
- * @module Properties
- */
-import "./PropertyLabelRenderer.scss";
-import * as React from "react";
-import { PrimitivePropertyLabelRendererProps } from "./PrimitivePropertyLabelRenderer";
-/** 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(): JSX.Element;
-}
+/** @packageDocumentation
+ * @module Properties
+ */
+import "./PropertyLabelRenderer.scss";
+import * as React from "react";
+import { PrimitivePropertyLabelRendererProps } from "./PrimitivePropertyLabelRenderer";
+/** 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(): JSX.Element;
+}
 //# sourceMappingURL=NonPrimitivePropertyLabelRenderer.d.ts.map