@idealyst/components 1.2.136 → 1.2.137

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.136",
+  "version": "1.2.137",
   "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.137",
     "@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.137",
+    "@idealyst/tooling": "^1.2.137",
     "@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/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);