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

package/lib/esm/components-react/propertygrid/component/VirtualizedPropertyGrid.js

@@ -1,242 +1,237 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyGrid
- */
-import "./VirtualizedPropertyGrid.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { areEqual, VariableSizeList } from "react-window";
-import { assert } from "@itwin/core-bentley";
-import { Orientation } from "@itwin/core-react";
-import { createContextWithMandatoryProvider } from "../../common/UseContextWithMandatoryProvider";
-import { FilteredType } from "../dataproviders/filterers/PropertyDataFiltererBase";
-import { MutableCategorizedPrimitiveProperty } from "../internal/flat-items/MutableCategorizedPrimitiveProperty";
-import { MutableCustomGridCategory } from "../internal/flat-items/MutableCustomGridCategory";
-import { FlatGridItemType } from "../internal/flat-items/MutableFlatGridItem";
-import { MutableGridCategory } from "../internal/flat-items/MutableGridCategory";
-import { FlatPropertyRenderer } from "../internal/flat-properties/FlatPropertyRenderer";
-import { PropertyCategoryRendererManager } from "../PropertyCategoryRendererManager";
-import { ColumnResizingPropertyListPropsSupplier } from "./ColumnResizingPropertyListPropsSupplier";
-import { FlatItemNestedBorderWrapper } from "./FlatItemNestedBorderWrapper";
-import { PropertyCategoryBlock } from "./PropertyCategoryBlock";
-import { PropertyGridCommons } from "./PropertyGridCommons";
-import { PropertyGridEventsRelatedPropsSupplier } from "./PropertyGridEventsRelatedPropsSupplier";
-const [PropertyGridInternalContextProvider, _PropertyGridInternalContextConsumer, usePropertyGridInternalContext,] = createContextWithMandatoryProvider("PropertyGridInternalContext");
-/**
- * VirtualizedPropertyGrid React component.
- * @public
- */
-export class VirtualizedPropertyGrid extends React.Component {
-    /** @internal */
-    constructor(props) {
-        var _a;
-        super(props);
-        this._listRef = React.createRef();
-        this._handleNodeHeightChange = (index, key, newHeight) => {
-            if (this.state.dynamicNodeHeights.get(key) === newHeight) {
-                return;
-            }
-            this.setState((state) => {
-                return {
-                    ...state,
-                    dynamicNodeHeights: new Map(state.dynamicNodeHeights).set(key, newHeight),
-                    resetIndex: index,
-                };
-            });
-        };
-        this._calculateNodeHeightByIndex = (index) => {
-            const node = this.state.gridItems[index];
-            return this.calculateNodeHeight(node);
-        };
-        this._getNodeKey = (index) => {
-            const node = this.state.gridItems[index];
-            return node.key;
-        };
-        this.state = {
-            gridItems: [],
-            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : Orientation.Horizontal,
-            dynamicNodeHeights: new Map(),
-            resetIndex: 0,
-        };
-    }
-    /** @internal */
-    componentDidUpdate(prevProps, prevState) {
-        var _a;
-        if (this.props.orientation !== prevProps.orientation
-            || this.props.isOrientationFixed !== prevProps.isOrientationFixed
-            || this.props.horizontalOrientationMinWidth !== prevProps.horizontalOrientationMinWidth
-            || this.props.width !== prevProps.width)
-            this.updateOrientation(this.props.width);
-        if (this.props.model !== prevProps.model) {
-            // istanbul ignore else
-            if (this._listRef.current)
-                this._listRef.current.resetAfterIndex(0);
-        }
-        if (this.props.highlight !== prevProps.highlight && ((_a = this.props.highlight) === null || _a === void 0 ? void 0 : _a.activeHighlight) && this.state.gridItems.length !== 0) {
-            let index = 0;
-            let foundMatchingItem = false;
-            for (const item of this.state.gridItems) {
-                if (item instanceof MutableCategorizedPrimitiveProperty && this.props.highlight.activeHighlight.highlightedItemIdentifier === item.derivedRecord.property.name
-                    || item instanceof MutableGridCategory && this.props.highlight.activeHighlight.highlightedItemIdentifier === item.name) {
-                    foundMatchingItem = true;
-                    break;
-                }
-                index++;
-            }
-            if (foundMatchingItem) {
-                // istanbul ignore else
-                if (this._listRef.current)
-                    this._listRef.current.scrollToItem(index);
-            }
-        }
-        if (this.state.dynamicNodeHeights !== prevState.dynamicNodeHeights) {
-            // istanbul ignore else
-            if (this._listRef.current)
-                this._listRef.current.resetAfterIndex(this.state.resetIndex);
-        }
-    }
-    /** @internal */
-    static getDerivedStateFromProps(props, state) {
-        return {
-            ...state,
-            gridItems: props.model.getVisibleFlatGrid(),
-        };
-    }
-    updateOrientation(width) {
-        const { orientation, isOrientationFixed, horizontalOrientationMinWidth } = { ...this.props };
-        const currentOrientation = PropertyGridCommons.getCurrentOrientation(width, orientation, isOrientationFixed, horizontalOrientationMinWidth);
-        if (currentOrientation !== this.state.orientation) {
-            this.setState({ orientation: currentOrientation });
-            // istanbul ignore else
-            if (this._listRef.current)
-                this._listRef.current.resetAfterIndex(0);
-        }
-    }
-    /**
-     * Calculate given node height depending on it's type, position in category, parent category depth and current orientation.
-     * @param node FlatGridItem node for which to calculate height
-     * @returns current height of node.
-     */
-    calculateNodeHeight(node) {
-        const categoryHeaderHeight = 38;
-        const categoryHeaderPadding = 4;
-        const categoryPropertyHeight = 27;
-        const bottomBorderPadding = 5;
-        const verticalPrimitivePropertyHeight = 55;
-        return getPropertyHeight(this.state) + node.lastInNumberOfCategories * bottomBorderPadding;
-        function getPropertyHeight(state) {
-            const dynamicHeight = state.dynamicNodeHeights.get(node.key);
-            if (dynamicHeight !== undefined) {
-                if (node instanceof MutableCustomGridCategory) {
-                    return categoryHeaderHeight + categoryHeaderPadding
-                        + (node.isExpanded ? dynamicHeight + bottomBorderPadding : 0);
-                }
-                return dynamicHeight + (state.orientation === Orientation.Vertical ? 28 : 0);
-            }
-            if (node.type === FlatGridItemType.Category) {
-                return categoryHeaderHeight + categoryHeaderPadding;
-            }
-            if (state.orientation === Orientation.Vertical && node.type === FlatGridItemType.Primitive) {
-                return verticalPrimitivePropertyHeight;
-            }
-            return categoryPropertyHeight;
-        }
-    }
-    calculateEstimatedHeight() {
-        let sum = 0;
-        for (const node of this.state.gridItems)
-            sum += this.calculateNodeHeight(node);
-        return Math.ceil(sum / this.state.gridItems.length);
-    }
-    /** @internal */
-    render() {
-        return React.createElement(ColumnResizingPropertyListPropsSupplier, { orientation: this.state.orientation, width: this.props.width, minLabelWidth: this.props.minLabelWidth, minValueWidth: this.props.minValueWidth, actionButtonWidth: this.props.actionButtonWidth }, (columnResizeContext) => {
-            var _a, _b;
-            return (React.createElement(PropertyGridEventsRelatedPropsSupplier, { isPropertySelectionEnabled: (_a = this.props.isPropertySelectionEnabled) !== null && _a !== void 0 ? _a : false, isPropertySelectionOnRightClickEnabled: this.props.isPropertySelectionOnRightClickEnabled, isPropertyEditingEnabled: this.props.isPropertyEditingEnabled, onPropertyContextMenu: this.props.onPropertyContextMenu, onPropertyUpdated: this.props.onPropertyUpdated, onPropertySelectionChanged: this.props.onPropertySelectionChanged, isPropertyHoverEnabled: (_b = this.props.isPropertyHoverEnabled) !== null && _b !== void 0 ? _b : false }, (selectionContext) => {
-                const gridContext = {
-                    orientation: columnResizeContext.orientation,
-                    gridWidth: this.props.width,
-                    isPropertyHoverEnabled: selectionContext.isPropertyHoverEnabled,
-                    isPropertySelectionEnabled: selectionContext.isPropertySelectionEnabled,
-                    selectedPropertyKey: selectionContext.selectedPropertyKey,
-                    onPropertyClicked: selectionContext.onPropertyClicked,
-                    onPropertyRightClicked: selectionContext.onPropertyRightClicked,
-                    onPropertyContextMenu: selectionContext.onPropertyContextMenu,
-                    editingPropertyKey: selectionContext.editingPropertyKey,
-                    onEditCommit: selectionContext.onEditCommit,
-                    onEditCancel: selectionContext.onEditCancel,
-                    eventHandler: this.props.eventHandler,
-                    dataProvider: this.props.dataProvider,
-                    actionButtonRenderers: this.props.actionButtonRenderers,
-                    propertyValueRendererManager: this.props.propertyValueRendererManager,
-                    propertyCategoryRendererManager: this.props.propertyCategoryRendererManager,
-                    columnRatio: columnResizeContext.columnRatio,
-                    columnInfo: columnResizeContext.columnInfo,
-                    isResizeHandleBeingDragged: columnResizeContext.isResizeHandleBeingDragged,
-                    isResizeHandleHovered: columnResizeContext.isResizeHandleHovered,
-                    onColumnRatioChanged: columnResizeContext.onColumnChanged,
-                    onResizeHandleDragChanged: columnResizeContext.onResizeHandleDragChanged,
-                    onResizeHandleHoverChanged: columnResizeContext.onResizeHandleHoverChanged,
-                    highlight: this.props.highlight,
-                };
-                const renderContext = {
-                    gridItems: this.state.gridItems,
-                    gridEventHandler: this.props.eventHandler,
-                    gridModel: this.props.model,
-                    style: this.props.style,
-                    className: this.props.className,
-                    onItemHeightChanged: this._handleNodeHeightChange,
-                    gridContext,
-                };
-                return (React.createElement(PropertyGridInternalContextProvider, { value: renderContext },
-                    React.createElement("div", { className: classnames("components-virtualized-property-grid", "components-smallEditor-host") },
-                        React.createElement(VariableSizeList, { className: classnames("components-property-grid-wrapper", "ReactWindow__VariableSizeList", this.props.className), width: this.props.width, height: this.props.height, itemCount: this.state.gridItems.length, itemSize: this._calculateNodeHeightByIndex, estimatedItemSize: this.calculateEstimatedHeight(), overscanCount: 10, layout: "vertical", style: this.props.style, itemKey: this._getNodeKey, ref: this._listRef }, FlatGridItemNode))));
-            }));
-        });
-    }
-}
-const FlatGridItemNode = React.memo(({ index, style: virtualizedListStyle }) => {
-    const { gridItems, gridEventHandler, gridModel, gridContext, className, style, onItemHeightChanged } = usePropertyGridInternalContext(FlatGridItemNode);
-    const node = gridItems[index];
-    const onExpansionToggled = React.useCallback(() => gridEventHandler.onExpansionToggled(node.selectionKey), [gridEventHandler, node.selectionKey]);
-    const onHeightChanged = React.useCallback((newHeight) => onItemHeightChanged(index, node.key, newHeight), [onItemHeightChanged, index, node.key]);
-    function getDisplayNode() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const lastInNumberOfCategories = node.lastInNumberOfCategories;
-        switch (node.type) {
-            case FlatGridItemType.Category:
-                const categoryRendererManager = (_a = gridContext.propertyCategoryRendererManager) !== null && _a !== void 0 ? _a : PropertyCategoryRendererManager.defaultManager;
-                const customRenderer = categoryRendererManager.getCategoryComponent(node);
-                const wrapperClassName = classnames("virtualized-grid-node-content", customRenderer !== undefined ? "virtualized-grid-node-custom-category" : "virtualized-grid-node-category");
-                return (React.createElement(FlatItemNestedBorderWrapper, { borderCount: node.depth, bottomBorderCount: lastInNumberOfCategories, className: wrapperClassName },
-                    React.createElement(PropertyCategoryBlock, { className: className, style: style, category: node.derivedCategory, onExpansionToggled: onExpansionToggled, highlight: ((_c = (_b = gridContext.highlight) === null || _b === void 0 ? void 0 : _b.filteredTypes) === null || _c === void 0 ? void 0 : _c.includes(FilteredType.Category)) ?
-                            gridContext.highlight :
-                            undefined }, customRenderer !== undefined && (React.createElement(CustomCategoryContent, { renderer: customRenderer, categoryItem: node, gridContext: gridContext, onHeightChanged: onHeightChanged })))));
-            case FlatGridItemType.Array:
-            case FlatGridItemType.Struct:
-            case FlatGridItemType.Primitive:
-                const selectionKey = node.selectionKey;
-                const parentCategoryItem = gridModel.getItem(node.parentCategorySelectionKey);
-                return (React.createElement(FlatItemNestedBorderWrapper, { borderCount: parentCategoryItem.depth + 1, bottomBorderCount: lastInNumberOfCategories, className: "virtualized-grid-node-content" },
-                    React.createElement(FlatPropertyRenderer, { key: node.key, uniqueKey: selectionKey, propertyRecord: node.derivedRecord, orientation: gridContext.orientation, indentation: node.depth, width: gridContext.gridWidth, isHoverable: gridContext.isPropertyHoverEnabled, isSelectable: gridContext.isPropertySelectionEnabled, isSelected: selectionKey === gridContext.selectedPropertyKey, onClick: node.type === FlatGridItemType.Primitive ? gridContext.onPropertyClicked : undefined, onRightClick: node.type === FlatGridItemType.Primitive ? gridContext.onPropertyRightClicked : undefined, onContextMenu: gridContext.onPropertyContextMenu, category: parentCategoryItem.derivedCategory, isEditing: selectionKey === gridContext.editingPropertyKey, onEditCommit: gridContext.onEditCommit, onEditCancel: gridContext.onEditCancel, isExpanded: node.isExpanded, onExpansionToggled: onExpansionToggled, onHeightChanged: onHeightChanged, actionButtonRenderers: gridContext.actionButtonRenderers, propertyValueRendererManager: gridContext.propertyValueRendererManager, columnRatio: gridContext.columnRatio, columnInfo: gridContext.columnInfo, isResizeHandleBeingDragged: gridContext.isResizeHandleBeingDragged, isResizeHandleHovered: gridContext.isResizeHandleHovered, onColumnRatioChanged: gridContext.onColumnRatioChanged, onResizeHandleDragChanged: gridContext.onResizeHandleDragChanged, onResizeHandleHoverChanged: gridContext.onResizeHandleHoverChanged, highlight: gridContext.highlight ?
-                            { applyOnLabel: (_e = ((_d = gridContext.highlight.filteredTypes) === null || _d === void 0 ? void 0 : _d.includes(FilteredType.Label))) !== null && _e !== void 0 ? _e : false, applyOnValue: (_g = ((_f = gridContext.highlight.filteredTypes) === null || _f === void 0 ? void 0 : _f.includes(FilteredType.Value))) !== null && _g !== void 0 ? _g : false, ...gridContext.highlight } :
-                            undefined })));
-        }
-    }
-    return (React.createElement("div", { className: "virtualized-grid-node", style: virtualizedListStyle }, getDisplayNode()));
-}, areEqual);
-FlatGridItemNode.displayName = "FlatGridItemNode";
-const CustomCategoryContent = (props) => {
-    const { onHeightChanged } = props;
-    const divRef = React.useRef(null);
-    React.useLayoutEffect(() => {
-        assert(divRef.current !== null);
-        const contentHeight = divRef.current.getBoundingClientRect().height;
-        onHeightChanged(contentHeight);
-    }, [props.gridContext.orientation, onHeightChanged]);
-    return (React.createElement("div", { ref: divRef }, React.createElement(props.renderer, props)));
-};
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyGrid
+ */
+import "./VirtualizedPropertyGrid.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { areEqual, VariableSizeList } from "react-window";
+import { assert } from "@itwin/core-bentley";
+import { Orientation } from "@itwin/core-react";
+import { createContextWithMandatoryProvider } from "../../common/UseContextWithMandatoryProvider";
+import { FilteredType } from "../dataproviders/filterers/PropertyDataFiltererBase";
+import { MutableCategorizedPrimitiveProperty } from "../internal/flat-items/MutableCategorizedPrimitiveProperty";
+import { MutableCustomGridCategory } from "../internal/flat-items/MutableCustomGridCategory";
+import { FlatGridItemType } from "../internal/flat-items/MutableFlatGridItem";
+import { MutableGridCategory } from "../internal/flat-items/MutableGridCategory";
+import { FlatPropertyRenderer } from "../internal/flat-properties/FlatPropertyRenderer";
+import { PropertyCategoryRendererManager } from "../PropertyCategoryRendererManager";
+import { ColumnResizingPropertyListPropsSupplier } from "./ColumnResizingPropertyListPropsSupplier";
+import { FlatItemNestedBorderWrapper } from "./FlatItemNestedBorderWrapper";
+import { PropertyCategoryBlock } from "./PropertyCategoryBlock";
+import { PropertyGridCommons } from "./PropertyGridCommons";
+import { PropertyGridEventsRelatedPropsSupplier } from "./PropertyGridEventsRelatedPropsSupplier";
+const [PropertyGridInternalContextProvider, _PropertyGridInternalContextConsumer, usePropertyGridInternalContext,] = createContextWithMandatoryProvider("PropertyGridInternalContext");
+/**
+ * VirtualizedPropertyGrid React component.
+ * @public
+ */
+export class VirtualizedPropertyGrid extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._listRef = React.createRef();
+        this._handleNodeHeightChange = (index, key, newHeight) => {
+            if (this.state.dynamicNodeHeights.get(key) === newHeight) {
+                return;
+            }
+            this.setState((state) => {
+                return {
+                    ...state,
+                    dynamicNodeHeights: new Map(state.dynamicNodeHeights).set(key, newHeight),
+                    resetIndex: index,
+                };
+            });
+        };
+        this._calculateNodeHeightByIndex = (index) => {
+            const node = this.state.gridItems[index];
+            return this.calculateNodeHeight(node);
+        };
+        this._getNodeKey = (index) => {
+            const node = this.state.gridItems[index];
+            return node.key;
+        };
+        this.state = {
+            gridItems: [],
+            orientation: props.orientation ?? Orientation.Horizontal,
+            dynamicNodeHeights: new Map(),
+            resetIndex: 0,
+        };
+    }
+    /** @internal */
+    componentDidUpdate(prevProps, prevState) {
+        if (this.props.orientation !== prevProps.orientation
+            || this.props.isOrientationFixed !== prevProps.isOrientationFixed
+            || this.props.horizontalOrientationMinWidth !== prevProps.horizontalOrientationMinWidth
+            || this.props.width !== prevProps.width)
+            this.updateOrientation(this.props.width);
+        if (this.props.model !== prevProps.model) {
+            // istanbul ignore else
+            if (this._listRef.current)
+                this._listRef.current.resetAfterIndex(0);
+        }
+        if (this.props.highlight !== prevProps.highlight && this.props.highlight?.activeHighlight && this.state.gridItems.length !== 0) {
+            let index = 0;
+            let foundMatchingItem = false;
+            for (const item of this.state.gridItems) {
+                if (item instanceof MutableCategorizedPrimitiveProperty && this.props.highlight.activeHighlight.highlightedItemIdentifier === item.derivedRecord.property.name
+                    || item instanceof MutableGridCategory && this.props.highlight.activeHighlight.highlightedItemIdentifier === item.name) {
+                    foundMatchingItem = true;
+                    break;
+                }
+                index++;
+            }
+            if (foundMatchingItem) {
+                // istanbul ignore else
+                if (this._listRef.current)
+                    this._listRef.current.scrollToItem(index);
+            }
+        }
+        if (this.state.dynamicNodeHeights !== prevState.dynamicNodeHeights) {
+            // istanbul ignore else
+            if (this._listRef.current)
+                this._listRef.current.resetAfterIndex(this.state.resetIndex);
+        }
+    }
+    /** @internal */
+    static getDerivedStateFromProps(props, state) {
+        return {
+            ...state,
+            gridItems: props.model.getVisibleFlatGrid(),
+        };
+    }
+    updateOrientation(width) {
+        const { orientation, isOrientationFixed, horizontalOrientationMinWidth } = { ...this.props };
+        const currentOrientation = PropertyGridCommons.getCurrentOrientation(width, orientation, isOrientationFixed, horizontalOrientationMinWidth);
+        if (currentOrientation !== this.state.orientation) {
+            this.setState({ orientation: currentOrientation });
+            // istanbul ignore else
+            if (this._listRef.current)
+                this._listRef.current.resetAfterIndex(0);
+        }
+    }
+    /**
+     * Calculate given node height depending on it's type, position in category, parent category depth and current orientation.
+     * @param node FlatGridItem node for which to calculate height
+     * @returns current height of node.
+     */
+    calculateNodeHeight(node) {
+        const categoryHeaderHeight = 38;
+        const categoryHeaderPadding = 4;
+        const categoryPropertyHeight = 27;
+        const bottomBorderPadding = 5;
+        const verticalPrimitivePropertyHeight = 55;
+        return getPropertyHeight(this.state) + node.lastInNumberOfCategories * bottomBorderPadding;
+        function getPropertyHeight(state) {
+            const dynamicHeight = state.dynamicNodeHeights.get(node.key);
+            if (dynamicHeight !== undefined) {
+                if (node instanceof MutableCustomGridCategory) {
+                    return categoryHeaderHeight + categoryHeaderPadding
+                        + (node.isExpanded ? dynamicHeight + bottomBorderPadding : 0);
+                }
+                return dynamicHeight + (state.orientation === Orientation.Vertical ? 28 : 0);
+            }
+            if (node.type === FlatGridItemType.Category) {
+                return categoryHeaderHeight + categoryHeaderPadding;
+            }
+            if (state.orientation === Orientation.Vertical && node.type === FlatGridItemType.Primitive) {
+                return verticalPrimitivePropertyHeight;
+            }
+            return categoryPropertyHeight;
+        }
+    }
+    calculateEstimatedHeight() {
+        let sum = 0;
+        for (const node of this.state.gridItems)
+            sum += this.calculateNodeHeight(node);
+        return Math.ceil(sum / this.state.gridItems.length);
+    }
+    /** @internal */
+    render() {
+        return React.createElement(ColumnResizingPropertyListPropsSupplier, { orientation: this.state.orientation, width: this.props.width, minLabelWidth: this.props.minLabelWidth, minValueWidth: this.props.minValueWidth, actionButtonWidth: this.props.actionButtonWidth }, (columnResizeContext) => (React.createElement(PropertyGridEventsRelatedPropsSupplier, { isPropertySelectionEnabled: this.props.isPropertySelectionEnabled ?? false, isPropertySelectionOnRightClickEnabled: this.props.isPropertySelectionOnRightClickEnabled, isPropertyEditingEnabled: this.props.isPropertyEditingEnabled, onPropertyContextMenu: this.props.onPropertyContextMenu, onPropertyUpdated: this.props.onPropertyUpdated, onPropertySelectionChanged: this.props.onPropertySelectionChanged, isPropertyHoverEnabled: this.props.isPropertyHoverEnabled ?? false }, (selectionContext) => {
+            const gridContext = {
+                orientation: columnResizeContext.orientation,
+                gridWidth: this.props.width,
+                isPropertyHoverEnabled: selectionContext.isPropertyHoverEnabled,
+                isPropertySelectionEnabled: selectionContext.isPropertySelectionEnabled,
+                selectedPropertyKey: selectionContext.selectedPropertyKey,
+                onPropertyClicked: selectionContext.onPropertyClicked,
+                onPropertyRightClicked: selectionContext.onPropertyRightClicked,
+                onPropertyContextMenu: selectionContext.onPropertyContextMenu,
+                editingPropertyKey: selectionContext.editingPropertyKey,
+                onEditCommit: selectionContext.onEditCommit,
+                onEditCancel: selectionContext.onEditCancel,
+                eventHandler: this.props.eventHandler,
+                dataProvider: this.props.dataProvider,
+                actionButtonRenderers: this.props.actionButtonRenderers,
+                propertyValueRendererManager: this.props.propertyValueRendererManager,
+                propertyCategoryRendererManager: this.props.propertyCategoryRendererManager,
+                columnRatio: columnResizeContext.columnRatio,
+                columnInfo: columnResizeContext.columnInfo,
+                isResizeHandleBeingDragged: columnResizeContext.isResizeHandleBeingDragged,
+                isResizeHandleHovered: columnResizeContext.isResizeHandleHovered,
+                onColumnRatioChanged: columnResizeContext.onColumnChanged,
+                onResizeHandleDragChanged: columnResizeContext.onResizeHandleDragChanged,
+                onResizeHandleHoverChanged: columnResizeContext.onResizeHandleHoverChanged,
+                highlight: this.props.highlight,
+            };
+            const renderContext = {
+                gridItems: this.state.gridItems,
+                gridEventHandler: this.props.eventHandler,
+                gridModel: this.props.model,
+                style: this.props.style,
+                className: this.props.className,
+                onItemHeightChanged: this._handleNodeHeightChange,
+                gridContext,
+            };
+            return (React.createElement(PropertyGridInternalContextProvider, { value: renderContext },
+                React.createElement("div", { className: classnames("components-virtualized-property-grid", "components-smallEditor-host") },
+                    React.createElement(VariableSizeList, { className: classnames("components-property-grid-wrapper", "ReactWindow__VariableSizeList", this.props.className), width: this.props.width, height: this.props.height, itemCount: this.state.gridItems.length, itemSize: this._calculateNodeHeightByIndex, estimatedItemSize: this.calculateEstimatedHeight(), overscanCount: 10, layout: "vertical", style: this.props.style, itemKey: this._getNodeKey, ref: this._listRef }, FlatGridItemNode))));
+        })));
+    }
+}
+const FlatGridItemNode = React.memo(({ index, style: virtualizedListStyle }) => {
+    const { gridItems, gridEventHandler, gridModel, gridContext, className, style, onItemHeightChanged } = usePropertyGridInternalContext(FlatGridItemNode);
+    const node = gridItems[index];
+    const onExpansionToggled = React.useCallback(() => gridEventHandler.onExpansionToggled(node.selectionKey), [gridEventHandler, node.selectionKey]);
+    const onHeightChanged = React.useCallback((newHeight) => onItemHeightChanged(index, node.key, newHeight), [onItemHeightChanged, index, node.key]);
+    function getDisplayNode() {
+        const lastInNumberOfCategories = node.lastInNumberOfCategories;
+        switch (node.type) {
+            case FlatGridItemType.Category:
+                const categoryRendererManager = gridContext.propertyCategoryRendererManager
+                    ?? PropertyCategoryRendererManager.defaultManager;
+                const customRenderer = categoryRendererManager.getCategoryComponent(node);
+                const wrapperClassName = classnames("virtualized-grid-node-content", customRenderer !== undefined ? "virtualized-grid-node-custom-category" : "virtualized-grid-node-category");
+                return (React.createElement(FlatItemNestedBorderWrapper, { borderCount: node.depth, bottomBorderCount: lastInNumberOfCategories, className: wrapperClassName },
+                    React.createElement(PropertyCategoryBlock, { className: className, style: style, category: node.derivedCategory, onExpansionToggled: onExpansionToggled, highlight: gridContext.highlight?.filteredTypes?.includes(FilteredType.Category) ?
+                            gridContext.highlight :
+                            undefined }, customRenderer !== undefined && (React.createElement(CustomCategoryContent, { renderer: customRenderer, categoryItem: node, gridContext: gridContext, onHeightChanged: onHeightChanged })))));
+            case FlatGridItemType.Array:
+            case FlatGridItemType.Struct:
+            case FlatGridItemType.Primitive:
+                const selectionKey = node.selectionKey;
+                const parentCategoryItem = gridModel.getItem(node.parentCategorySelectionKey);
+                return (React.createElement(FlatItemNestedBorderWrapper, { borderCount: parentCategoryItem.depth + 1, bottomBorderCount: lastInNumberOfCategories, className: "virtualized-grid-node-content" },
+                    React.createElement(FlatPropertyRenderer, { key: node.key, uniqueKey: selectionKey, propertyRecord: node.derivedRecord, orientation: gridContext.orientation, indentation: node.depth, width: gridContext.gridWidth, isHoverable: gridContext.isPropertyHoverEnabled, isSelectable: gridContext.isPropertySelectionEnabled, isSelected: selectionKey === gridContext.selectedPropertyKey, onClick: node.type === FlatGridItemType.Primitive ? gridContext.onPropertyClicked : undefined, onRightClick: node.type === FlatGridItemType.Primitive ? gridContext.onPropertyRightClicked : undefined, onContextMenu: gridContext.onPropertyContextMenu, category: parentCategoryItem.derivedCategory, isEditing: selectionKey === gridContext.editingPropertyKey, onEditCommit: gridContext.onEditCommit, onEditCancel: gridContext.onEditCancel, isExpanded: node.isExpanded, onExpansionToggled: onExpansionToggled, onHeightChanged: onHeightChanged, actionButtonRenderers: gridContext.actionButtonRenderers, propertyValueRendererManager: gridContext.propertyValueRendererManager, columnRatio: gridContext.columnRatio, columnInfo: gridContext.columnInfo, isResizeHandleBeingDragged: gridContext.isResizeHandleBeingDragged, isResizeHandleHovered: gridContext.isResizeHandleHovered, onColumnRatioChanged: gridContext.onColumnRatioChanged, onResizeHandleDragChanged: gridContext.onResizeHandleDragChanged, onResizeHandleHoverChanged: gridContext.onResizeHandleHoverChanged, highlight: gridContext.highlight ?
+                            { applyOnLabel: (gridContext.highlight.filteredTypes?.includes(FilteredType.Label)) ?? false, applyOnValue: (gridContext.highlight.filteredTypes?.includes(FilteredType.Value)) ?? false, ...gridContext.highlight } :
+                            undefined })));
+        }
+    }
+    return (React.createElement("div", { className: "virtualized-grid-node", style: virtualizedListStyle }, getDisplayNode()));
+}, areEqual);
+FlatGridItemNode.displayName = "FlatGridItemNode";
+const CustomCategoryContent = (props) => {
+    const { onHeightChanged } = props;
+    const divRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        assert(divRef.current !== null);
+        const contentHeight = divRef.current.getBoundingClientRect().height;
+        onHeightChanged(contentHeight);
+    }, [props.gridContext.orientation, onHeightChanged]);
+    return (React.createElement("div", { ref: divRef }, React.createElement(props.renderer, props)));
+};
 //# sourceMappingURL=VirtualizedPropertyGrid.js.map