@redacto.io/consent-sdk-react 7.3.0 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-react",
-  "version": "7.3.0",
+  "version": "8.1.0",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/RedactoPrivacyCenter/PrivacyCenterLayout.tsx

@@ -9,7 +9,7 @@ import { useBaseUrl } from './context/BaseUrlContext';
 import { useAuth } from './context/AuthContext';
 import { PCLoader } from './ui';
 import { pcStyles } from './styles/pcStyles';
-import PrivacyCenterLayoutComponent from './components/PrivacyCenterLayout';
+import AppShell from './components/AppShell/AppShell';
 
 interface PrivacyCenterLayoutProps {
   children: ReactNode;
@@ -161,9 +161,9 @@ export function PrivacyCenterLayout({ children, slug, onBack }: PrivacyCenterLay
 
   return (
     <OrganizationProvider organization={organization}>
-      <PrivacyCenterLayoutComponent onBack={onBack}>
+      <AppShell onBack={onBack}>
         {children}
-      </PrivacyCenterLayoutComponent>
+      </AppShell>
     </OrganizationProvider>
   );
 }

package/src/RedactoPrivacyCenter/components/AppShell/AppShell.tsx

@@ -0,0 +1,204 @@
+import {
+  Suspense,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { LocaleContext } from '../../context/LocaleContext';
+import { pcStyles } from '../../styles/pcStyles';
+import { getVar } from '../../lib/utils';
+import Footer from '../../ui/Footer';
+import i18n from '../../lib/i18n';
+import { useMediaQuery } from '../../../RedactoNoticeConsent/useMediaQuery';
+import { useSidebarState } from './hooks/useSidebarState';
+import { useKeyboardShortcut } from './hooks/useKeyboardShortcut';
+import { TopAppBar } from './TopAppBar';
+import { SidebarNav } from './SidebarNav';
+import { MobileNavDrawer } from './MobileNavDrawer';
+import { PageHeader } from './PageHeader';
+import type { PrivacyCenterLayoutProps } from '../types';
+
+export default function AppShell({
+  children,
+  sidebarClassName,
+  contentClassName,
+  onBack,
+}: PrivacyCenterLayoutProps) {
+  const { t } = useTranslation();
+  const sidebar = useSidebarState();
+  const [locale, setLocale] = useState(i18n.language);
+  const [isMobileNavOpen, setMobileNavOpen] = useState(false);
+  const hamburgerRef = useRef<HTMLButtonElement>(null);
+
+  const isMobile = useMediaQuery('(max-width: 639px)');
+
+  // Close mobile drawer when crossing the breakpoint
+  useEffect(() => {
+    if (!isMobile && isMobileNavOpen) setMobileNavOpen(false);
+  }, [isMobile, isMobileNavOpen]);
+
+  useEffect(() => {
+    const onChange = () => setLocale(i18n.language);
+    i18n.on('languageChanged', onChange);
+    return () => i18n.off('languageChanged', onChange);
+  }, []);
+
+  const handleSidebarToggle = useCallback(() => {
+    sidebar.toggle();
+  }, [sidebar]);
+
+  // Cmd/Ctrl+B toggles sidebar (or mobile drawer on small screens)
+  useKeyboardShortcut(
+    { key: 'b', mod: true },
+    useCallback(() => {
+      if (isMobile) setMobileNavOpen((prev) => !prev);
+      else sidebar.toggle();
+    }, [isMobile, sidebar]),
+  );
+
+  const rootStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '100vh',
+    background: getVar('--pc-bg-shell'),
+    position: 'relative',
+  };
+
+  const bodyStyle: CSSProperties = {
+    display: 'flex',
+    flex: 1,
+    minHeight: 0,
+    position: 'relative',
+  };
+
+  const mainStyle: CSSProperties = {
+    flex: 1,
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    background: getVar('--pc-bg-shell'),
+  };
+
+  const contentWrapperStyle: CSSProperties = {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+    padding: 'var(--pc-shell-content-padding, 0 24px)',
+    boxSizing: 'border-box',
+  };
+
+  return (
+    <LocaleContext.Provider value={{ locale, setLocale }}>
+      <Suspense
+        fallback={
+          <div
+            style={{
+              ...pcStyles.flex,
+              ...pcStyles.itemsCenter,
+              ...pcStyles.justifyCenter,
+              minHeight: '100vh',
+            }}
+          >
+            {t('loadingEllipsis')}
+          </div>
+        }
+      >
+        <main className="pc-root pc-shell-root" style={rootStyle}>
+          <TopAppBar
+            ref={hamburgerRef}
+            showHamburger={isMobile}
+            onOpenMobileNav={() => setMobileNavOpen(true)}
+            locale={locale}
+            onLocaleChange={setLocale}
+            onBack={onBack}
+          />
+          <div className="pc-shell-body" style={bodyStyle}>
+            {!isMobile && (
+              <SidebarNav
+                className={sidebarClassName}
+                isExpanded={sidebar.isExpanded}
+                onToggle={handleSidebarToggle}
+              />
+            )}
+            <section className="pc-shell-content" style={mainStyle}>
+              <div className={contentClassName} style={contentWrapperStyle}>
+                <PageHeader />
+                <div style={{ flex: 1, minWidth: 0, width: '100%' }}>{children}</div>
+                <div
+                  style={{
+                    ...pcStyles.flex,
+                    width: '100%',
+                    ...pcStyles.itemsCenter,
+                    ...pcStyles.justifyCenter,
+                    paddingTop: 12,
+                    paddingBottom: 12,
+                  }}
+                >
+                  <Footer />
+                </div>
+              </div>
+            </section>
+          </div>
+          {isMobile && (
+            <MobileNavDrawer
+              isOpen={isMobileNavOpen}
+              onClose={() => setMobileNavOpen(false)}
+              returnFocusRef={hamburgerRef}
+            />
+          )}
+        </main>
+        <style>{`
+          .pc-shell-sidebar {
+            transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
+          }
+          .pc-shell-nav-item:focus-visible {
+            box-shadow: 0 0 0 2px var(--pc-border-color-focus);
+          }
+          .pc-shell-sidebar-toggle {
+            opacity: 0;
+            transition: opacity 200ms ease;
+          }
+          .pc-shell-sidebar:hover .pc-shell-sidebar-toggle,
+          .pc-shell-sidebar-toggle:hover,
+          .pc-shell-sidebar-toggle:focus-visible {
+            opacity: 1;
+          }
+          @media (prefers-reduced-motion: reduce) {
+            .pc-shell-sidebar-toggle { transition: none !important; }
+          }
+          .pc-shell-user-menu-header {
+            background: linear-gradient(135deg, var(--pc-bg-secondary) 0%, var(--pc-bg-shell) 100%);
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--pc-primary) 6%, var(--pc-bg-shell)) 0%,
+              var(--pc-bg-shell) 100%
+            );
+          }
+          .pc-popover.pc-shell-user-menu-popover {
+            border-radius: 12px !important;
+            overflow: hidden !important;
+            padding: 0 !important;
+            background: var(--pc-bg-primary) !important;
+          }
+          @media (prefers-reduced-motion: reduce) {
+            .pc-shell-sidebar { transition: none !important; }
+            .pc-shell-nav-item-icon { transform: none !important; transition: none !important; }
+          }
+          @media (max-width: 639px) {
+            :root { --pc-shell-content-padding: 0 12px; --pc-shell-pageheader-padding: 14px 0 12px; }
+          }
+          @media (min-width: 640px) and (max-width: 1023px) {
+            :root { --pc-shell-content-padding: 0 20px; --pc-shell-pageheader-padding: 18px 0 14px; }
+          }
+          @media (min-width: 1024px) {
+            :root { --pc-shell-content-padding: 0 32px; --pc-shell-pageheader-padding: 22px 0 16px; }
+          }
+        `}</style>
+      </Suspense>
+    </LocaleContext.Provider>
+  );
+}

package/src/RedactoPrivacyCenter/components/AppShell/MobileNavDrawer.tsx

@@ -0,0 +1,218 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type CSSProperties,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { X } from 'lucide-react';
+import { PCActionIcon, PCAvatar } from '../../ui';
+import { useMenuItemsPC } from '../../lib/constants';
+import { useBranding } from '../../context/BrandingContext';
+import { useOrganization } from '../../context/OrganizationContext';
+import { getVar } from '../../lib/utils';
+import { NavItem } from './NavItem';
+
+type MobileNavDrawerProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  returnFocusRef?: RefObject<HTMLElement>;
+};
+
+export function MobileNavDrawer({ isOpen, onClose, returnFocusRef }: MobileNavDrawerProps) {
+  const { t } = useTranslation();
+  const menuItems = useMenuItemsPC();
+  const branding = useBranding();
+  const { organization } = useOrganization();
+  const displayName = branding?.brand_name || organization?.name || '';
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const firstNavRef = useRef<HTMLDivElement>(null);
+
+  const flatNavItems = useMemo(
+    () => menuItems.filter((item) => Boolean(item.href)),
+    [menuItems],
+  );
+
+  // body scroll lock
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (!isOpen) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [isOpen]);
+
+  // Esc to close + focus management
+  useEffect(() => {
+    if (!isOpen || typeof window === 'undefined') return;
+
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+
+    // Move focus into drawer
+    const focusTimer = window.setTimeout(() => {
+      firstNavRef.current?.focus();
+      // If the wrapper isn't focusable, focus the first focusable child
+      const target = firstNavRef.current?.querySelector<HTMLElement>(
+        'button, [href], [tabindex]:not([tabindex="-1"])',
+      );
+      target?.focus();
+    }, 30);
+
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.clearTimeout(focusTimer);
+    };
+  }, [isOpen, onClose]);
+
+  // return focus to trigger on close
+  useEffect(() => {
+    if (isOpen) return;
+    if (typeof window === 'undefined') return;
+    const node = returnFocusRef?.current;
+    if (!node) return;
+    const t = window.setTimeout(() => node.focus(), 0);
+    return () => window.clearTimeout(t);
+  }, [isOpen, returnFocusRef]);
+
+  const handleNavigate = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  const overlayStyle: CSSProperties = {
+    position: 'fixed',
+    inset: 0,
+    zIndex: 1190,
+    background: getVar('--pc-bg-overlay'),
+    opacity: isOpen ? 1 : 0,
+    pointerEvents: isOpen ? 'auto' : 'none',
+    transition: 'opacity 200ms ease',
+  };
+
+  const drawerStyle: CSSProperties = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: 280,
+    maxWidth: '85vw',
+    zIndex: 1195,
+    background: getVar('--pc-bg-shell'),
+    borderRight: `1px solid ${getVar('--pc-border-color')}`,
+    boxShadow: '12px 0 32px rgba(15, 23, 42, 0.18)',
+    transform: isOpen ? 'translateX(0)' : 'translateX(-100%)',
+    transition: 'transform 220ms cubic-bezier(0.4, 0, 0.2, 1)',
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  if (typeof document === 'undefined') return null;
+
+  return createPortal(
+    <>
+      <div
+        style={overlayStyle}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <aside
+        ref={drawerRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={t('openSidebarMenu')}
+        aria-hidden={!isOpen}
+        style={drawerStyle}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 12,
+            height: 56,
+            padding: '0 12px 0 16px',
+            borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+            flexShrink: 0,
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              minWidth: 0,
+              flex: 1,
+            }}
+          >
+            {branding?.logo_url ? (
+              <img
+                src={branding.logo_url}
+                alt={displayName}
+                style={{
+                  height: 36,
+                  width: 'auto',
+                  maxWidth: 160,
+                  objectFit: 'contain',
+                  display: 'block',
+                }}
+              />
+            ) : branding?.icon_url ? (
+              <PCAvatar src={branding.icon_url} name={displayName} size="md" color="info" />
+            ) : (
+              <PCAvatar name={displayName || '?'} size="md" color="info" />
+            )}
+          </div>
+          <PCActionIcon
+            variant="default"
+            aria-label={t('closeSidebarMenu')}
+            onClick={onClose}
+            style={{
+              width: 36,
+              height: 36,
+              padding: 0,
+              color: getVar('--pc-text-primary'),
+              flexShrink: 0,
+            }}
+          >
+            <X size={20} />
+          </PCActionIcon>
+        </div>
+        <nav
+          role="navigation"
+          aria-label="Privacy center primary navigation"
+          ref={firstNavRef}
+          tabIndex={-1}
+          style={{
+            flex: 1,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            padding: '12px 12px 24px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            outline: 'none',
+          }}
+        >
+          {flatNavItems.map((item) => (
+            <NavItem
+              key={item.href ?? item.name}
+              item={item}
+              mode="expanded"
+              onNavigate={handleNavigate}
+            />
+          ))}
+        </nav>
+      </aside>
+    </>,
+    document.body,
+  );
+}

package/src/RedactoPrivacyCenter/components/AppShell/NavItem.tsx

@@ -0,0 +1,205 @@
+import { useState, type CSSProperties, type KeyboardEvent } from 'react';
+import { PCTooltip } from '../../ui';
+import { useInternalNavigation, type InternalPage } from '../../context/NavigationContext';
+import { getVar } from '../../lib/utils';
+import type { MenuItem } from '../SideMenuBarPC/types';
+
+type NavItemProps = {
+  item: MenuItem;
+  mode: 'expanded' | 'collapsed';
+  onNavigate?: () => void;
+};
+
+export function NavItem({ item, mode, onNavigate }: NavItemProps) {
+  const { currentPage, navigateTo } = useInternalNavigation();
+  const [hover, setHover] = useState(false);
+
+  const isCollapsed = mode === 'collapsed';
+  const isActive = item.href ? currentPage === (item.href as InternalPage) : false;
+  const isDisabled = !!item.isComingSoon;
+  const accent = getVar('--pc-primary');
+
+  const handleActivate = () => {
+    if (isDisabled || !item.href) return;
+    navigateTo(item.href as InternalPage);
+    onNavigate?.();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleActivate();
+    }
+  };
+
+  const labelColor = isDisabled
+    ? getVar('--pc-text-disabled')
+    : isActive
+      ? accent
+      : getVar('--pc-text-primary');
+
+  // Icon container styling — distinct from row, gives each item a tactile feel.
+  const containerBg = isDisabled
+    ? 'transparent'
+    : isActive
+      ? getVar('--pc-bg-tertiary')
+      : hover
+        ? getVar('--pc-bg-tertiary')
+        : getVar('--pc-bg-secondary');
+
+  const containerColor = isDisabled
+    ? getVar('--pc-text-disabled')
+    : isActive
+      ? accent
+      : hover
+        ? getVar('--pc-text-primary')
+        : getVar('--pc-text-secondary');
+
+  const containerTransform =
+    !isDisabled && !isActive && hover ? 'translateX(1px)' : 'translateX(0)';
+
+  const buttonStyle: CSSProperties = isCollapsed
+    ? {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 40,
+        height: 40,
+        padding: 0,
+        margin: 0,
+        background: 'transparent',
+        color: labelColor,
+        border: 'none',
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        opacity: isDisabled ? 0.5 : 1,
+        outline: 'none',
+        borderRadius: 8,
+        transition: 'background-color 150ms ease',
+        fontFamily: 'inherit',
+      }
+    : {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        height: 44,
+        padding: '0 12px 0 14px',
+        gap: 10,
+        borderRadius: 10,
+        background: isActive ? getVar('--pc-bg-hover') : 'transparent',
+        color: labelColor,
+        border: 'none',
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        opacity: isDisabled ? 0.5 : 1,
+        outline: 'none',
+        transition: 'background-color 150ms ease, color 150ms ease, box-shadow 150ms ease',
+        fontFamily: 'inherit',
+        fontSize: 14,
+        fontWeight: isActive ? 600 : 500,
+        lineHeight: 1,
+        textAlign: 'left',
+      };
+
+  const accentBar = isActive && !isCollapsed ? (
+    <span
+      aria-hidden="true"
+      style={{
+        position: 'absolute',
+        left: 0,
+        top: 8,
+        bottom: 8,
+        width: 4,
+        borderRadius: '0 4px 4px 0',
+        background: accent,
+      }}
+    />
+  ) : null;
+
+  const iconContainer = item.icon ? (
+    <span
+      className="pc-shell-nav-item-icon"
+      aria-hidden="true"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 32,
+        height: 32,
+        borderRadius: 8,
+        background: containerBg,
+        color: containerColor,
+        flexShrink: 0,
+        transition: 'background-color 150ms ease, color 150ms ease, transform 150ms ease',
+        transform: containerTransform,
+      }}
+    >
+      {item.icon}
+    </span>
+  ) : null;
+
+  const label = !isCollapsed ? (
+    <span
+      style={{
+        flex: 1,
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {item.name}
+    </span>
+  ) : null;
+
+  const badge = item.isNew && !isCollapsed && !isDisabled ? (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        flexShrink: 0,
+        padding: '2px 8px',
+        borderRadius: 9999,
+        background: getVar('--pc-bg-hover'),
+        color: accent,
+        fontSize: 11,
+        fontWeight: 600,
+        lineHeight: 1.2,
+      }}
+    >
+      New
+    </span>
+  ) : null;
+
+  const button = (
+    <button
+      type="button"
+      className="pc-shell-nav-item"
+      role="link"
+      aria-current={isActive ? 'page' : undefined}
+      aria-disabled={isDisabled || undefined}
+      aria-label={isCollapsed ? item.name : undefined}
+      disabled={isDisabled}
+      onClick={handleActivate}
+      onKeyDown={handleKeyDown}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={buttonStyle}
+    >
+      {accentBar}
+      {iconContainer}
+      {label}
+      {badge}
+    </button>
+  );
+
+  if (isCollapsed) {
+    return (
+      <PCTooltip content={item.name} placement="right" color="invert">
+        <div style={{ width: 40, height: 40, margin: '0 auto' }}>{button}</div>
+      </PCTooltip>
+    );
+  }
+
+  return button;
+}