@redacto.io/consent-sdk-react 10.0.0-beta.1 → 10.0.0-beta.12

package/src/RedactoPrivacyCenter/ui/PCModal.tsx

@@ -1,106 +0,0 @@
-import { type ReactNode, type CSSProperties, useEffect } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-import { X } from 'lucide-react';
-
-export interface PCModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  showCloseButton?: boolean;
-  title?: ReactNode;
-  footer?: ReactNode;
-  closeAriaLabel?: string;
-}
-
-export function PCModal({
-  isOpen,
-  onClose,
-  children,
-  className = '',
-  style = {},
-  size = 'md',
-  showCloseButton = true,
-  title,
-  footer,
-  closeAriaLabel = 'Close modal',
-}: PCModalProps) {
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-    return () => {
-      document.body.style.overflow = '';
-    };
-  }, [isOpen]);
-
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, onClose]);
-
-  if (!isOpen) return null;
-
-  const overlayStyle: CSSProperties = {
-    ...pcStyles.modalOverlay,
-  };
-
-  const modalStyle: CSSProperties = {
-    ...pcStyles.modal,
-    ...(size === 'sm' && pcStyles.modalSm),
-    ...(size === 'md' && pcStyles.modalMd),
-    ...(size === 'lg' && pcStyles.modalLg),
-    ...(size === 'xl' && pcStyles.modalXl),
-    ...style,
-  };
-
-  return (
-    <div className="pc-modal-overlay" style={overlayStyle} onClick={onClose}>
-      <div
-        className={`pc-modal ${className}`}
-        style={modalStyle}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {(title || showCloseButton) && (
-          <div style={pcStyles.modalHeader}>
-            {title && <div style={{ flex: 1 }}>{title}</div>}
-            {showCloseButton && (
-              <button
-                type="button"
-                className="pc-modal-close-button"
-                style={pcStyles.modalCloseButton}
-                onClick={onClose}
-                aria-label={closeAriaLabel}
-              >
-                <X size={20} />
-              </button>
-            )}
-          </div>
-        )}
-        {title ? (
-          <div style={pcStyles.modalBody}>
-            {children}
-          </div>
-        ) : (
-          <div style={{ padding: pcStyles.modalBody.padding }}>
-            {children}
-          </div>
-        )}
-        {footer && (
-          <div style={pcStyles.modalFooter}>
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/ui/PCPopover.tsx

@@ -1,206 +0,0 @@
-import {
-  type ReactNode,
-  type CSSProperties,
-  useState,
-  useRef,
-  useEffect,
-  useLayoutEffect,
-} from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-// useLayoutEffect warns under SSR; fall back to useEffect when window is absent.
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-export interface PCPopoverProps {
-  content: ReactNode;
-  children: ReactNode;
-  placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
-  shadow?: 'sm' | 'md' | 'lg';
-  className?: string;
-  style?: CSSProperties;
-  onOpen?: () => void;
-}
-
-export function PCPopover({
-  content,
-  children,
-  placement = 'bottom',
-  shadow = 'sm',
-  className = '',
-  style = {},
-  onOpen,
-}: PCPopoverProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-
-  const updatePosition = () => {
-    if (!triggerRef.current || !popoverRef.current) return;
-
-    const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popoverRect = popoverRef.current.getBoundingClientRect();
-    const gap = 8;
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
-
-    let top = 0;
-    let left = 0;
-
-    const [vertical, horizontal] = placement.split('-');
-    const isTop = vertical === 'top';
-    const isBottom = vertical === 'bottom';
-    const isLeft = horizontal === 'left';
-    const isRight = horizontal === 'right';
-
-    // Calculate vertical position with viewport boundary detection
-    if (isTop) {
-      top = triggerRect.top - popoverRect.height - gap;
-      // If popover would go above viewport, flip to bottom
-      if (top < 0) {
-        top = triggerRect.bottom + gap;
-      }
-    } else if (isBottom) {
-      top = triggerRect.bottom + gap;
-      // If popover would go below viewport, flip to top
-      if (top + popoverRect.height > viewportHeight) {
-        top = triggerRect.top - popoverRect.height - gap;
-        // If still doesn't fit, adjust to fit within viewport
-        if (top < 0) {
-          top = Math.max(8, viewportHeight - popoverRect.height - 8);
-        }
-      }
-    } else {
-      top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
-      // Ensure popover stays within viewport
-      if (top < 0) top = 8;
-      if (top + popoverRect.height > viewportHeight) {
-        top = viewportHeight - popoverRect.height - 8;
-      }
-    }
-
-    // Calculate horizontal position with viewport boundary detection
-    if (isLeft) {
-      left = triggerRect.left - popoverRect.width - gap;
-      if (left < 0) left = triggerRect.left;
-    } else if (isRight) {
-      left = triggerRect.right - popoverRect.width;
-      if (left < 0) left = Math.max(8, triggerRect.left);
-    } else {
-      left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
-      // Ensure popover stays within viewport
-      if (left < 0) left = 8;
-      if (left + popoverRect.width > viewportWidth) {
-        left = viewportWidth - popoverRect.width - 8;
-      }
-    }
-
-    setPosition({ top, left });
-  };
-
-  useIsomorphicLayoutEffect(() => {
-    if (isOpen) {
-      updatePosition();
-      window.addEventListener('scroll', updatePosition, true);
-      window.addEventListener('resize', updatePosition);
-      return () => {
-        window.removeEventListener('scroll', updatePosition, true);
-        window.removeEventListener('resize', updatePosition);
-      };
-    }
-  }, [isOpen, placement]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        triggerRef.current &&
-        !triggerRef.current.contains(event.target as Node) &&
-        popoverRef.current &&
-        !popoverRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isOpen]);
-
-  // Enhanced 3D shadow effect with multiple layers
-  const getShadow = () => {
-    if (shadow === 'sm') {
-      return '0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08)';
-    } else if (shadow === 'md') {
-      return '0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05)';
-    } else if (shadow === 'lg') {
-      return '0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)';
-    } else {
-      return '0 12px 32px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05)';
-    }
-  };
-
-  const popoverStyle: CSSProperties = {
-    position: 'fixed',
-    backgroundColor: pcStyles.modal.backgroundColor,
-    border: `1px solid ${pcStyles.selectDropdown.border}`,
-    borderRadius: pcStyles.selectDropdown.borderRadius,
-    boxShadow: getShadow(),
-    zIndex: 1060,
-    top: `${position.top}px`,
-    left: `${position.left}px`,
-    display: isOpen ? 'block' : 'none',
-    overflow: 'visible',
-    maxHeight: 'none',
-    transform: 'translateZ(0)', // Enable hardware acceleration for smoother rendering
-    backfaceVisibility: 'hidden', // Improve rendering performance
-    ...style,
-  };
-
-  return (
-    <>
-      <div
-        ref={triggerRef}
-        role="button"
-        tabIndex={0}
-        aria-expanded={isOpen}
-        aria-haspopup="dialog"
-        onClick={() => {
-          const opening = !isOpen;
-          setIsOpen(opening);
-          if (opening && onOpen) {
-            onOpen();
-          }
-        }}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            const opening = !isOpen;
-            setIsOpen(opening);
-            if (opening && onOpen) {
-              onOpen();
-            }
-          }
-        }}
-        style={{ display: 'inline-block', cursor: 'pointer' }}
-      >
-        {children}
-      </div>
-      {isOpen && (
-        <div
-          ref={popoverRef}
-          className={`pc-popover ${className}`}
-          style={popoverStyle}
-        >
-          {content}
-        </div>
-      )}
-    </>
-  );
-}
-
-// Compound component pattern
-PCPopover.Trigger = ({ children }: { children: ReactNode }) => children;
-PCPopover.Content = ({ children }: { children: ReactNode }) => children;