@countermeasure-platform/web-components 1.3.3-dev.33.1 → 1.3.4

package/src/react/sidebar.test.tsx

@@ -1,7 +1,108 @@
-import { describe, expect, it } from 'vitest'
-import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 
-import { SidebarCollapseButton } from './sidebar'
+import { Sidebar, SidebarCollapseButton, type SidebarSection } from './sidebar'
+
+const sidebarSections: SidebarSection[] = [
+  {
+    id: 'dashboards',
+    label: 'Dashboards',
+    items: [
+      { id: 'library', label: 'Library', href: '/app', icon: 'library' },
+      { id: 'jobs', label: 'Jobs', icon: 'jobs' },
+    ],
+  },
+]
+
+const routeSections: SidebarSection[] = [
+  {
+    id: 'main',
+    label: 'Dashboards',
+    items: [
+      { id: 'library', label: 'Library', href: '/app', end: true },
+      { id: 'jobs', label: 'Jobs', href: '/app/jobs' },
+    ],
+  },
+]
+
+describe('Sidebar', () => {
+  it('mounts the vanilla SidebarComponent and syncs controlled state', async () => {
+    const onNavigate = vi.fn()
+    const { container, rerender } = render(
+      <Sidebar
+        className="react-host"
+        variant="cm"
+        sections={sidebarSections}
+        activeItemId="library"
+        open
+        onNavigate={onNavigate}
+      />
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('.sidebar')).toBeTruthy()
+    })
+
+    const host = container.querySelector<HTMLElement>('[data-slot="sidebar"]')
+    const aside = container.querySelector<HTMLElement>('.sidebar')
+    const library = container.querySelector<HTMLElement>('[data-item-id="library"]')
+
+    expect(host?.classList.contains('react-host')).toBe(true)
+    expect(aside?.classList.contains('sidebar--product')).toBe(true)
+    expect(aside?.getAttribute('data-sidebar')).toBe('cm')
+    expect(aside?.getAttribute('data-open')).toBe('true')
+    expect(library?.getAttribute('aria-current')).toBe('page')
+    expect(container.querySelectorAll('.sidebar')).toHaveLength(1)
+
+    rerender(
+      <Sidebar
+        className="react-host"
+        variant="cm"
+        sections={sidebarSections}
+        activeItemId="jobs"
+        open={false}
+        onNavigate={onNavigate}
+      />
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-item-id="jobs"]')?.getAttribute('aria-current')).toBe(
+        'page'
+      )
+      expect(container.querySelector('.sidebar')?.getAttribute('data-open')).toBe('false')
+    })
+
+    fireEvent.click(container.querySelector<HTMLElement>('[data-item-id="jobs"]')!)
+
+    expect(onNavigate).toHaveBeenCalledWith(expect.objectContaining({ id: 'jobs' }))
+    expect(container.querySelectorAll('.sidebar')).toHaveLength(1)
+  })
+
+  it('keeps route-derived active state in the vanilla component when pathname changes', async () => {
+    const { container, rerender } = render(
+      <Sidebar variant="cm" sections={routeSections} pathname="/app" />
+    )
+
+    await waitFor(() => {
+      expect(
+        container.querySelector('[data-item-id="library"]')?.getAttribute('aria-current')
+      ).toBe('page')
+    })
+
+    rerender(<Sidebar variant="cm" sections={routeSections} pathname="/app/jobs" />)
+
+    await waitFor(() => {
+      expect(
+        container.querySelector('[data-item-id="library"]')?.getAttribute('aria-current')
+      ).toBe(null)
+      expect(container.querySelector('[data-item-id="jobs"]')?.getAttribute('aria-current')).toBe(
+        'page'
+      )
+    })
+
+    expect(container.querySelectorAll('.sidebar')).toHaveLength(1)
+  })
+})
 
 describe('SidebarCollapseButton', () => {
   it('renders the shared edge-docked collapse control', () => {

package/src/react/sidebar.tsx

@@ -5,8 +5,8 @@
  *   import { Sidebar } from '@countermeasure-platform/web-components/react/sidebar'
  *
  * The wrapper renders a host div then mounts `SidebarComponent` into it on
- * mount. Prop changes to `activeItemId` and controlled `open` are synced via
- * the class's public API.
+ * mount. Prop changes to `activeItemId`, `pathname`, and controlled `open`
+ * are synced via the class's public API.
  */
 
 import * as React from 'react'
@@ -14,7 +14,11 @@ import { cn } from './primitives/utils'
 import { SidebarComponent } from '../sidebar/component'
 import type {
   SidebarComponentConfig,
+  SidebarBadgeConfig,
+  SidebarBadgeTone,
   SidebarNavItem,
+  SidebarScopeConfig,
+  SidebarScopeOption,
   SidebarSection,
   SidebarUser,
   SidebarFooterAction,
@@ -33,7 +37,16 @@ export interface SidebarProps extends Omit<
   className?: string
 }
 
-export type { SidebarNavItem, SidebarSection, SidebarUser, SidebarFooterAction }
+export type {
+  SidebarBadgeConfig,
+  SidebarBadgeTone,
+  SidebarFooterAction,
+  SidebarNavItem,
+  SidebarScopeConfig,
+  SidebarScopeOption,
+  SidebarSection,
+  SidebarUser,
+}
 
 export interface SidebarCollapseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   collapsed?: boolean
@@ -43,7 +56,7 @@ export interface SidebarCollapseButtonProps extends React.ButtonHTMLAttributes<H
 }
 
 const Sidebar = (props: SidebarProps) => {
-  const { activeItemId, onNavigate, onCollapse, className, open, ...config } = props
+  const { activeItemId, pathname, onNavigate, onCollapse, className, open, ...config } = props
   const containerRef = React.useRef<HTMLDivElement>(null)
   const sidebarRef = React.useRef<SidebarComponent | null>(null)
   const onNavigateRef = React.useRef(onNavigate)
@@ -67,6 +80,9 @@ const Sidebar = (props: SidebarProps) => {
     if (open !== undefined) {
       sidebarConfig.open = open
     }
+    if (pathname !== undefined) {
+      sidebarConfig.pathname = pathname
+    }
     sidebarRef.current = new SidebarComponent(sidebarConfig)
     return () => {
       sidebarRef.current?.destroy()
@@ -86,6 +102,12 @@ const Sidebar = (props: SidebarProps) => {
     sidebarRef.current.setActive(activeItemId)
   }, [activeItemId])
 
+  // Sync route-derived active state when no explicit active item controls it.
+  React.useEffect(() => {
+    if (!sidebarRef.current || activeItemId !== undefined) return
+    sidebarRef.current.setPathname(pathname)
+  }, [activeItemId, pathname])
+
   return <div ref={containerRef} data-slot="sidebar" className={cn(className)} />
 }
 

package/src/sidebar/component.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { SidebarComponent } from './component'
 
@@ -10,6 +10,11 @@ function createContainer(): HTMLElement {
 }
 
 describe('SidebarComponent', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    window.history.replaceState({}, '', '/')
+  })
+
   it('renders brand header, scroll body, and edge collapse control when configured', () => {
     const container = createContainer()
     const sidebar = new SidebarComponent({
@@ -149,4 +154,393 @@ describe('SidebarComponent', () => {
     sidebar.destroy()
     container.remove()
   })
+
+  it('renders route links with derived active state and aria-current', () => {
+    window.history.replaceState({}, '', '/dashboards/library')
+    const container = createContainer()
+    const onNavigate = vi.fn()
+    const preventDefault = vi.fn((event: MouseEvent) => {
+      event.preventDefault()
+    })
+    const sidebar = new SidebarComponent({
+      container,
+      sections: [
+        {
+          id: 'dashboards',
+          label: 'Dashboards',
+          items: [
+            { id: 'library', label: 'Library', href: '/dashboards/library', icon: 'library' },
+            {
+              id: 'capacity',
+              label: 'Capacity',
+              href: '/dashboards/capacity',
+              icon: 'capacity',
+              onClick: preventDefault,
+            },
+          ],
+        },
+      ],
+      onNavigate,
+    })
+
+    const active = container.querySelector<HTMLAnchorElement>('[data-item-id="library"]')
+    const inactive = container.querySelector<HTMLAnchorElement>('[data-item-id="capacity"]')
+
+    expect(active?.tagName).toBe('A')
+    expect(active?.getAttribute('href')).toBe('/dashboards/library')
+    expect(active?.classList.contains('sidebar__item--active')).toBe(true)
+    expect(active?.getAttribute('aria-current')).toBe('page')
+    expect(inactive?.classList.contains('sidebar__item--active')).toBe(false)
+
+    inactive?.click()
+    expect(onNavigate).toHaveBeenCalledWith(expect.objectContaining({ id: 'capacity' }))
+    expect(preventDefault).toHaveBeenCalledWith(expect.any(MouseEvent))
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('derives active state from an explicit pathname when provided', () => {
+    window.history.replaceState({}, '', '/')
+    const container = createContainer()
+    const sidebar = new SidebarComponent({
+      container,
+      pathname: '/app/jobs?filter=active',
+      sections: [
+        {
+          id: 'main',
+          items: [
+            { id: 'library', label: 'Library', href: '/app', end: true },
+            { id: 'jobs', label: 'Jobs', href: '/app/jobs' },
+          ],
+        },
+      ],
+    })
+
+    const active = container.querySelector<HTMLElement>('[data-item-id="jobs"]')
+    const library = container.querySelector<HTMLElement>('[data-item-id="library"]')
+
+    expect(active?.classList.contains('sidebar__item--active')).toBe(true)
+    expect(active?.getAttribute('aria-current')).toBe('page')
+    expect(library?.classList.contains('sidebar__item--active')).toBe(false)
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('recomputes route-derived active state when pathname changes', () => {
+    const container = createContainer()
+    const sidebar = new SidebarComponent({
+      container,
+      pathname: '/app',
+      sections: [
+        {
+          id: 'main',
+          items: [
+            { id: 'library', label: 'Library', href: '/app', end: true },
+            { id: 'jobs', label: 'Jobs', href: '/app/jobs' },
+          ],
+        },
+      ],
+    })
+
+    expect(container.querySelector('[data-item-id="library"]')?.getAttribute('aria-current')).toBe(
+      'page'
+    )
+
+    sidebar.setPathname('/app/jobs')
+
+    expect(container.querySelector('[data-item-id="library"]')?.getAttribute('aria-current')).toBe(
+      null
+    )
+    expect(container.querySelector('[data-item-id="jobs"]')?.getAttribute('aria-current')).toBe(
+      'page'
+    )
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('creates a badge when a count appears after initial render', () => {
+    const container = createContainer()
+    const sidebar = new SidebarComponent({
+      container,
+      sections: [
+        {
+          id: 'main',
+          items: [{ id: 'alerts', label: 'Alerts' }],
+        },
+      ],
+    })
+
+    expect(container.querySelector('[data-badge="alerts"]')).toBeNull()
+
+    sidebar.updateBadge('alerts', 7, 'cyan')
+
+    const item = container.querySelector<HTMLElement>('[data-item-id="alerts"]')
+    expect(item?.getAttribute('data-badge-visible')).toBe('true')
+    expect(item?.getAttribute('data-badge-tone')).toBe('cyan')
+    expect(container.querySelector('[data-badge="alerts"]')?.textContent).toBe('7')
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('restores and persists collapsed state when a storage key is supplied', () => {
+    localStorage.setItem('cm-sidebar', 'true')
+    const container = createContainer()
+    const sidebar = new SidebarComponent({
+      container,
+      collapsible: true,
+      storageKey: 'cm-sidebar',
+      sections: [
+        {
+          id: 'main',
+          items: [{ id: 'dashboard', label: 'Dashboard' }],
+        },
+      ],
+    })
+
+    const aside = container.querySelector<HTMLElement>('.sidebar')
+    const collapseButton = container.querySelector<HTMLButtonElement>(
+      '.sidebar__collapse-btn--edge'
+    )
+
+    expect(aside?.classList.contains('sidebar--collapsed')).toBe(true)
+    collapseButton?.click()
+    expect(aside?.classList.contains('sidebar--collapsed')).toBe(false)
+    expect(localStorage.getItem('cm-sidebar')).toBe('false')
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('controls mobile backdrop state and closes from the backdrop', () => {
+    const container = createContainer()
+    const onOpenChange = vi.fn()
+    const sidebar = new SidebarComponent({
+      container,
+      mobileBackdrop: true,
+      sections: [
+        {
+          id: 'main',
+          items: [{ id: 'dashboard', label: 'Dashboard' }],
+        },
+      ],
+      onOpenChange,
+    })
+
+    const aside = container.querySelector<HTMLElement>('.sidebar')
+    const backdrop = container.querySelector<HTMLButtonElement>('.sidebar__backdrop')
+
+    expect(backdrop?.getAttribute('data-visible')).toBe('false')
+    sidebar.setOpen(true)
+    expect(aside?.getAttribute('data-open')).toBe('true')
+    expect(backdrop?.getAttribute('data-visible')).toBe('true')
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+
+    backdrop?.click()
+    expect(aside?.getAttribute('data-open')).toBe('false')
+    expect(backdrop?.getAttribute('data-visible')).toBe('false')
+    expect(onOpenChange).toHaveBeenLastCalledWith(false)
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('renders and updates the scope selector', () => {
+    const container = createContainer()
+    const onChange = vi.fn()
+    const sidebar = new SidebarComponent({
+      container,
+      scope: {
+        label: 'Tenant',
+        icon: 'building',
+        value: 'all',
+        options: [
+          { id: 'all', label: 'All Tenants', status: 'neutral' },
+          { id: 'gold', label: 'Gold Tenant', status: 'active' },
+        ],
+        onChange,
+      },
+      sections: [
+        {
+          id: 'main',
+          items: [{ id: 'dashboard', label: 'Dashboard' }],
+        },
+      ],
+    })
+
+    const trigger = container.querySelector<HTMLButtonElement>('.sidebar__scope-trigger')
+    const menu = container.querySelector<HTMLElement>('.sidebar__scope-menu')
+    expect(trigger?.textContent).toContain('All Tenants')
+    expect(menu?.hidden).toBe(true)
+
+    trigger?.click()
+    expect(trigger?.getAttribute('aria-expanded')).toBe('true')
+    expect(menu?.hidden).toBe(false)
+
+    container.querySelector<HTMLButtonElement>('[data-option-id="gold"]')?.click()
+    expect(trigger?.textContent).toContain('Gold Tenant')
+    expect(menu?.hidden).toBe(true)
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ id: 'gold' }))
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('renders rich product navigation attributes, footer chrome, and active match variants', () => {
+    const container = createContainer()
+    const onUser = vi.fn()
+    const onDanger = vi.fn()
+    const sidebar = new SidebarComponent({
+      container,
+      pathname: '/app/custom/deep',
+      brand: { label: 'Core', onClick: vi.fn(), showWordmark: false, decorative: true },
+      user: {
+        name: 'Solo',
+        detail: 'Analyst',
+        avatarUrl: '/avatar.png',
+        presence: 'online',
+        label: 'Open user menu',
+        onClick: onUser,
+      },
+      footerActions: [
+        { id: 'settings', icon: 'settings', label: 'Settings' },
+        { id: 'delete', icon: 'trash', label: 'Delete', danger: true, onClick: onDanger },
+      ],
+      sections: [
+        {
+          id: 'group',
+          label: 'Group',
+          collapsible: true,
+          defaultExpanded: false,
+          icon: 'folder',
+          items: [
+            {
+              id: 'custom',
+              label: 'Custom',
+              href: '/app/custom',
+              activeMatch: '/app/custom',
+              target: '_blank',
+              tag: 'New',
+              badge: { label: '', tone: 'warning', dot: true, title: 'Warning' },
+              ariaLabel: 'Custom route',
+            },
+            {
+              id: 'regex',
+              label: 'Regex',
+              href: '/regex',
+              activeMatch: /regex/,
+            },
+            {
+              id: 'function',
+              label: 'Function',
+              activeMatch: pathname => pathname.includes('function'),
+            },
+            {
+              id: 'disabled',
+              label: 'Disabled',
+              href: '/disabled',
+              disabled: true,
+            },
+          ],
+        },
+      ],
+    })
+
+    const groupHeader = container.querySelector<HTMLButtonElement>('.sidebar__group-header')
+    const custom = container.querySelector<HTMLAnchorElement>('[data-item-id="custom"]')
+    const disabled = container.querySelector<HTMLElement>('[data-item-id="disabled"]')
+    const user = container.querySelector<HTMLButtonElement>('.sidebar__user-trigger')
+    const danger = container.querySelector<HTMLButtonElement>(
+      '.sidebar__footer-icon[aria-label="Delete"]'
+    )
+
+    expect(groupHeader?.getAttribute('aria-expanded')).toBe('false')
+    groupHeader?.click()
+    expect(groupHeader?.getAttribute('aria-expanded')).toBe('true')
+    expect(custom?.getAttribute('aria-current')).toBe('page')
+    expect(custom?.target).toBe('_blank')
+    expect(custom?.rel).toBe('noreferrer noopener')
+    expect(custom?.getAttribute('aria-label')).toBe('Custom route')
+    expect(custom?.querySelector('.sidebar__tag')?.textContent).toBe('New')
+    expect(custom?.getAttribute('data-badge-visible')).toBe('true')
+    expect(custom?.getAttribute('data-badge-tone')).toBe('warning')
+    expect(disabled?.tagName).toBe('SPAN')
+    expect(disabled?.getAttribute('aria-disabled')).toBe('true')
+    expect(disabled?.getAttribute('tabindex')).toBe('-1')
+
+    sidebar.setPathname('/regex')
+    expect(container.querySelector('[data-item-id="regex"]')?.getAttribute('aria-current')).toBe(
+      'page'
+    )
+
+    sidebar.setPathname('/function')
+    expect(container.querySelector('[data-item-id="function"]')?.getAttribute('aria-current')).toBe(
+      'page'
+    )
+
+    expect(user?.getAttribute('aria-label')).toBe('Open user menu')
+    expect(container.querySelector('.sidebar__avatar img')?.getAttribute('src')).toBe('/avatar.png')
+    expect(container.querySelector('.sidebar__presence--online')).toBeTruthy()
+    user?.click()
+    expect(onUser).toHaveBeenCalled()
+    danger?.click()
+    expect(onDanger).toHaveBeenCalled()
+    expect(danger?.classList.contains('sidebar__footer-icon--danger')).toBe(true)
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('keeps scope menus and mobile drawers in sync with outside events', () => {
+    const container = createContainer()
+    const sidebar = new SidebarComponent({
+      container,
+      open: true,
+      mobileBackdrop: true,
+      mobileBreakpoint: 10_000,
+      closeOnNavigate: true,
+      scope: {
+        placeholder: 'Pick a tenant',
+        options: [
+          { id: 'all', label: 'All Tenants' },
+          { id: 'disabled', label: 'Disabled Tenant', disabled: true },
+        ],
+      },
+      sections: [
+        {
+          id: 'main',
+          items: [{ id: 'dashboard', label: 'Dashboard', href: '/dashboard' }],
+        },
+      ],
+    })
+
+    const aside = container.querySelector<HTMLElement>('.sidebar')
+    const trigger = container.querySelector<HTMLButtonElement>('.sidebar__scope-trigger')
+    const menu = container.querySelector<HTMLElement>('.sidebar__scope-menu')
+
+    expect(trigger?.textContent).toContain('All Tenants')
+    expect(
+      container.querySelector<HTMLButtonElement>('[data-option-id="disabled"]')?.disabled
+    ).toBe(true)
+
+    trigger?.click()
+    expect(menu?.hidden).toBe(false)
+    document.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
+    expect(menu?.hidden).toBe(true)
+
+    aside
+      ?.querySelector<HTMLAnchorElement>('[data-item-id="dashboard"]')
+      ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(aside?.getAttribute('data-open')).toBe('false')
+
+    sidebar.setOpen(true)
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    expect(aside?.getAttribute('data-open')).toBe('false')
+
+    sidebar.destroy()
+    container.remove()
+  })
 })