@idealyst/components 1.2.136 → 1.2.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.136",
+  "version": "1.2.138",
   "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.136",
+    "@idealyst/theme": "^1.2.138",
     "@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.136",
-    "@idealyst/tooling": "^1.2.136",
+    "@idealyst/theme": "^1.2.138",
+    "@idealyst/tooling": "^1.2.138",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Button/Button.web.tsx

@@ -65,8 +65,6 @@ const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
   }
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
     if (!isDisabled && pressHandler) {
       pressHandler(createPressEvent(e));
     }

package/src/Dialog/Dialog.native.tsx

@@ -1,6 +1,6 @@
-import { useEffect, forwardRef, useMemo, useState } from 'react';
+import { useEffect, forwardRef, useMemo } from 'react';
 import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, Platform, Keyboard, useWindowDimensions } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import Animated, { useSharedValue, useDerivedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { useSafeAreaInsets } from '@idealyst/theme';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
@@ -51,27 +51,35 @@ const Dialog = forwardRef<View, DialogProps>(({
   // Get safe area insets
   const insets = useSafeAreaInsets();
 
-  // Track keyboard height for avoidKeyboard
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  // Animated keyboard height for smooth keyboard avoidance
+  const keyboardHeight = useSharedValue(0);
   const { height: screenHeight } = useWindowDimensions();
 
   useEffect(() => {
-    if (!avoidKeyboard || !open) return;
+    if (!avoidKeyboard || !open) {
+      // Animate back to 0 when dialog closes or avoidKeyboard is disabled
+      keyboardHeight.value = withTiming(0, { duration: 250 });
+      return;
+    }
 
     const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
     const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
 
     const showSub = Keyboard.addListener(showEvent, (e) => {
-      setKeyboardHeight(e.endCoordinates.height);
+      const duration = Platform.OS === 'ios' ? e.duration : 250;
+      keyboardHeight.value = withTiming(e.endCoordinates.height, { duration });
     });
 
-    const hideSub = Keyboard.addListener(hideEvent, () => {
-      setKeyboardHeight(0);
+    const hideSub = Keyboard.addListener(hideEvent, (e) => {
+      const duration = Platform.OS === 'ios' ? (e?.duration ?? 250) : 250;
+      keyboardHeight.value = withTiming(0, { duration });
     });
 
     return () => {
       showSub.remove();
       hideSub.remove();
+      // Animate back to 0 on cleanup so we don't get stuck at a stale value
+      keyboardHeight.value = withTiming(0, { duration: 250 });
     };
   }, [avoidKeyboard, open]);
 
@@ -168,48 +176,69 @@ const Dialog = forwardRef<View, DialogProps>(({
     bottom: 0,
   };
 
-  // Position offsets for the container view
-  // Top: always safe area + padding
-  // Bottom: safe area + padding (no keyboard) or keyboard + padding (with keyboard)
+  // Derived bottom offset — animates smoothly with keyboard
   const topOffset = insets.top + paddingProp;
-  const bottomOffset = keyboardHeight > 0
-    ? keyboardHeight + paddingProp
-    : insets.bottom + paddingProp;
-
-  // Max height is the available space (used as a ceiling, children can be smaller)
-  const maxAvailableHeight = screenHeight - topOffset - bottomOffset;
+  const bottomOffset = useDerivedValue(() => {
+    'worklet';
+    return keyboardHeight.value > 0
+      ? keyboardHeight.value + paddingProp
+      : insets.bottom + paddingProp;
+  });
 
-  // Use the smaller of user's preferred max height and available space
-  const effectiveMaxHeight = maxContentHeight
-    ? Math.min(maxContentHeight, maxAvailableHeight)
-    : maxAvailableHeight;
+  // Animated style for the positioning wrapper
+  const positioningStyle = useAnimatedStyle(() => {
+    'worklet';
+    return {
+      bottom: bottomOffset.value,
+    };
+  });
 
   // Resolve explicit height (number or percentage string)
   const resolvedHeight = typeof height === 'string'
     ? height.endsWith('%')
-      ? (parseFloat(height) / 100) * maxAvailableHeight
+      ? (parseFloat(height) / 100) * screenHeight // approximate; animated version below handles it
       : parseFloat(height)
     : height;
 
-  // Dialog uses the effective max height, with a definite height when requested
-  // so children can resolve flex: 1 against it
-  const dialogContainerStyle = {
+  // Only apply flex: 1 to content when the dialog has a definite height to flex against.
+  // Without a definite height, flex: 1 collapses content instead of wrapping naturally.
+  const hasDefiniteHeight = Boolean(resolvedHeight || maxContentHeight);
+
+  // Static container styles (not dependent on keyboard)
+  const staticContainerStyle = {
     ...containerStyle,
-    maxHeight: effectiveMaxHeight,
-    height: resolvedHeight
-      ? Math.min(resolvedHeight, effectiveMaxHeight)
-      : maxContentHeight
-        ? effectiveMaxHeight
-        : undefined,
     flex: undefined,
   };
 
-  // Only apply flex: 1 to content when the dialog has a definite height to flex against.
-  // Without a definite height, flex: 1 collapses content instead of wrapping naturally.
-  const hasDefiniteHeight = Boolean(resolvedHeight || maxContentHeight);
+  // Animated maxHeight/height that responds to keyboard changes
+  const dialogSizeStyle = useAnimatedStyle(() => {
+    'worklet';
+    const currentBottom = bottomOffset.value;
+    const maxAvailable = screenHeight - topOffset - currentBottom;
+    const effectiveMax = maxContentHeight
+      ? Math.min(maxContentHeight, maxAvailable)
+      : maxAvailable;
+
+    const result: { maxHeight: number; height?: number } = {
+      maxHeight: effectiveMax,
+    };
+
+    if (resolvedHeight) {
+      result.height = Math.min(resolvedHeight, effectiveMax);
+    } else if (maxContentHeight) {
+      result.height = effectiveMax;
+    }
+
+    return result;
+  });
 
   const dialogContainer = (
-    <Animated.View ref={ref as any} style={[dialogContainerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
+    <Animated.View
+      ref={ref as any}
+      style={[staticContainerStyle, style, dialogSizeStyle, containerAnimatedStyle]}
+      nativeID={id}
+      {...nativeA11yProps}
+    >
       {(title || showCloseButton) && (
         <View style={[headerStyle, { flexShrink: 0 }]}>
           {title && (
@@ -259,25 +288,24 @@ const Dialog = forwardRef<View, DialogProps>(({
         </TouchableWithoutFeedback>
       )}
       {/* Dialog content - positioned absolute, accounts for keyboard and safe areas */}
-      <View
-        style={{
+      <Animated.View
+        style={[{
           position: 'absolute',
           top: topOffset,
           left: 0,
           right: 0,
-          bottom: bottomOffset,
           alignItems: 'center',
           justifyContent: 'center',
           zIndex: 1001,
-        }}
+        }, positioningStyle]}
         pointerEvents="box-none"
       >
         {dialogContainer}
-      </View>
+      </Animated.View>
     </Modal>
   );
 });
 
 Dialog.displayName = 'Dialog';
 
-export default Dialog;
+export default Dialog;

package/src/IconButton/IconButton.web.tsx

@@ -70,8 +70,6 @@ const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) =>
   }
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
     if (!isDisabled && pressHandler) {
       pressHandler(createPressEvent(e));
     }

package/src/Pressable/Pressable.web.tsx

@@ -28,24 +28,18 @@ const Pressable = forwardRef<IdealystElement, PressableProps>(({
   const [_isPressed, setIsPressed] = useState(false);
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
     if (disabled) return;
     setIsPressed(true);
     onPressIn?.(createPressEvent(e as React.MouseEvent<HTMLElement>, 'pressIn'));
   }, [disabled, onPressIn]);
 
   const handleMouseUp = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
     if (disabled) return;
     setIsPressed(false);
     onPressOut?.(createPressEvent(e as React.MouseEvent<HTMLElement>, 'pressOut'));
   }, [disabled, onPressOut]);
 
   const handleClick = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
     if (disabled) return;
     onPress?.(createPressEvent(e as React.MouseEvent<HTMLElement>));
   }, [disabled, onPress]);

package/src/examples/MenuExamples.tsx

@@ -1,13 +1,18 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Screen, View, Text, Button, Menu, MenuItem } from '@idealyst/components';
 
 export const MenuExamples: React.FC = () => {
   const [basicMenuOpen, setBasicMenuOpen] = useState(false);
+  const [anchorMenuOpen, setAnchorMenuOpen] = useState(false);
   const [placementMenuOpen, setPlacementMenuOpen] = useState(false);
   const [iconNameMenuOpen, setIconNameMenuOpen] = useState(false);
   const [intentMenuOpen, setIntentMenuOpen] = useState(false);
   const [separatorMenuOpen, setSeparatorMenuOpen] = useState(false);
   const [disabledMenuOpen, setDisabledMenuOpen] = useState(false);
+  const [rightEdgeMenuOpen, setRightEdgeMenuOpen] = useState(false);
+  const [bottomEdgeMenuOpen, setBottomEdgeMenuOpen] = useState(false);
+
+  const anchorRef = useRef(null);
 
   const [selectedAction, setSelectedAction] = useState<string>('');
 
@@ -59,7 +64,7 @@ export const MenuExamples: React.FC = () => {
       )}
 
       <View gap="md">
-        <Text typography="h5">Basic Menu</Text>
+        <Text typography="h5">Basic Menu (Children Mode)</Text>
         <Menu
           items={basicItems}
           open={basicMenuOpen}
@@ -71,6 +76,27 @@ export const MenuExamples: React.FC = () => {
         </Menu>
       </View>
 
+      <View gap="md">
+        <Text typography="h5">Anchor Mode</Text>
+        <Text typography="body2" color="secondary">
+          The menu appears next to the anchor element, not the button.
+        </Text>
+        <View direction="row" gap="md" align="center">
+          <Button type="outlined" onPress={() => setAnchorMenuOpen(true)}>
+            Open Anchored Menu
+          </Button>
+          <View ref={anchorRef} style={{ padding: 8, borderWidth: 1, borderStyle: 'dashed', borderColor: '#999', borderRadius: 8 }}>
+            <Text color="secondary">Anchor</Text>
+          </View>
+        </View>
+        <Menu
+          items={iconNameItems}
+          anchor={anchorRef}
+          open={anchorMenuOpen}
+          onOpenChange={setAnchorMenuOpen}
+        />
+      </View>
+
       <View gap="md">
         <Text typography="h5">Placement Options</Text>
         <Menu
@@ -136,6 +162,37 @@ export const MenuExamples: React.FC = () => {
           </Button>
         </Menu>
       </View>
+
+      <Text typography="h4">Edge-of-Screen Tests</Text>
+      <Text typography="body2" color="secondary">
+        These menus should flip or clamp to stay within the viewport.
+      </Text>
+
+      <View style={{ alignItems: 'flex-end' }}>
+        <Menu
+          items={iconNameItems}
+          open={rightEdgeMenuOpen}
+          onOpenChange={setRightEdgeMenuOpen}
+          placement="bottom-end"
+        >
+          <Button type="outlined">
+            Right Edge
+          </Button>
+        </Menu>
+      </View>
+
+      <View style={{ marginTop: 200 }}>
+        <Menu
+          items={separatorItems}
+          open={bottomEdgeMenuOpen}
+          onOpenChange={setBottomEdgeMenuOpen}
+          placement="bottom-start"
+        >
+          <Button type="outlined">
+            Bottom Edge (scroll down)
+          </Button>
+        </Menu>
+      </View>
     </View>
     </Screen>
   );

package/src/internal/PositionedPortal.tsx

@@ -120,28 +120,42 @@ const calculatePosition = (
     position.width = anchorRect.width;
   }
 
-  // Clamp to viewport bounds (viewport-relative for fixed positioning)
   const padding = 8;
-  position.left = Math.max(padding, Math.min(position.left, vpWidth - contentSize.width - padding));
-  position.top = Math.max(padding, Math.min(position.top, vpHeight - contentSize.height - padding));
 
-  // Flip vertical placement if it overflows
+  // Flip placement if it overflows (must run BEFORE clamping)
   const isAbove = placement.startsWith('top');
   const isBelow = placement.startsWith('bottom');
+  const isLeft = placement.startsWith('left');
+  const isRight = placement.startsWith('right');
+
   if (isBelow && position.top + contentSize.height > vpHeight - padding) {
-    // Not enough space below — try above
     const aboveTop = anchorRect.top - contentSize.height - offset;
     if (aboveTop >= padding) {
       position.top = aboveTop;
     }
   } else if (isAbove && position.top < padding) {
-    // Not enough space above — try below
     const belowTop = anchorRect.bottom + offset;
     if (belowTop + contentSize.height <= vpHeight - padding) {
       position.top = belowTop;
     }
   }
 
+  if (isRight && position.left + contentSize.width > vpWidth - padding) {
+    const leftPos = anchorRect.left - contentSize.width - offset;
+    if (leftPos >= padding) {
+      position.left = leftPos;
+    }
+  } else if (isLeft && position.left < padding) {
+    const rightPos = anchorRect.right + offset;
+    if (rightPos + contentSize.width <= vpWidth - padding) {
+      position.left = rightPos;
+    }
+  }
+
+  // Clamp to viewport bounds as final safety net
+  position.left = Math.max(padding, Math.min(position.left, vpWidth - contentSize.width - padding));
+  position.top = Math.max(padding, Math.min(position.top, vpHeight - contentSize.height - padding));
+
   return position;
 };
 
@@ -160,19 +174,20 @@ export const PositionedPortal: React.FC<PositionedPortalProps> = ({
   const [position, setPosition] = useState<Position>({ top: 0, left: 0 });
   const [isPositioned, setIsPositioned] = useState(false);
 
-  // Calculate position from current DOM measurements
+  // Calculate position
   const updatePosition = useCallback(() => {
     if (!contentRef.current || !anchor.current) return;
 
     const anchorRect = anchor.current.getBoundingClientRect();
-    const contentRect = contentRef.current.getBoundingClientRect();
-
-    // Skip if content hasn't laid out yet
-    if (contentRect.width === 0 && contentRect.height === 0) return;
+    // Use scrollWidth/scrollHeight for intrinsic content size —
+    // getBoundingClientRect() can be wrong when the element is at position 0,0
+    // because the container div has no explicit width and may stretch.
+    const contentWidth = contentRef.current.scrollWidth;
+    const contentHeight = contentRef.current.scrollHeight;
 
     const newPosition = calculatePosition(
       anchorRect,
-      { width: contentRect.width, height: contentRect.height },
+      { width: contentWidth, height: contentHeight },
       placement,
       offset,
       matchWidth
@@ -182,26 +197,11 @@ export const PositionedPortal: React.FC<PositionedPortalProps> = ({
     setIsPositioned(true);
   }, [anchor, placement, offset, matchWidth]);
 
-  // Observe content size changes so we re-position once children lay out
-  useEffect(() => {
-    if (!open || !contentRef.current) return;
-
-    const observer = new ResizeObserver(() => {
-      updatePosition();
-    });
-    observer.observe(contentRef.current);
-
-    return () => observer.disconnect();
-  }, [open, updatePosition]);
-
-  // Initial positioning after portal mounts
+  // Position after DOM is ready
   useLayoutEffect(() => {
     if (open) {
-      // Double-rAF to ensure portal content is in the DOM and laid out
       const rafId = requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          updatePosition();
-        });
+        updatePosition();
       });
       return () => cancelAnimationFrame(rafId);
     } else {
@@ -209,10 +209,12 @@ export const PositionedPortal: React.FC<PositionedPortalProps> = ({
     }
   }, [open, updatePosition]);
 
-  // Re-position on scroll/resize
+  // Update position on scroll/resize
   useEffect(() => {
     if (!open) return;
 
+    updatePosition();
+
     const handleUpdate = () => updatePosition();
     window.addEventListener('resize', handleUpdate);
     window.addEventListener('scroll', handleUpdate, true);

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

@@ -33,21 +33,25 @@ const noop = () => {};
 /**
  * Wraps a React Native GestureResponderEvent into a standardized PressEvent.
  * Pass the component's ref object as `targetRef` so consumers can use it for anchoring.
+ * preventDefault() and stopPropagation() are no-ops on native but still update flags.
  */
 export function createPressEvent(
   event: GestureResponderEvent,
   type: PressEvent['type'] = 'press',
   targetRef?: RefObject<IdealystElement>
 ): PressEvent {
+  let defaultPrevented = false;
+  let propagationStopped = false;
+
   return {
     nativeEvent: event.nativeEvent,
     timestamp: event.nativeEvent.timestamp,
-    defaultPrevented: false,
-    propagationStopped: false,
+    get defaultPrevented() { return defaultPrevented; },
+    get propagationStopped() { return propagationStopped; },
     type,
     targetRef: targetRef ?? { current: event.target },
-    preventDefault: noop,
-    stopPropagation: noop,
+    preventDefault() { defaultPrevented = true; },
+    stopPropagation() { propagationStopped = true; },
   };
 }
 

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

@@ -23,21 +23,32 @@ type ReactFormEvent = React.FormEvent<HTMLFormElement>;
 type ReactUIEvent = React.UIEvent<HTMLElement>;
 
 /**
- * Wraps a React mouse/click event into a standardized PressEvent
+ * Wraps a React mouse/click event into a standardized PressEvent.
+ * preventDefault() and stopPropagation() call through to the underlying
+ * React event and also update the PressEvent's own flags.
  */
 export function createPressEvent(
   event: ReactMouseEvent,
   type: PressEvent['type'] = 'press'
 ): PressEvent {
+  let defaultPrevented = event.defaultPrevented;
+  let propagationStopped = false;
+
   return {
     nativeEvent: event.nativeEvent,
     timestamp: event.timeStamp,
-    defaultPrevented: event.defaultPrevented,
-    propagationStopped: false,
+    get defaultPrevented() { return defaultPrevented; },
+    get propagationStopped() { return propagationStopped; },
     type,
     targetRef: { current: event.currentTarget },
-    preventDefault: () => event.preventDefault(),
-    stopPropagation: () => event.stopPropagation(),
+    preventDefault() {
+      defaultPrevented = true;
+      event.preventDefault();
+    },
+    stopPropagation() {
+      propagationStopped = true;
+      event.stopPropagation();
+    },
   };
 }