@redacto.io/consent-sdk-react 4.0.0 → 5.1.0

package/src/RedactoPrivacyCenter/ui/PCModal.tsx

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,173 @@
+import { type ReactNode, type CSSProperties, useState, useRef, useEffect } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+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;
+}
+
+export function PCPopover({
+  content,
+  children,
+  placement = 'bottom',
+  shadow = 'sm',
+  className = '',
+  style = {},
+}: 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 });
+  };
+
+  useEffect(() => {
+    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}
+        onClick={() => setIsOpen(!isOpen)}
+        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;

package/src/RedactoPrivacyCenter/ui/PCSelect.tsx

@@ -0,0 +1,387 @@
+import {
+  type ReactNode,
+  type CSSProperties,
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+} from 'react';
+import { pcStyles } from '../styles/pcStyles';
+import { ChevronDown, X } from 'lucide-react';
+
+const getVar = (varName: string): string => `var(${varName})`;
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export interface SelectOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
+export interface PCSelectProps {
+  className?: string;
+  style?: CSSProperties;
+  placeholder?: string;
+  options: readonly SelectOption[];
+  value: SelectOption | null;
+  onChange?: (option: SelectOption | null) => void;
+  onClear?: () => void;
+  clearable?: boolean;
+  searchable?: boolean;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  label?: ReactNode;
+  /**
+   * If true, the dropdown list width will match the trigger width.
+   * Useful in tight filter rows where you want trigger + dropdown aligned.
+   */
+  dropdownMatchTriggerWidth?: boolean;
+  searchPlaceholder?: string;
+  noOptionsMessage?: string;
+  clearAriaLabel?: string;
+}
+
+export function PCSelect({
+  className = '',
+  style = {},
+  placeholder = 'Select...',
+  options,
+  value,
+  onChange,
+  onClear,
+  clearable = false,
+  searchable = false,
+  disabled = false,
+  size = 'md',
+  label,
+  dropdownMatchTriggerWidth = false,
+  searchPlaceholder = 'Search...',
+  noOptionsMessage = 'No options found',
+  clearAriaLabel = 'Clear selection',
+}: PCSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [dropdownLayout, setDropdownLayout] = useState<{
+    position: 'top' | 'bottom';
+    maxHeightPx: number;
+    widthPx: number;
+    leftPx: number;
+    topPx: number;
+  } | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const filteredOptions = searchable && searchQuery
+    ? options.filter(opt =>
+      opt.label.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+    : options;
+
+  const measureTextWidth = (text: string, font: string): number => {
+    // Browser-only measurement (this runs inside useEffect)
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return text.length * 8; // fallback estimate
+    ctx.font = font;
+    return ctx.measureText(text).width;
+  };
+
+  // Calculate dropdown position and width - default to bottom, but check if we should open above
+  useIsomorphicLayoutEffect(() => {
+    if (!isOpen) {
+      setDropdownLayout(null);
+      return;
+    }
+
+    if (triggerRef.current && wrapperRef.current) {
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const wrapperRect = wrapperRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const viewportWidth = window.innerWidth;
+      const spaceBelow = viewportHeight - triggerRect.bottom;
+      const spaceAbove = triggerRect.top;
+      const estimatedDropdownHeight = Math.min(300, filteredOptions.length * 40 + (searchable ? 60 : 0));
+      const triggerWidth = triggerRect.width;
+
+      // Measure widest option label (use full `options` list so width is stable even when searching)
+      const computed = window.getComputedStyle(triggerRef.current);
+      const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+      const paddingLeft = parseFloat(computed.paddingLeft || '0') || 0;
+      const paddingRight = parseFloat(computed.paddingRight || '0') || 0;
+      // Chevron + spacing (and optional clear button) lives on the right
+      const iconAreaPx = clearable ? 52 : 32;
+
+      const maxLabelWidth = options.reduce((max, opt) => {
+        const w = measureTextWidth(opt.label ?? '', font);
+        return Math.max(max, w);
+      }, 0);
+
+      const desiredWidth = Math.ceil(
+        maxLabelWidth + paddingLeft + paddingRight + iconAreaPx
+      );
+      const viewportGutter = 16;
+      const maxAllowedWidth = Math.max(0, viewportWidth - viewportGutter * 2);
+      const widthPx = dropdownMatchTriggerWidth
+        ? Math.min(triggerWidth, maxAllowedWidth)
+        : Math.max(triggerWidth, Math.min(desiredWidth, maxAllowedWidth));
+
+      // Default to bottom, but open above if there's not enough space below
+      const nextPosition: 'top' | 'bottom' =
+        spaceBelow < estimatedDropdownHeight && spaceAbove > spaceBelow
+          ? 'top'
+          : 'bottom';
+
+      const availableSpace =
+        nextPosition === 'top' ? spaceAbove : spaceBelow;
+      const calculatedMaxHeight = Math.min(300, Math.max(150, availableSpace - 16));
+
+      // Position dropdown to the trigger (inside wrapper) so it always opens under the button
+      const gap = 4;
+      const triggerLeftInWrapper = triggerRect.left - wrapperRect.left;
+      const triggerTopInWrapper = triggerRect.top - wrapperRect.top;
+
+      // Prefer aligning left with the trigger; if it would overflow viewport, shift left.
+      const wouldOverflowRight =
+        triggerRect.left + widthPx > viewportWidth - viewportGutter;
+      const preferredLeftPx = wouldOverflowRight
+        ? triggerLeftInWrapper + triggerWidth - widthPx
+        : triggerLeftInWrapper;
+      const minLeftPx = viewportGutter - wrapperRect.left;
+      const maxLeftPx = viewportWidth - viewportGutter - wrapperRect.left - widthPx;
+      const leftPx = Math.min(Math.max(preferredLeftPx, minLeftPx), maxLeftPx);
+
+      // IMPORTANT:
+      // Don't use transform for top-positioning because the open/close animation
+      // uses transform keyframes, which would temporarily override our transform
+      // and cause a visible jump (down then up). Compute an absolute top instead.
+      const effectiveDropdownHeightPx = Math.min(
+        estimatedDropdownHeight,
+        calculatedMaxHeight
+      );
+      const topPx = nextPosition === 'top'
+        ? triggerTopInWrapper - gap - effectiveDropdownHeightPx
+        : triggerTopInWrapper + triggerRect.height + gap;
+
+      // Single atomic update prevents intermediate “jump” states.
+      setDropdownLayout({
+        position: nextPosition,
+        maxHeightPx: calculatedMaxHeight,
+        widthPx,
+        leftPx,
+        topPx,
+      });
+    }
+  }, [
+    isOpen,
+    filteredOptions.length,
+    searchable,
+    options,
+    clearable,
+    dropdownMatchTriggerWidth,
+  ]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        selectRef.current &&
+        !selectRef.current.contains(event.target as Node) &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+        setSearchQuery('');
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen]);
+
+  const handleSelect = (option: SelectOption) => {
+    if (option.disabled) return;
+    onChange?.(option);
+    setIsOpen(false);
+    setSearchQuery('');
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange?.(null);
+    onClear?.();
+  };
+
+  const selectStyle: CSSProperties = {
+    ...pcStyles.select,
+    ...(size === 'sm' && pcStyles.inputSm),
+    ...(size === 'lg' && pcStyles.inputLg),
+    ...(disabled && pcStyles.inputDisabled),
+    position: 'relative',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    ...style,
+  };
+
+  const dropdownStyle: CSSProperties = {
+    ...pcStyles.selectDropdown,
+    // Override maxWidth from base styles to prevent content-based expansion
+    maxWidth: 'none',
+    ...(dropdownLayout?.position === 'top' ? {
+      marginTop: 0,
+      marginBottom: 0,
+      animation: 'pc-slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
+    } : {
+      marginTop: 0,
+      marginBottom: 0,
+      animation: 'pc-slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
+    }),
+  };
+
+  const optionStyle: CSSProperties = {
+    ...pcStyles.selectOption,
+  };
+
+  const wrapperStyle: CSSProperties = {
+    ...pcStyles.inputWrapper,
+    position: 'relative',
+  };
+
+  return (
+    <div ref={wrapperRef} className={className} style={wrapperStyle}>
+      {label && <label style={pcStyles.inputLabel}>{label}</label>}
+      <div ref={selectRef} style={{ position: 'relative' }}>
+        <div
+          ref={triggerRef}
+          className="pc-select"
+          style={selectStyle}
+          onClick={() => {
+            if (disabled) return;
+            // Reset layout so open always measures fresh.
+            setDropdownLayout(null);
+            setIsOpen((prev) => !prev);
+          }}
+        >
+          <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {value ? value.label : <span style={{ color: pcStyles.textSecondary.color }}>{placeholder}</span>}
+          </span>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+            {clearable && value && (
+              <button
+                type="button"
+                onClick={handleClear}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: '0.25rem',
+                  display: 'flex',
+                  alignItems: 'center',
+                  color: pcStyles.textSecondary.color,
+                }}
+                aria-label={clearAriaLabel}
+              >
+                <X size={16} />
+              </button>
+            )}
+            <ChevronDown
+              size={16}
+              style={{
+                transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.2s',
+                color: pcStyles.textSecondary.color,
+              }}
+            />
+          </div>
+        </div>
+        {isOpen && !disabled && dropdownLayout && (
+          <div
+            ref={dropdownRef}
+            className="pc-select-dropdown"
+            style={{
+              ...dropdownStyle,
+              position: 'absolute',
+              left: `${dropdownLayout.leftPx}px`,
+              top: `${dropdownLayout.topPx}px`,
+              width: `${dropdownLayout.widthPx}px`,
+              minWidth: `${dropdownLayout.widthPx}px`,
+              maxWidth: `${dropdownLayout.widthPx}px`,
+              maxHeight: `${dropdownLayout.maxHeightPx}px`,
+            }}
+          >
+            {searchable && (
+              <div style={{
+                padding: '0.5rem',
+                borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+                backgroundColor: getVar('--pc-bg-primary'),
+              }}>
+                <input
+                  type="text"
+                  className="pc-input"
+                  style={{
+                    ...pcStyles.input,
+                    ...pcStyles.inputSm,
+                    width: '100%',
+                  }}
+                  placeholder={searchPlaceholder}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </div>
+            )}
+            {filteredOptions.length === 0 ? (
+              <div style={{
+                ...optionStyle,
+                color: getVar('--pc-text-secondary'),
+                textAlign: 'center',
+                backgroundColor: getVar('--pc-bg-primary'),
+              }}>
+                {noOptionsMessage}
+              </div>
+            ) : (
+              filteredOptions.map((option) => (
+                <div
+                  key={String(option.value)}
+                  className="pc-select-option"
+                  style={{
+                    ...optionStyle,
+                    backgroundColor: getVar('--pc-bg-primary'),
+                    color: getVar('--pc-text-primary'),
+                    transition: 'background-color 0.2s ease, color 0.2s ease',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '100%',
+                    ...(option.disabled && { opacity: 0.5, cursor: 'not-allowed' }),
+                    ...(value?.value === option.value && {
+                      backgroundColor: getVar('--pc-bg-hover'),
+                    }),
+                  }}
+                  onClick={() => handleSelect(option)}
+                  onMouseEnter={(e) => {
+                    if (!option.disabled) {
+                      e.currentTarget.style.backgroundColor = getVar('--pc-bg-hover');
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = value?.value === option.value
+                      ? getVar('--pc-bg-hover')
+                      : getVar('--pc-bg-primary');
+                  }}
+                >
+                  {option.label}
+                </div>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}