@idealyst/components 1.2.132 → 1.2.134

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.132",
+  "version": "1.2.134",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.132",
+    "@idealyst/theme": "^1.2.134",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -111,8 +111,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.132",
-    "@idealyst/tooling": "^1.2.132",
+    "@idealyst/theme": "^1.2.134",
+    "@idealyst/tooling": "^1.2.134",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Button/Button.native.tsx

@@ -1,10 +1,12 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useRef, useMemo } from 'react';
 import { ActivityIndicator, StyleSheet as RNStyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { buttonStyles } from './Button.styles';
 import { ButtonProps } from './types';
+import { createPressEvent } from '../utils/events';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import useMergeRefs from '../hooks/useMergeRefs';
 import type { IdealystElement } from '../utils/refTypes';
 
 const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
@@ -36,6 +38,9 @@ const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
     accessibilityPressed,
   } = props;
 
+  const internalRef = useRef<IdealystElement>(null);
+  const mergedRef = useMergeRefs(ref, internalRef);
+
   // Button is effectively disabled when loading
   const isDisabled = disabled || loading;
 
@@ -168,8 +173,8 @@ const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
 
   // TouchableOpacity types don't include nativeID but it's a valid RN prop
   const touchableProps = {
-    ref,
-    onPress: pressHandler,
+    ref: mergedRef,
+    onPress: pressHandler ? (e: any) => pressHandler(createPressEvent(e, 'press', internalRef)) : undefined,
     disabled: isDisabled,
     testID,
     nativeID: id,

package/src/Button/Button.web.tsx

@@ -3,6 +3,7 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { ButtonProps } from './types';
 import { buttonStyles } from './Button.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { createPressEvent } from '../utils/events';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
@@ -67,7 +68,7 @@ const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
     e.preventDefault();
     e.stopPropagation();
     if (!isDisabled && pressHandler) {
-      pressHandler();
+      pressHandler(createPressEvent(e));
     }
   };
 

package/src/Button/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon/icon-types';
+import type { PressEvent } from '../utils/events';
 import { Intent, Size } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
 import { InteractiveAccessibilityProps } from '../utils/accessibility';
@@ -31,13 +32,13 @@ export interface ButtonProps extends BaseProps, InteractiveAccessibilityProps {
   /**
    * Called when the button is pressed
    */
-  onPress?: () => void;
+  onPress?: (event: PressEvent) => void;
 
   /**
    * @deprecated Use `onPress` instead. This prop exists for web compatibility only.
    * Using onClick will log a deprecation warning in development.
    */
-  onClick?: () => void;
+  onClick?: (event: PressEvent) => void;
 
   /**
    * Whether the button is disabled

package/src/IconButton/IconButton.native.tsx

@@ -1,11 +1,13 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useRef, useMemo } from 'react';
 import { ActivityIndicator, StyleSheet as RNStyleSheet, TouchableOpacity, View } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { useUnistyles } from 'react-native-unistyles';
 import { iconButtonStyles } from './IconButton.styles';
 import { IconButtonProps } from './types';
+import { createPressEvent } from '../utils/events';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import useMergeRefs from '../hooks/useMergeRefs';
 import type { IdealystElement } from '../utils/refTypes';
 import type { Theme } from '@idealyst/theme';
 
@@ -36,6 +38,9 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
     accessibilityPressed,
   } = props;
 
+  const internalRef = useRef<IdealystElement>(null);
+  const mergedRef = useMergeRefs(ref, internalRef);
+
   // Get theme for icon size
   const { theme } = useUnistyles() as { theme: Theme };
 
@@ -153,8 +158,8 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
 
   // TouchableOpacity types don't include nativeID but it's a valid RN prop
   const touchableProps = {
-    ref,
-    onPress: pressHandler,
+    ref: mergedRef,
+    onPress: pressHandler ? (e: any) => pressHandler(createPressEvent(e, 'press', internalRef)) : undefined,
     disabled: isDisabled,
     testID,
     nativeID: id,

package/src/IconButton/IconButton.web.tsx

@@ -4,6 +4,7 @@ import { useUnistyles } from 'react-native-unistyles';
 import { IconButtonProps } from './types';
 import { iconButtonStyles } from './IconButton.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { createPressEvent } from '../utils/events';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
@@ -72,7 +73,7 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
     e.preventDefault();
     e.stopPropagation();
     if (!isDisabled && pressHandler) {
-      pressHandler();
+      pressHandler(createPressEvent(e));
     }
   };
 

package/src/IconButton/types.ts

@@ -4,6 +4,7 @@ import type { IconName } from '../Icon/icon-types';
 import { Intent, Size } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
 import { InteractiveAccessibilityProps } from '../utils/accessibility';
+import type { PressEvent } from '../utils/events';
 
 // Component-specific type aliases for future extensibility
 export type IconButtonType = 'contained' | 'outlined' | 'text';
@@ -31,13 +32,13 @@ export interface IconButtonProps extends BaseProps, InteractiveAccessibilityProp
   /**
    * Called when the button is pressed
    */
-  onPress?: () => void;
+  onPress?: (event: PressEvent) => void;
 
   /**
    * @deprecated Use `onPress` instead. This prop exists for web compatibility only.
    * Using onClick will log a deprecation warning in development.
    */
-  onClick?: () => void;
+  onClick?: (event: PressEvent) => void;
 
   /**
    * Whether the button is disabled

package/src/Pressable/Pressable.native.tsx

@@ -1,7 +1,9 @@
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
 import { PressableProps } from './types';
 import { pressableStyles } from './Pressable.styles';
+import { createPressEvent } from '../utils/events';
+import useMergeRefs from '../hooks/useMergeRefs';
 import type { IdealystElement } from '../utils/refTypes';
 
 const Pressable = forwardRef<IdealystElement, PressableProps>(({
@@ -20,6 +22,9 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
   accessibilityRole: _accessibilityRole,
   id,
 }, ref) => {
+  const internalRef = useRef<IdealystElement>(null);
+  const mergedRef = useMergeRefs(ref, internalRef);
+
   // Apply spacing variants
   pressableStyles.useVariants({
     padding,
@@ -31,14 +36,14 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
 
   return (
     <TouchableWithoutFeedback
-      onPress={disabled ? undefined : onPress}
-      onPressIn={disabled ? undefined : onPressIn}
-      onPressOut={disabled ? undefined : onPressOut}
+      onPress={disabled ? undefined : (e) => onPress?.(createPressEvent(e, 'press', internalRef))}
+      onPressIn={disabled ? undefined : (e) => onPressIn?.(createPressEvent(e, 'pressIn', internalRef))}
+      onPressOut={disabled ? undefined : (e) => onPressOut?.(createPressEvent(e, 'pressOut', internalRef))}
       disabled={disabled}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
     >
-      <View ref={ref as any} nativeID={id} style={[pressableStyle, style]}>
+      <View ref={mergedRef as any} nativeID={id} style={[pressableStyle, style]}>
         {children}
       </View>
     </TouchableWithoutFeedback>
@@ -47,4 +52,4 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
 
 Pressable.displayName = 'Pressable';
 
-export default Pressable;
+export default Pressable;

package/src/Pressable/Pressable.web.tsx

@@ -1,7 +1,9 @@
-import React, { useCallback, useState, forwardRef } from 'react';
+import React, { useCallback, useRef, useState, forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { PressableProps } from './types';
 import { pressableStyles } from './Pressable.styles';
+import { createPressEvent, createBaseSyntheticEvent } from '../utils/events';
+import type { PressEvent } from '../utils/events';
 import useMergeRefs from '../hooks/useMergeRefs';
 import type { IdealystElement } from '../utils/refTypes';
 import { flattenStyle } from '../utils/flattenStyle';
@@ -22,6 +24,7 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
   accessibilityRole = 'button',
   id,
 }, ref) => {
+  const internalRef = useRef<IdealystElement>(null);
   const [_isPressed, setIsPressed] = useState(false);
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
@@ -29,7 +32,7 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
     e.stopPropagation();
     if (disabled) return;
     setIsPressed(true);
-    onPressIn?.();
+    onPressIn?.(createPressEvent(e as React.MouseEvent<HTMLElement>, 'pressIn'));
   }, [disabled, onPressIn]);
 
   const handleMouseUp = useCallback((e: React.MouseEvent) => {
@@ -37,14 +40,14 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
     e.stopPropagation();
     if (disabled) return;
     setIsPressed(false);
-    onPressOut?.();
+    onPressOut?.(createPressEvent(e as React.MouseEvent<HTMLElement>, 'pressOut'));
   }, [disabled, onPressOut]);
 
   const handleClick = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
     if (disabled) return;
-    onPress?.();
+    onPress?.(createPressEvent(e as React.MouseEvent<HTMLElement>));
   }, [disabled, onPress]);
 
   const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
@@ -52,7 +55,12 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       event.stopPropagation();
-      onPress?.();
+      const pressEvent: PressEvent = {
+        ...createBaseSyntheticEvent(event.nativeEvent),
+        type: 'press',
+        targetRef: internalRef,
+      };
+      onPress?.(pressEvent);
     }
   }, [disabled, onPress]);
 
@@ -65,8 +73,8 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
 
   const webProps = getWebProps([(pressableStyles.pressable as any)({ disabled }), flattenStyle(style)]);
 
-  // Merge ref from getWebProps with forwarded ref
-  const mergedRef = useMergeRefs(ref as any, webProps.ref as any);
+  // Merge ref from getWebProps with forwarded ref and internal ref
+  const mergedRef = useMergeRefs(ref as any, webProps.ref as any, internalRef);
 
   return (
     <div

package/src/Pressable/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { PressableSpacingStyleProps } from '../utils/viewStyleProps';
+import type { PressEvent } from '../utils/events';
 
 export interface PressableProps extends PressableSpacingStyleProps {
   /**
@@ -11,17 +12,17 @@ export interface PressableProps extends PressableSpacingStyleProps {
   /**
    * Called when the press gesture is activated
    */
-  onPress?: () => void;
+  onPress?: (event: PressEvent) => void;
 
   /**
    * Called when the press gesture starts
    */
-  onPressIn?: () => void;
+  onPressIn?: (event: PressEvent) => void;
 
   /**
    * Called when the press gesture ends
    */
-  onPressOut?: () => void;
+  onPressOut?: (event: PressEvent) => void;
 
   /**
    * Whether the pressable is disabled

package/src/utils/events/events.native.ts

@@ -24,16 +24,20 @@ import type {
   ScrollEvent,
   SubmitEvent,
 } from './types';
+import type { RefObject } from 'react';
+import type { IdealystElement } from '../refTypes';
 
 // No-op functions for native (these concepts don't apply)
 const noop = () => {};
 
 /**
- * Wraps a React Native GestureResponderEvent into a standardized PressEvent
+ * Wraps a React Native GestureResponderEvent into a standardized PressEvent.
+ * Pass the component's ref object as `targetRef` so consumers can use it for anchoring.
  */
 export function createPressEvent(
   event: GestureResponderEvent,
-  type: PressEvent['type'] = 'press'
+  type: PressEvent['type'] = 'press',
+  targetRef?: RefObject<IdealystElement>
 ): PressEvent {
   return {
     nativeEvent: event.nativeEvent,
@@ -41,6 +45,7 @@ export function createPressEvent(
     defaultPrevented: false,
     propagationStopped: false,
     type,
+    targetRef: targetRef ?? { current: event.target },
     preventDefault: noop,
     stopPropagation: noop,
   };

package/src/utils/events/events.web.ts

@@ -35,6 +35,7 @@ export function createPressEvent(
     defaultPrevented: event.defaultPrevented,
     propagationStopped: false,
     type,
+    targetRef: { current: event.currentTarget },
     preventDefault: () => event.preventDefault(),
     stopPropagation: () => event.stopPropagation(),
   };

package/src/utils/events/types.ts

@@ -6,6 +6,9 @@
  * React Native's event system doesn't have these concepts in the same way.
  */
 
+import type { RefObject } from 'react';
+import type { IdealystElement } from '../refTypes';
+
 /**
  * Base synthetic event interface that normalizes web and native events
  */
@@ -53,6 +56,24 @@ export interface PressEvent extends SyntheticEvent {
    * The type of press event
    */
   type: 'press' | 'pressIn' | 'pressOut' | 'longPress';
+
+  /**
+   * A ref pointing to the element that fired the event.
+   * Can be passed directly as an anchor to Menu, Popover, etc.
+   *
+   * @example
+   * ```tsx
+   * const [open, setOpen] = useState(false);
+   * const [anchor, setAnchor] = useState<RefObject<IdealystElement> | null>(null);
+   *
+   * <Button onPress={(e) => {
+   *   setAnchor(e.targetRef);
+   *   setOpen(true);
+   * }}>Actions</Button>
+   * <Menu anchor={anchor} open={open} onOpenChange={setOpen} items={items} />
+   * ```
+   */
+  targetRef: RefObject<IdealystElement>;
 }
 
 /**