@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/menu/index.d.cts

@@ -1,115 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, GestureResponderEvent, TextStyle } from 'react-native';
-
-type MenuPosition = 'top' | 'bottom';
-type MenuCustomAppearance = {
-    /**
-     * Custom styles for the overlay container
-     */
-    overlay?: ViewStyle;
-    /**
-     * Custom styles for the menu container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the menu content
-     */
-    content?: ViewStyle;
-};
-type MenuProps = {
-    /**
-     * Whether the Menu is currently visible.
-     */
-    visible: boolean;
-    /**
-     * The trigger element to open the menu from. This is the component that will trigger the menu display.
-     */
-    trigger: ReactNode;
-    /**
-     * Whether the menu should open at the top of the trigger or at its bottom.
-     * @default 'bottom'
-     */
-    position?: MenuPosition;
-    /**
-     * 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.
-     */
-    children: ReactNode;
-    /**
-     * Custom appearance styles for menu parts
-     */
-    customAppearance?: MenuCustomAppearance;
-    /**
-     * Maximum height of the scrollable menu content
-     * @default 280
-     */
-    maxHeight?: number;
-};
-
-declare const Menu: React.FC<MenuProps>;
-
-type MenuItemCustomAppearance = {
-    /**
-     * Custom styles for the item container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the item content
-     */
-    content?: ViewStyle;
-    /**
-     * Custom styles for the title text
-     */
-    title?: TextStyle;
-};
-type MenuItemProps = {
-    /**
-     * Optional key emitted via Menu `onItemPress`.
-     */
-    itemKey?: string;
-    /**
-     * Title text for the MenuItem.
-     */
-    title: ReactNode;
-    /**
-     * Content to display at the start of the item.
-     */
-    startContent?: ReactNode;
-    /**
-     * Content to display at the end of the item.
-     */
-    endContent?: ReactNode;
-    /**
-     * Whether the item is disabled. A disabled item is greyed out and onPress is not called on touch.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Sets min height with densed layout.
-     * @default false
-     */
-    dense?: boolean;
-    /**
-     * Function to execute on press.
-     */
-    onPress?: (e: GestureResponderEvent) => void;
-    /**
-     * Custom appearance styles for item parts
-     */
-    customAppearance?: MenuItemCustomAppearance;
-    /**
-     * Accessibility label for the item. This is read by the screen reader when the user taps the component.
-     */
-    accessibilityLabel?: string;
-};
-
-declare const MenuItem: React.FC<MenuItemProps>;
-
-export { Menu, type MenuCustomAppearance, MenuItem, type MenuItemCustomAppearance, type MenuItemProps, type MenuPosition, type MenuProps };

package/dist/menu/index.d.ts

@@ -1,115 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, GestureResponderEvent, TextStyle } from 'react-native';
-
-type MenuPosition = 'top' | 'bottom';
-type MenuCustomAppearance = {
-    /**
-     * Custom styles for the overlay container
-     */
-    overlay?: ViewStyle;
-    /**
-     * Custom styles for the menu container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the menu content
-     */
-    content?: ViewStyle;
-};
-type MenuProps = {
-    /**
-     * Whether the Menu is currently visible.
-     */
-    visible: boolean;
-    /**
-     * The trigger element to open the menu from. This is the component that will trigger the menu display.
-     */
-    trigger: ReactNode;
-    /**
-     * Whether the menu should open at the top of the trigger or at its bottom.
-     * @default 'bottom'
-     */
-    position?: MenuPosition;
-    /**
-     * 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.
-     */
-    children: ReactNode;
-    /**
-     * Custom appearance styles for menu parts
-     */
-    customAppearance?: MenuCustomAppearance;
-    /**
-     * Maximum height of the scrollable menu content
-     * @default 280
-     */
-    maxHeight?: number;
-};
-
-declare const Menu: React.FC<MenuProps>;
-
-type MenuItemCustomAppearance = {
-    /**
-     * Custom styles for the item container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the item content
-     */
-    content?: ViewStyle;
-    /**
-     * Custom styles for the title text
-     */
-    title?: TextStyle;
-};
-type MenuItemProps = {
-    /**
-     * Optional key emitted via Menu `onItemPress`.
-     */
-    itemKey?: string;
-    /**
-     * Title text for the MenuItem.
-     */
-    title: ReactNode;
-    /**
-     * Content to display at the start of the item.
-     */
-    startContent?: ReactNode;
-    /**
-     * Content to display at the end of the item.
-     */
-    endContent?: ReactNode;
-    /**
-     * Whether the item is disabled. A disabled item is greyed out and onPress is not called on touch.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Sets min height with densed layout.
-     * @default false
-     */
-    dense?: boolean;
-    /**
-     * Function to execute on press.
-     */
-    onPress?: (e: GestureResponderEvent) => void;
-    /**
-     * Custom appearance styles for item parts
-     */
-    customAppearance?: MenuItemCustomAppearance;
-    /**
-     * Accessibility label for the item. This is read by the screen reader when the user taps the component.
-     */
-    accessibilityLabel?: string;
-};
-
-declare const MenuItem: React.FC<MenuItemProps>;
-
-export { Menu, type MenuCustomAppearance, MenuItem, type MenuItemCustomAppearance, type MenuItemProps, type MenuPosition, type MenuProps };

package/dist/menu/index.js

@@ -1,316 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/menu/menu.tsx
-import React from "react";
-import { Animated as Animated2, Modal, Pressable, ScrollView, View } from "react-native";
-
-// src/components/menu/menu.style.ts
-import { StyleSheet } from "react-native";
-var SCREEN_INDENT = 8;
-var MENU_GAP = 4;
-var styles = StyleSheet.create({
-  wrapper: {
-    position: "absolute"
-  },
-  overlay: {
-    ...StyleSheet.absoluteFillObject
-  },
-  menuContainer: {
-    position: "absolute",
-    paddingVertical: 8,
-    minWidth: 200,
-    maxWidth: 320
-  }
-});
-var MENU_SCREEN_INDENT = SCREEN_INDENT;
-var MENU_TRIGGER_GAP = MENU_GAP;
-
-// src/components/menu/menu.hook.ts
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  Animated,
-  Dimensions,
-  Easing
-} from "react-native";
-var useMenuTriggerMeasurements = (visible) => {
-  const triggerRef = useRef(null);
-  const [triggerPosition, setTriggerPosition] = useState(
-    null
-  );
-  useEffect(() => {
-    if (!visible) {
-      setTriggerPosition(null);
-      return;
-    }
-    const measureTrigger = (attempt) => {
-      triggerRef.current?.measure((_, __, width, height, pageX, pageY) => {
-        if ((width <= 0 || height <= 0) && attempt < 5) {
-          globalThis.requestAnimationFrame(() => measureTrigger(attempt + 1));
-          return;
-        }
-        setTriggerPosition({
-          x: pageX,
-          y: pageY,
-          width: Math.max(0, width),
-          height: Math.max(0, height)
-        });
-      });
-    };
-    const frameId = globalThis.setTimeout(() => measureTrigger(0), 0);
-    return () => globalThis.clearTimeout(frameId);
-  }, [visible]);
-  return { triggerRef, triggerPosition };
-};
-var useMenuContentLayout = (visible) => {
-  const [contentSize, setContentSize] = useState({ width: 0, height: 0 });
-  const [isMeasured, setIsMeasured] = useState(false);
-  useEffect(() => {
-    if (!visible) {
-      setIsMeasured(false);
-    }
-  }, [visible]);
-  const handleContentLayout = useCallback((event) => {
-    const { width, height } = event.nativeEvent.layout;
-    if (width > 0 && height > 0) {
-      setContentSize({ width, height });
-      setIsMeasured(true);
-    }
-  }, []);
-  return { contentSize, handleContentLayout, isMeasured };
-};
-var useMenuPosition = (triggerPosition, contentSize, position) => {
-  return useMemo(() => {
-    if (!triggerPosition) return { top: 0, left: 0 };
-    const screenWidth = Dimensions.get("window").width;
-    const screenHeight = Dimensions.get("window").height;
-    let top;
-    let left = triggerPosition.x;
-    const hasEnoughSpaceBelow = triggerPosition.y + triggerPosition.height + contentSize.height <= screenHeight - MENU_SCREEN_INDENT;
-    const hasEnoughSpaceAbove = triggerPosition.y - contentSize.height >= MENU_SCREEN_INDENT;
-    if (position === "bottom") {
-      if (hasEnoughSpaceBelow) {
-        top = triggerPosition.y + triggerPosition.height + MENU_TRIGGER_GAP;
-      } else if (hasEnoughSpaceAbove) {
-        top = triggerPosition.y - contentSize.height - MENU_TRIGGER_GAP;
-      } else {
-        top = triggerPosition.y + triggerPosition.height + MENU_TRIGGER_GAP;
-      }
-    } else {
-      if (hasEnoughSpaceAbove) {
-        top = triggerPosition.y - contentSize.height - MENU_TRIGGER_GAP;
-      } else if (hasEnoughSpaceBelow) {
-        top = triggerPosition.y + triggerPosition.height + MENU_TRIGGER_GAP;
-      } else {
-        top = triggerPosition.y - contentSize.height - MENU_TRIGGER_GAP;
-      }
-    }
-    if (contentSize.width > 0 && left + contentSize.width > screenWidth - MENU_SCREEN_INDENT) {
-      left = Math.max(
-        MENU_SCREEN_INDENT,
-        triggerPosition.x + triggerPosition.width - contentSize.width
-      );
-    }
-    if (left < MENU_SCREEN_INDENT) {
-      left = MENU_SCREEN_INDENT;
-    }
-    const maxTop = Math.max(
-      MENU_SCREEN_INDENT,
-      screenHeight - MENU_SCREEN_INDENT - contentSize.height
-    );
-    const clampedTop = Math.min(maxTop, Math.max(MENU_SCREEN_INDENT, top));
-    return { top: clampedTop, left };
-  }, [triggerPosition, contentSize, position]);
-};
-var useMenuAnimation = (visible) => {
-  const opacity = useRef(new Animated.Value(0)).current;
-  const scale = useRef(new Animated.Value(0)).current;
-  useEffect(() => {
-    if (!visible) return;
-    opacity.setValue(0);
-    scale.setValue(0);
-    Animated.parallel([
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: 200,
-        easing: Easing.bezier(0.4, 0, 0.2, 1),
-        useNativeDriver: true
-      }),
-      Animated.spring(scale, {
-        toValue: 1,
-        friction: 9,
-        tension: 100,
-        useNativeDriver: true
-      })
-    ]).start();
-  }, [visible, opacity, scale]);
-  return { opacity, scale };
-};
-
-// src/components/menu/menu.tsx
-var Menu = ({
-  visible,
-  trigger,
-  position = "bottom",
-  onDismiss,
-  onItemPress,
-  children,
-  customAppearance,
-  maxHeight = 280
-}) => {
-  const theme = useXUITheme();
-  const { triggerRef, triggerPosition } = useMenuTriggerMeasurements(visible);
-  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,
-    {
-      visible,
-      transparent: true,
-      animationType: "fade",
-      onRequestClose: onDismiss
-    },
-    /* @__PURE__ */ React.createElement(
-      Pressable,
-      {
-        style: [styles.overlay, customAppearance?.overlay],
-        onPress: onDismiss,
-        accessibilityRole: "button",
-        accessibilityLabel: "Close menu"
-      },
-      /* @__PURE__ */ React.createElement(
-        Animated2.View,
-        {
-          onLayout: handleContentLayout,
-          style: [
-            styles.menuContainer,
-            {
-              top: isMeasured ? menuPosition.top : -9999,
-              left: isMeasured ? menuPosition.left : -9999,
-              backgroundColor: theme.mode === "dark" ? theme.colors.default.container : theme.colors.background,
-              borderRadius: theme.borderRadius.md,
-              opacity: isMeasured ? opacity : 0,
-              transform: [{ scale }],
-              ...theme.shadows.md
-            },
-            customAppearance?.container
-          ]
-        },
-        /* @__PURE__ */ React.createElement(Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(View, { style: customAppearance?.content }, /* @__PURE__ */ React.createElement(ScrollView, { style: { maxHeight } }, handledChildren)))
-      )
-    )
-  ));
-};
-
-// src/components/menu/menu-item.tsx
-import React2 from "react";
-import { Pressable as Pressable2, Text, View as View2 } from "react-native";
-
-// src/components/menu/menu-item.style.ts
-import { StyleSheet as StyleSheet2 } from "react-native";
-var MIN_WIDTH = 112;
-var MAX_WIDTH = 280;
-var styles2 = StyleSheet2.create({
-  container: {
-    minWidth: MIN_WIDTH,
-    maxWidth: MAX_WIDTH,
-    height: 48,
-    justifyContent: "center",
-    paddingHorizontal: 12
-  },
-  denseContainer: {
-    height: 32
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  content: {
-    flex: 1,
-    justifyContent: "center"
-  },
-  titleText: {
-    fontSize: 16
-  },
-  startContent: {
-    width: 24,
-    marginRight: 12,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  endContent: {
-    width: 24,
-    marginLeft: 12,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  disabled: {
-    opacity: 0.5
-  }
-});
-
-// src/components/menu/menu-item.tsx
-var MenuItem = ({
-  title,
-  startContent,
-  endContent,
-  isDisabled = false,
-  dense = false,
-  onPress,
-  customAppearance,
-  accessibilityLabel
-}) => {
-  const theme = useXUITheme();
-  const titleColor = isDisabled ? theme.colors.foreground + "50" : theme.colors.foreground;
-  const renderTitle = () => {
-    if (typeof title === "string" || typeof title === "number") {
-      return /* @__PURE__ */ React2.createElement(
-        Text,
-        {
-          style: [styles2.titleText, { color: titleColor }, customAppearance?.title],
-          numberOfLines: 1
-        },
-        title
-      );
-    }
-    return title;
-  };
-  return /* @__PURE__ */ React2.createElement(
-    Pressable2,
-    {
-      onPress: isDisabled ? void 0 : onPress,
-      disabled: isDisabled,
-      accessibilityRole: "menuitem",
-      accessibilityLabel,
-      accessibilityState: { disabled: isDisabled },
-      style: ({ pressed }) => [
-        styles2.container,
-        dense && styles2.denseContainer,
-        isDisabled && styles2.disabled,
-        pressed && !isDisabled && {
-          backgroundColor: theme.colors.foreground + "10"
-        },
-        customAppearance?.container
-      ]
-    },
-    /* @__PURE__ */ React2.createElement(View2, { style: [styles2.row, customAppearance?.content] }, startContent && /* @__PURE__ */ React2.createElement(View2, { style: styles2.startContent }, startContent), /* @__PURE__ */ React2.createElement(View2, { style: styles2.content }, renderTitle()), endContent && /* @__PURE__ */ React2.createElement(View2, { style: styles2.endContent }, endContent))
-  );
-};
-export {
-  Menu,
-  MenuItem
-};