@itwin/components-react 4.0.0-dev.9 → 4.0.0

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

@@ -1,268 +1,272 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-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 });
-exports.VirtualizedPropertyGrid = void 0;
-/** @packageDocumentation
- * @module PropertyGrid
- */
-require("./VirtualizedPropertyGrid.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const react_window_1 = require("react-window");
-const core_bentley_1 = require("@itwin/core-bentley");
-const core_react_1 = require("@itwin/core-react");
-const UseContextWithMandatoryProvider_1 = require("../../common/UseContextWithMandatoryProvider");
-const PropertyDataFiltererBase_1 = require("../dataproviders/filterers/PropertyDataFiltererBase");
-const MutableCategorizedPrimitiveProperty_1 = require("../internal/flat-items/MutableCategorizedPrimitiveProperty");
-const MutableCustomGridCategory_1 = require("../internal/flat-items/MutableCustomGridCategory");
-const MutableFlatGridItem_1 = require("../internal/flat-items/MutableFlatGridItem");
-const MutableGridCategory_1 = require("../internal/flat-items/MutableGridCategory");
-const FlatPropertyRenderer_1 = require("../internal/flat-properties/FlatPropertyRenderer");
-const PropertyCategoryRendererManager_1 = require("../PropertyCategoryRendererManager");
-const ColumnResizingPropertyListPropsSupplier_1 = require("./ColumnResizingPropertyListPropsSupplier");
-const FlatItemNestedBorderWrapper_1 = require("./FlatItemNestedBorderWrapper");
-const PropertyCategoryBlock_1 = require("./PropertyCategoryBlock");
-const PropertyGridCommons_1 = require("./PropertyGridCommons");
-const PropertyGridEventsRelatedPropsSupplier_1 = require("./PropertyGridEventsRelatedPropsSupplier");
-const [PropertyGridInternalContextProvider, _PropertyGridInternalContextConsumer, usePropertyGridInternalContext,] = (0, UseContextWithMandatoryProvider_1.createContextWithMandatoryProvider)("PropertyGridInternalContext");
-/**
- * VirtualizedPropertyGrid React component.
- * @public
- */
-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 : core_react_1.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_1.MutableCategorizedPrimitiveProperty && this.props.highlight.activeHighlight.highlightedItemIdentifier === item.derivedRecord.property.name
-                    || item instanceof MutableGridCategory_1.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_1.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 = 35;
-        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_1.MutableCustomGridCategory) {
-                    return categoryHeaderHeight + categoryHeaderPadding
-                        + (node.isExpanded ? dynamicHeight + bottomBorderPadding : 0);
-                }
-                return dynamicHeight + (state.orientation === core_react_1.Orientation.Vertical ? 28 : 0);
-            }
-            if (node.type === MutableFlatGridItem_1.FlatGridItemType.Category) {
-                return categoryHeaderHeight + categoryHeaderPadding;
-            }
-            if (state.orientation === core_react_1.Orientation.Vertical && node.type === MutableFlatGridItem_1.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_1.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_1.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: (0, classnames_1.default)("components-virtualized-property-grid", "components-smallEditor-host") },
-                        React.createElement(react_window_1.VariableSizeList, { className: (0, classnames_1.default)("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))));
-            }));
-        });
-    }
-}
-exports.VirtualizedPropertyGrid = VirtualizedPropertyGrid;
-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 MutableFlatGridItem_1.FlatGridItemType.Category:
-                const categoryRendererManager = (_a = gridContext.propertyCategoryRendererManager) !== null && _a !== void 0 ? _a : PropertyCategoryRendererManager_1.PropertyCategoryRendererManager.defaultManager;
-                const customRenderer = categoryRendererManager.getCategoryComponent(node);
-                const wrapperClassName = (0, classnames_1.default)("virtualized-grid-node-content", customRenderer !== undefined ? "virtualized-grid-node-custom-category" : "virtualized-grid-node-category");
-                return (React.createElement(FlatItemNestedBorderWrapper_1.FlatItemNestedBorderWrapper, { borderCount: node.depth, bottomBorderCount: lastInNumberOfCategories, className: wrapperClassName },
-                    React.createElement(PropertyCategoryBlock_1.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(PropertyDataFiltererBase_1.FilteredType.Category)) ?
-                            gridContext.highlight :
-                            undefined }, customRenderer !== undefined && (React.createElement(CustomCategoryContent, { renderer: customRenderer, categoryItem: node, gridContext: gridContext, onHeightChanged: onHeightChanged })))));
-            case MutableFlatGridItem_1.FlatGridItemType.Array:
-            case MutableFlatGridItem_1.FlatGridItemType.Struct:
-            case MutableFlatGridItem_1.FlatGridItemType.Primitive:
-                const selectionKey = node.selectionKey;
-                const parentCategoryItem = gridModel.getItem(node.parentCategorySelectionKey);
-                return (React.createElement(FlatItemNestedBorderWrapper_1.FlatItemNestedBorderWrapper, { borderCount: parentCategoryItem.depth + 1, bottomBorderCount: lastInNumberOfCategories, className: "virtualized-grid-node-content" },
-                    React.createElement(FlatPropertyRenderer_1.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 === MutableFlatGridItem_1.FlatGridItemType.Primitive ? gridContext.onPropertyClicked : undefined, onRightClick: node.type === MutableFlatGridItem_1.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(PropertyDataFiltererBase_1.FilteredType.Label))) !== null && _e !== void 0 ? _e : false, applyOnValue: (_g = ((_f = gridContext.highlight.filteredTypes) === null || _f === void 0 ? void 0 : _f.includes(PropertyDataFiltererBase_1.FilteredType.Value))) !== null && _g !== void 0 ? _g : false, ...gridContext.highlight } :
-                            undefined })));
-        }
-    }
-    return (React.createElement("div", { className: "virtualized-grid-node", style: virtualizedListStyle }, getDisplayNode()));
-}, react_window_1.areEqual);
-FlatGridItemNode.displayName = "FlatGridItemNode";
-const CustomCategoryContent = (props) => {
-    const { onHeightChanged } = props;
-    const divRef = React.useRef(null);
-    React.useLayoutEffect(() => {
-        (0, core_bentley_1.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)));
-};
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualizedPropertyGrid = void 0;
+/** @packageDocumentation
+ * @module PropertyGrid
+ */
+require("./VirtualizedPropertyGrid.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const react_window_1 = require("react-window");
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const UseContextWithMandatoryProvider_1 = require("../../common/UseContextWithMandatoryProvider");
+const PropertyDataFiltererBase_1 = require("../dataproviders/filterers/PropertyDataFiltererBase");
+const MutableCategorizedPrimitiveProperty_1 = require("../internal/flat-items/MutableCategorizedPrimitiveProperty");
+const MutableCustomGridCategory_1 = require("../internal/flat-items/MutableCustomGridCategory");
+const MutableFlatGridItem_1 = require("../internal/flat-items/MutableFlatGridItem");
+const MutableGridCategory_1 = require("../internal/flat-items/MutableGridCategory");
+const FlatPropertyRenderer_1 = require("../internal/flat-properties/FlatPropertyRenderer");
+const PropertyCategoryRendererManager_1 = require("../PropertyCategoryRendererManager");
+const ColumnResizingPropertyListPropsSupplier_1 = require("./ColumnResizingPropertyListPropsSupplier");
+const FlatItemNestedBorderWrapper_1 = require("./FlatItemNestedBorderWrapper");
+const PropertyCategoryBlock_1 = require("./PropertyCategoryBlock");
+const PropertyGridCommons_1 = require("./PropertyGridCommons");
+const PropertyGridEventsRelatedPropsSupplier_1 = require("./PropertyGridEventsRelatedPropsSupplier");
+const [PropertyGridInternalContextProvider, _PropertyGridInternalContextConsumer, usePropertyGridInternalContext,] = (0, UseContextWithMandatoryProvider_1.createContextWithMandatoryProvider)("PropertyGridInternalContext");
+/**
+ * VirtualizedPropertyGrid React component.
+ * @public
+ */
+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 : core_react_1.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_1.MutableCategorizedPrimitiveProperty && this.props.highlight.activeHighlight.highlightedItemIdentifier === item.derivedRecord.property.name
+                    || item instanceof MutableGridCategory_1.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_1.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_1.MutableCustomGridCategory) {
+                    return categoryHeaderHeight + categoryHeaderPadding
+                        + (node.isExpanded ? dynamicHeight + bottomBorderPadding : 0);
+                }
+                return dynamicHeight + (state.orientation === core_react_1.Orientation.Vertical ? 28 : 0);
+            }
+            if (node.type === MutableFlatGridItem_1.FlatGridItemType.Category) {
+                return categoryHeaderHeight + categoryHeaderPadding;
+            }
+            if (state.orientation === core_react_1.Orientation.Vertical && node.type === MutableFlatGridItem_1.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_1.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_1.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: (0, classnames_1.default)("components-virtualized-property-grid", "components-smallEditor-host") },
+                        React.createElement(react_window_1.VariableSizeList, { className: (0, classnames_1.default)("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))));
+            }));
+        });
+    }
+}
+exports.VirtualizedPropertyGrid = VirtualizedPropertyGrid;
+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 MutableFlatGridItem_1.FlatGridItemType.Category:
+                const categoryRendererManager = (_a = gridContext.propertyCategoryRendererManager) !== null && _a !== void 0 ? _a : PropertyCategoryRendererManager_1.PropertyCategoryRendererManager.defaultManager;
+                const customRenderer = categoryRendererManager.getCategoryComponent(node);
+                const wrapperClassName = (0, classnames_1.default)("virtualized-grid-node-content", customRenderer !== undefined ? "virtualized-grid-node-custom-category" : "virtualized-grid-node-category");
+                return (React.createElement(FlatItemNestedBorderWrapper_1.FlatItemNestedBorderWrapper, { borderCount: node.depth, bottomBorderCount: lastInNumberOfCategories, className: wrapperClassName },
+                    React.createElement(PropertyCategoryBlock_1.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(PropertyDataFiltererBase_1.FilteredType.Category)) ?
+                            gridContext.highlight :
+                            undefined }, customRenderer !== undefined && (React.createElement(CustomCategoryContent, { renderer: customRenderer, categoryItem: node, gridContext: gridContext, onHeightChanged: onHeightChanged })))));
+            case MutableFlatGridItem_1.FlatGridItemType.Array:
+            case MutableFlatGridItem_1.FlatGridItemType.Struct:
+            case MutableFlatGridItem_1.FlatGridItemType.Primitive:
+                const selectionKey = node.selectionKey;
+                const parentCategoryItem = gridModel.getItem(node.parentCategorySelectionKey);
+                return (React.createElement(FlatItemNestedBorderWrapper_1.FlatItemNestedBorderWrapper, { borderCount: parentCategoryItem.depth + 1, bottomBorderCount: lastInNumberOfCategories, className: "virtualized-grid-node-content" },
+                    React.createElement(FlatPropertyRenderer_1.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 === MutableFlatGridItem_1.FlatGridItemType.Primitive ? gridContext.onPropertyClicked : undefined, onRightClick: node.type === MutableFlatGridItem_1.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(PropertyDataFiltererBase_1.FilteredType.Label))) !== null && _e !== void 0 ? _e : false, applyOnValue: (_g = ((_f = gridContext.highlight.filteredTypes) === null || _f === void 0 ? void 0 : _f.includes(PropertyDataFiltererBase_1.FilteredType.Value))) !== null && _g !== void 0 ? _g : false, ...gridContext.highlight } :
+                            undefined })));
+        }
+    }
+    return (React.createElement("div", { className: "virtualized-grid-node", style: virtualizedListStyle }, getDisplayNode()));
+}, react_window_1.areEqual);
+FlatGridItemNode.displayName = "FlatGridItemNode";
+const CustomCategoryContent = (props) => {
+    const { onHeightChanged } = props;
+    const divRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        (0, core_bentley_1.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