@xaui/native 0.0.27 → 0.0.29

package/dist/menu/index.cjs

@@ -1,93 +1,22 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/menu/index.ts
-var menu_exports = {};
-__export(menu_exports, {
-  Menu: () => Menu,
-  MenuItem: () => MenuItem
-});
-module.exports = __toCommonJS(menu_exports);
-
-// src/components/menu/menu.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_react_native6 = require("react-native");
-
-// src/core/theme-context.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_react_native2 = require("react-native");
-var import_theme = require("@xaui/core/theme");
-var import_palette = require("@xaui/core/palette");
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-HSPTLUFA.cjs');
 
-// src/core/portal/portal.tsx
-var import_react2 = require("react");
 
-// src/core/portal/portal-context.ts
-var import_react = require("react");
-var PortalContext = (0, import_react.createContext)(null);
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
 
-// src/core/portal/portal-host.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_react_native = require("react-native");
-var hostStyles = import_react_native.StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
-
-// src/core/theme-context.tsx
-var XUIThemeContext = (0, import_react4.createContext)(null);
-
-// src/core/theme-hooks.ts
-var import_react5 = require("react");
-var import_react_native3 = require("react-native");
-function useXUITheme() {
-  const theme = (0, import_react5.useContext)(XUIThemeContext);
-  if (!theme) {
-    throw new Error("useXUITheme must be used within XUIProvider");
-  }
-  return theme;
-}
-
-// src/core/index.ts
-var import_theme2 = require("@xaui/core/theme");
+// src/components/menu/menu.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
 
 // src/components/menu/menu.style.ts
-var import_react_native4 = require("react-native");
+
 var SCREEN_INDENT = 8;
 var MENU_GAP = 4;
-var styles = import_react_native4.StyleSheet.create({
+var styles = _reactnative.StyleSheet.create({
   wrapper: {
     position: "absolute"
   },
   overlay: {
-    ...import_react_native4.StyleSheet.absoluteFillObject
+    ..._reactnative.StyleSheet.absoluteFillObject
   },
   menuContainer: {
     position: "absolute",
@@ -100,20 +29,24 @@ var MENU_SCREEN_INDENT = SCREEN_INDENT;
 var MENU_TRIGGER_GAP = MENU_GAP;
 
 // src/components/menu/menu.hook.ts
-var import_react6 = require("react");
-var import_react_native5 = require("react-native");
+
+
+
+
+
+
 var useMenuTriggerMeasurements = (visible) => {
-  const triggerRef = (0, import_react6.useRef)(null);
-  const [triggerPosition, setTriggerPosition] = (0, import_react6.useState)(
+  const triggerRef = _react.useRef.call(void 0, null);
+  const [triggerPosition, setTriggerPosition] = _react.useState.call(void 0, 
     null
   );
-  (0, import_react6.useEffect)(() => {
+  _react.useEffect.call(void 0, () => {
     if (!visible) {
       setTriggerPosition(null);
       return;
     }
     const measureTrigger = (attempt) => {
-      triggerRef.current?.measure((_, __, width, height, pageX, pageY) => {
+      _optionalChain([triggerRef, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.measure, 'call', _4 => _4((_, __, width, height, pageX, pageY) => {
         if ((width <= 0 || height <= 0) && attempt < 5) {
           globalThis.requestAnimationFrame(() => measureTrigger(attempt + 1));
           return;
@@ -124,7 +57,7 @@ var useMenuTriggerMeasurements = (visible) => {
           width: Math.max(0, width),
           height: Math.max(0, height)
         });
-      });
+      })]);
     };
     const frameId = globalThis.setTimeout(() => measureTrigger(0), 0);
     return () => globalThis.clearTimeout(frameId);
@@ -132,14 +65,14 @@ var useMenuTriggerMeasurements = (visible) => {
   return { triggerRef, triggerPosition };
 };
 var useMenuContentLayout = (visible) => {
-  const [contentSize, setContentSize] = (0, import_react6.useState)({ width: 0, height: 0 });
-  const [isMeasured, setIsMeasured] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const [contentSize, setContentSize] = _react.useState.call(void 0, { width: 0, height: 0 });
+  const [isMeasured, setIsMeasured] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
     if (!visible) {
       setIsMeasured(false);
     }
   }, [visible]);
-  const handleContentLayout = (0, import_react6.useCallback)((event) => {
+  const handleContentLayout = _react.useCallback.call(void 0, (event) => {
     const { width, height } = event.nativeEvent.layout;
     if (width > 0 && height > 0) {
       setContentSize({ width, height });
@@ -149,10 +82,10 @@ var useMenuContentLayout = (visible) => {
   return { contentSize, handleContentLayout, isMeasured };
 };
 var useMenuPosition = (triggerPosition, contentSize, position) => {
-  return (0, import_react6.useMemo)(() => {
+  return _react.useMemo.call(void 0, () => {
     if (!triggerPosition) return { top: 0, left: 0 };
-    const screenWidth = import_react_native5.Dimensions.get("window").width;
-    const screenHeight = import_react_native5.Dimensions.get("window").height;
+    const screenWidth = _reactnative.Dimensions.get("window").width;
+    const screenHeight = _reactnative.Dimensions.get("window").height;
     let top;
     let left = triggerPosition.x;
     const hasEnoughSpaceBelow = triggerPosition.y + triggerPosition.height + contentSize.height <= screenHeight - MENU_SCREEN_INDENT;
@@ -192,20 +125,20 @@ var useMenuPosition = (triggerPosition, contentSize, position) => {
   }, [triggerPosition, contentSize, position]);
 };
 var useMenuAnimation = (visible) => {
-  const opacity = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0)).current;
-  const scale = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0)).current;
-  (0, import_react6.useEffect)(() => {
+  const opacity = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
+  const scale = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
+  _react.useEffect.call(void 0, () => {
     if (!visible) return;
     opacity.setValue(0);
     scale.setValue(0);
-    import_react_native5.Animated.parallel([
-      import_react_native5.Animated.timing(opacity, {
+    _reactnative.Animated.parallel([
+      _reactnative.Animated.timing(opacity, {
         toValue: 1,
         duration: 200,
-        easing: import_react_native5.Easing.bezier(0.4, 0, 0.2, 1),
+        easing: _reactnative.Easing.bezier(0.4, 0, 0.2, 1),
         useNativeDriver: true
       }),
-      import_react_native5.Animated.spring(scale, {
+      _reactnative.Animated.spring(scale, {
         toValue: 1,
         friction: 9,
         tension: 100,
@@ -222,33 +155,45 @@ var Menu = ({
   trigger,
   position = "bottom",
   onDismiss,
+  onItemPress,
   children,
   customAppearance,
   maxHeight = 280
 }) => {
-  const theme = useXUITheme();
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
   const { triggerRef, triggerPosition } = useMenuTriggerMeasurements(visible);
   const { contentSize, handleContentLayout, isMeasured } = useMenuContentLayout(visible);
   const menuPosition = useMenuPosition(triggerPosition, contentSize, position);
   const { opacity, scale } = useMenuAnimation(visible);
-  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { ref: triggerRef, collapsable: false }, trigger), /* @__PURE__ */ import_react7.default.createElement(
-    import_react_native6.Modal,
+  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,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose: onDismiss
     },
-    /* @__PURE__ */ import_react7.default.createElement(
-      import_react_native6.Pressable,
+    /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.Pressable,
       {
-        style: [styles.overlay, customAppearance?.overlay],
+        style: [styles.overlay, _optionalChain([customAppearance, 'optionalAccess', _7 => _7.overlay])],
         onPress: onDismiss,
         accessibilityRole: "button",
         accessibilityLabel: "Close menu"
       },
-      /* @__PURE__ */ import_react7.default.createElement(
-        import_react_native6.Animated.View,
+      /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.Animated.View,
         {
           onLayout: handleContentLayout,
           style: [
@@ -262,24 +207,24 @@ var Menu = ({
               transform: [{ scale }],
               ...theme.shadows.md
             },
-            customAppearance?.container
+            _optionalChain([customAppearance, 'optionalAccess', _8 => _8.container])
           ]
         },
-        /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: customAppearance?.content }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.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)))
       )
     )
   ));
 };
 
 // src/components/menu/menu-item.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_react_native8 = require("react-native");
+
+
 
 // src/components/menu/menu-item.style.ts
-var import_react_native7 = require("react-native");
+
 var MIN_WIDTH = 112;
 var MAX_WIDTH = 280;
-var styles2 = import_react_native7.StyleSheet.create({
+var styles2 = _reactnative.StyleSheet.create({
   container: {
     minWidth: MIN_WIDTH,
     maxWidth: MAX_WIDTH,
@@ -329,14 +274,14 @@ var MenuItem = ({
   customAppearance,
   accessibilityLabel
 }) => {
-  const theme = useXUITheme();
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
   const titleColor = isDisabled ? theme.colors.foreground + "50" : theme.colors.foreground;
   const renderTitle = () => {
     if (typeof title === "string" || typeof title === "number") {
-      return /* @__PURE__ */ import_react8.default.createElement(
-        import_react_native8.Text,
+      return /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.Text,
         {
-          style: [styles2.titleText, { color: titleColor }, customAppearance?.title],
+          style: [styles2.titleText, { color: titleColor }, _optionalChain([customAppearance, 'optionalAccess', _10 => _10.title])],
           numberOfLines: 1
         },
         title
@@ -344,8 +289,8 @@ var MenuItem = ({
     }
     return title;
   };
-  return /* @__PURE__ */ import_react8.default.createElement(
-    import_react_native8.Pressable,
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.Pressable,
     {
       onPress: isDisabled ? void 0 : onPress,
       disabled: isDisabled,
@@ -359,14 +304,13 @@ var MenuItem = ({
         pressed && !isDisabled && {
           backgroundColor: theme.colors.foreground + "10"
         },
-        customAppearance?.container
+        _optionalChain([customAppearance, 'optionalAccess', _11 => _11.container])
       ]
     },
-    /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: [styles2.row, customAppearance?.content] }, startContent && /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: styles2.startContent }, startContent), /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: styles2.content }, renderTitle()), endContent && /* @__PURE__ */ import_react8.default.createElement(import_react_native8.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))
   );
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Menu,
-  MenuItem
-});
+
+
+
+exports.Menu = Menu; exports.MenuItem = MenuItem;

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

@@ -1,7 +1,7 @@
-import "../chunk-CZFDZPAS.js";
+import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-I4V5Y5GD.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/menu/menu.tsx
 import React from "react";
@@ -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)))
       )
     )
   ));