@redacto.io/consent-sdk-react 5.2.0 → 6.0.0

package/src/RedactoPrivacyCenter/styles/variables.css

@@ -89,6 +89,11 @@
   
   /* Icon filters for dark theme */
   --pc-icon-filter: 0;
+
+  /* Manage Consent toolbar: search, filters, export */
+  --pc-consent-toolbar-control-height: 2rem;
+  /* Header: language, notifications, theme (same pixel row as compact controls) */
+  --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
 }
 
 [data-theme="dark"] {

package/src/RedactoPrivacyCenter/table/AdvancedTable.tsx

@@ -67,6 +67,7 @@ export default function AdvancedTable<TData extends Record<string, any>>({
   expandedComponent,
 }: AdvancedTableProps<TData>) {
   const { t } = useTranslation();
+  const [hoveredRowId, setHoveredRowId] = React.useState<string | null>(null);
   if (!table) return null;
 
   return (
@@ -111,8 +112,7 @@ export default function AdvancedTable<TData extends Record<string, any>>({
               const onRowClick = meta.onRowClick;
               const handleRowClick = onRowClick
                 ? (e: React.MouseEvent) => {
-                  e.preventDefault();
-                  onRowClick(row.original);
+                  onRowClick(row.original, row);
                 }
                 : undefined;
 
@@ -124,8 +124,23 @@ export default function AdvancedTable<TData extends Record<string, any>>({
                 <React.Fragment key={row.id}>
                   <PCTable.Row
                     className={classNames?.rowClassName}
-                    style={onRowClick ? { cursor: 'pointer' } : {}}
+                    style={{
+                      ...(onRowClick ? { cursor: 'pointer' } : {}),
+                      ...(row.getIsExpanded() ? { borderBottom: 'none' } : {}),
+                      ...(hoveredRowId === row.id
+                        ? { backgroundColor: getVar('--pc-bg-hover') }
+                        : {}),
+                    }}
                     onClick={handleRowClick}
+                    onMouseEnter={() => setHoveredRowId(row.id)}
+                    onMouseLeave={(e) => {
+                      const nextSibling = e.currentTarget.nextElementSibling;
+                      const relatedTarget = e.relatedTarget as Node | null;
+                      if (nextSibling && relatedTarget && nextSibling.contains(relatedTarget)) {
+                        return;
+                      }
+                      setHoveredRowId((prev) => (prev === row.id ? null : prev));
+                    }}
                   >
                     {row.getVisibleCells().map((cell) => (
                       <TableCellBasic
@@ -141,12 +156,16 @@ export default function AdvancedTable<TData extends Record<string, any>>({
                     <PCTable.Row
                       className={classNames?.expandedRowClassName}
                       style={{
-                        overflow: 'hidden',
-                        transition: 'all 0.3s ease-in-out',
-                        maxHeight: row.getIsExpanded() ? '2000px' : '0',
-                        opacity: row.getIsExpanded() ? 1 : 0,
-                        height: row.getIsExpanded() ? 'auto' : '0',
-                        minHeight: row.getIsExpanded() ? 'auto' : '0',
+                        pointerEvents: row.getIsExpanded() ? 'auto' : 'none',
+                      }}
+                      onMouseEnter={() => setHoveredRowId(row.id)}
+                      onMouseLeave={(e) => {
+                        const previousSibling = e.currentTarget.previousElementSibling;
+                        const relatedTarget = e.relatedTarget as Node | null;
+                        if (previousSibling && relatedTarget && previousSibling.contains(relatedTarget)) {
+                          return;
+                        }
+                        setHoveredRowId((prev) => (prev === row.id ? null : prev));
                       }}
                     >
                       <PCTable.Cell
@@ -154,18 +173,19 @@ export default function AdvancedTable<TData extends Record<string, any>>({
                         className={classNames?.expandedCellClassName}
                         style={{
                           padding: row.getIsExpanded() ? undefined : '0',
-                          transition: 'all 0.3s ease-in-out',
-                          height: row.getIsExpanded() ? 'auto' : '0',
-                          paddingTop: row.getIsExpanded() ? undefined : '0',
-                          paddingBottom: row.getIsExpanded() ? undefined : '0',
+                          height: row.getIsExpanded() ? undefined : '0',
+                          border: 'none',
                         }}
                       >
                         <div
                           style={{
-                            transition: 'all 0.3s ease-in-out',
-                            transform: row.getIsExpanded() ? 'translateY(0)' : 'translateY(-8px)',
+                            overflow: 'hidden',
+                            maxHeight: row.getIsExpanded() ? '1200px' : '0',
                             opacity: row.getIsExpanded() ? 1 : 0,
-                            height: row.getIsExpanded() ? 'auto' : '0',
+                            transform: row.getIsExpanded() ? 'translateY(0)' : 'translateY(-6px)',
+                            transition:
+                              'max-height 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 220ms ease',
+                            willChange: 'max-height, opacity, transform',
                           }}
                         >
                           {rowExpandedComponent(row)}

package/src/RedactoPrivacyCenter/table/AdvancedTablePagination.tsx

@@ -58,10 +58,10 @@ export default function AdvancedTablePagination<
         ...pcStyles.flexCol,
         ...pcStyles.itemsCenter,
         width: '100%',
-        paddingTop: getVar('--pc-spacing-sm'),
-        paddingBottom: getVar('--pc-spacing-sm'),
-        gap: getVar('--pc-spacing-sm'),
-        minHeight: '52px',
+        paddingTop: '0.375rem',
+        paddingBottom: '0.125rem',
+        gap: '0.375rem',
+        minHeight: '44px',
         opacity: shouldShowPagination ? 1 : 0.5,
         pointerEvents: shouldShowPagination ? 'auto' : 'none',
       }}
@@ -148,7 +148,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanPreviousPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -176,7 +175,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanPreviousPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -204,7 +202,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanNextPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -232,7 +229,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanNextPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -364,7 +360,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanPreviousPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -392,7 +387,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanPreviousPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -420,7 +414,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanNextPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -448,7 +441,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanNextPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),

package/src/RedactoPrivacyCenter/ui/PCInput.tsx

@@ -75,7 +75,7 @@ export function PCInput({
     return (
       <div className={className} style={wrapperStyle}>
         {label && <label style={pcStyles.inputLabel}>{label}</label>}
-        <div style={pcStyles.inputWithPrefix}>
+        <div className="pc-input-affix" style={pcStyles.inputWithPrefix}>
           {prefix && <span style={pcStyles.inputPrefix}>{prefix}</span>}
           <input
             ref={inputRef}

package/src/RedactoPrivacyCenter/ui/PCPopover.tsx

@@ -8,6 +8,7 @@ export interface PCPopoverProps {
   shadow?: 'sm' | 'md' | 'lg';
   className?: string;
   style?: CSSProperties;
+  onOpen?: () => void;
 }
 
 export function PCPopover({
@@ -17,6 +18,7 @@ export function PCPopover({
   shadow = 'sm',
   className = '',
   style = {},
+  onOpen,
 }: PCPopoverProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0 });
@@ -150,7 +152,27 @@ export function PCPopover({
     <>
       <div
         ref={triggerRef}
-        onClick={() => setIsOpen(!isOpen)}
+        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}

package/src/RedactoPrivacyCenter/ui/PCSelect.tsx

@@ -7,7 +7,7 @@ import {
   useLayoutEffect,
 } from 'react';
 import { pcStyles } from '../styles/pcStyles';
-import { ChevronDown, X } from 'lucide-react';
+import { ChevronDown, X, Check } from 'lucide-react';
 
 const getVar = (varName: string): string => `var(${varName})`;
 const useIsomorphicLayoutEffect =
@@ -32,6 +32,7 @@ export interface PCSelectProps {
   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.
@@ -40,6 +41,7 @@ export interface PCSelectProps {
   searchPlaceholder?: string;
   noOptionsMessage?: string;
   clearAriaLabel?: string;
+  showSelectedCheck?: boolean;
 }
 
 export function PCSelect({
@@ -55,10 +57,12 @@ export function PCSelect({
   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('');
@@ -112,7 +116,7 @@ export function PCSelect({
       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 iconAreaPx = clearable ? 52 : showSelectedCheck ? 46 : 32;
 
       const maxLabelWidth = options.reduce((max, opt) => {
         const w = measureTextWidth(opt.label ?? '', font);
@@ -267,6 +271,17 @@ export function PCSelect({
             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>
@@ -349,10 +364,14 @@ export function PCSelect({
                 <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: getVar('--pc-text-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',
@@ -360,7 +379,9 @@ export function PCSelect({
                     maxWidth: '100%',
                     ...(option.disabled && { opacity: 0.5, cursor: 'not-allowed' }),
                     ...(value?.value === option.value && {
-                      backgroundColor: getVar('--pc-bg-hover'),
+                      backgroundColor: showSelectedCheck
+                        ? 'rgba(59, 130, 246, 0.12)'
+                        : getVar('--pc-bg-hover'),
                     }),
                   }}
                   onClick={() => handleSelect(option)}
@@ -375,7 +396,32 @@ export function PCSelect({
                       : getVar('--pc-bg-primary');
                   }}
                 >
-                  {option.label}
+                  <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>
               ))
             )}

package/src/RedactoPrivacyCenter/ui/ThemeToggle.tsx

@@ -54,16 +54,14 @@ export default function ThemeToggle({ className }: ThemeToggleProps) {
           onClick={handleClick}
           aria-label={tooltipLabel}
           style={{ 
-            width: '32px', 
-            height: '32px',
             color: getVar('--pc-text-primary'),
             transition: 'color 0.3s ease, transform 0.2s ease',
           }}
         >
           {theme === 'light' ? (
-            <IoMoonOutline size={18} />
+            <IoMoonOutline size={16} />
           ) : (
-            <IoSunnyOutline size={18} />
+            <IoSunnyOutline size={16} />
           )}
         </PCActionIcon>
       </div>

package/src/index.ts

@@ -10,3 +10,8 @@ export type {
   ConsentFlowState,
   GuardianVerificationErrorCode,
 } from "./RedactoNoticeConsent/api/types";
+
+// API errors — consumers can narrow caught errors to ApiError to read
+// the typed error code, status, or developer-facing server message.
+export { ApiError } from "./shared/api-errors";
+export type { ApiErrorCode } from "./shared/api-errors";

package/src/privacy-center.ts

@@ -6,6 +6,7 @@ export { PrivacyCenterConsentManagerPage } from './RedactoPrivacyCenter/PrivacyC
 export { PrivacyCenterFormPage } from './RedactoPrivacyCenter/PrivacyCenterFormPage';
 export { PrivacyCenterActivityPage } from './RedactoPrivacyCenter/PrivacyCenterActivityPage';
 export { PrivacyCenterCaseDetailsPage } from './RedactoPrivacyCenter/PrivacyCenterCaseDetailsPage';
+export { NotificationsPage } from './RedactoPrivacyCenter/NotificationsPage';
 
 // Privacy Center - Headless Core (API client & types)
 export { createConsentClient } from './RedactoPrivacyCenter/api/client';
@@ -36,11 +37,14 @@ export type {
   TokenExchangeResponse,
   FetchOrgParams,
   ConsentDataElement,
-  UserConsent,
+  PurposeItem,
+  ConsentGroup,
+  DisplayPurposeRow,
+  ConsentModalRecord,
+  GroupPurposesOut,
+  PaginationMeta,
   NominatorInfo,
   ConsentHistoryStatusSummary,
-  ProductConsentHistoryGroup,
-  NominatedPurposesGroup,
   Pagination,
   UserConsentDetail,
   UserConsentResponse,
@@ -69,6 +73,7 @@ export {
   createCaseRequest,
   fetchProducts,
   fetchUserConsents,
+  fetchGroupPurposes,
   manageConsent,
   fetchActivities,
   fetchCaseHistory,

package/src/shared/api-errors.ts

@@ -0,0 +1,171 @@
+/**
+ * Shared API error handling for the consent-sdk-react package.
+ *
+ * The backend (consent-server) owns the user-facing copy. Each error
+ * response carries:
+ *   - `message`: user-safe text the SDK displays verbatim
+ *   - `error_code`: stable identifier for programmatic branching
+ *
+ * The SDK never re-translates a code into a message. To change wording,
+ * update the server titles registry -- no SDK release required.
+ */
+
+export type ApiErrorCode =
+  | "INVALID_TOKEN"
+  | "TOKEN_TENANT_MISMATCH"
+  | "UNAUTHORIZED"
+  | "USER_NOT_FOUND"
+  | "USER_EMAIL_MISMATCH"
+  | "USER_MOBILE_MISMATCH"
+  | "USER_CONTACT_MISMATCH"
+  | "NO_IDENTIFIER_PROVIDED"
+  | "INVALID_PAYLOAD"
+  | "VALIDATION_ERROR"
+  | "NOTICE_NOT_FOUND"
+  | "NOTICE_CONFIGURATION_NOT_FOUND"
+  | "NOTICE_STILL_IN_DRAFT"
+  | "CONSENT_ALREADY_PROVIDED"
+  | "PURPOSE_NOT_FOUND"
+  | "INVALID_PURPOSE"
+  | "INVALID_DATA_ELEMENTS"
+  | "MISSING_PURPOSE"
+  | "MISSING_DATA_ELEMENTS"
+  | "REQUIRED_DATA_ELEMENT_NOT_ENABLED"
+  | "AUDIO_NOT_FOUND"
+  | "INVALID_LANGUAGE"
+  | "VERIFICATION_FAILED"
+  | "VERIFICATION_EXPIRED"
+  | "GUARDIAN_INFO_NOT_FOUND"
+  | "GUARDIAN_SESSION_INVALID"
+  | "SESSION_EXPIRED"
+  | "INTERNAL_ERROR";
+
+interface ApiErrorDetail {
+  message?: string;
+  error_code?: string | null;
+  // Ninja's auth-pipeline auto-401 returns `{detail: {detail: "Unauthorized"}}`
+  // -- the inner `detail` is a string. Captured here so the parser can use
+  // it as a last-resort message extraction.
+  detail?: string;
+}
+
+interface ApiErrorBody {
+  message?: string;
+  error_code?: string | null;
+  // `detail` may arrive as:
+  //   { message: "...", error_code: "..." }    -- our MessageResponse via Ninja
+  //   { detail: "..." }                         -- Ninja auto-401
+  //   "..."                                     -- direct string from some endpoints
+  //   [...]                                     -- Ninja auto-422 Pydantic errors
+  detail?: ApiErrorDetail | string | unknown[];
+}
+
+// `ApiErrorCode | (string & {})` keeps literal autocomplete on `code` while
+// still permitting unknown strings from forward-compatible server versions.
+// A bare `ApiErrorCode | string` would widen to `string` and lose the
+// literal suggestions.
+export type ApiErrorCodeLike = ApiErrorCode | (string & {});
+
+export class ApiError extends Error {
+  readonly status: number;
+  readonly code?: ApiErrorCodeLike;
+
+  constructor(opts: {
+    status: number;
+    code?: ApiErrorCodeLike;
+    message: string;
+  }) {
+    super(opts.message);
+    this.name = "ApiError";
+    this.status = opts.status;
+    this.code = opts.code;
+  }
+}
+
+// Tier-3 fallbacks for failure modes where the server did not produce
+// a parseable body with `message`. Common case: Ninja's auth pipeline
+// rejects a request before reaching our handler, returning
+// `{detail: {detail: "Unauthorized"}}` with no message field. The
+// fallback is a static, user-safe hint -- never an override of a
+// server-supplied message.
+function statusFallback(status: number): string | undefined {
+  if (status === 401) {
+    return "Your session has expired. Please request a new access link.";
+  }
+  if (status === 403) {
+    return "You do not have access to this resource.";
+  }
+  if (status >= 500) {
+    return "Something went wrong on our end. Please try again later.";
+  }
+  return undefined;
+}
+
+/**
+ * Build an ApiError from a non-OK fetch Response.
+ *
+ * Order of preference for the user-facing message:
+ *   1. `message` field from the backend response body (preferred -- the
+ *      SDK-consumed endpoints always populate this with user-safe copy).
+ *   2. Status-based fallback (only when the server omitted a message,
+ *      e.g. Ninja's auto-401 for an expired JWT).
+ *   3. The caller-supplied fallback (used when the body is missing or
+ *      unparseable -- network error, non-JSON proxy page).
+ *
+ * The `code` field is exposed as-is for programmatic branching. Consumers
+ * that want compile-time safety should narrow against `ApiErrorCode`.
+ */
+function extractFromDetail(
+  detail: ApiErrorBody["detail"]
+): { message?: string; code?: string | null } {
+  // String detail (e.g. some endpoints return `{detail: "..."}` directly).
+  if (typeof detail === "string") {
+    return { message: detail };
+  }
+  // Array detail (Ninja's auto-422 Pydantic validation errors): no usable
+  // single message; let the caller fall back to status/generic copy.
+  if (Array.isArray(detail)) {
+    return {};
+  }
+  // Object detail covers both shapes:
+  //   our MessageResponse: { message, error_code }
+  //   Ninja auto-401:      { detail: "Unauthorized" }
+  if (detail && typeof detail === "object") {
+    const obj = detail as ApiErrorDetail;
+    return { message: obj.message ?? obj.detail, code: obj.error_code };
+  }
+  return {};
+}
+
+export async function parseApiError(
+  response: Response,
+  fallbackMessage: string
+): Promise<ApiError> {
+  let body: ApiErrorBody | undefined;
+  let parsedBody = false;
+  try {
+    body = (await response.json()) as ApiErrorBody;
+    parsedBody = true;
+  } catch {
+    body = undefined;
+  }
+
+  const fromDetail = extractFromDetail(body?.detail);
+  const serverMessage = body?.message ?? fromDetail.message;
+  // Status fallback only applies when the body parsed but had no message
+  // (e.g. Ninja auto-401's `{detail: {detail: "Unauthorized"}}`). When the
+  // body is unparseable (proxy HTML 502, empty body, network jank) the
+  // caller's per-endpoint fallback is the more accurate hint -- a 401 from
+  // a misbehaving proxy is not necessarily an expired session.
+  const message =
+    serverMessage ??
+    (parsedBody ? statusFallback(response.status) : undefined) ??
+    fallbackMessage;
+  const code = body?.error_code ?? fromDetail.code ?? undefined;
+
+  return new ApiError({
+    status: response.status,
+    code,
+    message,
+  });
+}