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

package/src/RedactoPrivacyCenter/ui/PCInput.tsx

@@ -1,132 +0,0 @@
-import { type ReactNode, type CSSProperties, type InputHTMLAttributes, useState, useRef, useEffect } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-import { X } from 'lucide-react';
-
-export type PCInputProps = Readonly<
-  Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'size' | 'prefix'> & {
-    className?: string;
-    style?: CSSProperties;
-    label?: ReactNode;
-    error?: boolean;
-    clearable?: boolean;
-    onClear?: () => void;
-    prefix?: ReactNode;
-    suffix?: ReactNode;
-    inputClassName?: string;
-    size?: 'sm' | 'md' | 'lg';
-    clearAriaLabel?: string;
-  }
->;
-
-export function PCInput({
-  className = '',
-  style = {},
-  label,
-  error = false,
-  clearable = false,
-  onClear,
-  prefix,
-  suffix,
-  inputClassName = '',
-  size = 'md',
-  clearAriaLabel = 'Clear input',
-  value,
-  onChange,
-  ...props
-}: PCInputProps) {
-  const [showClear, setShowClear] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (clearable && value && String(value).length > 0) {
-      setShowClear(true);
-    } else {
-      setShowClear(false);
-    }
-  }, [value, clearable]);
-
-  const handleClear = () => {
-    if (inputRef.current) {
-      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-        window.HTMLInputElement.prototype,
-        'value'
-      )?.set;
-      nativeInputValueSetter?.call(inputRef.current, '');
-      const ev = new Event('input', { bubbles: true });
-      inputRef.current.dispatchEvent(ev);
-    }
-    onClear?.();
-  };
-
-  const inputStyle: CSSProperties = {
-    ...pcStyles.input,
-    ...(size === 'sm' && pcStyles.inputSm),
-    ...(size === 'lg' && pcStyles.inputLg),
-    ...(error && pcStyles.inputError),
-    ...(props.disabled && pcStyles.inputDisabled),
-  };
-
-  const wrapperStyle: CSSProperties = {
-    ...pcStyles.inputWrapper,
-    ...style,
-  };
-
-  if (prefix || suffix || clearable) {
-    return (
-      <div className={className} style={wrapperStyle}>
-        {label && <label style={pcStyles.inputLabel}>{label}</label>}
-        <div className="pc-input-affix" style={pcStyles.inputWithPrefix}>
-          {prefix && <span style={pcStyles.inputPrefix}>{prefix}</span>}
-          <input
-            ref={inputRef}
-            className={`pc-input ${inputClassName}`}
-            style={{
-              ...inputStyle,
-              border: 'none',
-              flex: 1,
-              paddingLeft: prefix ? 0 : undefined,
-              paddingRight: (suffix || showClear) ? 0 : undefined,
-            }}
-            value={value}
-            onChange={onChange}
-            {...props}
-          />
-          {showClear && (
-            <button
-              type="button"
-              onClick={handleClear}
-              style={{
-                ...pcStyles.actionIcon,
-                padding: '0.25rem',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                color: pcStyles.textSecondary.color,
-              }}
-              aria-label={clearAriaLabel}
-            >
-              <X size={16} />
-            </button>
-          )}
-          {suffix && <span style={pcStyles.inputSuffix}>{suffix}</span>}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={className} style={wrapperStyle}>
-      {label && <label style={pcStyles.inputLabel}>{label}</label>}
-      <input
-        ref={inputRef}
-        className={`pc-input ${inputClassName}`}
-        style={inputStyle}
-        value={value}
-        onChange={onChange}
-        {...props}
-      />
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/ui/PCLoader.tsx

@@ -1,31 +0,0 @@
-import { type CSSProperties } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export interface PCLoaderProps {
-  className?: string;
-  style?: CSSProperties;
-  size?: 'sm' | 'md' | 'lg';
-  color?: 'primary' | 'info';
-  variant?: 'spinner';
-  ariaLabel?: string;
-}
-
-export function PCLoader({
-  className = '',
-  style = {},
-  size = 'md',
-  color = 'primary',
-  ariaLabel = 'Loading',
-}: PCLoaderProps) {
-  const loaderStyle: CSSProperties = {
-    ...pcStyles.loader,
-    ...(size === 'sm' && pcStyles.loaderSm),
-    ...(size === 'md' && pcStyles.loaderMd),
-    ...(size === 'lg' && pcStyles.loaderLg),
-    ...(color === 'primary' && pcStyles.loaderPrimary),
-    ...(color === 'info' && pcStyles.loaderInfo),
-    ...style,
-  };
-
-  return <div className={className} style={loaderStyle} aria-label={ariaLabel} role="status" />;
-}

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;