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

package/src/RedactoPrivacyCenter/ui/PCSelect.tsx

@@ -1,433 +0,0 @@
-import {
-  type ReactNode,
-  type CSSProperties,
-  useState,
-  useRef,
-  useEffect,
-  useLayoutEffect,
-} from 'react';
-import { pcStyles } from '../styles/pcStyles';
-import { ChevronDown, X, Check } 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;
-  prefix?: 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;
-  showSelectedCheck?: boolean;
-}
-
-export function PCSelect({
-  className = '',
-  style = {},
-  placeholder = 'Select...',
-  options,
-  value,
-  onChange,
-  onClear,
-  clearable = false,
-  searchable = false,
-  disabled = false,
-  size = 'md',
-  label,
-  prefix,
-  dropdownMatchTriggerWidth = false,
-  searchPlaceholder = 'Search...',
-  noOptionsMessage = 'No options found',
-  clearAriaLabel = 'Clear selection',
-  showSelectedCheck = false,
-}: 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 : showSelectedCheck ? 46 : 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);
-          }}
-        >
-          {prefix && (
-            <span style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              flexShrink: 0,
-              marginRight: '0.375rem',
-              color: pcStyles.textSecondary.color,
-            }}>
-              {prefix}
-            </span>
-          )}
-          <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"
-                  data-selected={value?.value === option.value ? 'true' : 'false'}
-                  style={{
-                    ...optionStyle,
-                    backgroundColor: getVar('--pc-bg-primary'),
-                    color:
-                      value?.value === option.value && showSelectedCheck
-                        ? getVar('--pc-primary')
-                        : 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: showSelectedCheck
-                        ? 'rgba(59, 130, 246, 0.12)'
-                        : 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');
-                  }}
-                >
-                  <span
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      gap: '0.5rem',
-                      width: '100%',
-                      minWidth: 0,
-                    }}
-                  >
-                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                      {option.label}
-                    </span>
-                    {showSelectedCheck && (
-                      <span
-                        style={{
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                          opacity: value?.value === option.value ? 1 : 0,
-                          flexShrink: 0,
-                        }}
-                      >
-                        <Check size={14} strokeWidth={2.5} />
-                      </span>
-                    )}
-                  </span>
-                </div>
-              ))
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/ui/PCTable.tsx

@@ -1,149 +0,0 @@
-import { type ReactNode, type CSSProperties, type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes, createContext } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-interface TableContextValue {
-  variant?: 'modern' | 'minimal';
-}
-
-const TableContext = createContext<TableContextValue>({});
-
-// Main Table component
-export type PCTableProps = Readonly<
-  HTMLAttributes<HTMLTableElement> & {
-    children: ReactNode;
-    variant?: 'modern' | 'minimal';
-    className?: string;
-    style?: CSSProperties;
-  }
->;
-
-export function PCTable({ children, variant = 'modern', className = '', style = {}, ...props }: PCTableProps) {
-  const tableStyle: CSSProperties = {
-    ...pcStyles.table,
-    ...style,
-  };
-
-  return (
-    <TableContext.Provider value={{ variant }}>
-      <table className={className} style={tableStyle} {...props}>
-        {children}
-      </table>
-    </TableContext.Provider>
-  );
-}
-
-// Header component
-export type PCTableHeaderProps = Readonly<
-  HTMLAttributes<HTMLTableSectionElement> & {
-    children: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-  }
->;
-
-export function PCTableHeader({ children, className = '', style = {}, ...props }: PCTableHeaderProps) {
-  const headerStyle: CSSProperties = {
-    ...pcStyles.tableHeader,
-    ...style,
-  };
-
-  return (
-    <thead className={className} style={headerStyle} {...props}>
-      {children}
-    </thead>
-  );
-}
-
-// Body component
-export type PCTableBodyProps = Readonly<
-  HTMLAttributes<HTMLTableSectionElement> & {
-    children: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-  }
->;
-
-export function PCTableBody({ children, className = '', style = {}, ...props }: PCTableBodyProps) {
-  const bodyStyle: CSSProperties = {
-    ...style,
-  };
-
-  return (
-    <tbody className={className} style={bodyStyle} {...props}>
-      {children}
-    </tbody>
-  );
-}
-
-// Row component
-export type PCTableRowProps = Readonly<
-  HTMLAttributes<HTMLTableRowElement> & {
-    children: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-  }
->;
-
-export function PCTableRow({ children, className = '', style = {}, ...props }: PCTableRowProps) {
-  const rowStyle: CSSProperties = {
-    ...pcStyles.tableRow,
-    ...style,
-  };
-
-  return (
-    <tr className={`pc-table-row ${className}`} style={rowStyle} {...props}>
-      {children}
-    </tr>
-  );
-}
-
-// Header Cell component
-export type PCTableHeadProps = Readonly<
-  ThHTMLAttributes<HTMLTableCellElement> & {
-    children: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-  }
->;
-
-export function PCTableHead({ children, className = '', style = {}, ...props }: PCTableHeadProps) {
-  const headStyle: CSSProperties = {
-    ...pcStyles.tableHeaderCell,
-    ...style,
-  };
-
-  return (
-    <th className={className} style={headStyle} {...props}>
-      {children}
-    </th>
-  );
-}
-
-// Cell component
-export type PCTableCellProps = Readonly<
-  TdHTMLAttributes<HTMLTableCellElement> & {
-    children: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-  }
->;
-
-export function PCTableCell({ children, className = '', style = {}, ...props }: PCTableCellProps) {
-  const cellStyle: CSSProperties = {
-    ...pcStyles.tableCell,
-    ...style,
-  };
-
-  return (
-    <td className={className} style={cellStyle} {...props}>
-      {children}
-    </td>
-  );
-}
-
-// Compound component pattern
-PCTable.Header = PCTableHeader;
-PCTable.Body = PCTableBody;
-PCTable.Row = PCTableRow;
-PCTable.Head = PCTableHead;
-PCTable.Cell = PCTableCell;

package/src/RedactoPrivacyCenter/ui/PCText.tsx

@@ -1,41 +0,0 @@
-import { type ReactNode, type CSSProperties } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export type PCTextProps = Readonly<{
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  as?: 'p' | 'span' | 'div' | 'label';
-  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
-  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
-  color?: 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'disabled';
-  align?: 'left' | 'center' | 'right';
-  title?: string;
-}>;
-
-export function PCText({
-  children,
-  className = '',
-  style = {},
-  as: Component = 'p',
-  size = 'base',
-  weight = 'normal',
-  color = 'primary',
-  align,
-  title,
-}: PCTextProps) {
-  const baseStyle: CSSProperties = {
-    ...pcStyles.text,
-    ...pcStyles[`text${size.charAt(0).toUpperCase() + size.slice(1)}` as keyof typeof pcStyles] as CSSProperties,
-    ...pcStyles[`fontWeight${weight.charAt(0).toUpperCase() + weight.slice(1)}` as keyof typeof pcStyles] as CSSProperties,
-    ...pcStyles[`text${color.charAt(0).toUpperCase() + color.slice(1)}` as keyof typeof pcStyles] as CSSProperties,
-    ...(align && pcStyles[`text${align.charAt(0).toUpperCase() + align.slice(1)}` as keyof typeof pcStyles] as CSSProperties),
-    ...style,
-  };
-
-  return (
-    <Component className={className} style={baseStyle} title={title}>
-      {children}
-    </Component>
-  );
-}

package/src/RedactoPrivacyCenter/ui/PCTextarea.tsx

@@ -1,43 +0,0 @@
-import { type ReactNode, type CSSProperties, type TextareaHTMLAttributes } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export interface PCTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style' | 'size'> {
-  className?: string;
-  style?: CSSProperties;
-  label?: ReactNode;
-  error?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-export function PCTextarea({
-  className = '',
-  style = {},
-  label,
-  error = false,
-  size = 'md',
-  ...props
-}: PCTextareaProps) {
-  const textareaStyle: CSSProperties = {
-    ...pcStyles.textarea,
-    ...(size === 'sm' && pcStyles.inputSm),
-    ...(size === 'lg' && pcStyles.inputLg),
-    ...(error && pcStyles.inputError),
-    ...(props.disabled && pcStyles.inputDisabled),
-    ...style,
-  };
-
-  const wrapperStyle: CSSProperties = {
-    ...pcStyles.inputWrapper,
-  };
-
-  return (
-    <div className={className} style={wrapperStyle}>
-      {label && <label style={pcStyles.inputLabel}>{label}</label>}
-      <textarea
-        className="pc-textarea"
-        style={textareaStyle}
-        {...props}
-      />
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/ui/PCTitle.tsx

@@ -1,37 +0,0 @@
-import { type ReactNode, type CSSProperties } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export interface PCTitleProps {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-}
-
-export function PCTitle({
-  children,
-  className = '',
-  style = {},
-  as: Component = 'h3',
-}: PCTitleProps) {
-  const sizeMap: Record<string, keyof typeof pcStyles> = {
-    h1: 'titleH1',
-    h2: 'titleH2',
-    h3: 'titleH3',
-    h4: 'titleH4',
-    h5: 'titleH5',
-    h6: 'titleH6',
-  };
-
-  const baseStyle: CSSProperties = {
-    ...pcStyles.title,
-    ...(pcStyles[sizeMap[Component] as keyof typeof pcStyles] as CSSProperties),
-    ...style,
-  };
-
-  return (
-    <Component className={className} style={baseStyle}>
-      {children}
-    </Component>
-  );
-}