From 84b9b6554944b2aa26402a8925febc5efb11feb3 Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 21 Nov 2024 15:57:02 +0100 Subject: [PATCH] [TreeView] Remove treeId from the item context --- .../src/TreeItemProvider/TreeItemProvider.tsx | 5 ++++- .../corePlugins/useTreeViewId/useTreeViewId.ts | 3 --- .../useTreeViewId/useTreeViewId.types.ts | 5 ----- .../plugins/useTreeViewFocus/useTreeViewFocus.ts | 14 +++++++++----- .../useTreeViewJSXItems/useTreeViewJSXItems.tsx | 5 ++++- .../x-tree-view/src/useTreeItem/useTreeItem.ts | 3 ++- test/utils/tree-view/fakeContextValue.ts | 1 - 7 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx b/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx index 6994ee378e95..30036f8078b4 100644 --- a/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx +++ b/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx @@ -2,13 +2,16 @@ import PropTypes from 'prop-types'; import { TreeItemProviderProps } from './TreeItemProvider.types'; import { useTreeViewContext } from '../internals/TreeViewProvider'; import { generateTreeItemIdAttribute } from '../internals/corePlugins/useTreeViewId/useTreeViewId.utils'; +import { useSelector } from '../internals/hooks/useSelector'; +import { selectorTreeViewId } from '../internals/corePlugins/useTreeViewId/useTreeViewId.selectors'; /** * @ignore - internal component. */ function TreeItemProvider(props: TreeItemProviderProps) { const { children, itemId, id } = props; - const { wrapItem, instance, treeId } = useTreeViewContext<[]>(); + const { wrapItem, instance, store } = useTreeViewContext<[]>(); + const treeId = useSelector(store, selectorTreeViewId); const idAttribute = generateTreeItemIdAttribute({ itemId, treeId, id }); return wrapItem({ children, itemId, instance, idAttribute }); diff --git a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts index c6c0489eb589..542f1591781e 100644 --- a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts +++ b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts @@ -21,13 +21,10 @@ export const useTreeViewId: TreeViewPlugin = ({ params, const treeId = useSelector(store, selectorTreeViewId); - const pluginContextValue = React.useMemo(() => ({ treeId }), [treeId]); - return { getRootProps: () => ({ id: treeId, }), - contextValue: pluginContextValue, }; }; diff --git a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts index 6704907447de..d583f9ab9059 100644 --- a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts +++ b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts @@ -17,13 +17,8 @@ export interface UseTreeViewIdState { }; } -interface UseTreeViewIdContextValue { - treeId: string | undefined; -} - export type UseTreeViewIdSignature = TreeViewPluginSignature<{ params: UseTreeViewIdParameters; defaultizedParams: UseTreeViewIdDefaultizedParameters; state: UseTreeViewIdState; - contextValue: UseTreeViewIdContextValue; }>; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts index 04eabd9802c0..7cbc8d042cd7 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts @@ -59,13 +59,17 @@ export const useTreeViewFocus: TreeViewPlugin = ({ }, [store, models.selectedItems.value]); const setFocusedItemId = useEventCallback((itemId: string | null) => { - const focusedItemId = selectorFocusedItemId(store.value); - if (focusedItemId !== itemId) { - store.update((prevState) => ({ + store.update((prevState) => { + const focusedItemId = selectorFocusedItemId(prevState); + if (focusedItemId === itemId) { + return prevState; + } + + return { ...prevState, focus: { ...prevState.focus, focusedItemId: itemId }, - })); - } + }; + }); }); const isItemVisible = (itemId: string) => { diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx index 347080cea474..d94f19d66fc2 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx @@ -17,6 +17,8 @@ import { import { TreeViewItemDepthContext } from '../../TreeViewItemDepthContext'; import { generateTreeItemIdAttribute } from '../../corePlugins/useTreeViewId/useTreeViewId.utils'; import { isItemExpandable } from '../../../hooks/useTreeItemUtils/useTreeItemUtils'; +import { useSelector } from '../../hooks/useSelector'; +import { selectorTreeViewId } from '../../corePlugins/useTreeViewId/useTreeViewId.selectors'; export const useTreeViewJSXItems: TreeViewPlugin = ({ instance, @@ -113,7 +115,7 @@ export const useTreeViewJSXItems: TreeViewPlugin = }; const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin = ({ props, rootRef, contentRef }) => { - const { instance, store, treeId } = useTreeViewContext<[UseTreeViewJSXItemsSignature]>(); + const { instance, store } = useTreeViewContext<[UseTreeViewJSXItemsSignature]>(); const { children, disabled = false, label, itemId, id } = props; const parentContext = React.useContext(TreeViewChildrenItemContext); @@ -131,6 +133,7 @@ const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin = ({ props, rootRef, con const expandable = isItemExpandable(children); const pluginContentRef = React.useRef(null); const handleContentRef = useForkRef(pluginContentRef, contentRef); + const treeId = useSelector(store, selectorTreeViewId); // Prevent any flashing useEnhancedEffect(() => { diff --git a/packages/x-tree-view/src/useTreeItem/useTreeItem.ts b/packages/x-tree-view/src/useTreeItem/useTreeItem.ts index 939973e40fa5..5627597a1c41 100644 --- a/packages/x-tree-view/src/useTreeItem/useTreeItem.ts +++ b/packages/x-tree-view/src/useTreeItem/useTreeItem.ts @@ -29,6 +29,7 @@ import { useSelector } from '../internals/hooks/useSelector'; import { selectorIsItemTheDefaultFocusableItem } from '../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors'; import { generateTreeItemIdAttribute } from '../internals/corePlugins/useTreeViewId/useTreeViewId.utils'; import { selectorCanItemBeFocused } from '../internals/plugins/useTreeViewItems/useTreeViewItems.selectors'; +import { selectorTreeViewId } from '../internals/corePlugins/useTreeViewId/useTreeViewId.selectors'; export const useTreeItem = < TSignatures extends UseTreeItemMinimalPlugins = UseTreeItemMinimalPlugins, @@ -42,7 +43,6 @@ export const useTreeItem = < selection: { disableSelection, checkboxSelection }, expansion: { expansionTrigger }, label: labelContext, - treeId, instance, publicAPI, store, @@ -71,6 +71,7 @@ export const useTreeItem = < const handleContentRef = useForkRef(contentRef, contentRefObject)!; const checkboxRef = React.useRef(null); + const treeId = useSelector(store, selectorTreeViewId); const idAttribute = generateTreeItemIdAttribute({ itemId, treeId, id }); const shouldBeAccessibleWithTab = useSelector( store, diff --git a/test/utils/tree-view/fakeContextValue.ts b/test/utils/tree-view/fakeContextValue.ts index 3898a7e7c242..d98130dcf3f6 100644 --- a/test/utils/tree-view/fakeContextValue.ts +++ b/test/utils/tree-view/fakeContextValue.ts @@ -27,7 +27,6 @@ export const getFakeContextValue = ( disableSelection: false, selectionPropagation: {}, }, - treeId: 'mui-tree-view-1', rootRef: { current: null, },