@xaui/native 0.0.28 → 0.0.29

package/dist/menu/index.cjs

@@ -155,6 +155,7 @@ var Menu = ({
   trigger,
   position = "bottom",
   onDismiss,
+  onItemPress,
   children,
   customAppearance,
   maxHeight = 280
@@ -164,6 +165,17 @@ var Menu = ({
   const { contentSize, handleContentLayout, isMeasured } = useMenuContentLayout(visible);
   const menuPosition = useMenuPosition(triggerPosition, contentSize, position);
   const { opacity, scale } = useMenuAnimation(visible);
+  const handledChildren = _react2.default.Children.map(children, (child) => {
+    if (!_react2.default.isValidElement(child)) return child;
+    const { onPress, itemKey } = child.props;
+    if (!onPress && !itemKey) return child;
+    return _react2.default.cloneElement(child, {
+      onPress: (e) => {
+        _optionalChain([onPress, 'optionalCall', _5 => _5(e)]);
+        if (itemKey) _optionalChain([onItemPress, 'optionalCall', _6 => _6(itemKey)]);
+      }
+    });
+  });
   return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { ref: triggerRef, collapsable: false }, trigger), /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Modal,
     {
@@ -175,7 +187,7 @@ var Menu = ({
     /* @__PURE__ */ _react2.default.createElement(
       _reactnative.Pressable,
       {
-        style: [styles.overlay, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.overlay])],
+        style: [styles.overlay, _optionalChain([customAppearance, 'optionalAccess', _7 => _7.overlay])],
         onPress: onDismiss,
         accessibilityRole: "button",
         accessibilityLabel: "Close menu"
@@ -195,10 +207,10 @@ var Menu = ({
               transform: [{ scale }],
               ...theme.shadows.md
             },
-            _optionalChain([customAppearance, 'optionalAccess', _6 => _6.container])
+            _optionalChain([customAppearance, 'optionalAccess', _8 => _8.container])
           ]
         },
-        /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _7 => _7.content]) }, /* @__PURE__ */ _react2.default.createElement(_reactnative.ScrollView, { style: { maxHeight } }, children)))
+        /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _9 => _9.content]) }, /* @__PURE__ */ _react2.default.createElement(_reactnative.ScrollView, { style: { maxHeight } }, handledChildren)))
       )
     )
   ));
@@ -269,7 +281,7 @@ var MenuItem = ({
       return /* @__PURE__ */ _react2.default.createElement(
         _reactnative.Text,
         {
-          style: [styles2.titleText, { color: titleColor }, _optionalChain([customAppearance, 'optionalAccess', _8 => _8.title])],
+          style: [styles2.titleText, { color: titleColor }, _optionalChain([customAppearance, 'optionalAccess', _10 => _10.title])],
           numberOfLines: 1
         },
         title
@@ -292,10 +304,10 @@ var MenuItem = ({
         pressed && !isDisabled && {
           backgroundColor: theme.colors.foreground + "10"
         },
-        _optionalChain([customAppearance, 'optionalAccess', _9 => _9.container])
+        _optionalChain([customAppearance, 'optionalAccess', _11 => _11.container])
       ]
     },
-    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles2.row, _optionalChain([customAppearance, 'optionalAccess', _10 => _10.content])] }, startContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.startContent }, startContent), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.content }, renderTitle()), endContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.endContent }, endContent))
+    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles2.row, _optionalChain([customAppearance, 'optionalAccess', _12 => _12.content])] }, startContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.startContent }, startContent), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.content }, renderTitle()), endContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.endContent }, endContent))
   );
 };
 

package/dist/menu/index.d.cts

@@ -34,6 +34,10 @@ type MenuProps = {
      * Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called.
      */
     onDismiss?: () => void;
+    /**
+     * Callback fired when a MenuItem with an `itemKey` is pressed.
+     */
+    onItemPress?: (itemKey: string) => void;
     /**
      * Content of the Menu.
      */
@@ -66,6 +70,10 @@ type MenuItemCustomAppearance = {
     title?: TextStyle;
 };
 type MenuItemProps = {
+    /**
+     * Optional key emitted via Menu `onItemPress`.
+     */
+    itemKey?: string;
     /**
      * Title text for the MenuItem.
      */

package/dist/menu/index.d.ts

@@ -34,6 +34,10 @@ type MenuProps = {
      * Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called.
      */
     onDismiss?: () => void;
+    /**
+     * Callback fired when a MenuItem with an `itemKey` is pressed.
+     */
+    onItemPress?: (itemKey: string) => void;
     /**
      * Content of the Menu.
      */
@@ -66,6 +70,10 @@ type MenuItemCustomAppearance = {
     title?: TextStyle;
 };
 type MenuItemProps = {
+    /**
+     * Optional key emitted via Menu `onItemPress`.
+     */
+    itemKey?: string;
     /**
      * Title text for the MenuItem.
      */

package/dist/menu/index.js

@@ -155,6 +155,7 @@ var Menu = ({
   trigger,
   position = "bottom",
   onDismiss,
+  onItemPress,
   children,
   customAppearance,
   maxHeight = 280
@@ -164,6 +165,17 @@ var Menu = ({
   const { contentSize, handleContentLayout, isMeasured } = useMenuContentLayout(visible);
   const menuPosition = useMenuPosition(triggerPosition, contentSize, position);
   const { opacity, scale } = useMenuAnimation(visible);
+  const handledChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    const { onPress, itemKey } = child.props;
+    if (!onPress && !itemKey) return child;
+    return React.cloneElement(child, {
+      onPress: (e) => {
+        onPress?.(e);
+        if (itemKey) onItemPress?.(itemKey);
+      }
+    });
+  });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { ref: triggerRef, collapsable: false }, trigger), /* @__PURE__ */ React.createElement(
     Modal,
     {
@@ -198,7 +210,7 @@ var Menu = ({
             customAppearance?.container
           ]
         },
-        /* @__PURE__ */ React.createElement(Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(View, { style: customAppearance?.content }, /* @__PURE__ */ React.createElement(ScrollView, { style: { maxHeight } }, children)))
+        /* @__PURE__ */ React.createElement(Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(View, { style: customAppearance?.content }, /* @__PURE__ */ React.createElement(ScrollView, { style: { maxHeight } }, handledChildren)))
       )
     )
   ));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",