@itwin/grouping-mapping-widget 0.2.0

package/lib/cjs/widget/components/SelectProject.js

@@ -0,0 +1,71 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const imodel_browser_react_1 = require("@itwin/imodel-browser-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const react_1 = __importStar(require("react"));
+const reportingClient_1 = require("../../api/reportingClient");
+const useFetchAccessToken_1 = __importDefault(require("../hooks/useFetchAccessToken"));
+require("./SelectProject.scss");
+const tabsWithIcons = [
+    react_1.default.createElement(itwinui_react_1.Tab, { key: 'favorite', label: 'Favorite projects', startIcon: react_1.default.createElement(itwinui_icons_react_1.SvgStarHollow, null) }),
+    react_1.default.createElement(itwinui_react_1.Tab, { key: 'recents', label: 'Recent projects', startIcon: react_1.default.createElement(itwinui_icons_react_1.SvgCalendar, null) }),
+    react_1.default.createElement(itwinui_react_1.Tab, { key: 'all', label: 'My projects', startIcon: react_1.default.createElement(itwinui_icons_react_1.SvgList, null) }),
+];
+const SelectProject = ({ onSelect, onCancel }) => {
+    const accessToken = useFetchAccessToken_1.default();
+    const [projectType, setProjectType] = react_1.useState(0);
+    const [searchInput, setSearchInput] = react_1.useState("");
+    const [activeSearchInput, setActiveSearchInput] = react_1.useState("");
+    const startSearch = react_1.useCallback(() => {
+        setActiveSearchInput(searchInput);
+    }, [searchInput]);
+    const apiOverrides = react_1.useMemo(() => ({ serverEnvironmentPrefix: reportingClient_1.getUrlPrefix() }), []);
+    return (react_1.default.createElement("div", { className: 'select-project-grid-container' },
+        react_1.default.createElement(itwinui_react_1.HorizontalTabs, { labels: tabsWithIcons, onTabSelected: setProjectType, activeIndex: projectType, type: "borderless", contentClassName: 'grid-holding-tab' },
+            react_1.default.createElement(itwinui_react_1.LabeledInput, { displayStyle: 'inline', iconDisplayStyle: 'inline', className: 'search-input', label: 'Search', value: searchInput, onChange: (event) => {
+                    const { target: { value }, } = event;
+                    setSearchInput(value);
+                }, onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                        startSearch();
+                    }
+                    if (event.key === "Escape") {
+                        setSearchInput("");
+                        setActiveSearchInput("");
+                    }
+                }, svgIcon: react_1.default.createElement(itwinui_react_1.IconButton, { onClick: () => startSearch(), styleType: 'borderless' },
+                    react_1.default.createElement(itwinui_icons_react_1.SvgSearch, null)) }),
+            react_1.default.createElement("div", { className: 'project-grid' },
+                react_1.default.createElement(imodel_browser_react_1.ProjectGrid, { onThumbnailClick: onSelect, accessToken: accessToken, apiOverrides: apiOverrides, filterOptions: activeSearchInput, requestType: projectType === 0
+                        ? "favorites"
+                        : projectType === 1
+                            ? "recents"
+                            : "" })),
+            react_1.default.createElement("div", { className: 'select-project-action-panel' },
+                react_1.default.createElement(itwinui_react_1.Button, { onClick: onCancel }, "Cancel")))));
+};
+exports.default = SelectProject;
+//# sourceMappingURL=SelectProject.js.map

package/lib/cjs/widget/components/SelectProject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectProject.js","sourceRoot":"","sources":["../../../../src/widget/components/SelectProject.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 type {\n  ApiOverrides,\n  ProjectFull,\n} from \"@itwin/imodel-browser-react\";\nimport {\n  ProjectGrid,\n} from \"@itwin/imodel-browser-react\";\nimport {\n  SvgCalendar,\n  SvgList,\n  SvgSearch,\n  SvgStarHollow,\n} from \"@itwin/itwinui-icons-react\";\nimport {\n  Button,\n  HorizontalTabs,\n  IconButton,\n  LabeledInput,\n  Tab,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport { getUrlPrefix } from \"../../api/reportingClient\";\nimport useFetchAccessToken from \"../hooks/useFetchAccessToken\";\nimport \"./SelectProject.scss\";\n\nconst tabsWithIcons = [\n  <Tab\n    key='favorite'\n    label='Favorite projects'\n    startIcon={<SvgStarHollow />}\n  />,\n  <Tab key='recents' label='Recent projects' startIcon={<SvgCalendar />} />,\n  <Tab key='all' label='My projects' startIcon={<SvgList />} />,\n];\ninterface SelectProjectProps {\n  onSelect: (project: ProjectFull) => void;\n  onCancel: () => void;\n}\nconst SelectProject = ({ onSelect, onCancel }: SelectProjectProps) => {\n  const accessToken = useFetchAccessToken();\n  const [projectType, setProjectType] = useState<number>(0);\n  const [searchInput, setSearchInput] = useState<string>(\"\");\n  const [activeSearchInput, setActiveSearchInput] = useState<string>(\"\");\n\n  const startSearch = useCallback(() => {\n    setActiveSearchInput(searchInput);\n  }, [searchInput]);\n\n  const apiOverrides = useMemo<ApiOverrides<ProjectFull[]>>(\n    () => ({ serverEnvironmentPrefix: getUrlPrefix() }),\n    [],\n  );\n\n  return (\n    <div className='select-project-grid-container'>\n      <HorizontalTabs\n        labels={tabsWithIcons}\n        onTabSelected={setProjectType}\n        activeIndex={projectType}\n        type={\"borderless\"}\n        contentClassName='grid-holding-tab'\n      >\n        <LabeledInput\n          displayStyle='inline'\n          iconDisplayStyle='inline'\n          className='search-input'\n          label='Search'\n          value={searchInput}\n          onChange={(event) => {\n            const {\n              target: { value },\n            } = event;\n            setSearchInput(value);\n          }}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              startSearch();\n            }\n            if (event.key === \"Escape\") {\n              setSearchInput(\"\");\n              setActiveSearchInput(\"\");\n            }\n          }}\n          svgIcon={\n            <IconButton onClick={() => startSearch()} styleType='borderless'>\n              <SvgSearch />\n            </IconButton>\n          }\n        />\n        <div className='project-grid'>\n          <ProjectGrid\n            onThumbnailClick={onSelect}\n            accessToken={accessToken}\n            apiOverrides={apiOverrides}\n            filterOptions={activeSearchInput}\n            requestType={\n              projectType === 0\n                ? \"favorites\"\n                : projectType === 1\n                  ? \"recents\"\n                  : \"\"\n            }\n          />\n        </div>\n        <div className='select-project-action-panel'>\n          <Button onClick={onCancel}>Cancel</Button>\n        </div>\n      </HorizontalTabs>\n    </div>\n  );\n};\n\nexport default SelectProject;\n"]}

package/lib/cjs/widget/components/SelectProject.scss

@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import '~@itwin/itwinui-css/scss/variables';
+
+.select-project-grid-container {
+  display: flex;
+  flex-direction: column;
+
+  > .iui-tabs-wrapper {
+    height: 66vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .search-input {
+    margin-left: auto;
+  }
+
+  .project-grid {
+    overflow: auto;
+    flex-grow: 1;
+  }
+
+  .grid-holding-tab {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    gap: $iui-baseline;
+    flex-grow: 1;
+  }
+  .select-project-action-panel {
+    display: flex;
+    justify-content: right;
+    padding: $iui-baseline * 2 $iui-m $iui-baseline;
+  }
+}

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { PrimitiveRendererProps } from "./PrimitivePropertyRenderer";
+import "./NonPrimitivePropertyRenderer.scss";
+/** Properties of [[NonPrimitivePropertyRenderer]] React component
+ * @public
+ */
+export interface NonPrimitivePropertyRendererProps extends PrimitiveRendererProps {
+    /** Can struct/array property be collapsed */
+    isCollapsible?: boolean;
+}
+/** State of [[NonPrimitivePropertyRenderer]] React component
+ * @internal
+ */
+interface NonPrimitivePropertyRendererState {
+    /** Is struct/array property expanded */
+    isExpanded?: boolean;
+}
+/** React Component that renders struct and array properties
+ * @public
+ */
+export declare class NonPrimitivePropertyRenderer extends React.Component<NonPrimitivePropertyRendererProps, NonPrimitivePropertyRendererState> {
+    /** @internal */
+    readonly state: NonPrimitivePropertyRendererState;
+    private _onExpanded;
+    private _onCollapsed;
+    private getLabel;
+    private overrideArrayChildrenNames;
+    private _renderPropertyForItem;
+    /** @internal */
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=NonPrimitivePropertyRenderer.d.ts.map

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

@@ -0,0 +1,92 @@
+"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.NonPrimitivePropertyRenderer = 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 CommonPropertyRenderer_1 = require("@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer");
+const components_react_1 = require("@itwin/components-react");
+const PropertyRender_1 = require("./PropertyRender");
+const PropertyView_1 = require("./PropertyView");
+require("./NonPrimitivePropertyRenderer.scss");
+/** React Component that renders struct and array properties
+ * @public
+ */
+class NonPrimitivePropertyRenderer extends React.Component {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.state = {
+            /** If it's not collapsible, that means it's expanded by default and can't be collapsed */
+            isExpanded: !this.props.isCollapsible || this.props.propertyRecord.autoExpand,
+        };
+        this._onExpanded = () => {
+            this.setState({ isExpanded: true });
+        };
+        this._onCollapsed = () => {
+            this.setState({ isExpanded: false });
+        };
+        this._renderPropertyForItem = (item) => {
+            const prefix = this.props.uniqueKey
+                ? this.props.uniqueKey
+                : this.props.propertyRecord.property.name;
+            const uniqueKey = `${prefix}_${item.property.name}`;
+            return (React.createElement(PropertyRender_1.PropertyRenderer, { key: uniqueKey, uniqueKey: uniqueKey, propertyRecord: item, indentation: this.props.indentation ? this.props.indentation + 1 : 1, orientation: this.props.orientation, columnRatio: this.props.columnRatio, actionButtonRenderers: this.props.actionButtonRenderers, onColumnRatioChanged: this.props.onColumnRatioChanged, width: this.props.width, isResizeHandleHovered: this.props.isResizeHandleHovered, onResizeHandleHoverChanged: this.props.onResizeHandleHoverChanged, isResizeHandleBeingDragged: this.props.isResizeHandleBeingDragged, onResizeHandleDragChanged: this.props.onResizeHandleDragChanged, columnInfo: this.props.columnInfo }));
+        };
+    }
+    getLabel(props, state) {
+        const { orientation, indentation, width, columnRatio, columnInfo } = props;
+        const offset = CommonPropertyRenderer_1.CommonPropertyRenderer.getLabelOffset(indentation, orientation, width, columnRatio, columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.minLabelWidth);
+        let displayLabel = props.propertyRecord.property.displayLabel;
+        if (this.props.propertyRecord.value.valueFormat === appui_abstract_1.PropertyValueFormat.Array) {
+            displayLabel = `${displayLabel} (${this.props.propertyRecord.value.items.length})`;
+        }
+        return (React.createElement(components_react_1.NonPrimitivePropertyLabelRenderer, { isExpanded: !!state.isExpanded, onExpand: this._onExpanded, onCollapse: this._onCollapsed, offset: offset, renderColon: false }, displayLabel));
+    }
+    overrideArrayChildrenNames(items) {
+        const modifiedProperties = items.map((item, index) => {
+            const newProperty = { ...item.property };
+            newProperty.displayLabel = `[${index + 1}]`;
+            newProperty.name = `${newProperty.name}_${index}`;
+            return new appui_abstract_1.PropertyRecord(item.value, newProperty);
+        });
+        return modifiedProperties;
+    }
+    /** @internal */
+    render() {
+        let items = this.props.propertyRecord.getChildrenRecords();
+        if (this.props.propertyRecord.value.valueFormat === appui_abstract_1.PropertyValueFormat.Array) {
+            items = this.overrideArrayChildrenNames(items);
+        }
+        const { ...props } = this.props;
+        return (React.createElement(React.Fragment, null,
+            this.props.isCollapsible ? (React.createElement(PropertyView_1.PropertyView, { labelElement: this.getLabel(this.props, this.state), ...props })) : undefined,
+            this.state.isExpanded
+                ? items.map(this._renderPropertyForItem)
+                : undefined));
+    }
+}
+exports.NonPrimitivePropertyRenderer = NonPrimitivePropertyRenderer;
+//# sourceMappingURL=NonPrimitivePropertyRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NonPrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/NonPrimitivePropertyRenderer.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 { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport { CommonPropertyRenderer } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer\";\nimport { NonPrimitivePropertyLabelRenderer } from \"@itwin/components-react\";\n\nimport { PropertyRenderer } from \"./PropertyRender\";\nimport { PropertyView } from \"./PropertyView\";\nimport type { PrimitiveRendererProps } from \"./PrimitivePropertyRenderer\";\nimport \"./NonPrimitivePropertyRenderer.scss\";\n\n/** Properties of [[NonPrimitivePropertyRenderer]] React component\n * @public\n */\nexport interface NonPrimitivePropertyRendererProps\n  extends PrimitiveRendererProps {\n  /** Can struct/array property be collapsed */\n  isCollapsible?: boolean;\n}\n\n/** State of [[NonPrimitivePropertyRenderer]] React component\n * @internal\n */\ninterface NonPrimitivePropertyRendererState {\n  /** Is struct/array property expanded */\n  isExpanded?: boolean;\n}\n\n/** React Component that renders struct and array properties\n * @public\n */\nexport class NonPrimitivePropertyRenderer extends React.Component<\nNonPrimitivePropertyRendererProps,\nNonPrimitivePropertyRendererState\n> {\n  /** @internal */\n  public override readonly state: NonPrimitivePropertyRendererState = {\n    /** If it's not collapsible, that means it's expanded by default and can't be collapsed */\n    isExpanded:\n      !this.props.isCollapsible || this.props.propertyRecord.autoExpand,\n  };\n\n  private _onExpanded = () => {\n    this.setState({ isExpanded: true });\n  };\n\n  private _onCollapsed = () => {\n    this.setState({ isExpanded: false });\n  };\n\n  private getLabel(\n    props: NonPrimitivePropertyRendererProps,\n    state: NonPrimitivePropertyRendererState,\n  ): React.ReactNode {\n    const { orientation, indentation, width, columnRatio, columnInfo } = props;\n    const offset = CommonPropertyRenderer.getLabelOffset(\n      indentation,\n      orientation,\n      width,\n      columnRatio,\n      columnInfo?.minLabelWidth,\n    );\n\n    let displayLabel = props.propertyRecord.property.displayLabel;\n    if (\n      this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\n    ) {\n      displayLabel = `${displayLabel} (${this.props.propertyRecord.value.items.length})`;\n    }\n\n    return (\n      <NonPrimitivePropertyLabelRenderer\n        isExpanded={!!state.isExpanded}\n        onExpand={this._onExpanded}\n        onCollapse={this._onCollapsed}\n        offset={offset}\n        renderColon={false}\n      >\n        {displayLabel}\n      </NonPrimitivePropertyLabelRenderer>\n    );\n  }\n\n  private overrideArrayChildrenNames(items: PropertyRecord[]) {\n    const modifiedProperties: PropertyRecord[] = items.map(\n      (item, index): PropertyRecord => {\n        const newProperty = { ...item.property };\n        newProperty.displayLabel = `[${index + 1}]`;\n        newProperty.name = `${newProperty.name}_${index}`;\n        return new PropertyRecord(item.value, newProperty);\n      },\n    );\n\n    return modifiedProperties;\n  }\n\n  private _renderPropertyForItem = (item: PropertyRecord) => {\n    const prefix = this.props.uniqueKey\n      ? this.props.uniqueKey\n      : this.props.propertyRecord.property.name;\n    const uniqueKey = `${prefix}_${item.property.name}`;\n    return (\n      <PropertyRenderer\n        key={uniqueKey}\n        uniqueKey={uniqueKey}\n        propertyRecord={item}\n        indentation={this.props.indentation ? this.props.indentation + 1 : 1}\n        orientation={this.props.orientation}\n        columnRatio={this.props.columnRatio}\n        actionButtonRenderers={this.props.actionButtonRenderers}\n        onColumnRatioChanged={this.props.onColumnRatioChanged}\n        width={this.props.width}\n        isResizeHandleHovered={this.props.isResizeHandleHovered}\n        onResizeHandleHoverChanged={this.props.onResizeHandleHoverChanged}\n        isResizeHandleBeingDragged={this.props.isResizeHandleBeingDragged}\n        onResizeHandleDragChanged={this.props.onResizeHandleDragChanged}\n        columnInfo={this.props.columnInfo}\n      />\n    );\n  };\n\n  /** @internal */\n  public override render() {\n    let items: PropertyRecord[] =\n      this.props.propertyRecord.getChildrenRecords();\n    if (\n      this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array\n    ) {\n      items = this.overrideArrayChildrenNames(items);\n    }\n\n    const { ...props } = this.props;\n    return (\n      <>\n        {this.props.isCollapsible ? (\n          <PropertyView\n            labelElement={this.getLabel(this.props, this.state)}\n            {...props}\n          />\n        ) : undefined}\n\n        {this.state.isExpanded\n          ? items.map(this._renderPropertyForItem)\n          : undefined}\n      </>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+* 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/colors';
+
+.components-nonprimitive-property {
+  padding: 10px;
+  display: grid;
+  grid-row-gap: 10px;
+
+  border-radius: 3px;
+  border: solid 1px $uicore-gray-9;
+
+  background-color: #fff;
+}

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { HighlightingComponentProps } from "@itwin/components-react/lib/cjs/components-react/common/HighlightingComponentProps";
+import type { SharedRendererProps } from "./PropertyRender";
+/** Properties of [[PrimitivePropertyRenderer]] React component
+ * @public
+ */
+export interface PrimitiveRendererProps extends SharedRendererProps {
+    /** Property value as a React element */
+    valueElement?: React.ReactNode;
+    /** Render callback for property value. If specified, `valueElement` is ignored. */
+    valueElementRenderer?: () => React.ReactNode;
+    /** Multiplier of how much the property is indented to the right */
+    indentation?: number;
+    /** Properties used for highlighting
+     * @beta
+     */
+    highlight?: HighlightingComponentProps;
+}
+/** React Component that renders primitive properties
+ * @public
+ */
+export declare class PrimitivePropertyRenderer extends React.Component<PrimitiveRendererProps> {
+    /** @internal */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=PrimitivePropertyRenderer.d.ts.map

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

@@ -0,0 +1,58 @@
+"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.PrimitivePropertyRenderer = 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 core_react_1 = require("@itwin/core-react");
+const components_react_1 = require("@itwin/components-react");
+const CommonPropertyRenderer_1 = require("@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer");
+const HighlightedText_1 = require("@itwin/components-react/lib/cjs/components-react/common/HighlightedText");
+const PropertyView_1 = require("./PropertyView");
+/** React Component that renders primitive properties
+ * @public
+ */
+class PrimitivePropertyRenderer extends React.Component {
+    /** @internal */
+    render() {
+        var _a, _b;
+        const { indentation, highlight, ...props } = this.props;
+        const displayLabel = this.props.propertyRecord.property.displayLabel;
+        const offset = CommonPropertyRenderer_1.CommonPropertyRenderer.getLabelOffset(indentation, props.orientation, props.width, props.columnRatio, (_a = props.columnInfo) === null || _a === void 0 ? void 0 : _a.minLabelWidth);
+        const activeMatchIndex = this.props.propertyRecord.property.name ===
+            ((_b = highlight === null || highlight === void 0 ? void 0 : highlight.activeHighlight) === null || _b === void 0 ? void 0 : _b.highlightedItemIdentifier)
+            ? highlight.activeHighlight.highlightIndex
+            : undefined;
+        const label = highlight
+            ? HighlightedText_1.HighlightedText({
+                text: displayLabel,
+                searchText: highlight.highlightedText,
+                activeMatchIndex,
+            })
+            : displayLabel;
+        return (React.createElement(PropertyView_1.PropertyView, { ...props, labelElement: React.createElement(components_react_1.PrimitivePropertyLabelRenderer, { offset: offset, renderColon: this.props.orientation === core_react_1.Orientation.Horizontal, tooltip: displayLabel }, label) }));
+    }
+}
+exports.PrimitivePropertyRenderer = PrimitivePropertyRenderer;
+//# sourceMappingURL=PrimitivePropertyRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitivePropertyRenderer.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/PrimitivePropertyRenderer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,kDAAgD;AAChD,8DAAyE;AAEzE,yIAAsI;AACtI,6GAA0G;AAE1G,iDAA8C;AAmB9C;;GAEG;AACH,MAAa,yBAA0B,SAAQ,KAAK,CAAC,SAAiC;IACpF,gBAAgB;IACA,MAAM;;QACpB,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACxD,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC;QACrE,MAAM,MAAM,GAAG,+CAAsB,CAAC,cAAc,CAClD,WAAW,EACX,KAAK,CAAC,WAAW,EACjB,KAAK,CAAC,KAAK,EACX,KAAK,CAAC,WAAW,EACjB,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAChC,CAAC;QAEF,MAAM,gBAAgB,GACpB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI;aACvC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,eAAe,0CAAE,yBAAyB,CAAA;YACnD,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,cAAc;YAC1C,CAAC,CAAC,SAAS,CAAC;QAChB,MAAM,KAAK,GAAG,SAAS;YACrB,CAAC,CAAC,iCAAe,CAAC;gBAChB,IAAI,EAAE,YAAY;gBAClB,UAAU,EAAE,SAAS,CAAC,eAAe;gBACrC,gBAAgB;aACjB,CAAC;YACF,CAAC,CAAC,YAAY,CAAC;QAEjB,OAAO,CACL,oBAAC,2BAAY,OACP,KAAK,EACT,YAAY,EACV,oBAAC,iDAA8B,IAC7B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,wBAAW,CAAC,UAAU,EAC9D,OAAO,EAAE,YAAY,IAEpB,KAAK,CACyB,GAEnC,CACH,CAAC;IACJ,CAAC;CACF;AAzCD,8DAyCC","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 { Orientation } from \"@itwin/core-react\";\nimport { PrimitivePropertyLabelRenderer } from \"@itwin/components-react\";\nimport type { HighlightingComponentProps } from \"@itwin/components-react/lib/cjs/components-react/common/HighlightingComponentProps\";\nimport { CommonPropertyRenderer } from \"@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer\";\nimport { HighlightedText } from \"@itwin/components-react/lib/cjs/components-react/common/HighlightedText\";\n\nimport { PropertyView } from \"./PropertyView\";\nimport type { SharedRendererProps } from \"./PropertyRender\";\n\n/** Properties of [[PrimitivePropertyRenderer]] React component\n * @public\n */\nexport interface PrimitiveRendererProps extends SharedRendererProps {\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  /** Multiplier of how much the property is indented to the right */\n  indentation?: number;\n  /** Properties used for highlighting\n   * @beta\n   */\n  highlight?: HighlightingComponentProps;\n}\n\n/** React Component that renders primitive properties\n * @public\n */\nexport class PrimitivePropertyRenderer extends React.Component<PrimitiveRendererProps> {\n  /** @internal */\n  public override render() {\n    const { indentation, highlight, ...props } = this.props;\n    const displayLabel = this.props.propertyRecord.property.displayLabel;\n    const offset = CommonPropertyRenderer.getLabelOffset(\n      indentation,\n      props.orientation,\n      props.width,\n      props.columnRatio,\n      props.columnInfo?.minLabelWidth,\n    );\n\n    const activeMatchIndex =\n      this.props.propertyRecord.property.name ===\n      highlight?.activeHighlight?.highlightedItemIdentifier\n        ? highlight.activeHighlight.highlightIndex\n        : undefined;\n    const label = highlight\n      ? HighlightedText({\n        text: displayLabel,\n        searchText: highlight.highlightedText,\n        activeMatchIndex,\n      })\n      : displayLabel;\n\n    return (\n      <PropertyView\n        {...props}\n        labelElement={\n          <PrimitivePropertyLabelRenderer\n            offset={offset}\n            renderColon={this.props.orientation === Orientation.Horizontal}\n            tooltip={displayLabel}\n          >\n            {label}\n          </PrimitivePropertyLabelRenderer>\n        }\n      />\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import type { PropertyRecord } from "@itwin/appui-abstract";
+import type { CommonPropertyGridProps, PropertyCategory } from "@itwin/components-react";
+import { Orientation } from "@itwin/core-react";
+import "./PropertyGrid.scss";
+import type { PresentationPropertyDataProvider } from "@itwin/presentation-components";
+/** Properties for [[PropertyGrid]] React component
+ * @public
+ */
+export interface PropertyGridProps extends CommonPropertyGridProps {
+    /** Property data provider */
+    dataProvider: PresentationPropertyDataProvider;
+}
+/** Property Category in the [[PropertyGrid]] state
+ * @public
+ * @deprecated This was part of [[PropertyGrid]] internal state and should've never been public. The component is not using it anymore.
+ */
+export interface PropertyGridCategory {
+    propertyCategory: PropertyCategory;
+    propertyCount: number;
+    properties: PropertyRecord[];
+}
+interface CategorizedPropertyGridRecords {
+    category: PropertyCategory;
+    records: PropertyRecord[];
+    children: CategorizedPropertyGridRecords[];
+}
+/** State of [[PropertyGrid]] React component
+ * @internal
+ */
+interface PropertyGridState {
+    /** List of PropertyGrid categories */
+    categories: CategorizedPropertyGridRecords[];
+    /** Actual orientation used by the property grid */
+    orientation: Orientation;
+    /** If property grid currently loading data, the loading start time  */
+    loadStart?: Date;
+    /** Width of PropertyGrid */
+    width: number;
+}
+/** PropertyGrid React component.
+ * @public
+ */
+export declare class PropertyGrid extends React.Component<PropertyGridProps, PropertyGridState> {
+    private _dataChangesListenerDisposeFunc?;
+    private _isMounted;
+    private _isInDataRequest;
+    private _hasPendingDataRequest;
+    static contextType: React.Context<import("../GroupQueryBuilderContext").PropertySelection>;
+    /** @internal */
+    constructor(props: PropertyGridProps);
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: PropertyGridProps): void;
+    private _onPropertyDataChanged;
+    private gatherData;
+    private getPreferredOrientation;
+    private _onResize;
+    private _onCategoryExpansionToggled;
+    private updateOrientation;
+    /** @internal */
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=PropertyGrid.d.ts.map