Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 | 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 377x 15x 311x 15x 249x 249x 15x 73x 18x 18x 18x 73x 73x 15x 181x 181x 350x 15x 21x 21x 21x 21x 15x 36x 36x 36x 16x 36x 21x 21x 21x 21x 15x 15x 36x 36x 32x 36x 30x 30x 36x 15x 15x 41x 37x 37x 41x 31x 31x 27x 1x 27x 15x 18x 17x 18x 16x 2x 18x 18x 18x 15x 15x 18x 3x 3x 3x 12x 5x 15x 15x 5x 8x 5x 5x 5x 5x 5x 2x 1x 5x 7x 4x 4x 3x 3x 1x 15x 15x 17x 5x 5x 17x 15x 15x 15x 15x 18x 15x 15x 15x 15x 15x 15x 28x 27x 27x 27x 27x 15x 27x 27x 27x 28x 28x 28x 23x 2x 2x 1x 1x 21x 27x 27x 11x 8x 8x 8x 8x 6x 3x 3x 6x 6x 6x 6x 6x 5x 6x 5x 4x 5x 5x 5x 5x 5x 5x 2x 1x 1x 2x 2x 12x 12x 4x 4x 8x 7x 7x 7x 2x 6x 4x 4x 4x 2x 4x 3x 2x 2x 2x | import type { CollectionItem } from '../collections/collection';
import { createControllerHost } from '../core/host';
import { createTimeoutManager } from '../core/timers';
import type {
ChangeDetails,
ControllableValueOptions,
RuntimeController,
RuntimeEventSource,
} from '../core/types';
import type { FloatingPositionOptions, PositionResult } from '../positioning/positioning';
import { createControllableValue } from '../state/controllable';
import { createDisclosure, type DisclosureController } from './disclosure';
import { createMenu, type MenuOptions } from './menu';
import type { OpenChangeReason, OverlayElements } from './openable';
/** Consumer-selected Navigation Menu presentation mode. @public */
export type NavigationMenuMode = 'desktop' | 'compact';
/** Causes of Navigation Menu open-item changes. @public */
export type NavigationMenuReason =
'programmatic' | 'pointer' | 'keyboard' | 'outside-pointer' | 'focus-out';
/** Navigation item registration supporting simple links and mega-menu content. @public */
export interface NavigationMenuItem extends CollectionItem {
/** Whether the item controls nested or mega-menu content. */
readonly hasContent?: boolean;
}
/** Immutable Navigation Menu snapshot. @public */
export interface NavigationMenuSnapshot {
/** Stable shared-content ID used by trigger `aria-controls` relationships. */
readonly contentId: string;
/** Consumer-controlled responsive presentation mode. */
readonly mode: NavigationMenuMode;
/** Item whose nested content is open. */
readonly openId: string | null;
/** Keyboard-active navigation item. */
readonly activeId: string | null;
/** Whether open-item state is consumer-owned. */
readonly controlled: boolean;
/** Ordered navigation items. */
readonly items: readonly Readonly<NavigationMenuItem>[];
/** Shared floating-content position. */
readonly position: PositionResult | null;
}
/** Navigation Menu lifecycle payload. @public */
export interface NavigationMenuEvent {
/** Item being opened or closed. */
readonly item: Readonly<NavigationMenuItem>;
/** Next item ID or `null`. */
readonly openId: string | null;
/** Typed cause and optional native event. */
readonly details: ChangeDetails<NavigationMenuReason>;
}
/** Navigation Menu event map. @public */
export interface NavigationMenuEvents {
/** Cancellable event emitted before nested content opens. */
readonly beforeOpen: NavigationMenuEvent;
/** Event emitted after nested content opens. */
readonly open: NavigationMenuEvent;
/** Cancellable event emitted before nested content closes. */
readonly beforeClose: NavigationMenuEvent;
/** Event emitted after nested content closes. */
readonly close: NavigationMenuEvent;
/** Event emitted for every accepted open-item mutation. */
readonly stateChange: NavigationMenuEvent;
}
/** Navigation Menu options. @public */
export interface NavigationMenuOptions extends Partial<
ControllableValueOptions<string | null, NavigationMenuReason>
> {
/** Consumer-provided deterministic shared-content ID. */
readonly id?: string;
/** Initial consumer-selected responsive mode. @defaultValue `desktop` */
readonly mode?: NavigationMenuMode;
/** Pointer open delay in desktop mode. @defaultValue `150` */
readonly openDelay?: number;
/** Pointer close delay in desktop mode. @defaultValue `200` */
readonly closeDelay?: number;
/** Shared floating-content positioning options. */
readonly positioning?: FloatingPositionOptions;
}
/** Headless responsive Navigation Menu controller. @public */
export interface NavigationMenuController
extends RuntimeController<NavigationMenuSnapshot>, RuntimeEventSource<NavigationMenuEvents> {
/** Registers a simple or content-bearing navigation item. */
registerItem(item: NavigationMenuItem, element?: HTMLElement): () => void;
/** Binds shared nested content for outside interaction and positioning. */
bind(elements: OverlayElements): () => void;
/** Opens content immediately with a typed cause. */
openItem(id: string, details?: ChangeDetails<NavigationMenuReason>): void;
/** Closes currently open content. */
close(details?: ChangeDetails<NavigationMenuReason>): void;
/** Schedules desktop pointer opening; compact mode opens immediately. */
scheduleOpen(id: string, event?: PointerEvent): void;
/** Schedules desktop pointer closing; compact mode closes immediately. */
scheduleClose(event?: PointerEvent): void;
/** Handles navigation and Escape, inferring the item from a registered event current target. */
handleKeyDown(event: KeyboardEvent): void;
/** Handles navigation and opening for an explicitly identified registered item. */
handleKeyDown(itemId: string, event: KeyboardEvent): void;
/** Updates consumer-controlled responsive mode without reading viewport globals. */
setMode(mode: NavigationMenuMode): void;
}
/** Creates a Navigation Menu from Menu, Disclosure, and shared Positioning primitives. @public */
export function createNavigationMenu(
options: NavigationMenuOptions = {},
): NavigationMenuController {
let mode = options.mode ?? 'desktop';
const menuOptions: MenuOptions = {
closeOnSelect: false,
...(options.id ? { id: options.id } : {}),
...(options.positioning ? { positioning: options.positioning } : {}),
};
const menu = createMenu(menuOptions);
const items = new Map<string, { readonly item: NavigationMenuItem; readonly token: symbol }>();
const itemElements = new Map<string, HTMLElement>();
let activeBinding:
| {
readonly branches: Element[];
readonly explicitBranches: readonly Element[];
readonly elements: OverlayElements;
release: (() => void) | undefined;
}
| undefined;
const disclosures = new Map<string, DisclosureController>();
const timer = createTimeoutManager();
const initialMenu = menu.getSnapshot();
const initialOpenId = options.getValue?.() ?? options.defaultValue ?? null;
let bypassMenuBeforeClose = false;
const host = createControllerHost<NavigationMenuSnapshot, NavigationMenuEvents>({
contentId: initialMenu.contentId,
mode,
openId: initialOpenId,
activeId: initialMenu.activeId,
controlled: options.getValue !== undefined,
items: [],
position: initialMenu.position,
});
const clearTimer = timer.clear;
const itemFor = (id: string | null | undefined): NavigationMenuItem | undefined =>
id ? items.get(id)?.item : undefined;
const isOpenableItem = (item: NavigationMenuItem | undefined): item is NavigationMenuItem =>
Boolean(item?.hasContent && !item.disabled);
const effectiveOpenId = (): string | null => {
const openId = state.get();
return isOpenableItem(itemFor(openId)) ? openId : null;
};
const refreshBindingBranches = (openId = effectiveOpenId()): void => {
if (!activeBinding) return;
const branches = new Set([...activeBinding.explicitBranches, ...itemElements.values()]);
activeBinding.branches.splice(0, activeBinding.branches.length, ...branches);
const activeElement = openId ? itemElements.get(openId) : undefined;
activeBinding.release?.();
activeBinding.release = menu.bind({
...activeBinding.elements,
...(activeElement ? { trigger: activeElement, anchor: activeElement } : {}),
branches: activeBinding.branches,
});
};
const sync = (): void => {
const menuSnapshot = menu.getSnapshot();
host.update({
contentId: menuSnapshot.contentId,
mode,
openId: effectiveOpenId(),
activeId: menuSnapshot.activeId,
controlled: state.controlled,
items: Object.freeze([...items.values()].map(({ item }) => item)),
position: menuSnapshot.position,
});
};
const closeMenu = (details: ChangeDetails<OpenChangeReason>): void => {
bypassMenuBeforeClose = true;
try {
menu.close(details);
} finally {
bypassMenuBeforeClose = false;
}
};
const commit = (
openId: string | null,
changeDetails?: ChangeDetails<NavigationMenuReason>,
): void => {
const previousId = host.getSnapshot().openId;
const nextOpenId = isOpenableItem(itemFor(openId)) ? openId : null;
if (previousId && previousId !== nextOpenId)
disclosures.get(previousId)?.collapse({ reason: 'programmatic' });
if (nextOpenId) {
disclosures.get(nextOpenId)?.expand({ reason: 'programmatic' });
refreshBindingBranches(nextOpenId);
menu.open({
reason: changeDetails?.reason === 'keyboard' ? 'keyboard' : 'trigger',
...(changeDetails?.event ? { event: changeDetails.event } : {}),
});
menu.setActive(nextOpenId);
} else {
closeMenu({
reason:
changeDetails?.reason === 'outside-pointer' || changeDetails?.reason === 'focus-out'
? changeDetails.reason
: 'programmatic',
...(changeDetails?.event ? { event: changeDetails.event } : {}),
});
refreshBindingBranches(null);
}
sync();
if (!changeDetails) return;
const item = itemFor(nextOpenId ?? previousId);
if (!item) return;
const payload = { item, openId: nextOpenId, details: changeDetails };
host.emit(nextOpenId ? 'open' : 'close', payload);
host.emit('stateChange', payload);
};
const state = createControllableValue<string | null, NavigationMenuReason>(
{
defaultValue: options.defaultValue ?? null,
...(options.getValue ? { getValue: options.getValue } : {}),
...(options.onValueChange ? { onValueChange: options.onValueChange } : {}),
...(options.subscribeValue ? { subscribeValue: options.subscribeValue } : {}),
},
commit,
);
const change = (
openId: string | null,
changeDetails: ChangeDetails<NavigationMenuReason>,
): boolean => {
if (state.get() === openId) return effectiveOpenId() === openId;
const previousId = state.get();
const item = itemFor(openId ?? previousId);
if (!item || (openId !== null && !isOpenableItem(item))) return false;
const payload = { item, openId, details: changeDetails };
if (!host.emit(openId ? 'beforeOpen' : 'beforeClose', payload)) return false;
if (state.set(openId, changeDetails)) commit(openId, changeDetails);
else sync();
return effectiveOpenId() === openId;
};
const handleKeyDown = (
itemOrEvent: string | KeyboardEvent,
providedEvent?: KeyboardEvent,
): void => {
if (!host.alive()) return;
const event = typeof itemOrEvent === 'string' ? providedEvent : itemOrEvent;
if (!event) return;
const inferredId =
typeof itemOrEvent === 'string'
? itemOrEvent
: [...itemElements].find(([, element]) => element === event.currentTarget)?.[0];
const itemId = inferredId ?? menu.getSnapshot().activeId;
const item = itemFor(itemId);
if (itemId && (!item || item.disabled)) return;
Eif (itemId) menu.setActive(itemId);
const opensFromTrigger =
event.key === 'Enter' ||
event.key === ' ' ||
event.key === 'ArrowDown' ||
event.key === 'ArrowUp';
if (!menu.getSnapshot().open && itemId && item?.hasContent && opensFromTrigger) {
event.preventDefault();
change(itemId, { reason: 'keyboard', event });
return;
}
if (menu.getSnapshot().open && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
const enabled = [...items.values()]
.map(({ item: candidate }) => candidate)
.filter((candidate) => !candidate.disabled);
Iif (enabled.length === 0) return;
const currentIndex = enabled.findIndex((candidate) => candidate.id === itemId);
const delta = event.key === 'ArrowRight' ? 1 : -1;
const next = enabled[(currentIndex + delta + enabled.length) % enabled.length];
Eif (next) {
event.preventDefault();
if (next.hasContent) change(next.id, { reason: 'keyboard', event });
else if (change(null, { reason: 'keyboard', event })) {
menu.setActive(next.id);
}
}
return;
}
if (item && !item.hasContent && (event.key === 'Enter' || event.key === ' ')) return;
menu.handleKeyDown(event);
if (event.key === 'Escape') return;
const activeId = menu.getSnapshot().activeId;
if (opensFromTrigger && activeId && itemFor(activeId)?.hasContent) {
change(activeId, { reason: 'keyboard', event });
}
};
host.resources.add(menu.subscribe(sync));
host.resources.add(
menu.on('beforeClose', (event) => {
if (bypassMenuBeforeClose || state.get() === null) return;
event.preventDefault();
const reason: NavigationMenuReason =
event.detail.details.reason === 'escape-key'
? 'keyboard'
: event.detail.details.reason === 'focus-out'
? 'focus-out'
: 'outside-pointer';
change(null, {
reason,
...(event.detail.details.event ? { event: event.detail.details.event } : {}),
});
}),
);
host.resources.add(clearTimer);
host.resources.add(() => state.destroy());
host.resources.add(() => menu.destroy());
host.resources.add(() => {
disclosures.forEach((disclosure) => disclosure.destroy());
disclosures.clear();
});
host.resources.add(() => items.clear());
host.resources.add(() => itemElements.clear());
host.resources.add(() => {
activeBinding = undefined;
});
return {
getSnapshot: host.getSnapshot,
subscribe: host.subscribe,
on: host.on,
off: host.off,
once: host.once,
registerItem(item, element) {
if (!host.alive()) return () => undefined;
const token = Symbol(item.id);
const registeredItem = Object.freeze({ ...item });
items.set(item.id, { item: registeredItem, token });
if (element) itemElements.set(item.id, element);
else itemElements.delete(item.id);
refreshBindingBranches();
const unregisterMenu = menu.registerItem(item, element);
disclosures.get(item.id)?.destroy();
const disclosure = createDisclosure({
defaultValue: state.get() === item.id,
...(item.disabled !== undefined ? { disabled: item.disabled } : {}),
});
disclosures.set(item.id, disclosure);
if (state.get() === item.id && isOpenableItem(registeredItem)) commit(item.id);
else if (state.get() === item.id) {
const changeDetails: ChangeDetails<NavigationMenuReason> = { reason: 'programmatic' };
if (state.set(null, changeDetails)) commit(null, changeDetails);
else {
closeMenu({ reason: 'programmatic' });
sync();
}
} else sync();
let active = true;
return () => {
if (!active) return;
active = false;
unregisterMenu();
disclosure.destroy();
if (items.get(item.id)?.token !== token) return;
if (state.get() === item.id) {
const changeDetails: ChangeDetails<NavigationMenuReason> = { reason: 'programmatic' };
Eif (state.set(null, changeDetails)) commit(null, changeDetails);
}
Eif (disclosures.get(item.id) === disclosure) disclosures.delete(item.id);
itemElements.delete(item.id);
items.delete(item.id);
refreshBindingBranches();
if (host.getSnapshot().openId === item.id || !itemFor(state.get())) {
closeMenu({ reason: 'programmatic' });
}
sync();
};
},
bind(elements) {
if (!host.alive()) return () => undefined;
const explicitBranches = elements.branches ?? [];
const branches: Element[] = [];
const binding: NonNullable<typeof activeBinding> = {
branches,
explicitBranches,
elements,
release: undefined,
};
activeBinding = binding;
refreshBindingBranches();
let active = true;
return () => {
if (!active) return;
active = false;
binding.release?.();
binding.release = undefined;
if (activeBinding === binding) activeBinding = undefined;
};
},
openItem(id, changeDetails = { reason: 'programmatic' }) {
clearTimer();
change(id, changeDetails);
},
close(changeDetails = { reason: 'programmatic' }) {
clearTimer();
change(null, changeDetails);
},
scheduleOpen(id, event) {
if (!host.alive()) return;
clearTimer();
const run = () => change(id, event ? { reason: 'pointer', event } : { reason: 'pointer' });
if (mode === 'compact' || (options.openDelay ?? 150) === 0) run();
else timer.schedule(run, options.openDelay ?? 150);
},
scheduleClose(event) {
if (!host.alive()) return;
clearTimer();
const run = () => change(null, event ? { reason: 'pointer', event } : { reason: 'pointer' });
if (mode === 'compact' || (options.closeDelay ?? 200) === 0) run();
else timer.schedule(run, options.closeDelay ?? 200);
},
handleKeyDown,
setMode(nextMode) {
if (!host.alive()) return;
if (mode === nextMode) return;
mode = nextMode;
clearTimer();
sync();
},
destroy: host.destroy,
};
}
|