@idealyst/components 1.0.41 → 1.0.43

package/src/Popover/Popover.web.tsx

@@ -0,0 +1,287 @@
+import React, { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { getWebProps } from 'react-native-unistyles/web';
+import { PopoverProps, PopoverPlacement } from './types';
+import { popoverStyles } from './Popover.styles';
+
+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> = ({
+  open,
+  onOpenChange,
+  anchor,
+  children,
+  placement = 'bottom',
+  offset = 8,
+  closeOnClickOutside = true,
+  closeOnEscapeKey = true,
+  showArrow = false,
+  testID,
+}) => {
+  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;
+
+    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);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open, closeOnClickOutside, onOpenChange, anchor]);
+
+  if (!shouldRender) return null;
+
+  // 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]);
+
+  console.log(position)
+  
+  const popoverContent = (
+    <div
+      ref={popoverRef}
+      style={{
+        position: 'fixed',
+        zIndex: 9999,
+        top: position.top,
+        left: position.left,
+      }}
+      data-testid={testID}
+    >
+      <div {...containerProps}>
+        <div {...contentProps}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(popoverContent, document.body);
+};
+
+export default Popover;

package/src/Popover/index.native.ts

@@ -0,0 +1,2 @@
+export { default } from './Popover.native';
+export * from './types';

package/src/Popover/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Popover.web';
+export * from './types';

package/src/Popover/index.web.ts

@@ -0,0 +1,2 @@
+export { default } from './Popover.web';
+export * from './types';

package/src/Popover/types.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+
+export type PopoverPlacement = 
+  | 'top' | 'top-start' | 'top-end'
+  | 'bottom' | 'bottom-start' | 'bottom-end'
+  | 'left' | 'left-start' | 'left-end'
+  | 'right' | 'right-start' | 'right-end';
+
+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;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/examples/AllExamples.tsx

@@ -11,6 +11,8 @@ import { DividerExamples } from './DividerExamples';
 import { BadgeExamples } from './BadgeExamples';
 import { AvatarExamples } from './AvatarExamples';
 import { ScreenExamples } from './ScreenExamples';
+import { DialogExamples } from './DialogExamples';
+import { PopoverExamples } from './PopoverExamples';
 import { ThemeExtensionExamples } from './ThemeExtensionExamples';
 
 export const AllExamples = () => {
@@ -60,6 +62,12 @@ export const AllExamples = () => {
       
       <ScreenExamples />
       <Divider spacing="medium" />
+      
+      <DialogExamples />
+      <Divider spacing="medium" />
+      
+      <PopoverExamples />
+      <Divider spacing="medium" />
 
       <Divider spacing="large" intent="success">
         <Text size="small" weight="semibold" color="green">THEME SYSTEM</Text>

package/src/examples/DialogExamples.tsx

@@ -0,0 +1,157 @@
+import { useState } from 'react';
+import { Screen, View, Button, Text, Dialog } from '../index';
+
+export const DialogExamples = () => {
+  const [basicOpen, setBasicOpen] = useState(false);
+  const [alertOpen, setAlertOpen] = useState(false);
+  const [confirmationOpen, setConfirmationOpen] = useState(false);
+  const [sizesOpen, setSizesOpen] = useState<string | null>(null);
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+        <Text size="large" weight="bold" align="center">
+          Dialog Examples
+        </Text>
+        
+        {/* Basic Dialog */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Basic Dialog</Text>
+          <Button onPress={() => setBasicOpen(true)}>
+            Open Basic Dialog
+          </Button>
+          <Dialog
+            open={basicOpen}
+            onOpenChange={setBasicOpen}
+            title="Basic Dialog"
+          >
+            <Text>This is a basic dialog with a title and some content.</Text>
+            <View spacing="md" style={{ marginTop: 16 }}>
+              <Button 
+                variant="contained" 
+                intent="primary"
+                onPress={() => setBasicOpen(false)}
+              >
+                Close Dialog
+              </Button>
+            </View>
+          </Dialog>
+        </View>
+
+        {/* Dialog Variants */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Dialog Variants</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+            <Button onPress={() => setAlertOpen(true)}>
+              Alert Dialog
+            </Button>
+            <Button onPress={() => setConfirmationOpen(true)}>
+              Confirmation Dialog
+            </Button>
+          </View>
+          
+          {/* Alert Dialog */}
+          <Dialog
+            open={alertOpen}
+            onOpenChange={setAlertOpen}
+            title="Important Alert"
+            variant="alert"
+          >
+            <Text>This is an alert dialog. It has a top border to indicate importance.</Text>
+            <View spacing="md" style={{ marginTop: 16 }}>
+              <Button 
+                variant="contained" 
+                intent="primary"
+                onPress={() => setAlertOpen(false)}
+              >
+                Acknowledge
+              </Button>
+            </View>
+          </Dialog>
+
+          {/* Confirmation Dialog */}
+          <Dialog
+            open={confirmationOpen}
+            onOpenChange={setConfirmationOpen}
+            title="Confirm Action"
+            variant="confirmation"
+            closeOnBackdropClick={false}
+          >
+            <Text>Are you sure you want to delete this item? This action cannot be undone.</Text>
+            <View style={{ flexDirection: 'row', gap: 12, marginTop: 16 }}>
+              <Button 
+                variant="outlined" 
+                intent="neutral"
+                onPress={() => setConfirmationOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button 
+                variant="contained" 
+                intent="error"
+                onPress={() => setConfirmationOpen(false)}
+              >
+                Delete
+              </Button>
+            </View>
+          </Dialog>
+        </View>
+
+        {/* Dialog Sizes */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Dialog Sizes</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+            {['small', 'medium', 'large'].map((size) => (
+              <Button 
+                key={size}
+                onPress={() => setSizesOpen(size)}
+              >
+                {size.charAt(0).toUpperCase() + size.slice(1)} Dialog
+              </Button>
+            ))}
+          </View>
+          
+          {sizesOpen && (
+            <Dialog
+              open={!!sizesOpen}
+              onOpenChange={() => setSizesOpen(null)}
+              title={`${sizesOpen.charAt(0).toUpperCase() + sizesOpen.slice(1)} Dialog`}
+              size={sizesOpen as 'small' | 'medium' | 'large'}
+            >
+              <Text>
+                This is a {sizesOpen} dialog. The width and maximum width are adjusted based on the size prop.
+              </Text>
+              <View spacing="md" style={{ marginTop: 16 }}>
+                <Button 
+                  variant="contained" 
+                  intent="primary"
+                  onPress={() => setSizesOpen(null)}
+                >
+                  Close
+                </Button>
+              </View>
+            </Dialog>
+          )}
+        </View>
+
+
+        {/* Dialog Options */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Dialog Options</Text>
+          <Text size="small" color="secondary">
+            • Close on backdrop click: Enabled by default, disabled for confirmation dialog above
+          </Text>
+          <Text size="small" color="secondary">
+            • Close on escape key: Enabled by default (web only)
+          </Text>
+          <Text size="small" color="secondary">
+            • Hardware back button: Handled automatically (native only)
+          </Text>
+          <Text size="small" color="secondary">
+            • Focus management: Automatic focus trapping and restoration (web only)
+          </Text>
+        </View>
+      </View>
+    </Screen>
+  );
+};

package/src/examples/PopoverExamples.tsx

@@ -0,0 +1,155 @@
+import { useState, useRef } from 'react';
+import { Screen, View, Button, Text, Popover } from '../index';
+
+export const PopoverExamples = () => {
+  const [basicOpen, setBasicOpen] = useState(false);
+  const [placementOpen, setPlacementOpen] = useState<string | null>(null);
+  const [arrowOpen, setArrowOpen] = useState(false);
+
+  const basicButtonRef = useRef<HTMLDivElement>(null);
+  const placementButtonRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+  const arrowButtonRef = useRef<HTMLDivElement>(null);
+
+  const placements = [
+    'top', 'top-start', 'top-end',
+    'bottom', 'bottom-start', 'bottom-end',
+    'left', 'left-start', 'left-end',
+    'right', 'right-start', 'right-end',
+  ];
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+        <Text size="large" weight="bold" align="center">
+          Popover Examples
+        </Text>
+        
+        {/* Basic Popover */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Basic Popover</Text>
+          <div ref={basicButtonRef} style={{ display: 'inline-block' }}>
+            <Button onPress={() => setBasicOpen(true)}>
+              Open Basic Popover
+            </Button>
+          </div>
+          <Popover
+            open={basicOpen}
+            onOpenChange={setBasicOpen}
+            anchor={basicButtonRef}
+            placement="bottom"
+          >
+            <View spacing="sm">
+              <Text weight="bold">Basic Popover</Text>
+              <Text size="small">This is a basic popover with some content.</Text>
+              <Button size="small" onPress={() => setBasicOpen(false)}>
+                Close
+              </Button>
+            </View>
+          </Popover>
+        </View>
+
+        {/* Placement Examples */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Placement Options</Text>
+          <View style={{ 
+            display: 'grid', 
+            gridTemplateColumns: 'repeat(3, 1fr)', 
+            gap: 8, 
+            maxWidth: 400 
+          }}>
+            {placements.map((placement) => (
+              <div 
+                key={placement}
+                ref={(ref) => placementButtonRefs.current[placement] = ref}
+                style={{ display: 'inline-block' }}
+              >
+                <Button
+                  size="small"
+                  variant="outlined"
+                  onPress={() => setPlacementOpen(placement)}
+                >
+                  {placement}
+                </Button>
+              </div>
+            ))}
+          </View>
+          
+          {placementOpen && (
+            <Popover
+              open={!!placementOpen}
+              onOpenChange={() => setPlacementOpen(null)}
+              anchor={{ current: placementButtonRefs.current[placementOpen] }}
+              placement={placementOpen as any}
+            >
+              <View spacing="sm">
+                <Text weight="bold">{placementOpen} placement</Text>
+                <Text size="small">
+                  Positioned {placementOpen} relative to the button
+                </Text>
+                <Button size="small" onPress={() => setPlacementOpen(null)}>
+                  Close
+                </Button>
+              </View>
+            </Popover>
+          )}
+        </View>
+
+        {/* Arrow Example */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">With Arrow</Text>
+          <div ref={arrowButtonRef} style={{ display: 'inline-block' }}>
+            <Button 
+              variant="contained"
+              intent="success"
+              onPress={() => setArrowOpen(true)}
+            >
+              Popover with Arrow
+            </Button>
+          </div>
+          <Popover
+            open={arrowOpen}
+            onOpenChange={setArrowOpen}
+            anchor={arrowButtonRef}
+            placement="top"
+            showArrow={true}
+          >
+            <View spacing="sm">
+              <Text weight="bold">Arrow Popover</Text>
+              <Text size="small">
+                This popover includes an arrow pointing to the anchor element.
+              </Text>
+              <Button size="small" onPress={() => setArrowOpen(false)}>
+                Close
+              </Button>
+            </View>
+          </Popover>
+        </View>
+
+        {/* Features Description */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Features</Text>
+          <View spacing="sm">
+            <Text size="small" color="secondary">
+              • Automatically positions within viewport bounds
+            </Text>
+            <Text size="small" color="secondary">
+              • 12 placement options (top, bottom, left, right with start/end variants)
+            </Text>
+            <Text size="small" color="secondary">
+              • Optional arrow pointing to anchor element
+            </Text>
+            <Text size="small" color="secondary">
+              • Click outside or escape key to close
+            </Text>
+            <Text size="small" color="secondary">
+              • Smooth animations and transitions
+            </Text>
+            <Text size="small" color="secondary">
+              • Follows anchor element on scroll/resize (web)
+            </Text>
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};