@itwin/grouping-mapping-widget 0.2.0

package/lib/esm/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/esm/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/esm/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/esm/widget/components/property-grid/NonPrimitivePropertyRenderer.js

@@ -0,0 +1,69 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { PropertyRecord, PropertyValueFormat } from "@itwin/appui-abstract";
+import { CommonPropertyRenderer } from "@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer";
+import { NonPrimitivePropertyLabelRenderer } from "@itwin/components-react";
+import { PropertyRenderer } from "./PropertyRender";
+import { PropertyView } from "./PropertyView";
+import "./NonPrimitivePropertyRenderer.scss";
+/** React Component that renders struct and array properties
+ * @public
+ */
+export 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(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.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 === PropertyValueFormat.Array) {
+            displayLabel = `${displayLabel} (${this.props.propertyRecord.value.items.length})`;
+        }
+        return (React.createElement(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 PropertyRecord(item.value, newProperty);
+        });
+        return modifiedProperties;
+    }
+    /** @internal */
+    render() {
+        let items = this.props.propertyRecord.getChildrenRecords();
+        if (this.props.propertyRecord.value.valueFormat === PropertyValueFormat.Array) {
+            items = this.overrideArrayChildrenNames(items);
+        }
+        const { ...props } = this.props;
+        return (React.createElement(React.Fragment, null,
+            this.props.isCollapsible ? (React.createElement(PropertyView, { labelElement: this.getLabel(this.props, this.state), ...props })) : undefined,
+            this.state.isExpanded
+                ? items.map(this._renderPropertyForItem)
+                : undefined));
+    }
+}
+//# sourceMappingURL=NonPrimitivePropertyRenderer.js.map

package/lib/esm/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/esm/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/esm/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/esm/widget/components/property-grid/PrimitivePropertyRenderer.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { Orientation } from "@itwin/core-react";
+import { PrimitivePropertyLabelRenderer } from "@itwin/components-react";
+import { CommonPropertyRenderer } from "@itwin/components-react/lib/cjs/components-react/properties/renderers/CommonPropertyRenderer";
+import { HighlightedText } from "@itwin/components-react/lib/cjs/components-react/common/HighlightedText";
+import { PropertyView } from "./PropertyView";
+/** React Component that renders primitive properties
+ * @public
+ */
+export 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.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({
+                text: displayLabel,
+                searchText: highlight.highlightedText,
+                activeMatchIndex,
+            })
+            : displayLabel;
+        return (React.createElement(PropertyView, { ...props, labelElement: React.createElement(PrimitivePropertyLabelRenderer, { offset: offset, renderColon: this.props.orientation === Orientation.Horizontal, tooltip: displayLabel }, label) }));
+    }
+}
+//# sourceMappingURL=PrimitivePropertyRenderer.js.map

package/lib/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,8FAA8F,CAAC;AACtI,OAAO,EAAE,eAAe,EAAE,MAAM,yEAAyE,CAAC;AAE1G,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmB9C;;GAEG;AACH,MAAM,OAAO,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,sBAAsB,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,eAAe,CAAC;gBAChB,IAAI,EAAE,YAAY;gBAClB,UAAU,EAAE,SAAS,CAAC,eAAe;gBACrC,gBAAgB;aACjB,CAAC;YACF,CAAC,CAAC,YAAY,CAAC;QAEjB,OAAO,CACL,oBAAC,YAAY,OACP,KAAK,EACT,YAAY,EACV,oBAAC,8BAA8B,IAC7B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,EAC9D,OAAO,EAAE,YAAY,IAEpB,KAAK,CACyB,GAEnC,CACH,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\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/esm/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

package/lib/esm/widget/components/property-grid/PropertyGrid.js

@@ -0,0 +1,172 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import classnames from "classnames";
+import { produce } from "immer";
+import * as React from "react";
+import { PropertyCategoryBlock, PropertyGridCommons, PropertyGridEventsRelatedPropsSupplier, } from "@itwin/components-react";
+import { ColumnResizingPropertyListPropsSupplier, } from "@itwin/components-react/lib/cjs/components-react/propertygrid/component/ColumnResizingPropertyListPropsSupplier";
+import { Orientation, ResizableContainerObserver } from "@itwin/core-react";
+import { PropertyList } from "./PropertyList";
+import "./PropertyGrid.scss";
+import { GroupQueryBuilderContext } from "../GroupQueryBuilderContext";
+import { ProgressRadial } from "@itwin/itwinui-react";
+/** PropertyGrid React component.
+ * @public
+ */
+export class PropertyGrid extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        this._isInDataRequest = false;
+        this._hasPendingDataRequest = false;
+        this._onPropertyDataChanged = () => {
+            void this.gatherData();
+        };
+        this._onResize = (width) => {
+            this.updateOrientation(width);
+        };
+        this._onCategoryExpansionToggled = (categoryName) => {
+            this.setState((state) => {
+                return produce(state, (draft) => {
+                    const records = findCategory(draft.categories, categoryName, true);
+                    // istanbul ignore else
+                    if (records) {
+                        const category = records.category;
+                        category.expand = !category.expand;
+                    }
+                });
+            });
+        };
+        this.state = {
+            categories: [],
+            orientation: this.getPreferredOrientation(),
+            width: 0,
+        };
+    }
+    /** @internal */
+    componentDidMount() {
+        this._isMounted = true;
+        this._dataChangesListenerDisposeFunc =
+            this.props.dataProvider.onDataChanged.addListener(this._onPropertyDataChanged);
+        void this.gatherData();
+    }
+    /** @internal */
+    componentWillUnmount() {
+        // istanbul ignore else
+        if (this._dataChangesListenerDisposeFunc) {
+            this._dataChangesListenerDisposeFunc();
+            this._dataChangesListenerDisposeFunc = undefined;
+        }
+        this._isMounted = false;
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.dataProvider !== prevProps.dataProvider) {
+            // istanbul ignore else
+            if (this._dataChangesListenerDisposeFunc) {
+                this._dataChangesListenerDisposeFunc();
+            }
+            this._dataChangesListenerDisposeFunc =
+                this.props.dataProvider.onDataChanged.addListener(this._onPropertyDataChanged);
+            void this.gatherData();
+        }
+        if (this.props.orientation !== prevProps.orientation ||
+            this.props.isOrientationFixed !== prevProps.isOrientationFixed ||
+            this.props.horizontalOrientationMinWidth !==
+                prevProps.horizontalOrientationMinWidth) {
+            this.updateOrientation(this.state.width);
+        }
+    }
+    async gatherData() {
+        if (this._isInDataRequest) {
+            this._hasPendingDataRequest = true;
+            return;
+        }
+        this.setState((prev) => prev.loadStart ? null : { loadStart: new Date() });
+        this._isInDataRequest = true;
+        let propertyData;
+        try {
+            propertyData = await this.props.dataProvider.getData();
+        }
+        finally {
+            this._isInDataRequest = false;
+        }
+        if (!this._isMounted) {
+            return;
+        }
+        if (this._hasPendingDataRequest) {
+            this._hasPendingDataRequest = false;
+            return this.gatherData();
+        }
+        this.setState((prevState) => {
+            const buildCategoriesHierarchy = (newCategories, stateCategories) => newCategories.map((category) => {
+                var _a, _b, _c, _d;
+                const matchingStateCategory = findCategory(stateCategories !== null && stateCategories !== void 0 ? stateCategories : [], category.name, false);
+                return {
+                    category: {
+                        ...category,
+                        expand: (_b = (_a = matchingStateCategory === null || matchingStateCategory === void 0 ? void 0 : matchingStateCategory.category) === null || _a === void 0 ? void 0 : _a.expand) !== null && _b !== void 0 ? _b : category.expand,
+                    },
+                    records: (_c = propertyData.records[category.name]) !== null && _c !== void 0 ? _c : [],
+                    children: buildCategoriesHierarchy((_d = category.childCategories) !== null && _d !== void 0 ? _d : [], matchingStateCategory === null || matchingStateCategory === void 0 ? void 0 : matchingStateCategory.children),
+                };
+            });
+            return {
+                categories: buildCategoriesHierarchy(propertyData.categories, prevState.categories),
+                loadStart: undefined,
+            };
+        });
+    }
+    getPreferredOrientation() {
+        return this.props.orientation !== undefined
+            ? this.props.orientation
+            : Orientation.Horizontal;
+    }
+    updateOrientation(width) {
+        const { orientation, isOrientationFixed, horizontalOrientationMinWidth } = {
+            ...this.props,
+        };
+        const currentOrientation = PropertyGridCommons.getCurrentOrientation(width, orientation, isOrientationFixed, horizontalOrientationMinWidth);
+        if (currentOrientation !== this.state.orientation ||
+            width !== this.state.width) {
+            this.setState({ orientation: currentOrientation, width });
+        }
+    }
+    /** @internal */
+    render() {
+        var _a, _b;
+        if (this.state.loadStart) {
+            return (React.createElement("div", { className: 'gm-components-property-grid-loader' },
+                React.createElement(ProgressRadial, { indeterminate: true })));
+        }
+        return (React.createElement("div", { className: 'table-box-inner' },
+            React.createElement(PropertyGridEventsRelatedPropsSupplier, { isPropertySelectionEnabled: (_a = this.props.isPropertySelectionEnabled) !== null && _a !== void 0 ? _a : false, isPropertySelectionOnRightClickEnabled: this.props.isPropertySelectionOnRightClickEnabled, isPropertyEditingEnabled: this.props.isPropertyEditingEnabled, isPropertyHoverEnabled: (_b = this.props.isPropertyHoverEnabled) !== null && _b !== void 0 ? _b : false, onPropertyContextMenu: this.props.onPropertyContextMenu, onPropertyUpdated: this.props.onPropertyUpdated, onPropertySelectionChanged: this.props.onPropertySelectionChanged }, (selectionContext) => (React.createElement("div", { className: classnames("components-property-grid-wrapper", this.props.className), style: this.props.style },
+                React.createElement("div", { className: classnames("components-property-grid", "components-smallEditor-host") },
+                    React.createElement("div", { className: 'property-categories' }, this.state.categories.map((categorizedRecords) => (React.createElement(NestedCategoryBlock, { ...selectionContext, key: categorizedRecords.category.name, categorizedRecords: categorizedRecords, onCategoryExpansionToggled: this._onCategoryExpansionToggled, orientation: this.state.orientation, propertyValueRendererManager: this.props.propertyValueRendererManager, actionButtonRenderers: this.props.actionButtonRenderers }))))),
+                React.createElement(ResizableContainerObserver, { onResize: this._onResize }))))));
+    }
+}
+PropertyGrid.contextType = GroupQueryBuilderContext;
+function findCategory(categories, lookupName, recurseIntoChildren) {
+    for (const category of categories) {
+        if (category.category.name === lookupName) {
+            return category;
+        }
+        if (recurseIntoChildren) {
+            const matchingChild = findCategory(category.children, lookupName, recurseIntoChildren);
+            if (matchingChild) {
+                return matchingChild;
+            }
+        }
+    }
+    return undefined;
+}
+const NestedCategoryBlock = (props) => {
+    const [width, setWidth] = React.useState(1);
+    return (React.createElement(PropertyCategoryBlock, { category: props.categorizedRecords.category, onExpansionToggled: props.onCategoryExpansionToggled },
+        props.categorizedRecords.records.length ? (React.createElement(ColumnResizingPropertyListPropsSupplier, { orientation: props.orientation, width: width }, (partialListProps) => (React.createElement(PropertyList, { ...partialListProps, orientation: props.orientation, category: props.categorizedRecords.category, properties: props.categorizedRecords.records, selectedPropertyKey: props.selectedPropertyKey, onPropertyClicked: props.onPropertyClicked, onPropertyRightClicked: props.onPropertyRightClicked, onPropertyContextMenu: props.onPropertyContextMenu, propertyValueRendererManager: props.propertyValueRendererManager, editingPropertyKey: props.editingPropertyKey, onEditCommit: props.onEditCommit, onEditCancel: props.onEditCancel, isPropertyHoverEnabled: props.isPropertyHoverEnabled, isPropertySelectionEnabled: props.isPropertySelectionEnabled, isPropertyRightClickSelectionEnabled: props.isPropertyRightClickSelectionEnabled, actionButtonRenderers: props.actionButtonRenderers, setWidth: setWidth, width: width })))) : undefined,
+        props.categorizedRecords.children.length ? (React.createElement("div", { className: 'property-categories' }, props.categorizedRecords.children.map((categorizedChildRecords) => (React.createElement(NestedCategoryBlock, { ...props, key: categorizedChildRecords.category.name, categorizedRecords: categorizedChildRecords }))))) : undefined));
+};
+//# sourceMappingURL=PropertyGrid.js.map

package/lib/esm/widget/components/property-grid/PropertyGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyGrid.js","sourceRoot":"","sources":["../../../../../src/widget/components/property-grid/PropertyGrid.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 classnames from \"classnames\";\nimport { produce } from \"immer\";\nimport * as React from \"react\";\nimport type { DisposeFunc } from \"@itwin/core-bentley\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport type {\n  CommonPropertyGridProps,\n  PropertyCategory,\n  PropertyData} from \"@itwin/components-react\";\nimport {\n  PropertyCategoryBlock,\n  PropertyGridCommons,\n  PropertyGridEventsRelatedPropsSupplier,\n} from \"@itwin/components-react\";\nimport type {\n  ColumnResizeRelatedPropertyListProps} from \"@itwin/components-react/lib/cjs/components-react/propertygrid/component/ColumnResizingPropertyListPropsSupplier\";\nimport {\n  ColumnResizingPropertyListPropsSupplier,\n} from \"@itwin/components-react/lib/cjs/components-react/propertygrid/component/ColumnResizingPropertyListPropsSupplier\";\nimport { Orientation, ResizableContainerObserver } from \"@itwin/core-react\";\n\nimport type { PropertyListProps } from \"./PropertyList\";\nimport { PropertyList } from \"./PropertyList\";\nimport \"./PropertyGrid.scss\";\n\nimport type { PresentationPropertyDataProvider } from \"@itwin/presentation-components\";\nimport { GroupQueryBuilderContext } from \"../GroupQueryBuilderContext\";\nimport { ProgressRadial } from \"@itwin/itwinui-react\";\n\n/** Properties for [[PropertyGrid]] React component\n * @public\n */\nexport interface PropertyGridProps extends CommonPropertyGridProps {\n  /** Property data provider */\n  dataProvider: PresentationPropertyDataProvider;\n}\n\n/** Property Category in the [[PropertyGrid]] state\n * @public\n * @deprecated This was part of [[PropertyGrid]] internal state and should've never been public. The component is not using it anymore.\n */\nexport interface PropertyGridCategory {\n  propertyCategory: PropertyCategory;\n  propertyCount: number;\n  properties: PropertyRecord[];\n}\n\ninterface CategorizedPropertyGridRecords {\n  category: PropertyCategory;\n  records: PropertyRecord[];\n  children: CategorizedPropertyGridRecords[];\n}\n\n/** State of [[PropertyGrid]] React component\n * @internal\n */\ninterface PropertyGridState {\n  /** List of PropertyGrid categories */\n  categories: CategorizedPropertyGridRecords[];\n  /** Actual orientation used by the property grid */\n  orientation: Orientation;\n  /** If property grid currently loading data, the loading start time  */\n  loadStart?: Date;\n  /** Width of PropertyGrid */\n  width: number;\n}\n\n/** PropertyGrid React component.\n * @public\n */\nexport class PropertyGrid extends React.Component<\nPropertyGridProps,\nPropertyGridState\n> {\n  private _dataChangesListenerDisposeFunc?: DisposeFunc;\n  private _isMounted = false;\n  private _isInDataRequest = false;\n  private _hasPendingDataRequest = false;\n\n  static override contextType = GroupQueryBuilderContext;\n\n  /** @internal */\n  constructor(props: PropertyGridProps) {\n    super(props);\n    this.state = {\n      categories: [],\n      orientation: this.getPreferredOrientation(),\n      width: 0,\n    };\n  }\n\n  /** @internal */\n  public override componentDidMount() {\n    this._isMounted = true;\n    this._dataChangesListenerDisposeFunc =\n      this.props.dataProvider.onDataChanged.addListener(\n        this._onPropertyDataChanged\n      );\n\n    void this.gatherData();\n  }\n\n  /** @internal */\n  public override componentWillUnmount() {\n    // istanbul ignore else\n    if (this._dataChangesListenerDisposeFunc) {\n      this._dataChangesListenerDisposeFunc();\n      this._dataChangesListenerDisposeFunc = undefined;\n    }\n    this._isMounted = false;\n  }\n\n  public override componentDidUpdate(prevProps: PropertyGridProps) {\n    if (this.props.dataProvider !== prevProps.dataProvider) {\n      // istanbul ignore else\n      if (this._dataChangesListenerDisposeFunc) {\n        this._dataChangesListenerDisposeFunc();\n      }\n      this._dataChangesListenerDisposeFunc =\n        this.props.dataProvider.onDataChanged.addListener(\n          this._onPropertyDataChanged\n        );\n\n      void this.gatherData();\n    }\n\n    if (\n      this.props.orientation !== prevProps.orientation ||\n      this.props.isOrientationFixed !== prevProps.isOrientationFixed ||\n      this.props.horizontalOrientationMinWidth !==\n      prevProps.horizontalOrientationMinWidth\n    ) {\n      this.updateOrientation(this.state.width);\n    }\n  }\n\n  private _onPropertyDataChanged = () => {\n    void this.gatherData();\n  };\n\n  private async gatherData(): Promise<void> {\n    if (this._isInDataRequest) {\n      this._hasPendingDataRequest = true;\n      return;\n    }\n\n    this.setState((prev) =>\n      prev.loadStart ? null : { loadStart: new Date() }\n    );\n\n    this._isInDataRequest = true;\n    let propertyData: PropertyData;\n    try {\n      propertyData = await this.props.dataProvider.getData();\n    } finally {\n      this._isInDataRequest = false;\n    }\n\n    if (!this._isMounted) {\n      return;\n    }\n\n    if (this._hasPendingDataRequest) {\n      this._hasPendingDataRequest = false;\n      return this.gatherData();\n    }\n\n    this.setState((prevState) => {\n      const buildCategoriesHierarchy = (\n        newCategories: PropertyCategory[],\n        stateCategories: CategorizedPropertyGridRecords[] | undefined\n      ) =>\n        newCategories.map((category): CategorizedPropertyGridRecords => {\n          const matchingStateCategory = findCategory(\n            stateCategories ?? [],\n            category.name,\n            false\n          );\n          return {\n            category: {\n              ...category,\n              expand:\n                matchingStateCategory?.category?.expand ?? category.expand,\n            },\n            records: propertyData.records[category.name] ?? [],\n            children: buildCategoriesHierarchy(\n              category.childCategories ?? [],\n              matchingStateCategory?.children\n            ),\n          };\n        });\n      return {\n        categories: buildCategoriesHierarchy(\n          propertyData.categories,\n          prevState.categories\n        ),\n        loadStart: undefined,\n      };\n    });\n  }\n\n  private getPreferredOrientation(): Orientation {\n    return this.props.orientation !== undefined\n      ? this.props.orientation\n      : Orientation.Horizontal;\n  }\n\n  private _onResize = (width: number) => {\n    this.updateOrientation(width);\n  };\n\n  private _onCategoryExpansionToggled = (categoryName: string) => {\n    this.setState((state) => {\n      return produce(state, (draft) => {\n        const records = findCategory(draft.categories, categoryName, true);\n        // istanbul ignore else\n        if (records) {\n          const category = records.category;\n          category.expand = !category.expand;\n        }\n      });\n    });\n  };\n\n  private updateOrientation(width: number): void {\n    const { orientation, isOrientationFixed, horizontalOrientationMinWidth } = {\n      ...this.props,\n    };\n    const currentOrientation = PropertyGridCommons.getCurrentOrientation(\n      width,\n      orientation,\n      isOrientationFixed,\n      horizontalOrientationMinWidth\n    );\n\n    if (\n      currentOrientation !== this.state.orientation ||\n      width !== this.state.width\n    ) {\n      this.setState({ orientation: currentOrientation, width });\n    }\n  }\n\n  /** @internal */\n  public override render() {\n    if (this.state.loadStart) {\n      return (\n        <div className='gm-components-property-grid-loader'>\n          <ProgressRadial indeterminate />\n        </div>\n      );\n    }\n\n    return (\n      <div className='table-box-inner'>\n        <PropertyGridEventsRelatedPropsSupplier\n          isPropertySelectionEnabled={\n            this.props.isPropertySelectionEnabled ?? false\n          }\n          isPropertySelectionOnRightClickEnabled={\n            this.props.isPropertySelectionOnRightClickEnabled\n          }\n          isPropertyEditingEnabled={this.props.isPropertyEditingEnabled}\n          isPropertyHoverEnabled={this.props.isPropertyHoverEnabled ?? false}\n          onPropertyContextMenu={this.props.onPropertyContextMenu}\n          onPropertyUpdated={this.props.onPropertyUpdated}\n          onPropertySelectionChanged={this.props.onPropertySelectionChanged}\n        >\n          {(selectionContext) => (\n            <div\n              className={classnames(\n                \"components-property-grid-wrapper\",\n                this.props.className\n              )}\n              style={this.props.style}\n            >\n              <div\n                className={classnames(\n                  \"components-property-grid\",\n                  \"components-smallEditor-host\"\n                )}\n              >\n                <div className='property-categories'>\n                  {this.state.categories.map(\n                    (categorizedRecords: CategorizedPropertyGridRecords) => (\n                      <NestedCategoryBlock\n                        {...selectionContext}\n                        key={categorizedRecords.category.name}\n                        categorizedRecords={categorizedRecords}\n                        onCategoryExpansionToggled={\n                          this._onCategoryExpansionToggled\n                        }\n                        orientation={this.state.orientation}\n                        propertyValueRendererManager={\n                          this.props.propertyValueRendererManager\n                        }\n                        actionButtonRenderers={this.props.actionButtonRenderers}\n                      />\n                    )\n                  )}\n                </div>\n              </div>\n              <ResizableContainerObserver onResize={this._onResize} />\n            </div>\n          )}\n        </PropertyGridEventsRelatedPropsSupplier>\n      </div>\n    );\n  }\n}\n\nfunction findCategory(\n  categories: CategorizedPropertyGridRecords[],\n  lookupName: string,\n  recurseIntoChildren: boolean\n): CategorizedPropertyGridRecords | undefined {\n  for (const category of categories) {\n    if (category.category.name === lookupName) {\n      return category;\n    }\n    if (recurseIntoChildren) {\n      const matchingChild = findCategory(\n        category.children,\n        lookupName,\n        recurseIntoChildren\n      );\n      if (matchingChild) {\n        return matchingChild;\n      }\n    }\n  }\n  return undefined;\n}\n\ninterface NestedCategoryBlockProps\n  extends Omit<\n  PropertyListProps,\n  keyof ColumnResizeRelatedPropertyListProps | \"properties\"\n  > {\n  categorizedRecords: CategorizedPropertyGridRecords;\n  onCategoryExpansionToggled: (categoryName: string) => void;\n  orientation: Orientation;\n}\nconst NestedCategoryBlock = (props: NestedCategoryBlockProps) => {\n  const [width, setWidth] = React.useState(1);\n  return (\n    <PropertyCategoryBlock\n      category={props.categorizedRecords.category}\n      onExpansionToggled={props.onCategoryExpansionToggled}\n    >\n      {props.categorizedRecords.records.length ? (\n        <ColumnResizingPropertyListPropsSupplier\n          orientation={props.orientation}\n          width={width}\n        >\n          {(partialListProps: ColumnResizeRelatedPropertyListProps) => (\n            <PropertyList\n              {...partialListProps}\n              orientation={props.orientation}\n              category={props.categorizedRecords.category}\n              properties={props.categorizedRecords.records}\n              selectedPropertyKey={props.selectedPropertyKey}\n              onPropertyClicked={props.onPropertyClicked}\n              onPropertyRightClicked={props.onPropertyRightClicked}\n              onPropertyContextMenu={props.onPropertyContextMenu}\n              propertyValueRendererManager={props.propertyValueRendererManager}\n              editingPropertyKey={props.editingPropertyKey}\n              onEditCommit={props.onEditCommit}\n              onEditCancel={props.onEditCancel}\n              isPropertyHoverEnabled={props.isPropertyHoverEnabled}\n              isPropertySelectionEnabled={props.isPropertySelectionEnabled}\n              isPropertyRightClickSelectionEnabled={\n                props.isPropertyRightClickSelectionEnabled\n              }\n              actionButtonRenderers={props.actionButtonRenderers}\n              setWidth={setWidth}\n              width={width}\n            />\n          )}\n        </ColumnResizingPropertyListPropsSupplier>\n      ) : undefined}\n      {props.categorizedRecords.children.length ? (\n        <div className='property-categories'>\n          {props.categorizedRecords.children.map((categorizedChildRecords) => (\n            <NestedCategoryBlock\n              {...props}\n              key={categorizedChildRecords.category.name}\n              categorizedRecords={categorizedChildRecords}\n            />\n          ))}\n        </div>\n      ) : undefined}\n    </PropertyCategoryBlock>\n  );\n};\n"]}

package/lib/esm/widget/components/property-grid/PropertyGrid.scss

@@ -0,0 +1,71 @@
+/*---------------------------------------------------------------------------------------------
+* 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/expandable/list";
+@import "~@itwin/core-react/lib/cjs/core-react/scrollbar";
+
+.gm-components-property-grid-loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.components-property-grid {
+  .property-categories {
+    @include uicore-expandable-blocks-list;
+
+    display: grid;
+    grid-row-gap: 6px;
+    padding: 3px;
+  }
+
+  padding-top: 6px;
+  padding-bottom: 6px;
+
+  user-select: none;
+  color: $buic-foreground-body;
+}
+
+.components-property-grid-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  @include uicore-touch-scrolling;
+  @include uicore-scrollbar();
+}
+
+@mixin components-property-list {
+  width: 100%;
+
+  .components--selected {
+    background-color: $buic-row-selection;
+    outline: 1px solid $buic-foreground-primary;
+  }
+
+  .components--clickable {
+    cursor: pointer;
+
+    &:hover {
+      background: $buic-row-hover;
+    }
+  }
+
+  .components--hoverable:hover {
+    background-color: $buic-row-hover;
+  }
+}
+
+.components-property-list--horizontal {
+  @include components-property-list;
+
+  display: grid;
+  grid-row-gap: 1px; // A gap of 10px is too wasteful
+  overflow: hidden;
+}
+
+.components-property-list--vertical {
+  @include components-property-list;
+  // margin-top: -13px;
+}