fix: expose props to MenuItems even if not a direct child

Author: Bilb

.gitignore

@@ -11,4 +11,5 @@ yarn-error.log*
 .cache
 dist
 *.log
+*.tgz
 cypress

README.session.md

@@ -0,0 +1,14 @@
+## To make a new release of this package
+
+- Update the version in package.json,
+- Make your changes,
+- Make a PR and have it merged to main on https://github.com/session-foundation/session-react-contexify,
+- Once merged, draft a new release on https://github.com/session-foundation/session-react-contexify/releases,
+
+Run those:
+
+```sh
+yarn build && npm pack
+```
+
+This should build a `.tgz` file, this is what you need to upload to the release on github.

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.0.0",
+  "version": "7.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

src/components/Item.tsx

@@ -151,12 +151,13 @@ export const Item: React.FC<ItemProps> = ({
     e.stopPropagation();
 
     if (!isDisabled) {
-      !closeOnClick ? onClick(handlerParams) : dispatchUserHanlder();
+      !closeOnClick ? onClick(handlerParams) : dispatchUserHandler();
     }
   }
 
   // provide a feedback to the user that the item has been clicked before closing the menu
-  function dispatchUserHanlder() {
+  function dispatchUserHandler() {
+
     const node = itemNode.current!;
     node.focus();
     node.addEventListener(
@@ -183,7 +184,7 @@ export const Item: React.FC<ItemProps> = ({
               e.stopPropagation();
               e.preventDefault();
               handlerParams.event = e;
-              dispatchUserHanlder();
+              dispatchUserHandler();
             }
           }),
       });
@@ -194,7 +195,7 @@ export const Item: React.FC<ItemProps> = ({
     if (e.key === 'Enter' || e.key === ' ') {
       e.stopPropagation();
       handlerParams.event = e;
-      dispatchUserHanlder();
+      dispatchUserHandler();
     }
   }
 

src/components/utils.ts

@@ -1,4 +1,11 @@
-import { Children, cloneElement, ReactNode, ReactElement } from 'react';
+import {
+  Children,
+  cloneElement,
+  Fragment,
+  isValidElement,
+  ReactNode,
+  ReactElement,
+} from 'react';
 
 import { BooleanPredicate, PredicateParams, TriggerEvent } from '../types';
 
@@ -13,11 +20,18 @@ export function isStr(v: any): v is String {
 export function cloneItems(
   children: ReactNode,
   props: { triggerEvent: TriggerEvent; propsFromTrigger?: object }
-) {
+): ReactNode {
   return Children.map(
     // remove null item
     Children.toArray(children).filter(Boolean),
-    (item) => cloneElement(item as ReactElement<any>, props)
+    (item) => {
+      if (isValidElement(item) && item.type === Fragment) {
+        return cloneElement(item as ReactElement<any>, {
+          children: cloneItems((item.props as any).children, props),
+        });
+      }
+      return cloneElement(item as ReactElement<any>, props);
+    }
   );
 }