@itwin/grouping-mapping-widget 0.2.0

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

@@ -0,0 +1,92 @@
+import * as React from "react";
+import type { PropertyRecord } from "@itwin/appui-abstract";
+import type { Orientation, RatioChangeResult } from "@itwin/core-react";
+import type { ActionButtonRenderer, PropertyUpdatedArgs, PropertyValueRendererManager } from "@itwin/components-react";
+import type { PropertyGridColumnInfo } from "@itwin/components-react/lib/cjs/components-react/properties/renderers/PropertyGridColumns";
+import type { HighlightingComponentProps } from "@itwin/components-react/lib/cjs/components-react/common/HighlightingComponentProps";
+/** 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 @beta */
+    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 @beta */
+    isEditing?: boolean;
+    /** Called when property edit is committed. @beta */
+    onEditCommit?: (args: PropertyUpdatedArgs) => void;
+    /** Called when property edit is cancelled. @beta */
+    onEditCancel?: () => void;
+    /** Props used for highlighting. @beta */
+    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>;
+    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 | undefined;
+}
+export {};
+//# sourceMappingURL=PropertyRender.d.ts.map

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

@@ -0,0 +1,111 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PropertyRenderer = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const components_react_1 = require("@itwin/components-react");
+const NonPrimitivePropertyRenderer_1 = require("./NonPrimitivePropertyRenderer");
+const PrimitivePropertyRenderer_1 = require("./PrimitivePropertyRenderer");
+const CommonPropertyRenderer_1 = require("@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer");
+/**  A React component that renders properties
+ * @public
+ */
+class PropertyRenderer extends React.Component {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.state = {
+            displayValue: components_react_1.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_1.CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, minColumnLabelWidth);
+    }
+    updateDisplayValue(props) {
+        if (props.isEditing) {
+            this.updateDisplayValueAsEditor(props);
+            return;
+        }
+        const displayValue = CommonPropertyRenderer_1.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(components_react_1.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 { ...props } = this.props;
+        const primitiveRendererProps = {
+            ...props,
+            valueElement: this.state.displayValue,
+            indentation: this.props.indentation,
+        };
+        switch (this.props.propertyRecord.value.valueFormat) {
+            case appui_abstract_1.PropertyValueFormat.Primitive:
+                return React.createElement(PrimitivePropertyRenderer_1.PrimitivePropertyRenderer, { ...primitiveRendererProps });
+            case appui_abstract_1.PropertyValueFormat.Array:
+                // If array is empty, render it as a primitive property
+                if (this.props.propertyRecord.value.valueFormat ===
+                    appui_abstract_1.PropertyValueFormat.Array &&
+                    this.props.propertyRecord.value.items.length === 0) {
+                    return React.createElement(PrimitivePropertyRenderer_1.PrimitivePropertyRenderer, { ...primitiveRendererProps });
+                }
+                break;
+            case appui_abstract_1.PropertyValueFormat.Struct:
+                return (React.createElement(NonPrimitivePropertyRenderer_1.NonPrimitivePropertyRenderer, { isCollapsible: true, ...primitiveRendererProps }));
+        }
+        return;
+    }
+}
+exports.PropertyRenderer = PropertyRenderer;
+//# sourceMappingURL=PropertyRender.js.map

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

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

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import "./PropertyView.scss";
+import type { SharedRendererProps } from "./PropertyRender";
+/** 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;
+}
+/**
+ * A React component that renders property as label/value pair
+ * @public
+ */
+export declare const PropertyView: (props: PropertyViewProps) => JSX.Element;
+//# sourceMappingURL=PropertyView.d.ts.map

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

@@ -0,0 +1,218 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PropertyView = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const components_react_1 = require("@itwin/components-react");
+require("./PropertyView.scss");
+const GroupQueryBuilderContext_1 = require("../GroupQueryBuilderContext");
+const react_1 = require("react");
+const PropertyGridColumns_1 = require("@itwin/components-react/lib/cjs/components-react/properties/renderers/PropertyGridColumns");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+/**
+ * A React component that renders property as label/value pair
+ * @public
+ */
+const PropertyView = (props) => {
+    const context = React.useContext(GroupQueryBuilderContext_1.GroupQueryBuilderContext);
+    const _validatePropertySelection = () => {
+        if (context.currentPropertyList.includes(props.propertyRecord)) {
+            return true;
+        }
+        // Check if all subproperties are selected
+        if (!_validateNestedPropertiesSelection(props.propertyRecord)) {
+            return false;
+        }
+        return true;
+    };
+    const _validateNestedPropertiesSelection = (prop) => {
+        switch (prop.value.valueFormat) {
+            case appui_abstract_1.PropertyValueFormat.Primitive:
+                if (!context.currentPropertyList.includes(prop)) {
+                    return false;
+                }
+                break;
+            case appui_abstract_1.PropertyValueFormat.Array:
+                if (prop.value.items.length === 0) {
+                    if (!context.currentPropertyList.includes(prop)) {
+                        return false;
+                    }
+                }
+                break;
+            case appui_abstract_1.PropertyValueFormat.Struct:
+                for (const subPropName in prop.value.members) {
+                    if (Object.prototype.hasOwnProperty.call(prop.value.members, subPropName)) {
+                        if (!_validateNestedPropertiesSelection(prop.value.members[subPropName])) {
+                            return false;
+                        }
+                    }
+                }
+        }
+        return true;
+    };
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isPropertySelected, setIsPropertySelected] = React.useState(_validatePropertySelection());
+    const _addSelectedProperty = react_1.useCallback(async (prop) => {
+        // TODO: roof selected item/category value is an object but format is primitive(needs further exploration)
+        if (!context.currentPropertyList.includes(prop) &&
+            prop.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
+            context.setCurrentPropertyList(context.currentPropertyList.concat(prop));
+            await context.queryBuilder.addProperty(prop);
+            context.setQuery(context.queryBuilder.buildQueryString());
+        }
+    }, [context]);
+    const _addNestedProperties = react_1.useCallback((prop) => {
+        switch (prop.value.valueFormat) {
+            case appui_abstract_1.PropertyValueFormat.Primitive:
+                void _addSelectedProperty(prop);
+                break;
+            case appui_abstract_1.PropertyValueFormat.Array:
+                if (prop.value.items.length === 0) {
+                    void _addSelectedProperty(prop);
+                }
+                break;
+            case appui_abstract_1.PropertyValueFormat.Struct:
+                for (const subPropName in prop.value.members) {
+                    if (Object.prototype.hasOwnProperty.call(prop.value.members, subPropName)) {
+                        _addNestedProperties(prop.value.members[subPropName]);
+                    }
+                }
+        }
+    }, [_addSelectedProperty]);
+    const _removeSelectedProperty = react_1.useCallback(async (prop) => {
+        if (context.currentPropertyList.includes(prop)) {
+            context.setCurrentPropertyList(context.currentPropertyList.filter((x) => x !== prop));
+            await context.queryBuilder.removeProperty(prop);
+            context.setQuery(context.queryBuilder.buildQueryString());
+        }
+    }, [context]);
+    const _removeNestedProperties = react_1.useCallback((prop) => {
+        switch (prop.value.valueFormat) {
+            case appui_abstract_1.PropertyValueFormat.Primitive:
+                void _removeSelectedProperty(prop);
+                break;
+            case appui_abstract_1.PropertyValueFormat.Array:
+                if (prop.value.items.length === 0) {
+                    void _removeSelectedProperty(prop);
+                }
+                break;
+            case appui_abstract_1.PropertyValueFormat.Struct:
+                for (const subPropName in prop.value.members) {
+                    if (Object.prototype.hasOwnProperty.call(prop.value.members, subPropName)) {
+                        _removeNestedProperties(prop.value.members[subPropName]);
+                    }
+                }
+        }
+    }, [_removeSelectedProperty]);
+    React.useEffect(() => {
+        if (props === null || props === void 0 ? void 0 : props.propertyRecord) {
+            if (isPropertySelected) {
+                _addNestedProperties(props.propertyRecord);
+            }
+            else {
+                _removeNestedProperties(props.propertyRecord);
+            }
+        }
+    }, [
+        _addNestedProperties,
+        _removeNestedProperties,
+        isPropertySelected,
+        props.propertyRecord,
+    ]);
+    React.useEffect(() => {
+        if (props === null || props === void 0 ? void 0 : props.propertyRecord) {
+            if (context.currentPropertyList.includes(props.propertyRecord)) {
+                setIsPropertySelected(true);
+            }
+            else {
+                setIsPropertySelected(false);
+            }
+        }
+    }, [context.currentPropertyList, props.propertyRecord]);
+    const _onPropertySelectionChanged = () => {
+        setIsPropertySelected(!isPropertySelected);
+    };
+    const _onClick = () => {
+        if (props.onClick) {
+            props.onClick(props.propertyRecord, props.uniqueKey);
+        }
+    };
+    const _onMouseEnter = () => {
+        if (props.isHoverable) {
+            setIsHovered(true);
+        }
+    };
+    const _onMouseLeave = () => {
+        if (props.isHoverable) {
+            setIsHovered(false);
+        }
+    };
+    const _onContextMenu = (e) => {
+        if (props.onContextMenu) {
+            props.onContextMenu(props.propertyRecord, e);
+        }
+        if (props.onRightClick) {
+            props.onRightClick(props.propertyRecord, props.uniqueKey);
+        }
+        e.preventDefault();
+        return false;
+    };
+    const getClassName = (viewProps) => {
+        let propertyRecordClassName = viewProps.orientation === core_react_1.Orientation.Horizontal
+            ? "components-property-record--horizontal"
+            : "components-property-record--vertical";
+        if (viewProps.isSelected) {
+            propertyRecordClassName += " components--selected";
+        }
+        if (viewProps.onClick) {
+            propertyRecordClassName += " components--clickable";
+        }
+        if (viewProps.isHoverable) {
+            propertyRecordClassName += " components--hoverable";
+        }
+        return propertyRecordClassName;
+    };
+    const ratio = props.columnRatio ? props.columnRatio : 0.25;
+    const needElementSeparator = props.orientation === core_react_1.Orientation.Horizontal &&
+        !!props.onColumnRatioChanged;
+    const needActionButtons = !!props.actionButtonRenderers;
+    const columnsStyleProvider = new PropertyGridColumns_1.PropertyGridColumnStyleProvider(props.columnInfo);
+    return (React.createElement("div", { style: columnsStyleProvider.getStyle(props.orientation, needActionButtons, ratio, needElementSeparator), className: getClassName(props), onClick: _onClick, onContextMenu: _onContextMenu, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, role: 'presentation' },
+        React.createElement("div", { className: 'components-property-record-label' },
+            props.propertyRecord.value.valueFormat ===
+                appui_abstract_1.PropertyValueFormat.Primitive && (React.createElement(itwinui_react_1.Checkbox, { className: 'components-property-selection-checkbox', checked: isPropertySelected, onChange: _onPropertySelectionChanged })),
+            props.labelElement),
+        needElementSeparator ? (React.createElement(core_react_1.ElementSeparator, { movableArea: props.width, onRatioChanged: props.onColumnRatioChanged, ratio: ratio, orientation: props.orientation, isResizeHandleHovered: props.isResizeHandleHovered, onResizeHandleHoverChanged: props.onResizeHandleHoverChanged, isResizeHandleBeingDragged: props.isResizeHandleBeingDragged, onResizeHandleDragChanged: props.onResizeHandleDragChanged })) : undefined,
+        props.propertyRecord.value.valueFormat ===
+            appui_abstract_1.PropertyValueFormat.Primitive ? (React.createElement("div", { className: 'components-property-record-value' },
+            React.createElement("span", null, props.valueElementRenderer
+                ? props.valueElementRenderer()
+                : props.valueElement))) : undefined,
+        props.actionButtonRenderers ? (React.createElement(components_react_1.ActionButtonList, { orientation: props.orientation, property: props.propertyRecord, isPropertyHovered: isHovered, actionButtonRenderers: props.actionButtonRenderers })) : undefined));
+};
+exports.PropertyView = PropertyView;
+//# sourceMappingURL=PropertyView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyView.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport type { PropertyRecord} from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { ElementSeparator, Orientation } from \"@itwin/core-react\";\nimport { ActionButtonList } from \"@itwin/components-react\";\n\nimport \"./PropertyView.scss\";\nimport type { SharedRendererProps } from \"./PropertyRender\";\nimport { GroupQueryBuilderContext } from \"../GroupQueryBuilderContext\";\nimport { useCallback } from \"react\";\nimport { PropertyGridColumnStyleProvider } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/PropertyGridColumns\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\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/**\n * A React component that renders property as label/value pair\n * @public\n */\nexport const PropertyView = (props: PropertyViewProps) => {\n  const context = React.useContext(GroupQueryBuilderContext);\n\n  const _validatePropertySelection = () => {\n    if (context.currentPropertyList.includes(props.propertyRecord)) {\n      return true;\n    }\n    // Check if all subproperties are selected\n    if (!_validateNestedPropertiesSelection(props.propertyRecord)) {\n      return false;\n    }\n    return true;\n  };\n\n  const _validateNestedPropertiesSelection = (prop: PropertyRecord) => {\n    switch (prop.value.valueFormat) {\n      case PropertyValueFormat.Primitive:\n        if (!context.currentPropertyList.includes(prop)) {\n          return false;\n        }\n        break;\n      case PropertyValueFormat.Array:\n        if (prop.value.items.length === 0) {\n          if (!context.currentPropertyList.includes(prop)) {\n            return false;\n          }\n        }\n        break;\n      case PropertyValueFormat.Struct:\n        for (const subPropName in prop.value.members) {\n          if (\n            Object.prototype.hasOwnProperty.call(\n              prop.value.members,\n              subPropName\n            )\n          ) {\n            if (\n              !_validateNestedPropertiesSelection(\n                prop.value.members[subPropName]\n              )\n            ) {\n              return false;\n            }\n          }\n        }\n    }\n    return true;\n  };\n\n  const [isHovered, setIsHovered] = React.useState<boolean>(false);\n  const [isPropertySelected, setIsPropertySelected] = React.useState<boolean>(\n    _validatePropertySelection()\n  );\n\n  const _addSelectedProperty = useCallback(\n    async (prop: PropertyRecord) => {\n      // TODO: roof selected item/category value is an object but format is primitive(needs further exploration)\n      if (\n        !context.currentPropertyList.includes(prop) &&\n        prop.value.valueFormat === PropertyValueFormat.Primitive\n      ) {\n        context.setCurrentPropertyList(\n          context.currentPropertyList.concat(prop)\n        );\n        await context.queryBuilder.addProperty(prop);\n        context.setQuery(context.queryBuilder.buildQueryString());\n      }\n    },\n    [context]\n  );\n\n  const _addNestedProperties = useCallback(\n    (prop: PropertyRecord) => {\n      switch (prop.value.valueFormat) {\n        case PropertyValueFormat.Primitive:\n          void _addSelectedProperty(prop);\n          break;\n        case PropertyValueFormat.Array:\n          if (prop.value.items.length === 0) {\n            void _addSelectedProperty(prop);\n          }\n          break;\n        case PropertyValueFormat.Struct:\n          for (const subPropName in prop.value.members) {\n            if (\n              Object.prototype.hasOwnProperty.call(\n                prop.value.members,\n                subPropName\n              )\n            ) {\n              _addNestedProperties(prop.value.members[subPropName]);\n            }\n          }\n      }\n    },\n    [_addSelectedProperty]\n  );\n\n  const _removeSelectedProperty = useCallback(\n    async (prop: PropertyRecord): Promise<void> => {\n      if (context.currentPropertyList.includes(prop)) {\n        context.setCurrentPropertyList(\n          context.currentPropertyList.filter((x: PropertyRecord) => x !== prop)\n        );\n        await context.queryBuilder.removeProperty(prop);\n        context.setQuery(context.queryBuilder.buildQueryString());\n      }\n    },\n    [context]\n  );\n\n  const _removeNestedProperties = useCallback(\n    (prop: PropertyRecord) => {\n      switch (prop.value.valueFormat) {\n        case PropertyValueFormat.Primitive:\n          void _removeSelectedProperty(prop);\n          break;\n        case PropertyValueFormat.Array:\n          if (prop.value.items.length === 0) {\n            void _removeSelectedProperty(prop);\n          }\n          break;\n        case PropertyValueFormat.Struct:\n          for (const subPropName in prop.value.members) {\n            if (\n              Object.prototype.hasOwnProperty.call(\n                prop.value.members,\n                subPropName\n              )\n            ) {\n              _removeNestedProperties(prop.value.members[subPropName]);\n            }\n          }\n      }\n    },\n    [_removeSelectedProperty]\n  );\n\n  React.useEffect(() => {\n    if (props?.propertyRecord) {\n      if (isPropertySelected) {\n        _addNestedProperties(props.propertyRecord);\n      } else {\n        _removeNestedProperties(props.propertyRecord);\n      }\n    }\n  }, [\n    _addNestedProperties,\n    _removeNestedProperties,\n    isPropertySelected,\n    props.propertyRecord,\n  ]);\n\n  React.useEffect(() => {\n    if (props?.propertyRecord) {\n      if (context.currentPropertyList.includes(props.propertyRecord)) {\n        setIsPropertySelected(true);\n      } else {\n        setIsPropertySelected(false);\n      }\n    }\n  }, [context.currentPropertyList, props.propertyRecord]);\n\n  const _onPropertySelectionChanged = () => {\n    setIsPropertySelected(!isPropertySelected);\n  };\n\n  const _onClick = () => {\n    if (props.onClick) {\n      props.onClick(props.propertyRecord, props.uniqueKey);\n    }\n  };\n\n  const _onMouseEnter = () => {\n    if (props.isHoverable) {\n      setIsHovered(true);\n    }\n  };\n\n  const _onMouseLeave = () => {\n    if (props.isHoverable) {\n      setIsHovered(false);\n    }\n  };\n\n  const _onContextMenu = (e: React.MouseEvent) => {\n    if (props.onContextMenu) {\n      props.onContextMenu(props.propertyRecord, e);\n    }\n    if (props.onRightClick) {\n      props.onRightClick(props.propertyRecord, props.uniqueKey);\n    }\n    e.preventDefault();\n    return false;\n  };\n\n  const getClassName = (viewProps: PropertyViewProps) => {\n    let propertyRecordClassName =\n      viewProps.orientation === Orientation.Horizontal\n        ? \"components-property-record--horizontal\"\n        : \"components-property-record--vertical\";\n    if (viewProps.isSelected) {\n      propertyRecordClassName += \" components--selected\";\n    }\n    if (viewProps.onClick) {\n      propertyRecordClassName += \" components--clickable\";\n    }\n    if (viewProps.isHoverable) {\n      propertyRecordClassName += \" components--hoverable\";\n    }\n    return propertyRecordClassName;\n  };\n\n  const ratio = props.columnRatio ? props.columnRatio : 0.25;\n  const needElementSeparator =\n    props.orientation === Orientation.Horizontal &&\n    !!props.onColumnRatioChanged;\n  const needActionButtons = !!props.actionButtonRenderers;\n  const columnsStyleProvider = new PropertyGridColumnStyleProvider(\n    props.columnInfo\n  );\n\n  return (\n    <div\n      style={columnsStyleProvider.getStyle(\n        props.orientation,\n        needActionButtons,\n        ratio,\n        needElementSeparator\n      )}\n      className={getClassName(props)}\n      onClick={_onClick}\n      onContextMenu={_onContextMenu}\n      onMouseEnter={_onMouseEnter}\n      onMouseLeave={_onMouseLeave}\n      role='presentation'\n    >\n      <div className='components-property-record-label'>\n        {props.propertyRecord.value.valueFormat ===\n          PropertyValueFormat.Primitive && (\n          <Checkbox\n            className='components-property-selection-checkbox'\n            checked={isPropertySelected}\n            onChange={_onPropertySelectionChanged}\n          />\n        )}\n        {props.labelElement}\n      </div>\n      {needElementSeparator ? (\n        <ElementSeparator\n          movableArea={props.width}\n          onRatioChanged={props.onColumnRatioChanged}\n          ratio={ratio}\n          orientation={props.orientation}\n          isResizeHandleHovered={props.isResizeHandleHovered}\n          onResizeHandleHoverChanged={props.onResizeHandleHoverChanged}\n          isResizeHandleBeingDragged={props.isResizeHandleBeingDragged}\n          onResizeHandleDragChanged={props.onResizeHandleDragChanged}\n        />\n      ) : undefined}\n      {props.propertyRecord.value.valueFormat ===\n        PropertyValueFormat.Primitive ? (\n          <div className='components-property-record-value'>\n            <span>\n              {props.valueElementRenderer\n                ? props.valueElementRenderer()\n                : props.valueElement}\n            </span>\n          </div>\n        ) : undefined}\n      {props.actionButtonRenderers ? (\n        <ActionButtonList\n          orientation={props.orientation}\n          property={props.propertyRecord}\n          isPropertyHovered={isHovered}\n          actionButtonRenderers={props.actionButtonRenderers}\n        />\n      ) : undefined}\n    </div>\n  );\n};\n"]}

package/lib/cjs/widget/components/property-grid/PropertyView.scss

@@ -0,0 +1,111 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+@import "~@itwin/itwinui-css/scss/style/typography";
+@import "~@itwin/itwinui-css/scss/variables";
+
+$text-font-size: $iui-font-size;
+$text-font-color: $buic-text-color;
+
+.components-property-record--horizontal {
+  height: 100%;
+  display: grid;
+  padding: 0 8px;
+
+  .components-property-record-label {
+    font-size: $iui-font-size-small;
+    color: $buic-foreground-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: $iui-font-size-small;
+    color: $buic-foreground-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-selection-checkbox {
+    margin-right: $iui-s;
+  }
+}
+
+.components-property-record-value {
+  @include record-cell;
+  overflow: hidden;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    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;
+    }
+  }
+}

package/lib/cjs/widget/components/utils.d.ts

@@ -0,0 +1,14 @@
+import "./utils.scss";
+import React from "react";
+import type { ISelectionProvider, SelectionChangeEventArgs } from "@itwin/presentation-frontend";
+import type { IModelConnection } from "@itwin/core-frontend";
+export declare const onSelectionChanged: (evt: SelectionChangeEventArgs, selectionProvider: ISelectionProvider) => void;
+export interface WidgetHeaderProps {
+    title: string;
+    disabled?: boolean;
+    returnFn?: () => Promise<void>;
+}
+export declare const WidgetHeader: ({ title, disabled, returnFn, }: WidgetHeaderProps) => JSX.Element;
+export declare const handleInputChange: <T>(e: React.ChangeEvent<HTMLInputElement>, values: T, setValues: React.Dispatch<React.SetStateAction<T>>) => void;
+export declare const fetchIdsFromQuery: (query: string, iModelConnection: IModelConnection) => Promise<string[]>;
+//# sourceMappingURL=utils.d.ts.map