@rio-cloud/rio-uikit 1.7.1 → 1.9.0

package/BarList.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/barList/BarList';
+export * from './components/barList/BarList';

package/BarList.js

@@ -0,0 +1,2 @@
+export { default } from './components/barList/BarList';
+export * from './components/barList/BarList';

package/README.md

@@ -4,6 +4,10 @@
 
 The documentation and how to integrate the UIKIT in your project can be found here: https://uikit.developers.rio.cloud/
 
+## Changelog
+
+All changes, updates, and improvements for each version are documented in the changelog (https://uikit.developers.rio.cloud/#start/changelog). Refer to it for a detailed overview of new features, bug fixes, and other modifications.
+
 ## Release
 
 Starting with version `0.12.8`, all versions of the uikit will be available under https://uikit.developers.rio.cloud/${VERSION}/.

package/SaveableDateInput.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/saveableInput/SaveableDateInput';
+export * from './components/saveableInput/SaveableDateInput';

package/SaveableDateInput.js

@@ -0,0 +1,2 @@
+export { default } from './components/saveableInput/SaveableDateInput';
+export * from './components/saveableInput/SaveableDateInput';

package/SvgImage.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/svgImage/SvgImage';
+export * from './components/svgImage/SvgImage';

package/SvgImage.js

@@ -0,0 +1,2 @@
+export { default } from './components/svgImage/SvgImage';
+export * from './components/svgImage/SvgImage';

package/TableCol.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/table/TableCol';
+export * from './components/table/TableCol';

package/TableCol.js

@@ -0,0 +1,2 @@
+export { default } from './components/table/TableCol';
+export * from './components/table/TableCol';

package/TableHead.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/table/TableHead';
+export * from './components/table/TableHead';

package/TableHead.js

@@ -0,0 +1,2 @@
+export { default } from './components/table/TableHead';
+export * from './components/table/TableHead';

package/components/actionBarItem/ActionBarItemIcon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 const ActionBarItemIcon = forwardRef((props, ref) => {

package/components/actionBarItem/ActionBarOverlay.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';

package/components/activity/Activity.d.ts

@@ -7,13 +7,13 @@ declare const STATUS_MAP: {
     readonly RESTING: "resting";
     readonly WORKING: "working";
 };
-type ActivityStatus = ObjectValues<typeof STATUS_MAP>;
+export type ActivityStatus = ObjectValues<typeof STATUS_MAP>;
 declare const SIZE_MAP: {
     readonly SIZE_SM: "sm";
     readonly SIZE_LG: "lg";
     readonly SIZE_XL: "xl";
 };
-type ActivitySize = ObjectValues<typeof SIZE_MAP>;
+export type ActivitySize = ObjectValues<typeof SIZE_MAP>;
 export type ActivityProps = {
     /**
      * Defines the type of activity.

package/components/applicationHeader/CollapsedNavItem.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef } from 'react';
 import isEmpty from 'lodash/fp/isEmpty';
 const CollapsedNavItem = forwardRef((props, ref) => {

package/components/assetTree/Tree.d.ts

@@ -150,6 +150,14 @@ export type TreeProps = {
      * @default false
      */
     hideSummary?: boolean;
+    /**
+     * Callback triggered when the built-in asset type filter changes.
+     * This is only available when the default summary is used.
+     *
+     * @param type
+     * @returns
+     */
+    onTypeFilterChange?: (currentTypes: string[]) => void;
     /**
      * Defines whether the entire area below the search field is shown or not. Note: Disabling the
      * tree head will hide the select all checkbox and the tree options as well as the tree summary.
@@ -192,6 +200,18 @@ export type TreeProps = {
      * @default false
      */
     disableAnimation?: boolean;
+    /**
+     * The number of items (including groups and children) used for virtualizing the tree.
+     *
+     * @default 50
+     */
+    virtualizeThreshold?: number;
+    /**
+     * The number of items rendered beyond the visible area of a virtualized tree.
+     *
+     * @default 5
+     */
+    overscan?: number;
     /**
      * Additional classes added to the wrapping element.
      */

package/components/assetTree/Tree.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-use-before-define */
-import React, { useEffect, useReducer, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useReducer, useRef } from 'react';
 import classNames from 'classnames';
 import isNil from 'lodash/fp/isNil';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -27,6 +27,11 @@ import TreeRoot from './TreeRoot';
 import TypeCounter from './TypeCounter';
 import { containsItemById, debounceFn, filterAssetByType, filterEmptyGroups, filterOutByItemId, getTypeCounts, getFlatItems, getListIds, notEmpty, notEqual, excludeFromList, getMappedItemsToGroups, sortGroupItemsByName, sortGroupsByName, addOrRemoveFromList, } from './treeUtils';
 import { treeReducer, assetCounted, allCheckedChanged, visibleTypeCountersChanged, searchValueChanged, flatItemsChanged, emptyGroupsChanged, groupedItemsChanged, typeFilterChanged, } from './treeReducer';
+import { useTreeVirtualization } from './useTreeVirtualization';
+import { useTreeExpansion } from './useTreeExpansion';
+import { useTreeHeight } from './useTreeHeight';
+import { useTreeScrollPosition } from './useTreeScrollPosition';
+import SmoothScrollbars from '../../SmoothScrollbars';
 export { getTypeCounts, getSubTypeCounts } from './treeUtils';
 const filterProps = omit([
     'expandedGroups',
@@ -36,8 +41,10 @@ const filterProps = omit([
     'treeOptions',
 ]);
 const customCompare = (prevProps, nextProps) => isEqual(filterProps(prevProps), filterProps(nextProps));
+const VIRTUALIZED_THRESHOLD = 50;
+const DEFAULT_VIRTUALIZED_OVERSCAN = 5;
 const Tree = React.memo((props) => {
-    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false, ...remainingProps } = props;
+    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false, onTypeFilterChange = noop, virtualizeThreshold = VIRTUALIZED_THRESHOLD, overscan = DEFAULT_VIRTUALIZED_OVERSCAN, ...remainingProps } = props;
     const [state, dispatch] = useReducer(treeReducer, {
         groupedItems: [],
         flatItems: [],
@@ -52,7 +59,26 @@ const Tree = React.memo((props) => {
     const previousItems = useRef();
     const previousGroups = useRef();
     const previousSearchValue = useRef('');
-    const internalExpandedGroups = useRef(expandedGroups);
+    const { internalExpandedGroups, handleToggleNode } = useTreeExpansion(props.expandedGroups, props.onExpandGroupsChange);
+    const hasGroups = () => groups && notEmpty(groups);
+    const hasInternalSearchValue = () => notEmpty(state.searchValue);
+    const hasSearchAndGroups = () => hasInternalSearchValue() && hasGroups();
+    const hasNoSearchAndGroups = () => !hasInternalSearchValue() && hasGroups();
+    const scrollElementRef = useRef(null);
+    const { virtualizedItems, virtualizer } = useTreeVirtualization(state.groupedItems, state.flatItems, hasInternalSearchValue(), hasGroups(), internalExpandedGroups, scrollElementRef, overscan);
+    const { scrollToTop } = useTreeScrollPosition(virtualizer, scrollElementRef);
+    // Enhance the handleToggleNode function
+    const enhancedHandleToggleNode = useCallback((nodeId) => {
+        // Execute the original toggle logic
+        handleToggleNode(nodeId);
+    }, [handleToggleNode]);
+    // Create a callback for scroll events that works with the virtualizer
+    const handleVirtualizedScroll = useCallback((event) => {
+        if (virtualizer && event?.target) {
+            const scrollElement = event.target;
+            virtualizer.scrollToOffset(scrollElement.scrollTop, { align: 'start' });
+        }
+    }, [virtualizer]);
     useEffect(() => {
         // Update Tree when items or groups have changed
         if (notEqual(previousItems.current, items) || notEqual(previousGroups.current, groups)) {
@@ -79,12 +105,6 @@ const Tree = React.memo((props) => {
     useEffect(() => makeTree(groups, items), [state.typeFilter]);
     // Update tree when empty groups are toggled from outside
     useEffect(() => makeTree(groups, items), [showEmptyGroups]);
-    // Update expanded groups from outside
-    const [previousExpandedGroups, setPreviousExpandedGroups] = useState(expandedGroups);
-    if (!isEqual(expandedGroups, previousExpandedGroups)) {
-        internalExpandedGroups.current = expandedGroups;
-        setPreviousExpandedGroups(expandedGroups);
-    }
     // Update "select all" state from outside when groups are selected outside programmatically
     // without using the "select all" checkbox
     useEffect(() => {
@@ -115,28 +135,6 @@ const Tree = React.memo((props) => {
         const unselectedItems = updatedItems.filter(filterOutByItemId(updatedSelectedItems));
         return isEmpty(unselectedItems);
     };
-    const handleToggleNode = (nodeId) => {
-        const nodeContainer = getNodeContainerDomElementById(nodeId);
-        if (!internalExpandedGroups?.current || !nodeContainer) {
-            return;
-        }
-        const openGroups = internalExpandedGroups.current;
-        const newExpandedNodes = openGroups.includes(nodeId)
-            ? openGroups.filter(item => item !== nodeId)
-            : [...openGroups, nodeId];
-        // Performance improvement to skip on render cycle and change "open" class directly
-        if (openGroups.includes(nodeId)) {
-            nodeContainer.classList.remove('open');
-        }
-        else {
-            nodeContainer.classList.add('open');
-        }
-        internalExpandedGroups.current = newExpandedNodes;
-        onExpandGroupsChange(newExpandedNodes);
-    };
-    const getNodeContainerDomElementById = (nodeId) => {
-        return treeRef?.current?.querySelector(`.TreeNodeContainer[data-id="${nodeId}"]`);
-    };
     const selectAllSearchResultItems = (shouldSelect) => selectAllFlatItems(shouldSelect);
     const handleSelectAll = (shouldSelect, isStateIndeterminate) => {
         const shouldSelectAll = shouldSelect && !isStateIndeterminate;
@@ -178,10 +176,13 @@ const Tree = React.memo((props) => {
     const handleSearchChange = (updatedSearchValue) => {
         onSearchChange(updatedSearchValue);
         dispatch(searchValueChanged(updatedSearchValue));
+        if (virtualizer) {
+            // Every time search changes or is cleared, scroll to the top
+            setTimeout(() => {
+                scrollToTop();
+            }, 10);
+        }
     };
-    const hasGroups = () => groups && notEmpty(groups);
-    const hasSearchAndGroups = () => hasInternalSearchValue() && hasGroups();
-    const hasNoSearchAndGroups = () => !hasInternalSearchValue() && hasGroups();
     const setFlatItemList = (updatedItems, searchValue) => {
         const flatItems = getFlatItems(updatedItems, searchValue);
         dispatch(flatItemsChanged(flatItems));
@@ -218,30 +219,64 @@ const Tree = React.memo((props) => {
             [otherwise, setFlatItems],
         ])();
     };
+    const containerHeight = useTreeHeight(treeRef, scrollHeight);
+    const renderVirtualizedTree = () => {
+        const items = virtualizer.getVirtualItems();
+        const isGroupedList = hasGroups() && !hasInternalSearchValue();
+        return (_jsx(SmoothScrollbars, { ref: scrollElementRef, className: 'tree-virtual-scrollbar', onScroll: handleVirtualizedScroll, autoHeight: false, slideIn: true, style: {
+                height: `${containerHeight}px`,
+            }, children: _jsx("div", { className: isGroupedList ? 'grouped-list' : 'flat-list', style: {
+                    height: `${virtualizer.getTotalSize()}px`,
+                    position: 'relative',
+                }, children: items.map(virtualItem => {
+                    const item = virtualizedItems[virtualItem.index];
+                    if (!item) {
+                        return null;
+                    }
+                    const isGroupSelected = selectedGroups.includes(item.id) ||
+                        (item.type === 'leaf' && selectedGroups.includes(item.groupId));
+                    return (_jsx("div", { "data-index": virtualItem.index, ref: virtualizer.measureElement, className: `virtualized-tree-item ${item.type === 'group' ? 'group-item' : 'leaf-item'} ${isGroupSelected ? 'checked' : ''}`, style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: `${virtualItem.size}px`,
+                            transform: `translateY(${virtualItem.start}px)`,
+                        }, children: item.type === 'group' ? (_jsx(TreeNodeContainer, { groupId: item.id, isOpen: item.isExpanded, disableAnimation: disableAnimation, children: _jsx(TreeNode, { node: item.data, hasMultiselect: hasMultiselect, onToggleNode: enhancedHandleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: !isGroupSelected &&
+                                    item.data.items.some(groupItem => selectedItems.includes(groupItem.id)) }) }, item.id)) : (
+                        // Render individual leaf item with proper styling
+                        _jsx(TreeNodeContainer, { isOpen: true, disableAnimation: disableAnimation, children: _jsx(TreeLeafList, { leafList: [item.data], hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }) }, item.id)) }, `${item.type}-${item.id}-${virtualItem.index}`));
+                }) }) }));
+    };
     const renderTree = () => {
         const { groupedItems } = state;
         if (isEmpty(groupedItems)) {
             return _jsx(TreeNothingFound, {});
         }
+        if (virtualizedItems.length > virtualizeThreshold) {
+            return renderVirtualizedTree();
+        }
         const result = map((group) => {
             const groupId = group.id;
             const groupItems = group.items;
-            const isOpen = internalExpandedGroups.current?.includes(groupId) ?? false;
+            const isOpen = internalExpandedGroups?.includes(groupId) ?? false;
             const numSelectedGroupItems = filter(containsItemById(selectedItems))(groupItems).length;
             const isGroupSelected = selectedGroups.includes(groupId);
             const isStateIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
-            return (_jsxs(TreeNodeContainer, { groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation, children: [_jsx(TreeNode, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate }), _jsx(TreeLeafList, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection })] }, groupId));
+            return (_jsxs(TreeNodeContainer, { groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation, children: [_jsx(TreeNode, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate }), isOpen && (_jsx(TreeLeafList, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }))] }, groupId));
         })(groupedItems);
         return result;
     };
     const renderFlatList = () => {
         const { flatItems } = state;
         const hasLeafs = isEmpty(flatItems);
+        if (virtualizedItems.length > virtualizeThreshold) {
+            return renderVirtualizedTree();
+        }
         const getLeafs = () => (_jsx(TreeLeafList, { leafList: flatItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }));
         return (_jsx(TreeNodeContainer, { disableAnimation: disableAnimation, isOpen: true, children: hasLeafs ? _jsx(TreeNothingFound, {}) : getLeafs() }));
     };
     const hasExternalGroups = notEmpty(groups);
-    const hasInternalSearchValue = () => notEmpty(state.searchValue);
     const hasSelectedAllItems = () => isEqual(size(selectedItems), size(state.flatItems));
     const hasPartiallySelectedItems = () => notEmpty(selectedItems) && !hasSelectedAllItems();
     const hasSelectedAllGroups = () => {
@@ -261,7 +296,9 @@ const Tree = React.memo((props) => {
         [otherwise, () => renderFlatList()],
     ])();
     const handleFilterByType = (type) => {
-        dispatch(typeFilterChanged(addOrRemoveFromList(state.typeFilter, type)));
+        const updatedTypeFilter = addOrRemoveFromList(state.typeFilter, type);
+        dispatch(typeFilterChanged(updatedTypeFilter));
+        onTypeFilterChange(updatedTypeFilter);
     };
     const enableActivity = size(state.visibleTypeCounters) !== 1;
     const isFilterActive = notEmpty(state.typeFilter);

package/components/assetTree/TreeLeaf.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React from 'react';
 import classNames from 'classnames';
 import isObject from 'lodash/fp/isObject';

package/components/assetTree/TreeNodeContainer.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type TreeNodeContainerProps = {
     isOpen: boolean;
     groupId?: string;

package/components/assetTree/TreeSearch.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';

package/components/assetTree/TreeSummary.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React from 'react';
 import classNames from 'classnames';
 import TypeCounter from './TypeCounter';

package/components/assetTree/TypeCounter.d.ts

@@ -33,6 +33,8 @@ export type TypeCounterProps = {
     hideOnZero?: boolean;
     /**
      * Callback function when the counter is clicked. It returns the type value.
+     * Make sure the "type" prop is defined to receive the value in the callback.
+     *
      * @param type
      * @returns
      */

package/components/assetTree/TypeCounter.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef, useRef } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';

package/components/assetTree/useTreeExpansion.d.ts

@@ -0,0 +1,4 @@
+export declare const useTreeExpansion: (expandedGroups?: string[], onExpandGroupsChange?: (groups: string[]) => void) => {
+    internalExpandedGroups: string[] | undefined;
+    handleToggleNode: (nodeId: string) => void;
+};

package/components/assetTree/useTreeExpansion.js

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { isEqual } from 'lodash/fp';
+export const useTreeExpansion = (expandedGroups, onExpandGroupsChange) => {
+    const [internalExpandedGroups, setInternalExpandedGroups] = useState(expandedGroups);
+    const [previousExpandedGroups, setPreviousExpandedGroups] = useState(expandedGroups);
+    // Sync with external prop changes and update expanded groups from outside in case
+    if (!isEqual(expandedGroups, previousExpandedGroups)) {
+        setInternalExpandedGroups(expandedGroups);
+        setPreviousExpandedGroups(expandedGroups);
+    }
+    const handleToggleNode = (nodeId) => {
+        if (!internalExpandedGroups) {
+            return;
+        }
+        const newExpandedNodes = internalExpandedGroups.includes(nodeId)
+            ? internalExpandedGroups.filter(item => item !== nodeId)
+            : [...internalExpandedGroups, nodeId];
+        setInternalExpandedGroups(newExpandedNodes);
+        onExpandGroupsChange?.(newExpandedNodes);
+    };
+    return {
+        internalExpandedGroups,
+        handleToggleNode,
+    };
+};

package/components/assetTree/useTreeHeight.d.ts

@@ -0,0 +1 @@
+export declare const useTreeHeight: (treeRef: React.RefObject<HTMLDivElement>, scrollHeight?: number) => number;

package/components/assetTree/useTreeHeight.js

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+const DEFAULT_TREE_ROOT_HEIGHT = 300;
+export const useTreeHeight = (treeRef, scrollHeight) => {
+    const [containerHeight, setContainerHeight] = useState(350);
+    // Enhanced height calculation with multiple fallback strategies
+    useEffect(() => {
+        const calculateHeight = () => {
+            if (!treeRef.current) {
+                return DEFAULT_TREE_ROOT_HEIGHT;
+            }
+            const parentElement = treeRef.current;
+            const treeHeaderElement = parentElement.querySelector('.TreeHeader');
+            if (scrollHeight) {
+                // Use scrollHeight prop if provided
+                return scrollHeight;
+            }
+            const treeRoot = treeRef.current.querySelector('.TreeRoot');
+            return treeRoot?.clientHeight ?? DEFAULT_TREE_ROOT_HEIGHT;
+        };
+        const updateHeight = () => {
+            const newHeight = calculateHeight();
+            setContainerHeight(newHeight);
+        };
+        // Debounce height updates to avoid excessive recalculations
+        let timeoutId;
+        const debouncedUpdate = () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(updateHeight, 16); // ~60fps
+        };
+        // Initial calculation with small delay to ensure DOM is ready
+        const initialTimeout = setTimeout(updateHeight, 50);
+        // Set up observers
+        const resizeObserver = new ResizeObserver(debouncedUpdate);
+        const mutationObserver = new MutationObserver(debouncedUpdate);
+        if (treeRef.current) {
+            // Watch parent for size changes
+            resizeObserver.observe(treeRef.current);
+            if (treeRef.current.parentElement) {
+                resizeObserver.observe(treeRef.current.parentElement);
+            }
+            // Watch for DOM changes that might affect layout
+            mutationObserver.observe(treeRef.current, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['style', 'class'],
+            });
+        }
+        // Window resize listener
+        window.addEventListener('resize', debouncedUpdate);
+        return () => {
+            clearTimeout(initialTimeout);
+            clearTimeout(timeoutId);
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            window.removeEventListener('resize', debouncedUpdate);
+        };
+    }, [scrollHeight, treeRef]); // Re-run if scrollHeight prop changes or treeRef changes
+    return containerHeight;
+};

package/components/assetTree/useTreeScrollPosition.d.ts

@@ -0,0 +1,3 @@
+export declare const useTreeScrollPosition: (virtualizer: any, scrollElementRef: React.RefObject<any>) => {
+    scrollToTop: () => void;
+};

package/components/assetTree/useTreeScrollPosition.js

@@ -0,0 +1,19 @@
+import { useCallback, useRef } from 'react';
+export const useTreeScrollPosition = (virtualizer, scrollElementRef) => {
+    const scrollOffsetRef = useRef(0);
+    const scrollToTop = useCallback(() => {
+        if (scrollElementRef.current) {
+            requestAnimationFrame(() => {
+                // Reset scroll position to top
+                scrollElementRef.current.scrollTop(0);
+                // Also reset the stored scroll offset
+                scrollOffsetRef.current = 0;
+                // Force virtualizer to sync
+                if (virtualizer) {
+                    virtualizer.scrollToOffset(0);
+                }
+            });
+        }
+    }, [scrollElementRef, virtualizer]);
+    return { scrollToTop };
+};

package/components/assetTree/useTreeVirtualization.d.ts

@@ -0,0 +1,17 @@
+import type { TreeItem, GroupedItem } from './Tree';
+type VirtualizedItem = {
+    type: 'group';
+    data: GroupedItem;
+    id: string;
+    isExpanded: boolean;
+} | {
+    type: 'leaf';
+    data: TreeItem;
+    id: string;
+    groupId: string;
+};
+export declare const useTreeVirtualization: (groupedItems: GroupedItem[], flatItems: TreeItem[], hasSearchValue: boolean, hasGroups: boolean, internalExpandedGroups: string[] | undefined, scrollElementRef: React.RefObject<HTMLDivElement>, overscan: number) => {
+    virtualizedItems: VirtualizedItem[];
+    virtualizer: import("@tanstack/virtual-core").Virtualizer<any, Element>;
+};
+export {};

package/components/assetTree/useTreeVirtualization.js

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import map from 'lodash/fp/map';
+import { useVirtualizer } from '@tanstack/react-virtual';
+export const useTreeVirtualization = (groupedItems, flatItems, hasSearchValue, hasGroups, internalExpandedGroups, scrollElementRef, overscan) => {
+    const virtualizedItems = useMemo(() => {
+        // When there's a search value, always show flat items (no groups)
+        if (hasSearchValue) {
+            return flatItems.map((item) => ({
+                type: 'leaf',
+                data: item,
+                id: item.id,
+            }));
+        }
+        // Virtualize grouped list, when there's no search value and we have groups
+        if (hasGroups) {
+            const flatList = [];
+            map((group) => {
+                const isExpanded = internalExpandedGroups?.includes(group.id) ?? false;
+                // Add the group header
+                flatList.push({
+                    type: 'group',
+                    data: group,
+                    id: group.id,
+                    isExpanded,
+                });
+                // Add expanded items
+                if (isExpanded) {
+                    group.items.forEach((item) => {
+                        flatList.push({
+                            type: 'leaf',
+                            data: item,
+                            id: item.id,
+                            groupId: group.id,
+                        });
+                    });
+                }
+            })(groupedItems);
+            return flatList;
+        }
+        // Virtualize flat list when no groups are provided initially
+        return flatItems.map((item) => ({
+            type: 'leaf',
+            data: item,
+            id: item.id,
+        }));
+    }, [groupedItems, flatItems, hasSearchValue, hasGroups, internalExpandedGroups]);
+    const virtualizer = useVirtualizer({
+        count: virtualizedItems.length,
+        // getScrollElement: () => scrollElementRef.current,
+        getScrollElement: () => {
+            // For SmoothScrollbars, we need to get the actual scroll container
+            if (scrollElementRef.current) {
+                // SmoothScrollbars exposes the scroll container through its view
+                const scrollbarsInstance = scrollElementRef.current;
+                // Access the internal scroll container
+                // This depends on how react-custom-scrollbars-2 exposes its internals
+                return scrollbarsInstance?.view;
+            }
+            return null;
+        },
+        estimateSize: () => 41, // typical single line height without line-break
+        measureElement: element => {
+            // This will measure the actual rendered height for more accuracy
+            return element?.children[0].clientHeight ?? 41;
+        },
+        overscan, // Render 10 extra items above and below visible area
+        // Add this to enable more aggressive remeasurement
+        lanes: 1,
+    });
+    return { virtualizedItems, virtualizer };
+};

package/components/autosuggest/AutoSuggest.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: <explanation>
 import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -21,7 +22,7 @@ export const AutoSuggest = (props) => {
         onClear: noop,
         onBlur: noop,
         onFocus: noop,
-        placeholder: 'Start typing ...',
+        placeholder: 'Start typing',
         hasError: false,
         tabIndex: 0,
         value: undefined,