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

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

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

@@ -1,102 +1,106 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-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.PropertyView = void 0;
-require("./PropertyView.scss");
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const ActionButtonList_1 = require("./ActionButtonList");
-const PropertyGridColumns_1 = require("./PropertyGridColumns");
-/**
- * A React component that renders property as label/value pair
- * @public
- */
-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 === core_react_1.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 === core_react_1.Orientation.Horizontal && !!this.props.onColumnRatioChanged;
-        const needActionButtons = !!this.props.actionButtonRenderers;
-        const columnsStyleProvider = new PropertyGridColumns_1.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(core_react_1.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 === appui_abstract_1.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_1.ActionButtonList, { orientation: this.props.orientation, property: this.props.propertyRecord, isPropertyHovered: this.state.isHovered, actionButtonRenderers: this.props.actionButtonRenderers })
-                :
-                    undefined));
-    }
-}
-exports.PropertyView = PropertyView;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.PropertyView = void 0;
+require("./PropertyView.scss");
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const ActionButtonList_1 = require("./ActionButtonList");
+const PropertyGridColumns_1 = require("./PropertyGridColumns");
+/**
+ * A React component that renders property as label/value pair
+ * @public
+ */
+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 === core_react_1.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 === core_react_1.Orientation.Horizontal && !!this.props.onColumnRatioChanged;
+        const needActionButtons = !!this.props.actionButtonRenderers;
+        const columnsStyleProvider = new PropertyGridColumns_1.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(core_react_1.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 === appui_abstract_1.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_1.ActionButtonList, { orientation: this.props.orientation, property: this.props.propertyRecord, isPropertyHovered: this.state.isHovered, actionButtonRenderers: this.props.actionButtonRenderers })
+                :
+                    undefined));
+    }
+}
+exports.PropertyView = PropertyView;
 //# sourceMappingURL=PropertyView.js.map

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

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

package/lib/cjs/components-react/properties/renderers/PropertyView.scss

@@ -1,104 +1,104 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-$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;
-}
-
-.components-property-record-value {
-  @include record-cell;
-
-  & > span {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 100%;
-  }
-
-  .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;
-  }
-
-  .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(--buic-foreground-primary);
-    font-size: 12px;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &:active {
-      outline: none;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+$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;
+}
+
+.components-property-record-value {
+  @include record-cell;
+
+  & > span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+
+  .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;
+  }
+
+  .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(--buic-foreground-primary);
+    font-size: 12px;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:active {
+      outline: none;
+    }
+  }
+}