@redacto.io/consent-sdk-react 3.6.0 → 5.0.0

package/src/RedactoPrivacyCenter/styles/pcStyles.ts

@@ -8,12 +8,6 @@
 // Helper to get CSS variable value
 const getVar = (varName: string): string => `var(${varName})`;
 
-// Helper to get computed CSS variable value (for runtime theme switching)
-const getComputedVar = (varName: string): string => {
-  if (typeof window === 'undefined') return '';
-  return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
-};
-
 export const pcStyles = {
   // Layout utilities
   flex: {

package/src/RedactoPrivacyCenter/table/AdvancedTable.tsx

@@ -11,6 +11,7 @@ import type {
   Cell,
   HeaderGroup,
 } from '@tanstack/react-table';
+import type { TableColumnMeta } from '../components/types';
 
 const getVar = (varName: string): string => `var(${varName})`;
 
@@ -252,12 +253,13 @@ export function TableHeadBasic<TData extends Record<string, any>>({
   headerGroup,
   className,
 }: CustomHeaderCellProps<TData>) {
+  const { t } = useTranslation();
   if (!headerGroup) return null;
 
   return (
     <>
       {headerGroup.headers.map((header) => {
-        const align = header.column.columnDef.meta?.align || 'left';
+        const align = (header.column.columnDef.meta as TableColumnMeta | undefined)?.align || 'left';
         return (
           <PCTable.Head
             key={header.id}
@@ -291,7 +293,7 @@ export function TableHeadBasic<TData extends Record<string, any>>({
                     color: getVar('--pc-text-secondary'),
                     transition: 'color 0.2s ease',
                   }}
-                  aria-label="Sort by column"
+                  aria-label={t('sortByColumn')}
                   onMouseEnter={(e) => {
                     e.currentTarget.style.color = getVar('--pc-text-primary');
                   }}
@@ -352,7 +354,7 @@ export function TableCellBasic<TData extends Record<string, any>>({
 }: CustomBodyCellProps<TData>) {
   if (!cell) return null;
 
-  const align = cell.column.columnDef.meta?.align || 'left';
+  const align = (cell.column.columnDef.meta as TableColumnMeta | undefined)?.align || 'left';
 
   return (
     <PCTable.Cell

package/src/RedactoPrivacyCenter/table/AdvancedTablePagination.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { type Table as ReactTableType } from '@tanstack/react-table';
 import {
@@ -7,7 +6,7 @@ import {
   PiCaretLeftBold,
   PiCaretRightBold,
 } from 'react-icons/pi';
-import { PCActionIcon, PCSelect, PCText, type SelectOption } from '../ui';
+import { PCActionIcon, PCSelect, PCText } from '../ui';
 import { pcStyles } from '../styles/pcStyles';
 
 const getVar = (varName: string): string => `var(${varName})`;
@@ -42,8 +41,6 @@ export default function AdvancedTablePagination<
   const currentPage = table.getState().pagination.pageIndex + 1;
   const totalPages = table.getPageCount();
   const totalRows = table.getFilteredRowModel().rows.length;
-  const pageStart = totalRows === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;
-  const pageEnd = Math.min(currentPage * currentPageSize, totalRows);
 
   // Preserve pagination visibility even when rows are temporarily empty during loading
   const shouldShowPagination = totalPages > 0 || totalRows > 0;
@@ -146,7 +143,7 @@ export default function AdvancedTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
-              aria-label="Go to first page"
+              aria-label={t('goToFirstPage')}
               onClick={() => table.firstPage()}
               disabled={!table.getCanPreviousPage()}
               style={{
@@ -174,7 +171,7 @@ export default function AdvancedTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
-              aria-label="Go to previous page"
+              aria-label={t('goToPreviousPage')}
               onClick={() => table.previousPage()}
               disabled={!table.getCanPreviousPage()}
               style={{
@@ -202,7 +199,7 @@ export default function AdvancedTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
-              aria-label="Go to next page"
+              aria-label={t('goToNextPage')}
               onClick={() => table.nextPage()}
               disabled={!table.getCanNextPage()}
               style={{
@@ -230,7 +227,7 @@ export default function AdvancedTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
-              aria-label="Go to last page"
+              aria-label={t('goToLastPage')}
               onClick={() => table.lastPage()}
               disabled={!table.getCanNextPage()}
               style={{
@@ -362,7 +359,7 @@ export default function AdvancedTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
-              aria-label="Go to first page"
+              aria-label={t('goToFirstPage')}
               onClick={() => table.firstPage()}
               disabled={!table.getCanPreviousPage()}
               style={{
@@ -390,7 +387,7 @@ export default function AdvancedTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
-              aria-label="Go to previous page"
+              aria-label={t('goToPreviousPage')}
               onClick={() => table.previousPage()}
               disabled={!table.getCanPreviousPage()}
               style={{
@@ -418,7 +415,7 @@ export default function AdvancedTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
-              aria-label="Go to next page"
+              aria-label={t('goToNextPage')}
               onClick={() => table.nextPage()}
               disabled={!table.getCanNextPage()}
               style={{
@@ -446,7 +443,7 @@ export default function AdvancedTablePagination<
             <PCActionIcon
               size="sm"
               variant="outline"
-              aria-label="Go to last page"
+              aria-label={t('goToLastPage')}
               onClick={() => table.lastPage()}
               disabled={!table.getCanNextPage()}
               style={{

package/src/RedactoPrivacyCenter/ui/Footer.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { pcStyles } from '../styles/pcStyles';
 import PoweredByRedacto from '../assets/poweredByRedacto.svg';
 import { useTheme } from '../context/theme';
@@ -5,6 +6,7 @@ import { useTheme } from '../context/theme';
 const getVar = (varName: string): string => `var(${varName})`;
 
 export default function Footer() {
+  const { t } = useTranslation();
   const { theme } = useTheme();
 
   return (
@@ -36,7 +38,7 @@ export default function Footer() {
             lineHeight: 1.2,
           }}
         >
-          Powered by
+          {t('poweredBy')}
         </span>
         <div
           style={{
@@ -57,7 +59,7 @@ export default function Footer() {
         >
           <img
             src={PoweredByRedacto}
-            alt="Redacto Logo"
+            alt={t('redactoLogoAlt')}
             style={{
               height: 'clamp(1.125rem, 2.5vw, 1.75rem)',
               width: 'auto',

package/src/RedactoPrivacyCenter/ui/PCAccordion.tsx

@@ -1,11 +1,13 @@
 import { type ReactNode, type CSSProperties, type HTMLAttributes } from 'react';
 import { pcStyles } from '../styles/pcStyles';
 
-export interface PCAccordionProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
+export type PCAccordionProps = Readonly<
+  HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
 
 export function PCAccordion({ children, className = '', style = {}, ...props }: PCAccordionProps) {
   const accordionStyle: CSSProperties = {
@@ -20,13 +22,15 @@ export function PCAccordion({ children, className = '', style = {}, ...props }:
   );
 }
 
-export interface PCAccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
-  className?: string;
-  style?: CSSProperties;
-  open?: boolean;
-  onToggle?: () => void;
-}
+export type PCAccordionHeaderProps = Readonly<
+  Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
+    className?: string;
+    style?: CSSProperties;
+    open?: boolean;
+    onToggle?: () => void;
+  }
+>;
 
 export function PCAccordionHeader({
   children,
@@ -53,12 +57,14 @@ export function PCAccordionHeader({
   );
 }
 
-export interface PCAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  open?: boolean;
-}
+export type PCAccordionBodyProps = Readonly<
+  HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    open?: boolean;
+  }
+>;
 
 export function PCAccordionBody({
   children,

package/src/RedactoPrivacyCenter/ui/PCCollapse.tsx

@@ -1,12 +1,14 @@
 import { type ReactNode, type CSSProperties, type HTMLAttributes, useState } from 'react';
 import { pcStyles } from '../styles/pcStyles';
 
-export interface PCCollapseProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
-  defaultOpen?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
+export type PCCollapseProps = Readonly<
+  Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
+    defaultOpen?: boolean;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
 
 export function PCCollapse({
   children,
@@ -30,13 +32,15 @@ export function PCCollapse({
   );
 }
 
-export interface PCCollapseHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
-  className?: string;
-  style?: CSSProperties;
-  open?: boolean;
-  toggle?: () => void;
-}
+export type PCCollapseHeaderProps = Readonly<
+  Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
+    className?: string;
+    style?: CSSProperties;
+    open?: boolean;
+    toggle?: () => void;
+  }
+>;
 
 export function PCCollapseHeader({
   children,
@@ -51,6 +55,10 @@ export function PCCollapseHeader({
     ...style,
   };
 
+  const rendered: ReactNode = typeof children === 'function'
+    ? children({ open, toggle: toggle || (() => {}) })
+    : children;
+
   return (
     <div
       className={`pc-collapse-header ${className}`}
@@ -58,17 +66,19 @@ export function PCCollapseHeader({
       onClick={toggle}
       {...props}
     >
-      {typeof children === 'function' && toggle ? children({ open, toggle }) : children}
+      {rendered}
     </div>
   );
 }
 
-export interface PCCollapseBodyProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  open?: boolean;
-}
+export type PCCollapseBodyProps = Readonly<
+  HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    open?: boolean;
+  }
+>;
 
 export function PCCollapseBody({
   children,

package/src/RedactoPrivacyCenter/ui/PCInput.tsx

@@ -2,18 +2,21 @@ import { type ReactNode, type CSSProperties, type InputHTMLAttributes, useState,
 import { pcStyles } from '../styles/pcStyles';
 import { X } from 'lucide-react';
 
-export interface PCInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'size'> {
-  className?: string;
-  style?: CSSProperties;
-  label?: ReactNode;
-  error?: boolean;
-  clearable?: boolean;
-  onClear?: () => void;
-  prefix?: ReactNode;
-  suffix?: ReactNode;
-  inputClassName?: string;
-  size?: 'sm' | 'md' | 'lg';
-}
+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 = '',
@@ -26,6 +29,7 @@ export function PCInput({
   suffix,
   inputClassName = '',
   size = 'md',
+  clearAriaLabel = 'Clear input',
   value,
   onChange,
   ...props
@@ -101,7 +105,7 @@ export function PCInput({
                 alignItems: 'center',
                 color: pcStyles.textSecondary.color,
               }}
-              aria-label="Clear input"
+              aria-label={clearAriaLabel}
             >
               <X size={16} />
             </button>

package/src/RedactoPrivacyCenter/ui/PCLoader.tsx

@@ -7,6 +7,7 @@ export interface PCLoaderProps {
   size?: 'sm' | 'md' | 'lg';
   color?: 'primary' | 'info';
   variant?: 'spinner';
+  ariaLabel?: string;
 }
 
 export function PCLoader({
@@ -14,7 +15,7 @@ export function PCLoader({
   style = {},
   size = 'md',
   color = 'primary',
-  variant = 'spinner',
+  ariaLabel = 'Loading',
 }: PCLoaderProps) {
   const loaderStyle: CSSProperties = {
     ...pcStyles.loader,
@@ -26,5 +27,5 @@ export function PCLoader({
     ...style,
   };
 
-  return <div className={className} style={loaderStyle} aria-label="Loading" role="status" />;
+  return <div className={className} style={loaderStyle} aria-label={ariaLabel} role="status" />;
 }

package/src/RedactoPrivacyCenter/ui/PCModal.tsx

@@ -12,6 +12,7 @@ export interface PCModalProps {
   showCloseButton?: boolean;
   title?: ReactNode;
   footer?: ReactNode;
+  closeAriaLabel?: string;
 }
 
 export function PCModal({
@@ -24,6 +25,7 @@ export function PCModal({
   showCloseButton = true,
   title,
   footer,
+  closeAriaLabel = 'Close modal',
 }: PCModalProps) {
   useEffect(() => {
     if (isOpen) {
@@ -77,7 +79,7 @@ export function PCModal({
                 className="pc-modal-close-button"
                 style={pcStyles.modalCloseButton}
                 onClick={onClose}
-                aria-label="Close modal"
+                aria-label={closeAriaLabel}
               >
                 <X size={20} />
               </button>

package/src/RedactoPrivacyCenter/ui/PCPopover.tsx

@@ -1,8 +1,6 @@
 import { type ReactNode, type CSSProperties, useState, useRef, useEffect } from 'react';
 import { pcStyles } from '../styles/pcStyles';
 
-const getVar = (varName: string): string => `var(${varName})`;
-
 export interface PCPopoverProps {
   content: ReactNode;
   children: ReactNode;

package/src/RedactoPrivacyCenter/ui/PCSelect.tsx

@@ -23,7 +23,7 @@ export interface PCSelectProps {
   className?: string;
   style?: CSSProperties;
   placeholder?: string;
-  options: SelectOption[];
+  options: readonly SelectOption[];
   value: SelectOption | null;
   onChange?: (option: SelectOption | null) => void;
   onClear?: () => void;
@@ -37,6 +37,9 @@ export interface PCSelectProps {
    * Useful in tight filter rows where you want trigger + dropdown aligned.
    */
   dropdownMatchTriggerWidth?: boolean;
+  searchPlaceholder?: string;
+  noOptionsMessage?: string;
+  clearAriaLabel?: string;
 }
 
 export function PCSelect({
@@ -53,6 +56,9 @@ export function PCSelect({
   size = 'md',
   label,
   dropdownMatchTriggerWidth = false,
+  searchPlaceholder = 'Search...',
+  noOptionsMessage = 'No options found',
+  clearAriaLabel = 'Clear selection',
 }: PCSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -278,7 +284,7 @@ export function PCSelect({
                   alignItems: 'center',
                   color: pcStyles.textSecondary.color,
                 }}
-                aria-label="Clear selection"
+                aria-label={clearAriaLabel}
               >
                 <X size={16} />
               </button>
@@ -322,7 +328,7 @@ export function PCSelect({
                     ...pcStyles.inputSm,
                     width: '100%',
                   }}
-                  placeholder="Search..."
+                  placeholder={searchPlaceholder}
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                   onClick={(e) => e.stopPropagation()}
@@ -336,7 +342,7 @@ export function PCSelect({
                 textAlign: 'center',
                 backgroundColor: getVar('--pc-bg-primary'),
               }}>
-                No options found
+                {noOptionsMessage}
               </div>
             ) : (
               filteredOptions.map((option) => (

package/src/RedactoPrivacyCenter/ui/PCTable.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, type CSSProperties, type HTMLAttributes, createContext, useContext } from 'react';
+import { type ReactNode, type CSSProperties, type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes, createContext } from 'react';
 import { pcStyles } from '../styles/pcStyles';
 
 interface TableContextValue {
@@ -8,12 +8,14 @@ interface TableContextValue {
 const TableContext = createContext<TableContextValue>({});
 
 // Main Table component
-export interface PCTableProps extends HTMLAttributes<HTMLTableElement> {
-  children: ReactNode;
-  variant?: 'modern' | 'minimal';
-  className?: string;
-  style?: CSSProperties;
-}
+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 = {
@@ -31,11 +33,13 @@ export function PCTable({ children, variant = 'modern', className = '', style =
 }
 
 // Header component
-export interface PCTableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
+export type PCTableHeaderProps = Readonly<
+  HTMLAttributes<HTMLTableSectionElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
 
 export function PCTableHeader({ children, className = '', style = {}, ...props }: PCTableHeaderProps) {
   const headerStyle: CSSProperties = {
@@ -51,11 +55,13 @@ export function PCTableHeader({ children, className = '', style = {}, ...props }
 }
 
 // Body component
-export interface PCTableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
+export type PCTableBodyProps = Readonly<
+  HTMLAttributes<HTMLTableSectionElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
 
 export function PCTableBody({ children, className = '', style = {}, ...props }: PCTableBodyProps) {
   const bodyStyle: CSSProperties = {
@@ -70,11 +76,13 @@ export function PCTableBody({ children, className = '', style = {}, ...props }:
 }
 
 // Row component
-export interface PCTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
+export type PCTableRowProps = Readonly<
+  HTMLAttributes<HTMLTableRowElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
 
 export function PCTableRow({ children, className = '', style = {}, ...props }: PCTableRowProps) {
   const rowStyle: CSSProperties = {
@@ -90,11 +98,13 @@ export function PCTableRow({ children, className = '', style = {}, ...props }: P
 }
 
 // Header Cell component
-export interface PCTableHeadProps extends HTMLAttributes<HTMLTableCellElement> {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
+export type PCTableHeadProps = Readonly<
+  ThHTMLAttributes<HTMLTableCellElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
 
 export function PCTableHead({ children, className = '', style = {}, ...props }: PCTableHeadProps) {
   const headStyle: CSSProperties = {
@@ -110,11 +120,13 @@ export function PCTableHead({ children, className = '', style = {}, ...props }:
 }
 
 // Cell component
-export interface PCTableCellProps extends HTMLAttributes<HTMLTableCellElement> {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
+export type PCTableCellProps = Readonly<
+  TdHTMLAttributes<HTMLTableCellElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
 
 export function PCTableCell({ children, className = '', style = {}, ...props }: PCTableCellProps) {
   const cellStyle: CSSProperties = {

package/src/RedactoPrivacyCenter/ui/PCText.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode, type CSSProperties } from 'react';
 import { pcStyles } from '../styles/pcStyles';
 
-export interface PCTextProps {
+export type PCTextProps = Readonly<{
   children: ReactNode;
   className?: string;
   style?: CSSProperties;
@@ -10,7 +10,8 @@ export interface PCTextProps {
   weight?: 'normal' | 'medium' | 'semibold' | 'bold';
   color?: 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'disabled';
   align?: 'left' | 'center' | 'right';
-}
+  title?: string;
+}>;
 
 export function PCText({
   children,
@@ -21,6 +22,7 @@ export function PCText({
   weight = 'normal',
   color = 'primary',
   align,
+  title,
 }: PCTextProps) {
   const baseStyle: CSSProperties = {
     ...pcStyles.text,
@@ -32,7 +34,7 @@ export function PCText({
   };
 
   return (
-    <Component className={className} style={baseStyle}>
+    <Component className={className} style={baseStyle} title={title}>
       {children}
     </Component>
   );

package/src/RedactoPrivacyCenter/ui/StatusBadge.tsx

@@ -4,7 +4,6 @@ type StatusBadgeProps = {
   status?: 'success' | 'warning' | 'error' | 'info' | 'pending' | string;
   children?: React.ReactNode;
   className?: string;
-  variant?: 'filled' | 'outlined';
 };
 
 const predefinedStatusMap: Record<string, 'success' | 'warning' | 'error' | 'info' | 'pending'> = {
@@ -29,7 +28,6 @@ export default function StatusBadge({
   status = 'info',
   children,
   className,
-  variant = 'filled',
 }: StatusBadgeProps) {
   // Check if it's a predefined status
   const normalizedStatus = status.toLowerCase();