diff --git a/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScrollbar.tsx b/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScrollbar.tsx index 99677c6ab2b41..8512fbce53295 100644 --- a/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScrollbar.tsx +++ b/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScrollbar.tsx @@ -42,15 +42,10 @@ export const TreeViewVirtualScrollbar = React.forwardRef( const scrollbarRef = React.useRef(null); const contentRef = React.useRef(null); - // TODO: Make dynamic - const dimensions = {}; - - const contentSize = - dimensions.minimumSize.height + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0); - - const scrollbarSize = dimensions.viewportInnerSize.height; - - const scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize.height); + const dimensions = instance.getDimensions(); + const scrollbarHeight = dimensions.viewportHeight; + const scrollbarInnerSize = + scrollbarHeight * (dimensions.contentSize / dimensions.viewportHeight); const onScrollerScroll = useEventCallback(() => { const scroller = instance.virtualScrollerRef.current!; @@ -66,7 +61,7 @@ export const TreeViewVirtualScrollbar = React.forwardRef( } isLocked.current = true; - const value = scroller.scrollTop / contentSize; + const value = scroller.scrollTop / dimensions.contentSize; scrollbar.scrollTop = value * scrollbarInnerSize; lastPosition.current = scroller.scrollTop; @@ -83,7 +78,7 @@ export const TreeViewVirtualScrollbar = React.forwardRef( isLocked.current = true; const value = scrollbar.scrollTop / scrollbarInnerSize; - scroller.scrollTop = value * contentSize; + scroller.scrollTop = value * dimensions.contentSize; }); useOnMount(() => { diff --git a/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScroller.tsx b/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScroller.tsx index 12e1f66508308..d442aa97f55a9 100644 --- a/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScroller.tsx +++ b/packages/x-tree-view-pro/src/TreeViewVirtualScroller/TreeViewVirtualScroller.tsx @@ -13,6 +13,7 @@ import { UseTreeViewVirtualizationSignature } from '../internals/plugins/useTree import { useTreeViewVirtualScroller } from './useTreeViewVirtualScroller'; import { TreeViewVirtualScrollerProps } from './TreeViewVirtualScroller.types'; import { getReleaseInfo } from '../internals/utils/releaseInfo'; +import { TreeViewVirtualScrollbar } from './TreeViewVirtualScrollbar'; const TreeViewVirtualScrollerRoot = styled('div', { name: 'MuiTreeViewVirtualScroller', @@ -44,7 +45,7 @@ export const TreeViewVirtualScroller = React.forwardRef(function TreeViewVirtual const { instance } = useTreeViewContext<[UseTreeViewVirtualizationSignature, UseTreeViewItemsSignature]>(); - const { getRootProps } = useTreeViewVirtualScroller(); + const { getRootProps, getScrollbarProps } = useTreeViewVirtualScroller(); const handleRef = useForkRef(ref, instance.virtualScrollerRef); const Root = slots.root; @@ -66,6 +67,7 @@ export const TreeViewVirtualScroller = React.forwardRef(function TreeViewVirtual slotProps={slotProps} itemsToRender={instance.getItemsToRender()} /> + ); diff --git a/packages/x-tree-view-pro/src/TreeViewVirtualScroller/useTreeViewVirtualScroller.ts b/packages/x-tree-view-pro/src/TreeViewVirtualScroller/useTreeViewVirtualScroller.ts index f344adbaccc62..3bb70b3110f2e 100644 --- a/packages/x-tree-view-pro/src/TreeViewVirtualScroller/useTreeViewVirtualScroller.ts +++ b/packages/x-tree-view-pro/src/TreeViewVirtualScroller/useTreeViewVirtualScroller.ts @@ -1,11 +1,15 @@ import * as React from 'react'; export const useTreeViewVirtualScroller = () => { - const rootRef = React.useRef(null); + const rootRef = React.useRef(null); + const scrollbarRef = React.useRef(null); const getRootProps = () => ({ ref: rootRef }); + const getScrollbarProps = () => ({ ref: scrollbarRef }); + return { getRootProps, + getScrollbarProps, }; }; diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.ts b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.ts index 7aae90ce18abc..c11cf83879a05 100644 --- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.ts +++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.ts @@ -8,6 +8,7 @@ export const useTreeViewVirtualization: TreeViewPlugin ({}) as any, }, }; }; @@ -17,4 +18,8 @@ useTreeViewVirtualization.getDefaultizedParams = (params) => ({ enableVirtualization: params.enableVirtualization ?? false, }); +useTreeViewVirtualization.getInitialState = () => ({ + virtualization: { contentSize: 0, viewportHeight: 0 }, +}); + useTreeViewVirtualization.params = { enableVirtualization: true }; diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.types.ts b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.types.ts index 582b1c491c119..f59f869c35353 100644 --- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.types.ts +++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewVirtualization/useTreeViewVirtualization.types.ts @@ -3,6 +3,7 @@ import { DefaultizedProps, TreeViewPluginSignature } from '@mui/x-tree-view/inte export interface UseTreeViewVirtualizationInstance { virtualScrollerRef: React.RefObject; + getDimensions: () => UseTreeViewVirtualizationState['virtualization']; } export interface UseTreeViewVirtualizationParameters { @@ -14,9 +15,23 @@ export type UseTreeViewVirtualizationDefaultizedParameters = DefaultizedProps< 'enableVirtualization' >; +interface UseTreeViewVirtualizationState { + virtualization: { + /** + * The viewport height. + */ + viewportHeight: number; + /** + * The minimum size to display all the items. + */ + contentSize: number; + }; +} + export type UseTreeViewVirtualizationSignature = TreeViewPluginSignature<{ params: UseTreeViewVirtualizationParameters; defaultizedParams: UseTreeViewVirtualizationDefaultizedParameters; instance: UseTreeViewVirtualizationInstance; + state: UseTreeViewVirtualizationState; dependencies: []; }>;