@flamingo-stack/openframe-frontend-core 0.0.491 → 0.0.492

package/src/components/navigation/navigation-sidebar.tsx

@@ -13,6 +13,10 @@ const MINIMIZED_WIDTH = 56 // 3.5rem = 56px
 const EXPANDED_WIDTH = 224 // 14rem = 224px
 const STORAGE_KEY = 'of.navigationSidebar.minimized'
 
+/** A click the browser will resolve itself — new tab, new window, middle button. */
+const isModifiedClick = (event?: React.MouseEvent): boolean =>
+  !!event && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)
+
 export interface NavigationSidebarProps {
   config: NavigationSidebarConfig
   /**
@@ -75,17 +79,68 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [isOverlayOpen, closeOverlay])
 
+  // The entry the user just clicked, held until the route commits.
+  //
+  // PENDING IS NOT ACTIVE, and keeping the two apart is the whole point. Active
+  // means "this is the page you are on" — it carries the accent bar and
+  // `aria-current="page"`, and it stays derived from the pathname, so it is
+  // never asserted before it is true. Pending only means "this is the one you
+  // clicked": a click deserves an answer, but the answer must not be a claim
+  // about where you are. Folding pending into active would light the accent on
+  // a section still loading and announce it as the current page to a screen
+  // reader — a statement that is simply false until the router says otherwise.
+  const [pendingItemId, setPendingItemId] = useState<string | null>(null)
+  const committedActiveId = useMemo(
+    () => config.items.find(item => item.isActive)?.id ?? null,
+    [config.items],
+  )
+
+  // Any committed change clears it — including one that landed somewhere else
+  // entirely (a redirect, a link elsewhere on the page). A navigation that never
+  // commits leaves a faint hold on the row it started from; because pending is
+  // only ever a soft hint, that costs nothing but a stale hover-weight tint,
+  // where a stale ACTIVE state would have been a lie about the current page.
+  useEffect(() => {
+    setPendingItemId(null)
+  }, [committedActiveId])
+
   const handleItemClick = useCallback((item: NavigationSidebarItem, event?: React.MouseEvent) => {
     event?.stopPropagation()
 
     if (item.onClick) {
       item.onClick()
-    } else if (item.path) {
-      config.onNavigate?.(item.path)
+      if (isTablet) setTabletMinimized(true)
+      return
+    }
+
+    if (!item.path) return
+
+    // ⌘/Ctrl/Shift-click and middle-click open the link somewhere else. THIS
+    // window is not going anywhere, so the browser is left to it: no
+    // preventDefault, no optimistic highlight, no closing the tablet overlay.
+    // Entries render as real anchors precisely so those gestures work at all.
+    if (isModifiedClick(event)) return
+
+    // A plain click stays the host's to perform, through `onNavigate` exactly
+    // as before — the anchor is here for the href (Next prefetches links in the
+    // viewport) and for the browser affordances, not to take over routing.
+    //
+    // `onNavigate` is optional, though, and with no host router there is nothing
+    // to hand the click to: swallowing it would leave a real anchor, with a real
+    // href, that does nothing at all. So the guard is on having somewhere to
+    // send it — otherwise the anchor navigates on its own and we only close the
+    // overlay behind it.
+    if (config.onNavigate) {
+      event?.preventDefault()
+      // Re-clicking the page you are already on starts no navigation, so there
+      // is nothing to mark — and nothing would ever clear it, since the
+      // committed active id is not about to change.
+      if (item.id !== committedActiveId) setPendingItemId(item.id)
+      config.onNavigate(item.path)
     }
 
     if (isTablet) setTabletMinimized(true)
-  }, [config, isTablet])
+  }, [config, isTablet, committedActiveId])
 
   const { primaryItems, secondaryItems } = useMemo(() => ({
     primaryItems: config.items.filter(item => item.section !== 'secondary'),
@@ -97,16 +152,21 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
     [minimized],
   )
 
-  const isHydrated = isMdUp !== undefined && isLgUp !== undefined
-
+  // There used to be an `isHydrated` gate here — `isMdUp !== undefined && ...`
+  // — meant to hold the sidebar's contents back until the media queries
+  // resolved. It could never be false: the `?? false` above had already
+  // swallowed the `undefined` it tested for. Removed rather than repaired,
+  // because repairing it would be the regression: the contents are server-
+  // rendered today, and gating them behind a client-only media query would
+  // trade a first paint of the real navigation for an empty rail.
   useLayoutEffect(() => {
-    if (isHydrated && !transitionsEnabled) {
+    if (!transitionsEnabled) {
       const id = requestAnimationFrame(() => {
         setTransitionsEnabled(true)
       })
       return () => cancelAnimationFrame(id)
     }
-  }, [isHydrated, transitionsEnabled])
+  }, [transitionsEnabled])
 
   return (
     <>
@@ -148,45 +208,45 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
         style={{ width: sidebarWidth }}
         aria-label="Main navigation sidebar"
       >
-        {isHydrated && (
-          <>
-            <NavigationSidebarHeader minimized={minimized} />
-
-            <div className="flex-1 flex flex-col justify-between py-4 overflow-y-auto">
-              <nav className="flex flex-col" aria-label="Primary navigation">
-                {primaryItems.map(item => (
-                  <NavigationSidebarItemButton
-                    key={item.id}
-                    item={item}
-                    showLabel={showLabel}
-                    disabled={disabled}
-                    onClick={handleItemClick}
-                  />
-                ))}
-              </nav>
-
-              {secondaryItems.length > 0 && (
-                <nav className="flex flex-col" aria-label="Secondary navigation">
-                  {secondaryItems.map(item => (
-                    <NavigationSidebarItemButton
-                      key={item.id}
-                      item={item}
-                      showLabel={showLabel}
-                      disabled={disabled}
-                      onClick={handleItemClick}
-                    />
-                  ))}
-                </nav>
-              )}
-            </div>
-
-            <NavigationSidebarToggle
-              minimized={minimized}
-              showLabel={showLabel}
-              onToggle={handleToggle}
-            />
-          </>
-        )}
+        <NavigationSidebarHeader minimized={minimized} />
+
+        <div className="flex-1 flex flex-col justify-between py-4 overflow-y-auto">
+          <nav className="flex flex-col" aria-label="Primary navigation">
+            {primaryItems.map(item => (
+              <NavigationSidebarItemButton
+                key={item.id}
+                item={item}
+                isActive={item.id === committedActiveId}
+                isPending={item.id === pendingItemId}
+                showLabel={showLabel}
+                disabled={disabled}
+                onClick={handleItemClick}
+              />
+            ))}
+          </nav>
+
+          {secondaryItems.length > 0 && (
+            <nav className="flex flex-col" aria-label="Secondary navigation">
+              {secondaryItems.map(item => (
+                <NavigationSidebarItemButton
+                  key={item.id}
+                  item={item}
+                  isActive={item.id === committedActiveId}
+                isPending={item.id === pendingItemId}
+                  showLabel={showLabel}
+                  disabled={disabled}
+                  onClick={handleItemClick}
+                />
+              ))}
+            </nav>
+          )}
+        </div>
+
+        <NavigationSidebarToggle
+          minimized={minimized}
+          showLabel={showLabel}
+          onToggle={handleToggle}
+        />
       </aside>
     </>
   )

package/src/components/ui/__tests__/tab-navigation.test.tsx

@@ -0,0 +1,159 @@
+import { describe, it, expect, beforeAll } from 'vitest'
+import { render, fireEvent, screen } from '@testing-library/react'
+import { mockReplace, setMockSearchParams } from '../../../../vitest.setup'
+import { TabNavigation, type TabItem } from '../tab-navigation'
+
+beforeAll(() => {
+  // jsdom ships no ResizeObserver; the tab strip observes itself on mount to
+  // keep the edge fades and the underline in sync with its own width.
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver
+})
+
+const TABS: TabItem[] = [
+  { id: 'general', label: 'General' },
+  { id: 'software', label: 'Software' },
+]
+
+/**
+ * Renders with `urlSync` and reports the tab id the BODY was last rendered with
+ * — the one thing a consumer actually observes, and the value the deferred
+ * render settles on once React has flushed.
+ */
+function renderNav(tabs: TabItem[]) {
+  let seen = '__never-rendered__'
+  const element = (next: TabItem[]) => (
+    <TabNavigation tabs={next} urlSync>
+      {(active) => {
+        seen = active
+        return null
+      }}
+    </TabNavigation>
+  )
+  const utils = render(element(tabs))
+  return {
+    get active() {
+      return seen
+    },
+    rerenderWith(next: TabItem[]) {
+      utils.rerender(element(next))
+    },
+  }
+}
+
+describe('TabNavigation with urlSync', () => {
+  describe('a tab list that arrives late', () => {
+    // The sync effect is guarded on the URL value changing, so that our own
+    // `router.replace` doesn't come back looking like someone else's edit. The
+    // guard must not also swallow the tabs themselves arriving — an empty list
+    // resolves to no active tab, and the URL never moves again to correct it.
+    it('applies the deep-linked tab once the tabs arrive', () => {
+      setMockSearchParams(new URLSearchParams('tab=software'))
+      const nav = renderNav([])
+      expect(nav.active).toBe('')
+
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('software')
+    })
+
+    it('falls back to the first tab once the tabs arrive', () => {
+      const nav = renderNav([])
+      expect(nav.active).toBe('')
+
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('general')
+    })
+
+    it('leaves a tab the user picked alone when the tabs array is merely re-created', () => {
+      const nav = renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+      expect(nav.active).toBe('software')
+
+      // Same ids, new array + new Set identity — what a consumer passing an
+      // inline literal produces on every one of its renders.
+      nav.rerenderWith([...TABS])
+      expect(nav.active).toBe('software')
+    })
+  })
+
+  describe('clicking a tab', () => {
+    // The regression this component was rewritten for: state moves on click,
+    // `router.replace` lands a tick or more later, and an effect comparing the
+    // state against the URL in between would read the tab just LEFT and push
+    // the tab back to it.
+    it('does not revert before the navigation lands', () => {
+      const nav = renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+
+      // The URL has deliberately NOT been updated here — this is the window in
+      // which the old effect fought its own click.
+      expect(nav.active).toBe('software')
+    })
+
+    it('writes the tab to the URL without scrolling to the top', () => {
+      renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+
+      expect(mockReplace).toHaveBeenCalledWith('/?tab=software', { scroll: false })
+    })
+
+    it('stays put when its own write finally lands', () => {
+      const nav = renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+
+      setMockSearchParams(new URLSearchParams('tab=software'))
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('software')
+    })
+
+    // Two clicks inside one navigation: the FIRST write lands while the second
+    // is still in flight. Arriving out of step like that, it is indistinguishable
+    // from an external change unless the component remembers what it wrote.
+    it('ignores an earlier write landing after a second click', () => {
+      const nav = renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+      fireEvent.click(screen.getByText('General'))
+      expect(nav.active).toBe('general')
+
+      setMockSearchParams(new URLSearchParams('tab=software'))
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('general')
+
+      setMockSearchParams(new URLSearchParams('tab=general'))
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('general')
+    })
+
+    it('keeps unrelated query params', () => {
+      setMockSearchParams(new URLSearchParams('page=2&tab=general'))
+      renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+
+      expect(mockReplace).toHaveBeenCalledWith('/?page=2&tab=software', { scroll: false })
+    })
+  })
+
+  describe('an external URL change', () => {
+    it('moves the tab (back/forward, or a link into a tab)', () => {
+      setMockSearchParams(new URLSearchParams('tab=general'))
+      const nav = renderNav(TABS)
+      expect(nav.active).toBe('general')
+
+      setMockSearchParams(new URLSearchParams('tab=software'))
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('software')
+    })
+
+    it('falls back when the URL names a tab that does not exist', () => {
+      setMockSearchParams(new URLSearchParams('tab=general'))
+      const nav = renderNav(TABS)
+
+      setMockSearchParams(new URLSearchParams('tab=nonsense'))
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('general')
+    })
+  })
+})

package/src/components/ui/data-table/data-table-column-filter.tsx

@@ -68,7 +68,13 @@ export function DataTableColumnFilter({
       triggerElement={
         <div
           className={cn(
-            'group flex w-full items-center gap-[var(--spacing-system-xsf)] py-[var(--spacing-system-sf)] rounded-sm cursor-pointer transition-colors duration-200 select-none',
+            // Fixed 48px per design, same as the plain header cell next to it —
+            // NOT padding around the label. The two were drifting: 12px+20px+12px
+            // came out 44px here while the sibling was pinned to 48, so in a
+            // header mixing filterable and plain columns the labels sat on
+            // different centre lines and the filter's hit area was 4px short of
+            // the row it belongs to.
+            'group flex w-full items-center gap-[var(--spacing-system-xsf)] h-12 rounded-sm cursor-pointer transition-colors duration-200 select-none',
             alignJustify(align),
           )}
           aria-label={`Filter by ${label}`}

package/src/components/ui/data-table/data-table-header.tsx

@@ -97,7 +97,10 @@ export function DataTableHeader({
               {rightSlot}
             </div>
           ) : (
-            <div className="ml-auto flex items-center py-[var(--spacing-system-sf)]">
+            // In-flow fallback: with no visible header cell this slot is the
+            // only thing giving the row height, so it carries the same fixed 48
+            // rather than padding out to 44.
+            <div className="ml-auto flex items-center h-12">
               {rightSlot}
             </div>
           ))}

package/src/components/ui/data-table/data-table-skeleton.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '../../../utils/cn'
 import { useDataTableContext } from './data-table'
+import { getHideClasses } from './utils'
 
 /**
  * Consistent INNER row heights. The row card wraps these in a 1px border on
@@ -51,6 +52,12 @@ export function DataTableSkeleton({
                   className={cn(
                     'flex flex-col justify-center shrink-0',
                     meta?.width || 'flex-1',
+                    // Same responsive hiding the real header and row apply.
+                    // Without it a `hideAt` column was drawn in the skeleton and
+                    // absent from the loaded table, so below that breakpoint the
+                    // remaining columns were sized against a different total and
+                    // the whole row re-laid-out the moment data arrived.
+                    getHideClasses(meta?.hideAt),
                   )}
                 >
                   <div className="h-5 bg-ods-bg-surface rounded-sm w-3/4 mb-[var(--spacing-system-xxs)]" />