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

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/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/privacy-center.ts

@@ -37,11 +37,14 @@ export type {
   TokenExchangeResponse,
   FetchOrgParams,
   ConsentDataElement,
-  UserConsent,
+  PurposeItem,
+  ConsentGroup,
+  DisplayPurposeRow,
+  ConsentModalRecord,
+  GroupPurposesOut,
+  PaginationMeta,
   NominatorInfo,
   ConsentHistoryStatusSummary,
-  ProductConsentHistoryGroup,
-  NominatedPurposesGroup,
   Pagination,
   UserConsentDetail,
   UserConsentResponse,
@@ -70,6 +73,7 @@ export {
   createCaseRequest,
   fetchProducts,
   fetchUserConsents,
+  fetchGroupPurposes,
   manageConsent,
   fetchActivities,
   fetchCaseHistory,