Pass and call a memoized toggle callback

Author: kraenhansen

packages/compass-connections-navigation/src/base-navigation-item.tsx

@@ -28,7 +28,7 @@ type NavigationBaseItemProps = {
     actions: NavigationItemActions;
     onAction: (action: Actions) => void;
   };
-  onExpand: (toggle: boolean) => void;
+  toggleExpand: () => void;
 };
 
 const menuStyles = css({
@@ -98,7 +98,7 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
   isExpanded,
   isFocused,
   hasDefaultAction,
-  onExpand,
+  toggleExpand,
   children,
 }) => {
   const [hoverProps, isHovered] = useHoverState();
@@ -114,11 +114,7 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
       <div className={cx('item-wrapper', itemWrapperStyles)} style={style}>
         {isExpandVisible && (
           <ExpandButton
-            onClick={(evt) => {
-              if (isExpandDisabled) return;
-              evt.stopPropagation();
-              onExpand(!isExpanded);
-            }}
+            onClick={toggleExpand}
             isExpanded={isExpanded}
             disabled={isExpandDisabled}
           ></ExpandButton>

packages/compass-connections-navigation/src/navigation-item.tsx

@@ -242,6 +242,12 @@ export function NavigationItem({
     return actions;
   }, [item, isDarkMode]);
 
+  const toggleExpand = useCallback(() => {
+    if (item.type !== 'placeholder') {
+      onItemExpand(item, !item.isExpanded);
+    }
+  }, [onItemExpand, item]);
+
   return (
     <StyledNavigationItem item={item}>
       {item.type === 'placeholder' ? (
@@ -262,9 +268,7 @@ export function NavigationItem({
           isExpandDisabled={
             item.type === 'connection' && item.connectionStatus !== 'connected'
           }
-          onExpand={(isExpanded: boolean) => {
-            onItemExpand(item, isExpanded);
-          }}
+          toggleExpand={toggleExpand}
           actionProps={actionProps}
         >
           {!!connectionStaticActions.length && (