From bcdfd0b9649292714c1520c010328a5085dfee0b Mon Sep 17 00:00:00 2001 From: sai chand Date: Tue, 23 May 2023 08:06:17 +0000 Subject: [PATCH 1/4] [MenuItem][Base] Pass idGenerator --- .../mui-base/src/useMenuItem/useMenuItem.ts | 6 +++- packages/mui-base/src/useTab/useTab.ts | 2 +- .../mui-base/src/useTabPanel/useTabPanel.ts | 3 +- packages/mui-base/src/utils/useCompound.ts | 31 ++++++++----------- .../mui-base/src/utils/useCompoundItem.ts | 18 ++++++----- 5 files changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.ts b/packages/mui-base/src/useMenuItem/useMenuItem.ts index df540980e44a6f..4e548bf0245cc6 100644 --- a/packages/mui-base/src/useMenuItem/useMenuItem.ts +++ b/packages/mui-base/src/useMenuItem/useMenuItem.ts @@ -11,6 +11,10 @@ import { import { useListItem } from '../useList'; import { useCompoundItem } from '../utils/useCompoundItem'; +function idGenerator(existingKeys: Set) { + return `menu-item-${existingKeys.size}`; +} + /** * * Demos: @@ -40,7 +44,7 @@ export default function useMenuItem(params: UseMenuItemParameters): UseMenuItemR item: id, }); - const { index, totalItemCount } = useCompoundItem(id, itemMetadata); + const { index, totalItemCount } = useCompoundItem(id ?? idGenerator, itemMetadata); const { getRootProps: getButtonProps, diff --git a/packages/mui-base/src/useTab/useTab.ts b/packages/mui-base/src/useTab/useTab.ts index 6abb67b042543f..896af268c0114b 100644 --- a/packages/mui-base/src/useTab/useTab.ts +++ b/packages/mui-base/src/useTab/useTab.ts @@ -36,7 +36,7 @@ function useTab(parameters: UseTabParameters): UseTabReturnValue { id: value, index, totalItemCount: totalTabsCount, - } = useCompoundItem(valueParam, tabMetadata, tabValueGenerator); + } = useCompoundItem(valueParam ?? tabValueGenerator, tabMetadata); const { getRootProps: getTabProps, diff --git a/packages/mui-base/src/useTabPanel/useTabPanel.ts b/packages/mui-base/src/useTabPanel/useTabPanel.ts index 79084f03d5d4b4..b53d55ecb22444 100644 --- a/packages/mui-base/src/useTabPanel/useTabPanel.ts +++ b/packages/mui-base/src/useTabPanel/useTabPanel.ts @@ -30,9 +30,8 @@ function useTabPanel(parameters: UseTabPanelParameters): UseTabPanelReturnValue const id = useId(idParam); const { id: value } = useCompoundItem( - valueParam, + valueParam ?? tabPanelValueGenerator, id, - tabPanelValueGenerator, ); const hidden = value !== selectedTabValue; diff --git a/packages/mui-base/src/utils/useCompound.ts b/packages/mui-base/src/utils/useCompound.ts index 51f4b997af32d9..31be19a427001b 100644 --- a/packages/mui-base/src/utils/useCompound.ts +++ b/packages/mui-base/src/utils/useCompound.ts @@ -12,22 +12,22 @@ interface RegisterItemReturnValue { deregister: () => void; } +export type MissingKeyGenerator = (existingKeys: Set) => Key; + export type CompoundComponentContextValue = { /** * Registers an item with the parent. * This should be called during the effect phase of the child component. * The `itemMetadata` should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations. * - * @param id Id of the item. - * @param itemMetadata Arbitrary metadata to pass to the parent component. - * @param missingKeyGenerator A function that generates a unique id for the item. + * @param id Id of the item or A function that generates a unique id for the item. * It is called with the set of the ids of all the items that have already been registered. - * Return `existingKeys.size` if you want to use the index of the new item as the id. + * Return `existingKeys.size` if you want to use the index of the new item as the id.. + * @param itemMetadata Arbitrary metadata to pass to the parent component. */ registerItem: ( - id: Key | undefined, + id: Key | MissingKeyGenerator | undefined, item: Subitem, - missingKeyGenerator?: (existingKeys: Set) => Key, ) => RegisterItemReturnValue; /** * Returns the 0-based index of the item in the parent component's list of registered items. @@ -87,20 +87,15 @@ export function useCompoundParent(): UseCompoundParentReturnValue< }, []); const registerItem = React.useCallback( - function registerItem( - id: Key | undefined, - item: Subitem, - missingKeyGenerator?: (existingKeys: Set) => Key, - ) { + function registerItem(id: Key | MissingKeyGenerator | undefined, item: Subitem) { let providedOrGeneratedId: Key; if (id === undefined) { - if (missingKeyGenerator === undefined) { - throw new Error( - "The compound component's child doesn't have a key. You need to provide a missingKeyGenerator to generate it.", - ); - } - - providedOrGeneratedId = missingKeyGenerator(subitemKeys.current); + throw new Error( + "The compound component's child doesn't have a key. You need to provide a missingKeyGenerator to generate it.", + ); + } + if (typeof id === 'function') { + providedOrGeneratedId = (id as MissingKeyGenerator)(subitemKeys.current); } else { providedOrGeneratedId = id; } diff --git a/packages/mui-base/src/utils/useCompoundItem.ts b/packages/mui-base/src/utils/useCompoundItem.ts index 339120572bb34e..c829d2083804cf 100644 --- a/packages/mui-base/src/utils/useCompoundItem.ts +++ b/packages/mui-base/src/utils/useCompoundItem.ts @@ -1,6 +1,10 @@ import * as React from 'react'; import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; -import { CompoundComponentContext, CompoundComponentContextValue } from './useCompound'; +import { + CompoundComponentContext, + CompoundComponentContextValue, + MissingKeyGenerator, +} from './useCompound'; export interface UseCompoundItemReturnValue { /** @@ -32,18 +36,16 @@ export interface UseCompoundItemReturnValue { * @ignore - internal hook. */ export function useCompoundItem( - id: Key | undefined, + id: Key | MissingKeyGenerator | undefined, itemMetadata: Subitem, - missingKeyGenerator: (existingKeys: Set) => Key, ): UseCompoundItemReturnValue; export function useCompoundItem( id: Key, itemMetadata: Subitem, ): UseCompoundItemReturnValue; export function useCompoundItem( - id: Key | undefined, + id: Key | MissingKeyGenerator | undefined, itemMetadata: Subitem, - missingKeyGenerator?: (existingKeys: Set) => Key, ): UseCompoundItemReturnValue { const context = React.useContext(CompoundComponentContext) as CompoundComponentContextValue< Key, @@ -55,13 +57,13 @@ export function useCompoundItem( } const { registerItem } = context; - const [registeredId, setRegisteredId] = React.useState(id); + const [registeredId, setRegisteredId] = React.useState(typeof id === 'function' ? undefined : id); useEnhancedEffect(() => { - const { id: returnedId, deregister } = registerItem(id, itemMetadata, missingKeyGenerator); + const { id: returnedId, deregister } = registerItem(id, itemMetadata); setRegisteredId(returnedId); return deregister; - }, [registerItem, itemMetadata, missingKeyGenerator, id]); + }, [registerItem, itemMetadata, id]); return { id: registeredId, From 0758c45ac5a958b62d694699fd51fd8f511b7c90 Mon Sep 17 00:00:00 2001 From: sai chand Date: Tue, 23 May 2023 08:15:10 +0000 Subject: [PATCH 2/4] fix-tests --- packages/mui-base/src/utils/useCompound.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-base/src/utils/useCompound.test.tsx b/packages/mui-base/src/utils/useCompound.test.tsx index 88157bea3ef177..fb226b94f1493f 100644 --- a/packages/mui-base/src/utils/useCompound.test.tsx +++ b/packages/mui-base/src/utils/useCompound.test.tsx @@ -185,7 +185,7 @@ describe('compound components', () => { } function Child() { - const { id } = useCompoundItem(undefined, null, idGenerator); + const { id } = useCompoundItem(idGenerator, null); return
  • {id}
    • ; } From b90ae7b4f10b9794e70d769fadc5b28dc35dd276 Mon Sep 17 00:00:00 2001 From: sai chand Date: Tue, 23 May 2023 13:45:32 +0000 Subject: [PATCH 3/4] update changes --- packages/mui-base/src/utils/useCompound.ts | 11 ++++------- packages/mui-base/src/utils/useCompoundItem.ts | 6 +++--- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/mui-base/src/utils/useCompound.ts b/packages/mui-base/src/utils/useCompound.ts index 31be19a427001b..637ff40216d464 100644 --- a/packages/mui-base/src/utils/useCompound.ts +++ b/packages/mui-base/src/utils/useCompound.ts @@ -12,7 +12,7 @@ interface RegisterItemReturnValue { deregister: () => void; } -export type MissingKeyGenerator = (existingKeys: Set) => Key; +export type KeyGenerator = (existingKeys: Set) => Key; export type CompoundComponentContextValue = { /** @@ -25,10 +25,7 @@ export type CompoundComponentContextValue = { * Return `existingKeys.size` if you want to use the index of the new item as the id.. * @param itemMetadata Arbitrary metadata to pass to the parent component. */ - registerItem: ( - id: Key | MissingKeyGenerator | undefined, - item: Subitem, - ) => RegisterItemReturnValue; + registerItem: (id: Key | KeyGenerator, item: Subitem) => RegisterItemReturnValue; /** * Returns the 0-based index of the item in the parent component's list of registered items. * @@ -87,7 +84,7 @@ export function useCompoundParent(): UseCompoundParentReturnValue< }, []); const registerItem = React.useCallback( - function registerItem(id: Key | MissingKeyGenerator | undefined, item: Subitem) { + function registerItem(id: Key | KeyGenerator, item: Subitem) { let providedOrGeneratedId: Key; if (id === undefined) { throw new Error( @@ -95,7 +92,7 @@ export function useCompoundParent(): UseCompoundParentReturnValue< ); } if (typeof id === 'function') { - providedOrGeneratedId = (id as MissingKeyGenerator)(subitemKeys.current); + providedOrGeneratedId = (id as KeyGenerator)(subitemKeys.current); } else { providedOrGeneratedId = id; } diff --git a/packages/mui-base/src/utils/useCompoundItem.ts b/packages/mui-base/src/utils/useCompoundItem.ts index c829d2083804cf..0809864072c5ec 100644 --- a/packages/mui-base/src/utils/useCompoundItem.ts +++ b/packages/mui-base/src/utils/useCompoundItem.ts @@ -3,7 +3,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; import { CompoundComponentContext, CompoundComponentContextValue, - MissingKeyGenerator, + KeyGenerator, } from './useCompound'; export interface UseCompoundItemReturnValue { @@ -36,7 +36,7 @@ export interface UseCompoundItemReturnValue { * @ignore - internal hook. */ export function useCompoundItem( - id: Key | MissingKeyGenerator | undefined, + id: Key | KeyGenerator, itemMetadata: Subitem, ): UseCompoundItemReturnValue; export function useCompoundItem( @@ -44,7 +44,7 @@ export function useCompoundItem( itemMetadata: Subitem, ): UseCompoundItemReturnValue; export function useCompoundItem( - id: Key | MissingKeyGenerator | undefined, + id: Key | KeyGenerator, itemMetadata: Subitem, ): UseCompoundItemReturnValue { const context = React.useContext(CompoundComponentContext) as CompoundComponentContextValue< From 3583dbd538cedeb1cb40168a54f5289371682d22 Mon Sep 17 00:00:00 2001 From: sai chand Date: Tue, 23 May 2023 13:52:47 +0000 Subject: [PATCH 4/4] remove error --- packages/mui-base/src/utils/useCompound.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/mui-base/src/utils/useCompound.ts b/packages/mui-base/src/utils/useCompound.ts index 637ff40216d464..64003a6df1771e 100644 --- a/packages/mui-base/src/utils/useCompound.ts +++ b/packages/mui-base/src/utils/useCompound.ts @@ -86,11 +86,7 @@ export function useCompoundParent(): UseCompoundParentReturnValue< const registerItem = React.useCallback( function registerItem(id: Key | KeyGenerator, item: Subitem) { let providedOrGeneratedId: Key; - if (id === undefined) { - throw new Error( - "The compound component's child doesn't have a key. You need to provide a missingKeyGenerator to generate it.", - ); - } + if (typeof id === 'function') { providedOrGeneratedId = (id as KeyGenerator)(subitemKeys.current); } else {