@flamingo-stack/openframe-frontend-core 0.0.705-snapshot.20261006160157 → 0.0.705

package/src/components/navigation/header.tsx

@@ -0,0 +1,429 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import Link from '../../embed-shims/next-link';
+import type { HeaderConfig, NavigationItem } from '../../types/navigation';
+import { cn } from '../../utils';
+import { Menu01Icon, XmarkIcon } from '../icons-v2-generated';
+import { Button } from '../ui/button';
+import { HeaderButton } from './header-button';
+import { MingoAiButton } from './mingo-ai-button';
+import { MOBILE_NAV_PANEL_ID } from './mobile-nav-panel';
+import { TicketAlertsButton } from './ticket-alerts-button';
+import { TopNavigation } from './top-navigation';
+
+export interface HeaderProps {
+  config: HeaderConfig;
+  platform?: string;
+}
+
+// Re-export from types for convenience
+export type { HeaderConfig } from '../../types/navigation';
+
+// Top-level nav-link typography (Figma 2936-6815): the compact h6 step
+// (DM Sans 500, 14/20) with 24px icons. Overrides the `font="regular"` h4
+// label and the Button base's 20px svg cap via cn()'s tailwind-merge.
+const NAV_ITEM_CLASSES = 'text-h6 [&_svg]:h-6 [&_svg]:w-6';
+
+export function Header({ config }: HeaderProps) {
+  const [show, setShow] = useState(true);
+  // Not state: nothing renders the previous offset, and as `useState` it
+  // re-rendered the whole header on every scroll event just to store a number.
+  const lastScrollY = useRef(0);
+  const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>({});
+  const dropdownRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const triggerRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+
+  // Handle click outside and escape key for custom dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target) return;
+
+      // Check if click is outside all dropdowns
+      const isOutsideAllDropdowns = Object.keys(openDropdowns).every(id => {
+        const dropdown = dropdownRefs.current[id];
+        const trigger = triggerRefs.current[id];
+
+        if (!dropdown || !trigger) return true;
+
+        return !dropdown.contains(target) && !trigger.contains(target);
+      });
+
+      if (isOutsideAllDropdowns) {
+        setOpenDropdowns({});
+      }
+    };
+
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpenDropdowns({});
+      }
+    };
+
+    // Only add listeners if any dropdown is open
+    const hasOpenDropdowns = Object.values(openDropdowns).some(Boolean);
+    if (hasOpenDropdowns) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEscapeKey);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [openDropdowns]);
+
+  // Force close all dropdowns and cleanup on unmount
+  useEffect(() => {
+    return () => {
+      // Close all dropdowns before unmounting to prevent focus errors
+      setOpenDropdowns({});
+      // Clear any stored refs
+      dropdownRefs.current = {};
+      triggerRefs.current = {};
+    };
+  }, []);
+
+  useEffect(() => {
+    // Only add scroll listener if autoHide is enabled. Nothing to reset here:
+    // `show` is masked by `config.autoHide` where it is read (see `headerShown`
+    // below), so turning auto-hide off can never leave the header stuck
+    // off-screen, and it does not cost the extra render pass that writing
+    // `true` back into state from this effect did.
+    if (!config.autoHide) return undefined;
+
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      const prevScrollY = lastScrollY.current;
+      lastScrollY.current = currentScrollY;
+
+      // Determine if we should show or hide the header
+      const shouldHide = currentScrollY > prevScrollY && currentScrollY > 50;
+      const shouldShow = currentScrollY < prevScrollY || currentScrollY <= 10;
+
+      if (shouldHide) {
+        setShow(false);
+      } else if (shouldShow) {
+        setShow(true);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [config.autoHide]);
+
+  const renderNavigationItem = (item: NavigationItem) => {
+    // If custom element provided, use it
+    if (item.element) {
+      return <React.Fragment key={item.id}>{item.element}</React.Fragment>;
+    }
+
+    // If it has children, render as custom dropdown
+    if (item.children && item.children.length > 0) {
+      const isOpen = openDropdowns[item.id] || false;
+
+      return (
+        <div key={item.id} className="relative">
+          <Button
+            ref={el => {
+              triggerRefs.current[item.id] = el;
+            }}
+            variant="transparent"
+            leftIcon={item.icon}
+            rightIcon={item.badge}
+            onClick={() => {
+              // Single-open: opening a dropdown closes any other open one —
+              // only one nav dropdown may be expanded at a time.
+              setOpenDropdowns(prev => ({
+                [item.id]: !prev[item.id],
+              }));
+            }}
+            size="default"
+            font="regular"
+            className={cn(
+              // Top-level nav links (Figma 2936-6815): compact h6 label
+              // (DM Sans 500, 14/20) with 24px icons — overrides the
+              // font="regular" h4 step and the button's 20px svg cap.
+              NAV_ITEM_CLASSES,
+              item.isActive && 'bg-ods-bg-hover', // Active items get subtle gray background
+              isOpen && 'bg-ods-bg-hover', // Open dropdowns get gray background
+              item.className,
+            )}
+          >
+            {item.label}
+          </Button>
+
+          {/* Always render dropdown in DOM so crawlers see child <a> links;
+              toggle visibility via CSS + `inert`.
+
+              Why `inert` (not `aria-hidden`):
+                - `aria-hidden=true` HIDES from screen readers but DOES NOT
+                  remove focusable descendants from the tab order. If a child
+                  retains focus (e.g., the dropdown closes while a child was
+                  hovered/focused), the browser correctly flags "Blocked
+                  aria-hidden on an element because its descendant retained
+                  focus" — a real WAI-ARIA violation.
+                - `inert` is the HTML-standard attribute that does BOTH:
+                  removes from a11y tree + blocks focus + prevents click +
+                  removes from tab order. Native React 19 support. */}
+          <div
+            ref={el => {
+              dropdownRefs.current[item.id] = el;
+            }}
+            inert={!isOpen}
+            className={cn(
+              'absolute left-0 top-full mt-1',
+              item.dropdownClassName ? '' : 'border border-ods-border bg-ods-card',
+              'z-[9999] rounded-lg shadow-xl',
+              item.id === 'community' ? 'min-w-[240px]' : 'min-w-[220px]',
+              'transition-opacity duration-150',
+              isOpen ? 'pointer-events-auto visible opacity-100' : 'pointer-events-none invisible opacity-0',
+              item.dropdownClassName || '',
+            )}
+          >
+            <div className="p-2">
+              {item.children.map((child, index) => (
+                <Button
+                  key={child.id}
+                  variant="transparent"
+                  size="small-legacy"
+                  href={child.href} // Use href for navigation
+                  leftIcon={child.icon}
+                  rightIcon={child.badge}
+                  onClick={() => {
+                    // Always close dropdown when any item is clicked
+                    setOpenDropdowns(prev => ({ ...prev, [item.id]: false }));
+                    // If there's a custom onClick, call it too
+                    if (child.onClick) {
+                      child.onClick();
+                    }
+                  }}
+                  className={cn(
+                    'flex w-full justify-start',
+                    // Same caption step as the top-level nav links (designer:
+                    // dropdowns follow the h6 caption size/weight too). The
+                    // explicit font-medium beats small-legacy's font-bold via
+                    // tailwind-merge instead of stylesheet order.
+                    'font-medium text-h6',
+                    index < (item.children?.length ?? 0) - 1 && 'mb-1',
+                    'text-ods-text-primary', // All dropdown items use primary text color
+                    child.isActive && 'bg-ods-bg-hover', // Active dropdown items get gray background
+                  )}
+                  {...(child.isExternal && { isExternal: true })}
+                >
+                  {child.label}
+                </Button>
+              ))}
+            </div>
+            {item.dropdownContent && (
+              <>
+                {item.showDropdownDivider !== false && <div className="mx-2 my-2 h-px bg-ods-border" />}
+                <div className="px-2 pb-2">{item.dropdownContent}</div>
+              </>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    // Regular navigation item
+    if (item.href || item.onClick) {
+      return (
+        <Button
+          key={item.id}
+          variant="transparent"
+          href={item.href} // Use href for navigation
+          onClick={item.onClick} // Only for non-navigation actions
+          leftIcon={item.icon}
+          rightIcon={item.badge}
+          size="default"
+          font="regular"
+          className={cn(
+            NAV_ITEM_CLASSES,
+            'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
+            'whitespace-nowrap',
+            'text-ods-text-primary', // All items use primary text color
+            item.isActive && 'bg-ods-bg-hover', // Active items get subtle gray background
+            item.className,
+          )}
+          {...(item.isExternal && { isExternal: true })}
+        >
+          {item.label}
+        </Button>
+      );
+    }
+
+    // Button with onClick
+    return (
+      <Button
+        key={item.id}
+        variant="transparent"
+        onClick={item.onClick}
+        leftIcon={item.icon}
+        rightIcon={item.badge}
+        size="default"
+        font="regular"
+        className={cn(
+          NAV_ITEM_CLASSES,
+          'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
+          'whitespace-nowrap',
+          'text-ods-text-primary', // All items use primary text color
+          item.isActive && 'bg-ods-bg-hover', // Active items get gray background
+          item.className,
+        )}
+      >
+        {item.label}
+      </Button>
+    );
+  };
+
+  // `show` only means anything while auto-hide is on — with it off the header
+  // is always up, regardless of whatever the scroll listener last recorded.
+  const headerShown = !config.autoHide || show;
+
+  const hasNav = !!config.navigation && config.navigation.items.length > 0;
+  const hasCta =
+    !!config.actions?.right?.length || !!(config.actions?.persistent && config.actions.persistent.length > 0);
+
+  return (
+    <div
+      className={cn('sticky top-0 z-[50] w-full transition-transform duration-300 ease-in-out')}
+      style={{
+        transform: !headerShown ? 'translateY(-100%)' : 'translateY(0)',
+      }}
+    >
+      {/* Unified ODS top-navigation shell (Figma 2797-5978): 48px mobile /
+          56px md+, cell model with per-cell dividers. NOTE: no `backdrop-blur`
+          anywhere in this bar. Every platform ships an OPAQUE header
+          background (`backgroundColor` resolves to an opaque ODS token), so a
+          backdrop-filter would blur a backdrop that is then fully painted
+          over: zero visual effect, but the browser still re-rasterizes the
+          strip behind this sticky bar every scroll frame and content flickers
+          as it passes under the header. If a consumer ever wants a
+          translucent "glass" header, add the blur together with a translucent
+          `backgroundColor` deliberately. */}
+      <TopNavigation
+        // `relative` anchors the absolutely-centered nav (position 'center')
+        // to the bar itself, so the links sit at the true viewport center
+        // regardless of the asymmetric CTA/Mingo cluster on the right.
+        className={cn('relative', config.className)}
+        style={config.style}
+        backgroundClassName={config.backgroundColor}
+        centerBreakpoint="lg"
+        size="big"
+        leading={
+          <>
+            {/* Length-guarded: platform configs often pass `left: []`, and an
+                empty array is truthy — without the guard the cell would render
+                as a bare divider + padding. */}
+            {/* No padding on the wrapper: leading cells (HeaderButton-based
+                admin toggles) size themselves to the bar's square cell. */}
+            {!!config.actions?.left?.length && (
+              <div className="flex h-full items-center border-r border-ods-border">{config.actions.left}</div>
+            )}
+            {/* Mobile/tablet menu toggle — a leading cell per the ODS spec
+              (banded with the nav breakpoint `lg` so the desktop nav and the
+              toggle never co-show). */}
+            {config.mobile?.enabled && (
+              <HeaderButton
+                className="border-r border-ods-border lg:hidden"
+                onClick={() => {
+                  config.mobile?.onToggle?.();
+                }}
+                isActive={config.mobile?.isOpen ?? false}
+                aria-label={config.mobile?.isOpen ? 'Close menu' : 'Open menu'}
+                aria-expanded={config.mobile?.isOpen ?? false}
+                // Conditional: the panel unmounts when closed, so an unconditional
+                // reference would dangle (axe aria-valid-attr-value).
+                aria-controls={config.mobile?.isOpen ? MOBILE_NAV_PANEL_ID : undefined}
+                icon={
+                  config.mobile?.isOpen
+                    ? config.mobile?.closeIcon || <XmarkIcon className="h-6 w-6" />
+                    : config.mobile?.menuIcon || <Menu01Icon className="h-6 w-6" />
+                }
+              />
+            )}
+          </>
+        }
+        logo={
+          config.logo.href ? (
+            <Link href={config.logo.href} className="transition-opacity duration-200 hover:opacity-80">
+              {config.logo.element}
+            </Link>
+          ) : (
+            config.logo.element
+          )
+        }
+        // Big-bar rule (Figma 2936-6812): 24px fixed left inset on the logo
+        // zone at every breakpoint — the same 24px also reads as the gap
+        // between a leading cell (burger / admin toggle) and the logo.
+        logoClassName="pl-[var(--spacing-system-lf)] md:pl-[var(--spacing-system-lf)] lg:pl-[var(--spacing-system-lf)]"
+        center={
+          hasNav ? (
+            <nav
+              className={cn(
+                'flex items-center gap-2',
+                // True centering relative to the bar (not the leftover flex
+                // space) — same treatment the pre-unification header had.
+                config.navigation?.position === 'center' && 'absolute left-1/2 -translate-x-1/2',
+              )}
+              role="navigation"
+              aria-label="Main navigation"
+            >
+              {config.navigation?.items.map(renderNavigationItem)}
+            </nav>
+          ) : undefined
+        }
+        centerClassName={cn(
+          config.navigation?.position === 'left' && 'justify-start',
+          config.navigation?.position === 'right' && 'justify-end pr-[var(--spacing-system-m)]',
+        )}
+        cta={
+          hasCta ? (
+            <>
+              {/* Desktop actions — banded with the nav/burger breakpoint (lg)
+                  so the desktop right-cluster and the mobile toggle never
+                  co-show. */}
+              {!!config.actions?.right?.length && (
+                <div className="hidden items-center gap-3 lg:flex">{config.actions.right}</div>
+              )}
+              {config.actions?.persistent && config.actions.persistent.length > 0 && (
+                <div className="flex items-center">{config.actions.persistent}</div>
+              )}
+            </>
+          ) : undefined
+        }
+        ctaClassName="gap-3"
+        sideActions={
+          config.tickets || config.mingo?.enabled ? (
+            <>
+              {/* Support-ticket alerts cell — before Mingo, flush cell row.
+                  Attention-only: renders nothing unless there are unread
+                  replies (and the host mounted <TicketLiveProvider>). */}
+              {config.tickets && (
+                <TicketAlertsButton
+                  href={config.tickets.href}
+                  onNavigate={config.tickets.onClick}
+                  className="border-l border-ods-border"
+                />
+              )}
+              {config.mingo?.enabled && (
+                <MingoAiButton
+                  source={config.mingo.source}
+                  icon={config.mingo.icon}
+                  label={config.mingo.label}
+                  className={config.mingo.className}
+                />
+              )}
+            </>
+          ) : undefined
+        }
+      />
+    </div>
+  );
+}

package/src/components/navigation/index.ts

@@ -1,22 +1,20 @@
 'use client';
 
 // Navigation component exports
-// Site navigation: one data model (`SiteNav`), rendered by the header, its
-// menu panels, the mobile sheet and the footer.
-export { SiteHeader } from './site-header';
-export type { SiteHeaderProps } from './site-header';
-export { NavPanel, isMegaMenu } from './nav-panel';
-export type { NavPanelProps } from './nav-panel';
-export { NavItemRow } from './nav-item-row';
-export type { NavItemRowProps, NavItemRowVariant } from './nav-item-row';
-export { ASK_AI_OPEN_EVENT, MingoAiButton, openAskAi } from './mingo-ai-button';
+export { Header } from './header';
+export type { HeaderConfig, HeaderProps } from './header';
+
+export { MingoAiButton } from './mingo-ai-button';
 export type { MingoAiButtonProps } from './mingo-ai-button';
-export { MobileNavSheet, MOBILE_NAV_SHEET_ID, siteNavHasMobileMenus } from './mobile-nav-sheet';
-export type { MobileNavSheetProps } from './mobile-nav-sheet';
-export { SiteFooter } from './site-footer';
-export type { SiteFooterProps } from './site-footer';
-export { defaultRenderSiteNavLink, navLinkLabel } from './site-nav-link';
-export type { SiteNavLinkRenderer } from './site-nav-link';
+
+export { ClientOnlyHeader } from './client-only-header';
+export type { ClientOnlyHeaderProps } from './client-only-header';
+
+export { HeaderSkeleton } from './header-skeleton';
+export type { HeaderSkeletonProps } from './header-skeleton';
+
+export { MobileNavPanel, MOBILE_NAV_PANEL_ID } from './mobile-nav-panel';
+export type { MobileNavPanelProps } from './mobile-nav-panel';
 
 export { SlidingSidebar } from './sliding-sidebar';
 export type { SlidingSidebarProps } from './sliding-sidebar';
@@ -83,15 +81,10 @@ export type { NavigationNode } from './multi-level-navigation';
 
 // Re-export types from navigation types
 export type {
-  NavFeature,
-  NavGroup,
-  NavLink,
-  NavMenu,
+  MobileNavConfig,
   NavigationItem,
   NavigationSidebarConfig,
   NavigationSidebarItem,
-  SiteNav,
-  SiteNavPrimaryCta,
   SlidingSidebarConfig,
   UnifiedSidebarUser,
 } from '../../types/navigation';