@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/components/ui/overlay/popover.js

@@ -1,462 +1,282 @@
-import React, { useState, useRef, useEffect, useCallback, cloneElement } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, cloneElement } from 'react';
 import { useTheme } from '../../../themes/useTheme';
 import { Portal } from './portal';
 import { FocusManager } from './focus-manager';
-import { 
-  PopoverProps, 
-  PopoverContentProps, 
-  PopoverHeaderProps, 
-  PopoverBodyProps, 
-  PopoverFooterProps 
-} from './types';
-
 // SVG Icons
-const XMarkIcon: React.FC<{ className?: string }> = ({ className = 'w-5 h-5' }) => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-  </svg>
-);
-
+const XMarkIcon = ({ className = 'w-5 h-5' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
 // Default color fallbacks
 const getDefaultColors = () => ({
-  surface: { background: '#ffffff', surface: '#f9fafb', border: '#e5e7eb', divider: '#e5e7eb' },
-  text: { primary: '#111827', secondary: '#6b7280', muted: '#9ca3af', inverse: '#ffffff' },
-  interactive: { hover: '#f3f4f6', active: '#e5e7eb', focus: '#3b82f6', disabled: '#d1d5db' },
-  primary: { 500: '#3b82f6', 600: '#2563eb' },
-  semantic: { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' }
+    surface: { background: '#ffffff', surface: '#f9fafb', border: '#e5e7eb', divider: '#e5e7eb' },
+    text: { primary: '#111827', secondary: '#6b7280', muted: '#9ca3af', inverse: '#ffffff' },
+    interactive: { hover: '#f3f4f6', active: '#e5e7eb', focus: '#3b82f6', disabled: '#d1d5db' },
+    primary: { 500: '#3b82f6', 600: '#2563eb' },
+    semantic: { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' }
 });
-
 // Position calculations utility (similar to tooltip but adjusted for larger content)
-const calculatePosition = (
-  triggerRect: DOMRect,
-  popoverRect: DOMRect,
-  position: PopoverProps['position'] = 'bottom',
-  offset: number = 8
-) => {
-  const scrollX = window.scrollX || document.documentElement.scrollLeft;
-  const scrollY = window.scrollY || document.documentElement.scrollTop;
-  
-  let top = 0;
-  let left = 0;
-  
-  // Base calculations
-  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
-  const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-  
-  switch (position) {
-    case 'top':
-      top = triggerRect.top - popoverRect.height - offset;
-      left = triggerCenterX - popoverRect.width / 2;
-      break;
-    case 'top-start':
-      top = triggerRect.top - popoverRect.height - offset;
-      left = triggerRect.left;
-      break;
-    case 'top-end':
-      top = triggerRect.top - popoverRect.height - offset;
-      left = triggerRect.right - popoverRect.width;
-      break;
-    case 'bottom':
-      top = triggerRect.bottom + offset;
-      left = triggerCenterX - popoverRect.width / 2;
-      break;
-    case 'bottom-start':
-      top = triggerRect.bottom + offset;
-      left = triggerRect.left;
-      break;
-    case 'bottom-end':
-      top = triggerRect.bottom + offset;
-      left = triggerRect.right - popoverRect.width;
-      break;
-    case 'left':
-      top = triggerCenterY - popoverRect.height / 2;
-      left = triggerRect.left - popoverRect.width - offset;
-      break;
-    case 'left-start':
-      top = triggerRect.top;
-      left = triggerRect.left - popoverRect.width - offset;
-      break;
-    case 'left-end':
-      top = triggerRect.bottom - popoverRect.height;
-      left = triggerRect.left - popoverRect.width - offset;
-      break;
-    case 'right':
-      top = triggerCenterY - popoverRect.height / 2;
-      left = triggerRect.right + offset;
-      break;
-    case 'right-start':
-      top = triggerRect.top;
-      left = triggerRect.right + offset;
-      break;
-    case 'right-end':
-      top = triggerRect.bottom - popoverRect.height;
-      left = triggerRect.right + offset;
-      break;
-  }
-  
-  // Adjust for viewport boundaries
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-  
-  // Horizontal boundary checks
-  if (left < offset) {
-    left = offset;
-  } else if (left + popoverRect.width > viewportWidth - offset) {
-    left = viewportWidth - popoverRect.width - offset;
-  }
-  
-  // Vertical boundary checks
-  if (top < offset) {
-    top = offset;
-  } else if (top + popoverRect.height > viewportHeight - offset) {
-    top = viewportHeight - popoverRect.height - offset;
-  }
-  
-  return {
-    top: top + scrollY,
-    left: left + scrollX
-  };
+const calculatePosition = (triggerRect, popoverRect, position = 'bottom', offset = 8) => {
+    const scrollX = window.scrollX || document.documentElement.scrollLeft;
+    const scrollY = window.scrollY || document.documentElement.scrollTop;
+    let top = 0;
+    let left = 0;
+    // Base calculations
+    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+    const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+    switch (position) {
+        case 'top':
+            top = triggerRect.top - popoverRect.height - offset;
+            left = triggerCenterX - popoverRect.width / 2;
+            break;
+        case 'top-start':
+            top = triggerRect.top - popoverRect.height - offset;
+            left = triggerRect.left;
+            break;
+        case 'top-end':
+            top = triggerRect.top - popoverRect.height - offset;
+            left = triggerRect.right - popoverRect.width;
+            break;
+        case 'bottom':
+            top = triggerRect.bottom + offset;
+            left = triggerCenterX - popoverRect.width / 2;
+            break;
+        case 'bottom-start':
+            top = triggerRect.bottom + offset;
+            left = triggerRect.left;
+            break;
+        case 'bottom-end':
+            top = triggerRect.bottom + offset;
+            left = triggerRect.right - popoverRect.width;
+            break;
+        case 'left':
+            top = triggerCenterY - popoverRect.height / 2;
+            left = triggerRect.left - popoverRect.width - offset;
+            break;
+        case 'left-start':
+            top = triggerRect.top;
+            left = triggerRect.left - popoverRect.width - offset;
+            break;
+        case 'left-end':
+            top = triggerRect.bottom - popoverRect.height;
+            left = triggerRect.left - popoverRect.width - offset;
+            break;
+        case 'right':
+            top = triggerCenterY - popoverRect.height / 2;
+            left = triggerRect.right + offset;
+            break;
+        case 'right-start':
+            top = triggerRect.top;
+            left = triggerRect.right + offset;
+            break;
+        case 'right-end':
+            top = triggerRect.bottom - popoverRect.height;
+            left = triggerRect.right + offset;
+            break;
+    }
+    // Adjust for viewport boundaries
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    // Horizontal boundary checks
+    if (left < offset) {
+        left = offset;
+    }
+    else if (left + popoverRect.width > viewportWidth - offset) {
+        left = viewportWidth - popoverRect.width - offset;
+    }
+    // Vertical boundary checks
+    if (top < offset) {
+        top = offset;
+    }
+    else if (top + popoverRect.height > viewportHeight - offset) {
+        top = viewportHeight - popoverRect.height - offset;
+    }
+    return {
+        top: top + scrollY,
+        left: left + scrollX
+    };
 };
-
 // Arrow component for popovers
-const PopoverArrow: React.FC<{
-  position: PopoverProps['position'];
-  colors: any;
-  className?: string;
-}> = ({ className = '' }) => {
-  return (
-    <div className={`popover__arrow ${className}`} />
-  );
+const PopoverArrow = ({ className = '' }) => {
+    return (_jsx("div", { className: `popover__arrow ${className}` }));
 };
-
 // Popover Content Component
-export const PopoverContent: React.FC<PopoverContentProps> = ({
-  children,
-  className = '',
-  style = {}
-}) => {
-  return (
-    <div className={`popover__content ${className}`} style={style}>
-      {children}
-    </div>
-  );
+export const PopoverContent = ({ children, className = '', style = {} }) => {
+    return (_jsx("div", { className: `popover__content ${className}`, style: style, children: children }));
 };
-
 // Popover Header Component
-export const PopoverHeader: React.FC<PopoverHeaderProps> = ({
-  title,
-  subtitle,
-  onClose,
-  showCloseButton = true,
-  closeButtonLabel = 'Close',
-  className = '',
-  borderless = false,
-  noPadding = false,
-  children
-}) => {
-  const headerClasses = [
-    'popover__header',
-    borderless ? 'popover__header--borderless' : '',
-    noPadding ? 'popover__header--no-padding' : '',
-    className
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div className={headerClasses}>
-      <div>
-        {title && (
-          <h3 className="popover__title">
-            {title}
-          </h3>
-        )}
-        {subtitle && (
-          <p className="popover__subtitle">
-            {subtitle}
-          </p>
-        )}
-        {children}
-      </div>
-
-      {showCloseButton && onClose && (
-        <button
-          type="button"
-          className="popover__close"
-          onClick={onClose}
-          aria-label={closeButtonLabel}
-        >
-          <XMarkIcon />
-        </button>
-      )}
-    </div>
-  );
+export const PopoverHeader = ({ title, subtitle, onClose, showCloseButton = true, closeButtonLabel = 'Close', className = '', borderless = false, noPadding = false, children }) => {
+    const headerClasses = [
+        'popover__header',
+        borderless ? 'popover__header--borderless' : '',
+        noPadding ? 'popover__header--no-padding' : '',
+        className
+    ].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: headerClasses, children: [_jsxs("div", { children: [title && (_jsx("h3", { className: "popover__title", children: title })), subtitle && (_jsx("p", { className: "popover__subtitle", children: subtitle })), children] }), showCloseButton && onClose && (_jsx("button", { type: "button", className: "popover__close", onClick: onClose, "aria-label": closeButtonLabel, children: _jsx(XMarkIcon, {}) }))] }));
 };
-
 // Popover Body Component
-export const PopoverBody: React.FC<PopoverBodyProps> = ({
-  children,
-  className = '',
-  padding = 'md',
-  scrollable = true,
-  maxHeight = '60vh'
-}) => {
-  const bodyClasses = [
-    'popover__body',
-    padding === 'none' ? 'popover__body--no-padding' : '',
-    padding === 'sm' ? 'popover__body--compact' : '',
-    padding === 'lg' ? 'popover__body--spacious' : '',
-    scrollable ? 'popover__body--scrollable' : '',
-    className
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div
-      className={bodyClasses}
-      style={{ maxHeight: scrollable ? maxHeight : undefined }}
-    >
-      {children}
-    </div>
-  );
+export const PopoverBody = ({ children, className = '', padding = 'md', scrollable = true, maxHeight = '60vh' }) => {
+    const bodyClasses = [
+        'popover__body',
+        padding === 'none' ? 'popover__body--no-padding' : '',
+        padding === 'sm' ? 'popover__body--compact' : '',
+        padding === 'lg' ? 'popover__body--spacious' : '',
+        scrollable ? 'popover__body--scrollable' : '',
+        className
+    ].filter(Boolean).join(' ');
+    return (_jsx("div", { className: bodyClasses, style: { maxHeight: scrollable ? maxHeight : undefined }, children: children }));
 };
-
 // Popover Footer Component
-export const PopoverFooter: React.FC<PopoverFooterProps> = ({
-  children,
-  className = '',
-  justify = 'end',
-  padding = 'md',
-  borderTop = true
-}) => {
-  const footerClasses = [
-    'popover__footer',
-    !borderTop ? 'popover__footer--borderless' : '',
-    padding === 'none' ? 'popover__footer--no-padding' : '',
-    justify === 'start' ? 'popover__footer--start' : '',
-    justify === 'center' ? 'popover__footer--center' : '',
-    justify === 'between' ? 'popover__footer--space-between' : '',
-    className
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div className={footerClasses}>
-      {children}
-    </div>
-  );
+export const PopoverFooter = ({ children, className = '', justify = 'end', padding = 'md', borderTop = true }) => {
+    const footerClasses = [
+        'popover__footer',
+        !borderTop ? 'popover__footer--borderless' : '',
+        padding === 'none' ? 'popover__footer--no-padding' : '',
+        justify === 'start' ? 'popover__footer--start' : '',
+        justify === 'center' ? 'popover__footer--center' : '',
+        justify === 'between' ? 'popover__footer--space-between' : '',
+        className
+    ].filter(Boolean).join(' ');
+    return (_jsx("div", { className: footerClasses, children: children }));
 };
-
 // Main Popover Component
-export const Popover: React.FC<PopoverProps> = ({
-  trigger,
-  children,
-  isOpen: controlledIsOpen,
-  onOpenChange,
-  position = 'bottom',
-  triggerType = 'click',
-  delay = 0,
-  offset = 8,
-  size = 'md',
-  variant = 'default',
-  showArrow = true,
-  maxWidth = 400,
-  zIndex = 1000,
-  animation = 'fade',
-  closeOnBlur = true,
-  closeOnEscape = true,
-  className = '',
-  theme = 'stan-design'
-}) => {
-  const { getTheme } = useTheme();
-  const themeConfig = getTheme(theme);
-  const colors = themeConfig?.colors || getDefaultColors();
-  
-  const [internalIsOpen, setInternalIsOpen] = useState(false);
-  const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 });
-  
-  const triggerRef = useRef<HTMLElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  
-  const isOpen = controlledIsOpen ?? internalIsOpen;
-  
-  // Handle open/close state changes
-  const handleOpenChange = useCallback((open: boolean) => {
-    if (controlledIsOpen === undefined) {
-      setInternalIsOpen(open);
-    }
-    onOpenChange?.(open);
-  }, [controlledIsOpen, onOpenChange]);
-
-  // Show popover with delay
-  const showPopover = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    
-    if (delay > 0) {
-      timeoutRef.current = setTimeout(() => {
-        handleOpenChange(true);
-      }, delay);
-    } else {
-      handleOpenChange(true);
-    }
-  }, [delay, handleOpenChange]);
-
-  // Hide popover
-  const hidePopover = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    handleOpenChange(false);
-  }, [handleOpenChange]);
-
-  // Position calculation
-  const updatePosition = useCallback(() => {
-    if (!triggerRef.current || !popoverRef.current || !isOpen) return;
-    
-    const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popoverRect = popoverRef.current.getBoundingClientRect();
-    
-    const newPosition = calculatePosition(triggerRect, popoverRect, position, offset);
-    setPopoverPosition(newPosition);
-  }, [isOpen, position, offset]);
-
-  // Handle escape key
-  useEffect(() => {
-    if (!isOpen || !closeOnEscape) return;
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        hidePopover();
-      }
+export const Popover = ({ trigger, children, isOpen: controlledIsOpen, onOpenChange, position = 'bottom', triggerType = 'click', delay = 0, offset = 8, size = 'md', variant = 'default', showArrow = true, maxWidth = 400, zIndex = 1000, animation = 'fade', closeOnBlur = true, closeOnEscape = true, className = '', theme = 'stan-design' }) => {
+    const { getTheme } = useTheme();
+    const themeConfig = getTheme(theme);
+    const colors = themeConfig?.colors || getDefaultColors();
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 });
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const isOpen = controlledIsOpen ?? internalIsOpen;
+    // Handle open/close state changes
+    const handleOpenChange = useCallback((open) => {
+        if (controlledIsOpen === undefined) {
+            setInternalIsOpen(open);
+        }
+        onOpenChange?.(open);
+    }, [controlledIsOpen, onOpenChange]);
+    // Show popover with delay
+    const showPopover = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (delay > 0) {
+            timeoutRef.current = setTimeout(() => {
+                handleOpenChange(true);
+            }, delay);
+        }
+        else {
+            handleOpenChange(true);
+        }
+    }, [delay, handleOpenChange]);
+    // Hide popover
+    const hidePopover = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        handleOpenChange(false);
+    }, [handleOpenChange]);
+    // Position calculation
+    const updatePosition = useCallback(() => {
+        if (!triggerRef.current || !popoverRef.current || !isOpen)
+            return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const popoverRect = popoverRef.current.getBoundingClientRect();
+        const newPosition = calculatePosition(triggerRect, popoverRect, position, offset);
+        setPopoverPosition(newPosition);
+    }, [isOpen, position, offset]);
+    // Handle escape key
+    useEffect(() => {
+        if (!isOpen || !closeOnEscape)
+            return;
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                hidePopover();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, closeOnEscape, hidePopover]);
+    // Handle click outside
+    useEffect(() => {
+        if (!isOpen || !closeOnBlur)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (triggerRef.current && !triggerRef.current.contains(target) &&
+                popoverRef.current && !popoverRef.current.contains(target)) {
+                hidePopover();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, closeOnBlur, hidePopover]);
+    // Update position when popover opens or on scroll/resize
+    useEffect(() => {
+        if (isOpen) {
+            // Small delay to ensure DOM is updated
+            setTimeout(updatePosition, 0);
+            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);
+            };
+        }
+    }, [isOpen, updatePosition]);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    // Get popover content classes
+    const getContentClasses = () => {
+        const classes = [
+            'popover__content',
+            size ? `popover__content--size-${size}` : '',
+            variant ? `popover__content--variant-${variant}` : '',
+            position ? `popover__content--position-${position}` : '',
+            className
+        ];
+        // Add animation class
+        if (animation !== 'none' && isOpen) {
+            classes.push(`popover__content--${animation}-enter`);
+        }
+        return classes.filter(Boolean).join(' ');
     };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, closeOnEscape, hidePopover]);
-
-  // Handle click outside
-  useEffect(() => {
-    if (!isOpen || !closeOnBlur) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Node;
-      
-      if (
-        triggerRef.current && !triggerRef.current.contains(target) &&
-        popoverRef.current && !popoverRef.current.contains(target)
-      ) {
-        hidePopover();
-      }
+    // Create trigger event handlers
+    const getTriggerProps = () => {
+        const props = {};
+        if (triggerType === 'hover') {
+            props.onMouseEnter = showPopover;
+            props.onMouseLeave = hidePopover;
+        }
+        else if (triggerType === 'click') {
+            props.onClick = () => handleOpenChange(!isOpen);
+        }
+        else if (triggerType === 'focus') {
+            props.onFocus = showPopover;
+            props.onBlur = hidePopover;
+        }
+        return props;
     };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [isOpen, closeOnBlur, hidePopover]);
-
-  // Update position when popover opens or on scroll/resize
-  useEffect(() => {
-    if (isOpen) {
-      // Small delay to ensure DOM is updated
-      setTimeout(updatePosition, 0);
-      
-      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);
-      };
-    }
-  }, [isOpen, updatePosition]);
-
-  // Cleanup timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  // Get popover content classes
-  const getContentClasses = () => {
-    const classes = [
-      'popover__content',
-      size ? `popover__content--size-${size}` : '',
-      variant ? `popover__content--variant-${variant}` : '',
-      position ? `popover__content--position-${position}` : '',
-      className
-    ];
-
-    // Add animation class
-    if (animation !== 'none' && isOpen) {
-      classes.push(`popover__content--${animation}-enter`);
-    }
-
-    return classes.filter(Boolean).join(' ');
-  };
-
-  // Create trigger event handlers
-  const getTriggerProps = () => {
-    const props: any = {};
-    
-    if (triggerType === 'hover') {
-      props.onMouseEnter = showPopover;
-      props.onMouseLeave = hidePopover;
-    } else if (triggerType === 'click') {
-      props.onClick = () => handleOpenChange(!isOpen);
-    } else if (triggerType === 'focus') {
-      props.onFocus = showPopover;
-      props.onBlur = hidePopover;
-    }
-    
-    return props;
-  };
-
-  // Clone trigger element with event handlers
-  const triggerElement = cloneElement(trigger, {
-    ...getTriggerProps(),
-    ref: triggerRef
-  });
-
-  return (
-    <>
-      {triggerElement}
-      
-      {isOpen && (
-        <Portal>
-          <FocusManager
-            isActive={isOpen}
-            trapFocus={false} // Don't trap focus for popovers by default
-            restoreFocus={true}
-          >
-            <div
-              ref={popoverRef}
-              role="dialog"
-              aria-modal="false"
-              className={getContentClasses()}
-              style={{
-                ...popoverPosition,
-                maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
-                zIndex,
-                backgroundColor: colors.surface.background,
-                borderColor: colors.surface.border,
-                color: colors.text.primary
-              }}
-            >
-              {children}
-
-              {showArrow && (
-                <PopoverArrow position={position} colors={colors} />
-              )}
-            </div>
-          </FocusManager>
-        </Portal>
-      )}
-    </>
-  );
+    // Clone trigger element with event handlers
+    const triggerElement = cloneElement(trigger, {
+        ...getTriggerProps(),
+        ref: triggerRef
+    });
+    return (_jsxs(_Fragment, { children: [triggerElement, isOpen && (_jsx(Portal, { children: _jsx(FocusManager, { isActive: isOpen, trapFocus: false, restoreFocus: true, children: _jsxs("div", { ref: popoverRef, role: "dialog", "aria-modal": "false", className: getContentClasses(), style: {
+                            ...popoverPosition,
+                            maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+                            zIndex,
+                            backgroundColor: colors.surface.background,
+                            borderColor: colors.surface.border,
+                            color: colors.text.primary
+                        }, children: [children, showArrow && (_jsx(PopoverArrow, { position: position, colors: colors }))] }) }) }))] }));
 };
-
 export default Popover;