@idealyst/components 1.0.83 → 1.0.84

package/src/Popover/Popover.web.tsx

@@ -1,121 +1,11 @@
-import React, { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useRef, forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
-import { PopoverProps, PopoverPlacement } from './types';
+import { PopoverProps } from './types';
 import { popoverStyles } from './Popover.styles';
+import useMergeRefs from '../hooks/useMergeRefs';
+import { PositionedPortal } from '../internal/PositionedPortal';
 
-interface PopoverPosition {
-  top: number;
-  left: number;
-  placement: PopoverPlacement;
-}
-
-const calculatePosition = (
-  anchorRect: DOMRect,
-  popoverSize: { width: number; height: number },
-  placement: PopoverPlacement,
-  offset: number,
-  showArrow: boolean = false
-): PopoverPosition => {
-  const viewport = {
-    width: window.innerWidth,
-    height: window.innerHeight,
-    scrollX: window.scrollX,
-    scrollY: window.scrollY,
-  };
-
-  let position = { top: 0, left: 0 };
-  let finalPlacement = placement;
-
-  // Add extra offset for arrow
-  const arrowSize = 6;
-  const finalOffset = showArrow ? offset + arrowSize : offset;
-
-  // Calculate initial position based on placement
-  switch (placement) {
-    case 'top':
-      position = {
-        top: anchorRect.top + viewport.scrollY - popoverSize.height - finalOffset,
-        left: anchorRect.left + viewport.scrollX + anchorRect.width / 2 - popoverSize.width / 2,
-      };
-      break;
-    case 'top-start':
-      position = {
-        top: anchorRect.top + viewport.scrollY - popoverSize.height - finalOffset,
-        left: anchorRect.left + viewport.scrollX,
-      };
-      break;
-    case 'top-end':
-      position = {
-        top: anchorRect.top + viewport.scrollY - popoverSize.height - finalOffset,
-        left: anchorRect.right + viewport.scrollX - popoverSize.width,
-      };
-      break;
-    case 'bottom':
-      position = {
-        top: anchorRect.bottom + viewport.scrollY + finalOffset,
-        left: anchorRect.left + viewport.scrollX + anchorRect.width / 2 - popoverSize.width / 2,
-      };
-      break;
-    case 'bottom-start':
-      position = {
-        top: anchorRect.bottom + viewport.scrollY + finalOffset,
-        left: anchorRect.left + viewport.scrollX,
-      };
-      break;
-    case 'bottom-end':
-      position = {
-        top: anchorRect.bottom + viewport.scrollY + finalOffset,
-        left: anchorRect.right + viewport.scrollX - popoverSize.width,
-      };
-      break;
-    case 'left':
-      position = {
-        top: anchorRect.top + viewport.scrollY + anchorRect.height / 2 - popoverSize.height / 2,
-        left: anchorRect.left + viewport.scrollX - popoverSize.width - finalOffset,
-      };
-      break;
-    case 'left-start':
-      position = {
-        top: anchorRect.top + viewport.scrollY,
-        left: anchorRect.left + viewport.scrollX - popoverSize.width - finalOffset,
-      };
-      break;
-    case 'left-end':
-      position = {
-        top: anchorRect.bottom + viewport.scrollY - popoverSize.height,
-        left: anchorRect.left + viewport.scrollX - popoverSize.width - finalOffset,
-      };
-      break;
-    case 'right':
-      position = {
-        top: anchorRect.top + viewport.scrollY + anchorRect.height / 2 - popoverSize.height / 2,
-        left: anchorRect.right + viewport.scrollX + finalOffset,
-      };
-      break;
-    case 'right-start':
-      position = {
-        top: anchorRect.top + viewport.scrollY,
-        left: anchorRect.right + viewport.scrollX + finalOffset,
-      };
-      break;
-    case 'right-end':
-      position = {
-        top: anchorRect.bottom + viewport.scrollY - popoverSize.height,
-        left: anchorRect.right + viewport.scrollX + finalOffset,
-      };
-      break;
-  }
-
-  // Constrain to viewport
-  const padding = 8;
-  position.left = Math.max(padding, Math.min(position.left, viewport.width - popoverSize.width - padding));
-  position.top = Math.max(padding, Math.min(position.top, viewport.height + viewport.scrollY - popoverSize.height - padding));
-
-  return { ...position, placement: finalPlacement };
-};
-
-const Popover: React.FC<PopoverProps> = ({
+const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
   open,
   onOpenChange,
   anchor,
@@ -126,162 +16,48 @@ const Popover: React.FC<PopoverProps> = ({
   closeOnEscapeKey = true,
   showArrow = false,
   testID,
-}) => {
+}, ref) => {
   const popoverRef = useRef<HTMLDivElement>(null);
-  const [isVisible, setIsVisible] = useState(false);
-  const [shouldRender, setShouldRender] = useState(false);
-  const [position, setPosition] = useState<PopoverPosition>({ top: 0, left: 0, placement });
-
-  // Calculate position
-  const updatePosition = useCallback(() => {
-    if (!popoverRef.current) {
-      return;
-    }
-
-    let anchorElement: Element | null = null;
-    
-    if (anchor && typeof anchor === 'object' && 'current' in anchor && anchor.current) {
-      anchorElement = anchor.current;
-    } else if (React.isValidElement(anchor)) {
-      console.warn('Popover: React element anchors need to be refs for positioning');
-      return;
-    }
-
-    if (!anchorElement) {
-      return;
-    }
-
-    const anchorRect = anchorElement.getBoundingClientRect();
-    const popoverRect = popoverRef.current.getBoundingClientRect();
-
-    const newPosition = calculatePosition(
-      anchorRect,
-      { width: popoverRect.width || 200, height: popoverRect.height || 100 },
-      placement,
-      offset,
-      showArrow
-    );
-
-    setPosition(newPosition);
-  }, [anchor, placement, offset, showArrow]);
 
-  // Handle mounting/unmounting with animation
-  useEffect(() => {
-    if (open && !shouldRender) {
-      setShouldRender(true);
-      // Set visible immediately to render the DOM element
-      setIsVisible(true);
-    } else if (!open && shouldRender) {
-      setIsVisible(false);
-      const timer = setTimeout(() => {
-        setShouldRender(false);
-      }, 150);
-      return () => clearTimeout(timer);
-    }
-  }, [open, shouldRender]);
-
-  // Position calculation after DOM is ready
-  useLayoutEffect(() => {
-    if (shouldRender && isVisible) {
-      // Use a microtask to ensure the ref is attached
-      Promise.resolve().then(() => {
-        if (popoverRef.current) {
-          updatePosition();
-        }
-      });
-    }
-  }, [shouldRender, isVisible, anchor, placement, offset, showArrow]);
-
-  // Update position on scroll/resize
-  useEffect(() => {
-    if (shouldRender && isVisible) {
-      const handleResize = () => updatePosition();
-      const handleScroll = () => updatePosition();
-
-      window.addEventListener('resize', handleResize);
-      window.addEventListener('scroll', handleScroll, true);
-
-      return () => {
-        window.removeEventListener('resize', handleResize);
-        window.removeEventListener('scroll', handleScroll, true);
-      };
-    }
-  }, [updatePosition, shouldRender, isVisible]);
-
-  // Handle escape key
-  useEffect(() => {
-    if (!open || !closeOnEscapeKey) return;
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onOpenChange(false);
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [open, closeOnEscapeKey, onOpenChange]);
-
-  // Handle click outside
-  useEffect(() => {
-    if (!open || !closeOnClickOutside) return;
+  popoverStyles.useVariants({});
 
-    const handleClickOutside = (event: MouseEvent) => {
-      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
-        // Check if click was on anchor element
-        let anchorElement: Element | null = null;
-        if (anchor && typeof anchor === 'object' && 'current' in anchor && anchor.current) {
-          anchorElement = anchor.current;
-        }
-        
-        if (anchorElement && anchorElement.contains(event.target as Node)) {
-          return; // Don't close if clicked on anchor
-        }
-        
-        onOpenChange(false);
-      }
-    };
+  const containerProps = getWebProps([popoverStyles.container]);
+  const contentProps = getWebProps([popoverStyles.content]);
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [open, closeOnClickOutside, onOpenChange, anchor]);
+  const mergedPopoverRef = useMergeRefs(ref, popoverRef);
 
-  if (!shouldRender) return null;
+  // Extract anchor ref if it's a ref object
+  let anchorRef: React.RefObject<HTMLElement> | undefined;
+  if (anchor && typeof anchor === 'object' && 'current' in anchor) {
+    anchorRef = anchor as React.RefObject<HTMLElement>;
+  }
 
-  // Use Unistyles with wrapper approach
-  popoverStyles.useVariants({});
-  
-  const containerProps = getWebProps([
-    popoverStyles.container,
-    {
-      opacity: isVisible ? 1 : 0,
-      transform: isVisible ? 'scale(1)' : 'scale(0.95)',
-    }
-  ]);
-  const contentProps = getWebProps([popoverStyles.content]);
+  if (!anchorRef) {
+    console.warn('Popover: anchor must be a ref object');
+    return null;
+  }
 
-  console.log(position)
-  
-  const popoverContent = (
-    <div
-      ref={popoverRef}
-      style={{
-        position: 'fixed',
-        zIndex: 9999,
-        top: position.top,
-        left: position.left,
-      }}
-      data-testid={testID}
+  return (
+    <PositionedPortal
+      open={open}
+      anchor={anchorRef}
+      placement={placement}
+      offset={offset}
+      onClickOutside={closeOnClickOutside ? () => onOpenChange(false) : undefined}
+      onEscapeKey={closeOnEscapeKey ? () => onOpenChange(false) : undefined}
+      zIndex={9999}
     >
-      <div {...containerProps}>
-        <div {...contentProps}>
-          {children}
+      <div ref={mergedPopoverRef} data-testid={testID}>
+        <div {...containerProps}>
+          <div {...contentProps}>
+            {children}
+          </div>
         </div>
       </div>
-    </div>
+    </PositionedPortal>
   );
+});
 
-  return createPortal(popoverContent, document.body);
-};
+Popover.displayName = 'Popover';
 
 export default Popover;

package/src/Popover/index.ts

@@ -1,2 +1,5 @@
-export { default } from './Popover.web';
-export * from './types';
+import PopoverComponent from './Popover.web';
+
+export default PopoverComponent;
+export { PopoverComponent as Popover };
+export * from './types';

package/src/Popover/index.web.ts

@@ -1,2 +1,5 @@
-export { default } from './Popover.web';
-export * from './types';
+import PopoverComponent from './Popover.web';
+
+export default PopoverComponent;
+export { PopoverComponent as Popover };
+export * from './types';

package/src/Popover/types.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 
-export type PopoverPlacement = 
+export type PopoverPlacement =
   | 'top' | 'top-start' | 'top-end'
   | 'bottom' | 'bottom-start' | 'bottom-end'
   | 'left' | 'left-start' | 'left-end'
@@ -11,53 +12,53 @@ export interface PopoverProps {
    * Whether the popover is open/visible
    */
   open: boolean;
-  
+
   /**
    * Called when the popover should be opened or closed
    */
   onOpenChange: (open: boolean) => void;
-  
+
   /**
    * The anchor element to position the popover relative to
    * Can be a React element or a ref to a DOM element
    */
   anchor: ReactNode | React.RefObject<Element>;
-  
+
   /**
    * The content to display inside the popover
    */
   children: ReactNode;
-  
+
   /**
    * Preferred placement of the popover relative to anchor
    */
   placement?: PopoverPlacement;
-  
+
   /**
    * Distance from the anchor element in pixels
    */
   offset?: number;
-  
+
   /**
    * Whether clicking outside should close the popover
    */
   closeOnClickOutside?: boolean;
-  
+
   /**
    * Whether pressing escape key should close the popover (web only)
    */
   closeOnEscapeKey?: boolean;
-  
+
   /**
    * Whether to show an arrow pointing to the anchor
    */
   showArrow?: boolean;
-  
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */

package/src/Pressable/Pressable.native.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
 import { PressableProps } from './types';
 
-const Pressable: React.FC<PressableProps> = ({
+const Pressable = forwardRef<View, PressableProps>(({
   children,
   onPress,
   onPressIn,
@@ -12,7 +12,7 @@ const Pressable: React.FC<PressableProps> = ({
   testID,
   accessibilityLabel,
   accessibilityRole,
-}) => {
+}, ref) => {
   return (
     <TouchableWithoutFeedback
       onPress={disabled ? undefined : onPress}
@@ -21,13 +21,14 @@ const Pressable: React.FC<PressableProps> = ({
       disabled={disabled}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
-      accessibilityRole={accessibilityRole}
     >
-      <View style={style}>
+      <View ref={ref} style={style}>
         {children}
       </View>
     </TouchableWithoutFeedback>
   );
-};
+});
+
+Pressable.displayName = 'Pressable';
 
 export default Pressable;

package/src/Pressable/Pressable.web.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, forwardRef } from 'react';
 import { PressableProps } from './types';
 
-const Pressable: React.FC<PressableProps> = ({
+const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
   children,
   onPress,
   onPressIn,
@@ -11,7 +11,7 @@ const Pressable: React.FC<PressableProps> = ({
   testID,
   accessibilityLabel,
   accessibilityRole = 'button',
-}) => {
+}, ref) => {
   const [isPressed, setIsPressed] = useState(false);
 
   const handleMouseDown = useCallback(() => {
@@ -40,7 +40,6 @@ const Pressable: React.FC<PressableProps> = ({
   }, [disabled, onPress]);
 
   const webStyle = {
-    ...style,
     cursor: disabled ? 'default' : 'pointer',
     outline: 'none',
     userSelect: 'none' as const,
@@ -51,9 +50,10 @@ const Pressable: React.FC<PressableProps> = ({
 
   return (
     <div
+      ref={ref}
       role={accessibilityRole}
       tabIndex={disabled ? -1 : 0}
-      style={webStyle}
+      style={[webStyle, style] as any}
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp} // Handle mouse leave as press out
@@ -66,6 +66,8 @@ const Pressable: React.FC<PressableProps> = ({
       {children}
     </div>
   );
-};
+});
+
+Pressable.displayName = 'Pressable';
 
 export default Pressable;

package/src/Pressable/index.ts

@@ -1,2 +1,5 @@
-export { default } from './Pressable.web';
-export * from './types';
+import PressableComponent from './Pressable.web';
+
+export default PressableComponent;
+export { PressableComponent as Pressable };
+export * from './types';

package/src/Pressable/index.web.ts

@@ -1,2 +1,5 @@
-export { default } from './Pressable.web';
-export * from './types';
+import PressableComponent from './Pressable.web';
+
+export default PressableComponent;
+export { PressableComponent as Pressable };
+export * from './types';

package/src/Pressable/types.ts

@@ -1,46 +1,47 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface PressableProps {
   /**
    * Content to render inside the pressable area
    */
   children?: ReactNode;
-  
+
   /**
    * Called when the press gesture is activated
    */
   onPress?: () => void;
-  
+
   /**
    * Called when the press gesture starts
    */
   onPressIn?: () => void;
-  
+
   /**
    * Called when the press gesture ends
    */
   onPressOut?: () => void;
-  
+
   /**
    * Whether the pressable is disabled
    */
   disabled?: boolean;
-  
+
   /**
    * Additional styles to apply
    */
-  style?: any;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */
   testID?: string;
-  
+
   /**
    * Accessibility label for screen readers
    */
   accessibilityLabel?: string;
-  
+
   /**
    * Accessibility role (web)
    */