Add an internal unique ID to NavigationItem instead of using the opti…

…onal item prop
WordPress · Oct 20, 2020 · 25f33f9 · 25f33f9
1 parent 642332d
commit 25f33f9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/packages/components/src/navigation/README.md b/packages/components/src/navigation/README.md
@@ -190,7 +190,7 @@ If provided, renders `a` instead of `button`.
 ### `item`
 
 - Type: `string`
-- Required: Yes
+- Required: No
 
 The unique identifier of the item.
 

diff --git a/packages/components/src/navigation/item/index.js b/packages/components/src/navigation/item/index.js
@@ -2,11 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
+import { noop, uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 
 /**
@@ -29,14 +30,17 @@ export default function NavigationItem( props ) {
  title,
  ...restProps
  } = props;
- useNavigationTreeItem( props );
+
+ const [ itemId ] = useState( uniqueId( 'item-' ) );
+
+ useNavigationTreeItem( itemId, props );
  const {
  activeItem,
  navigationTree,
  setActiveMenu,
  } = useNavigationContext();
 
- if ( ! navigationTree.getItem( item )?._isVisible ) {
+ if ( ! navigationTree.getItem( itemId )?._isVisible ) {
  return null;
  }
 

diff --git a/packages/components/src/navigation/item/use-navigation-tree-item.js b/packages/components/src/navigation/item/use-navigation-tree-item.js
@@ -10,27 +10,26 @@ import { useNavigationContext } from '../context';
 import { useNavigationMenuContext } from '../menu/context';
 import { normalizedSearch } from '../utils';
 
-export const useNavigationTreeItem = ( props ) => {
+export const useNavigationTreeItem = ( itemId, props ) => {
  const {
  activeMenu,
  navigationTree: { addItem, removeItem },
  } = useNavigationContext();
  const { menu, search } = useNavigationMenuContext();
 
- const key = props.item;
  useEffect( () => {
  const isMenuActive = activeMenu === menu;
  const isItemVisible =
  ! search || normalizedSearch( props.title, search );
 
- addItem( key, {
+ addItem( itemId, {
  ...props,
  menu,
  _isVisible: isMenuActive && isItemVisible,
  } );
 
  return () => {
- removeItem( key );
+ removeItem( itemId );
  };
  }, [ activeMenu, search ] );
 };