[{"data":1,"prerenderedAt":1506},["ShallowReactive",2],{"navigation_docs":3,"-api-interactions-use-outside-click":271,"-api-interactions-use-outside-click-surround":1501},[4,135],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":28},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,29,51,73,91,109],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":28},"Getting Started","i-lucide-rocket","\u002Fguide\u002Fgetting-started","1.guide\u002F1.getting-started",[16,20,24],{"title":17,"path":18,"stem":19},"Introduction","\u002Fguide\u002Fgetting-started\u002Fintroduction","1.guide\u002F1.getting-started\u002F1.introduction",{"title":21,"path":22,"stem":23},"First Tooltip","\u002Fguide\u002Fgetting-started\u002Ffirst-tooltip","1.guide\u002F1.getting-started\u002F2.first-tooltip",{"title":25,"path":26,"stem":27},"First Popover","\u002Fguide\u002Fgetting-started\u002Ffirst-popover","1.guide\u002F1.getting-started\u002F3.first-popover",false,{"title":30,"icon":31,"path":32,"stem":33,"children":34,"page":28},"Core Concepts","i-lucide-boxes","\u002Fguide\u002Fcore-concepts","1.guide\u002F2.core-concepts",[35,39,43,47],{"title":36,"path":37,"stem":38},"Floating Node","\u002Fguide\u002Fcore-concepts\u002Ffloating-node","1.guide\u002F2.core-concepts\u002F1.floating-node",{"title":40,"path":41,"stem":42},"Placement & Positioning","\u002Fguide\u002Fcore-concepts\u002Fplacement-and-positioning","1.guide\u002F2.core-concepts\u002F2.placement-and-positioning",{"title":44,"path":45,"stem":46},"Interaction Model","\u002Fguide\u002Fcore-concepts\u002Finteraction-model","1.guide\u002F2.core-concepts\u002F3.interaction-model",{"title":48,"path":49,"stem":50},"Tree Coordination","\u002Fguide\u002Fcore-concepts\u002Ftree-coordination-explained","1.guide\u002F2.core-concepts\u002F4.tree-coordination-explained",{"title":52,"icon":53,"path":54,"stem":55,"children":56,"page":28},"Patterns","i-lucide-component","\u002Fguide\u002Fcomponents","1.guide\u002F3.components",[57,61,65,69],{"title":58,"path":59,"stem":60},"Tooltips","\u002Fguide\u002Fcomponents\u002Fbuild-accessible-tooltips","1.guide\u002F3.components\u002F1.build-accessible-tooltips",{"title":62,"path":63,"stem":64},"Popovers & Dropdowns","\u002Fguide\u002Fcomponents\u002Fbuild-popovers-and-dropdowns","1.guide\u002F3.components\u002F2.build-popovers-and-dropdowns",{"title":66,"path":67,"stem":68},"Dialogs & Modals","\u002Fguide\u002Fcomponents\u002Fbuild-dialogs-and-modals","1.guide\u002F3.components\u002F3.build-dialogs-and-modals",{"title":70,"path":71,"stem":72},"Nested Menus","\u002Fguide\u002Fcomponents\u002Fbuild-nested-menus","1.guide\u002F3.components\u002F4.build-nested-menus",{"title":74,"icon":75,"path":76,"stem":77,"children":78,"page":28},"Positioning","i-lucide-crosshair","\u002Fguide\u002Fpositioning","1.guide\u002F4.positioning",[79,83,87],{"title":80,"path":81,"stem":82},"Keep in View","\u002Fguide\u002Fpositioning\u002Fkeep-content-in-view","1.guide\u002F4.positioning\u002F1.keep-content-in-view",{"title":84,"path":85,"stem":86},"Virtual Anchors","\u002Fguide\u002Fpositioning\u002Fuse-virtual-anchors","1.guide\u002F4.positioning\u002F2.use-virtual-anchors",{"title":88,"path":89,"stem":90},"Middleware Pipeline","\u002Fguide\u002Fpositioning\u002Fmiddleware-pipeline","1.guide\u002F4.positioning\u002F3.middleware-pipeline",{"title":92,"icon":93,"path":94,"stem":95,"children":96,"page":28},"Accessibility","i-lucide-person-standing","\u002Fguide\u002Faccessibility","1.guide\u002F5.accessibility",[97,101,105],{"title":98,"path":99,"stem":100},"Open State","\u002Fguide\u002Faccessibility\u002Fcontrol-open-state","1.guide\u002F5.accessibility\u002F1.control-open-state",{"title":102,"path":103,"stem":104},"Focus Models","\u002Fguide\u002Faccessibility\u002Ffocus-models","1.guide\u002F5.accessibility\u002F2.focus-models",{"title":106,"path":107,"stem":108},"Keyboard Navigation","\u002Fguide\u002Faccessibility\u002Fkeyboard-navigation","1.guide\u002F5.accessibility\u002F3.keyboard-navigation",{"title":110,"icon":111,"path":112,"stem":113,"children":114,"page":28},"Advanced","i-lucide-cpu","\u002Fguide\u002Fadvanced","1.guide\u002F6.advanced",[115,119,123,127,131],{"title":116,"path":117,"stem":118},"Controlled vs Uncontrolled","\u002Fguide\u002Fadvanced\u002Fcontrolled-vs-uncontrolled","1.guide\u002F6.advanced\u002F1.controlled-vs-uncontrolled",{"title":120,"path":121,"stem":122},"Safe Polygons","\u002Fguide\u002Fadvanced\u002Fsafe-polygon-gotchas","1.guide\u002F6.advanced\u002F2.safe-polygon-gotchas",{"title":124,"path":125,"stem":126},"Virtual Anchor Gotchas","\u002Fguide\u002Fadvanced\u002Fvirtual-anchor-gotchas","1.guide\u002F6.advanced\u002F3.virtual-anchor-gotchas",{"title":128,"path":129,"stem":130},"Middleware Ordering","\u002Fguide\u002Fadvanced\u002Fmiddleware-ordering-gotchas","1.guide\u002F6.advanced\u002F4.middleware-ordering-gotchas",{"title":132,"path":133,"stem":134},"List Navigation","\u002Fguide\u002Fadvanced\u002Flist-navigation-gotchas","1.guide\u002F6.advanced\u002F5.list-navigation-gotchas",{"title":136,"icon":137,"path":138,"stem":139,"children":140},"API Reference","i-lucide-code-xml","\u002Fapi","2.api",[141,145,155,165,182,216,233],{"title":142,"path":138,"stem":143,"icon":144},"Overview","2.api\u002Findex","i-lucide-file-text",{"title":146,"icon":147,"path":148,"stem":149,"children":150,"page":28},"Reference","i-lucide-braces","\u002Fapi\u002Foverview","2.api\u002F1.overview",[151],{"title":152,"path":153,"stem":154},"Types","\u002Fapi\u002Foverview\u002Ftypes","2.api\u002F1.overview\u002F1.types",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":28},"Core","i-lucide-box","\u002Fapi\u002Fcore","2.api\u002F2.core",[161],{"title":162,"path":163,"stem":164},"useFloatingNode","\u002Fapi\u002Fcore\u002Fuse-floating-node","2.api\u002F2.core\u002F1.use-floating-node",{"title":74,"icon":166,"path":167,"stem":168,"children":169,"page":28},"i-lucide-move","\u002Fapi\u002Fpositioning","2.api\u002F3.positioning",[170,174,178],{"title":171,"path":172,"stem":173},"usePosition","\u002Fapi\u002Fpositioning\u002Fuse-position","2.api\u002F3.positioning\u002F1.use-position",{"title":175,"path":176,"stem":177},"useArrow","\u002Fapi\u002Fpositioning\u002Fuse-arrow","2.api\u002F3.positioning\u002F2.use-arrow",{"title":179,"path":180,"stem":181},"useClientPoint","\u002Fapi\u002Fpositioning\u002Fuse-client-point","2.api\u002F3.positioning\u002F3.use-client-point",{"title":183,"icon":184,"path":185,"stem":186,"children":187,"page":28},"Interactions","i-lucide-mouse-pointer-click","\u002Fapi\u002Finteractions","2.api\u002F4.interactions",[188,192,196,200,204,208,212],{"title":189,"path":190,"stem":191},"useClick","\u002Fapi\u002Finteractions\u002Fuse-click","2.api\u002F4.interactions\u002F1.use-click",{"title":193,"path":194,"stem":195},"useHover","\u002Fapi\u002Finteractions\u002Fuse-hover","2.api\u002F4.interactions\u002F2.use-hover",{"title":197,"path":198,"stem":199},"useFocus","\u002Fapi\u002Finteractions\u002Fuse-focus","2.api\u002F4.interactions\u002F3.use-focus",{"title":201,"path":202,"stem":203},"useFocusTrap","\u002Fapi\u002Finteractions\u002Fuse-focus-trap","2.api\u002F4.interactions\u002F4.use-focus-trap",{"title":205,"path":206,"stem":207},"useOutsideClick","\u002Fapi\u002Finteractions\u002Fuse-outside-click","2.api\u002F4.interactions\u002F5.use-outside-click",{"title":209,"path":210,"stem":211},"useEscapeKey","\u002Fapi\u002Finteractions\u002Fuse-escape-key","2.api\u002F4.interactions\u002F6.use-escape-key",{"title":213,"path":214,"stem":215},"useRole","\u002Fapi\u002Finteractions\u002Fuse-role","2.api\u002F4.interactions\u002F7.use-role",{"title":106,"icon":217,"path":218,"stem":219,"children":220,"page":28},"i-lucide-keyboard","\u002Fapi\u002Fkeyboard-navigation","2.api\u002F5.keyboard-navigation",[221,225,229],{"title":222,"path":223,"stem":224},"useRovingFocus","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-roving-focus","2.api\u002F5.keyboard-navigation\u002F1.use-roving-focus",{"title":226,"path":227,"stem":228},"useAriaActivedescendant","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-aria-activedescendant","2.api\u002F5.keyboard-navigation\u002F2.use-aria-activedescendant",{"title":230,"path":231,"stem":232},"useTypeahead","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-typeahead","2.api\u002F5.keyboard-navigation\u002F3.use-typeahead",{"title":234,"icon":235,"path":236,"stem":237,"children":238,"page":28},"Middleware","i-lucide-blocks","\u002Fapi\u002Fmiddleware","2.api\u002F6.middleware",[239,243,247,251,255,259,263,267],{"title":240,"path":241,"stem":242},"offset","\u002Fapi\u002Fmiddleware\u002Foffset","2.api\u002F6.middleware\u002F1.offset",{"title":244,"path":245,"stem":246},"flip","\u002Fapi\u002Fmiddleware\u002Fflip","2.api\u002F6.middleware\u002F2.flip",{"title":248,"path":249,"stem":250},"shift","\u002Fapi\u002Fmiddleware\u002Fshift","2.api\u002F6.middleware\u002F3.shift",{"title":252,"path":253,"stem":254},"autoPlacement","\u002Fapi\u002Fmiddleware\u002Fautoplacement","2.api\u002F6.middleware\u002F4.autoplacement",{"title":256,"path":257,"stem":258},"size","\u002Fapi\u002Fmiddleware\u002Fsize","2.api\u002F6.middleware\u002F5.size",{"title":260,"path":261,"stem":262},"inline","\u002Fapi\u002Fmiddleware\u002Finline","2.api\u002F6.middleware\u002F6.inline",{"title":264,"path":265,"stem":266},"arrow","\u002Fapi\u002Fmiddleware\u002Farrow","2.api\u002F6.middleware\u002F7.arrow",{"title":268,"path":269,"stem":270},"hide","\u002Fapi\u002Fmiddleware\u002Fhide","2.api\u002F6.middleware\u002F8.hide",{"id":272,"title":205,"body":273,"description":1495,"extension":1496,"links":1497,"meta":1498,"navigation":351,"path":206,"seo":1499,"stem":207,"__hash__":1500},"docs\u002F2.api\u002F4.interactions\u002F5.use-outside-click.md",{"type":274,"value":275,"toc":1482},"minimark",[276,283,288,616,620,748,752,768,772,777,782,885,889,894,931,935,953,957,977,981,1444,1448,1478],[277,278,279,282],"p",{},[280,281,205],"code",{}," closes a floating node when pointer input lands outside its floating surface. It natively leverages the composite floating node hierarchy, treating child submenus and nested overlays as internal to prevent premature closure.",[284,285,287],"h2",{"id":286},"type","Type",[289,290,295],"pre",{"className":291,"code":292,"language":293,"meta":294,"style":294},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useOutsideClick(node: FloatingNode, options?: UseOutsideClickOptions): void;\n\ninterface UseOutsideClickOptions {\n  enabled?: MaybeRefOrGetter\u003Cboolean>;\n  capture?: boolean;\n  ignoreScrollbar?: boolean;\n  shouldIgnore?: OutsideClickPredicate;\n  onOutsideClick?: (event: MouseEvent | PointerEvent, info: OutsideClickInfo) => void;\n}\n\ninterface OutsideClickInfo {\n  reason: \"pointer\" | \"iframe-blur\";\n  target: EventTarget | null;\n}\n\ntype OutsideClickPredicate = (\n  event: MouseEvent | PointerEvent,\n  target: EventTarget | null,\n  info: OutsideClickInfo,\n) => boolean;\n","ts","",[280,296,297,346,353,364,385,398,410,423,468,474,479,488,517,535,540,545,559,576,591,603],{"__ignoreMap":294},[298,299,302,306,310,314,318,321,325,328,331,334,337,340,343],"span",{"class":300,"line":301},"line",1,[298,303,305],{"class":304},"spNyl","function",[298,307,309],{"class":308},"s2Zo4"," useOutsideClick",[298,311,313],{"class":312},"sMK4o","(",[298,315,317],{"class":316},"sHdIc","node",[298,319,320],{"class":312},":",[298,322,324],{"class":323},"sBMFI"," FloatingNode",[298,326,327],{"class":312},",",[298,329,330],{"class":316}," options",[298,332,333],{"class":312},"?:",[298,335,336],{"class":323}," UseOutsideClickOptions",[298,338,339],{"class":312},"):",[298,341,342],{"class":323}," void",[298,344,345],{"class":312},";\n",[298,347,349],{"class":300,"line":348},2,[298,350,352],{"emptyLinePlaceholder":351},true,"\n",[298,354,356,359,361],{"class":300,"line":355},3,[298,357,358],{"class":304},"interface",[298,360,336],{"class":323},[298,362,363],{"class":312}," {\n",[298,365,367,371,373,376,379,382],{"class":300,"line":366},4,[298,368,370],{"class":369},"swJcz","  enabled",[298,372,333],{"class":312},[298,374,375],{"class":323}," MaybeRefOrGetter",[298,377,378],{"class":312},"\u003C",[298,380,381],{"class":323},"boolean",[298,383,384],{"class":312},">;\n",[298,386,388,391,393,396],{"class":300,"line":387},5,[298,389,390],{"class":369},"  capture",[298,392,333],{"class":312},[298,394,395],{"class":323}," boolean",[298,397,345],{"class":312},[298,399,401,404,406,408],{"class":300,"line":400},6,[298,402,403],{"class":369},"  ignoreScrollbar",[298,405,333],{"class":312},[298,407,395],{"class":323},[298,409,345],{"class":312},[298,411,413,416,418,421],{"class":300,"line":412},7,[298,414,415],{"class":369},"  shouldIgnore",[298,417,333],{"class":312},[298,419,420],{"class":323}," OutsideClickPredicate",[298,422,345],{"class":312},[298,424,426,429,431,434,437,439,442,445,448,450,453,455,458,461,464,466],{"class":300,"line":425},8,[298,427,428],{"class":369},"  onOutsideClick",[298,430,333],{"class":312},[298,432,433],{"class":312}," (",[298,435,436],{"class":316},"event",[298,438,320],{"class":312},[298,440,441],{"class":323}," MouseEvent",[298,443,444],{"class":312}," |",[298,446,447],{"class":323}," PointerEvent",[298,449,327],{"class":312},[298,451,452],{"class":316}," info",[298,454,320],{"class":312},[298,456,457],{"class":323}," OutsideClickInfo",[298,459,460],{"class":312},")",[298,462,463],{"class":304}," =>",[298,465,342],{"class":323},[298,467,345],{"class":312},[298,469,471],{"class":300,"line":470},9,[298,472,473],{"class":312},"}\n",[298,475,477],{"class":300,"line":476},10,[298,478,352],{"emptyLinePlaceholder":351},[298,480,482,484,486],{"class":300,"line":481},11,[298,483,358],{"class":304},[298,485,457],{"class":323},[298,487,363],{"class":312},[298,489,491,494,496,499,503,506,508,510,513,515],{"class":300,"line":490},12,[298,492,493],{"class":369},"  reason",[298,495,320],{"class":312},[298,497,498],{"class":312}," \"",[298,500,502],{"class":501},"sfazB","pointer",[298,504,505],{"class":312},"\"",[298,507,444],{"class":312},[298,509,498],{"class":312},[298,511,512],{"class":501},"iframe-blur",[298,514,505],{"class":312},[298,516,345],{"class":312},[298,518,520,523,525,528,530,533],{"class":300,"line":519},13,[298,521,522],{"class":369},"  target",[298,524,320],{"class":312},[298,526,527],{"class":323}," EventTarget",[298,529,444],{"class":312},[298,531,532],{"class":323}," null",[298,534,345],{"class":312},[298,536,538],{"class":300,"line":537},14,[298,539,473],{"class":312},[298,541,543],{"class":300,"line":542},15,[298,544,352],{"emptyLinePlaceholder":351},[298,546,548,550,552,555],{"class":300,"line":547},16,[298,549,286],{"class":304},[298,551,420],{"class":323},[298,553,554],{"class":312}," =",[298,556,558],{"class":557},"sTEyZ"," (\n",[298,560,562,565,567,569,571,573],{"class":300,"line":561},17,[298,563,564],{"class":316},"  event",[298,566,320],{"class":312},[298,568,441],{"class":323},[298,570,444],{"class":312},[298,572,447],{"class":323},[298,574,575],{"class":312},",\n",[298,577,579,581,583,585,587,589],{"class":300,"line":578},18,[298,580,522],{"class":316},[298,582,320],{"class":312},[298,584,527],{"class":323},[298,586,444],{"class":312},[298,588,532],{"class":323},[298,590,575],{"class":312},[298,592,594,597,599,601],{"class":300,"line":593},19,[298,595,596],{"class":316},"  info",[298,598,320],{"class":312},[298,600,457],{"class":323},[298,602,575],{"class":312},[298,604,606,609,612,614],{"class":300,"line":605},20,[298,607,608],{"class":557},") ",[298,610,611],{"class":304},"=>",[298,613,395],{"class":323},[298,615,345],{"class":312},[284,617,619],{"id":618},"options","Options",[621,622,623,641],"table",{},[624,625,626],"thead",{},[627,628,629,633,635,638],"tr",{},[630,631,632],"th",{},"Name",[630,634,287],{},[630,636,637],{},"Default",[630,639,640],{},"Notes",[642,643,644,669,687,705,725],"tbody",{},[627,645,646,652,657,662],{},[647,648,649],"td",{},[280,650,651],{},"enabled",[647,653,654],{},[280,655,656],{},"MaybeRefOrGetter\u003Cboolean>",[647,658,659],{},[280,660,661],{},"true",[647,663,664,665,668],{},"Reactive toggle. Setting to ",[280,666,667],{},"false"," disables outside click detection.",[627,670,671,676,680,684],{},[647,672,673],{},[280,674,675],{},"capture",[647,677,678],{},[280,679,381],{},[647,681,682],{},[280,683,661],{},[647,685,686],{},"Static setup option. Changing it mid-open takes effect on close\u002Fre-open. Selects the document listener phase.",[627,688,689,694,698,702],{},[647,690,691],{},[280,692,693],{},"ignoreScrollbar",[647,695,696],{},[280,697,381],{},[647,699,700],{},[280,701,661],{},[647,703,704],{},"Static flag. Pointer interactions on scrollbar gutters do not trigger dismissal.",[627,706,707,712,717,722],{},[647,708,709],{},[280,710,711],{},"shouldIgnore",[647,713,714],{},[280,715,716],{},"OutsideClickPredicate",[647,718,719],{},[280,720,721],{},"undefined",[647,723,724],{},"Custom predicate to ignore specific outside interactions. Evaluated after the composite node family check.",[627,726,727,732,737,741],{},[647,728,729],{},[280,730,731],{},"onOutsideClick",[647,733,734],{},[280,735,736],{},"(event: MouseEvent | PointerEvent, info: OutsideClickInfo) => void",[647,738,739],{},[280,740,721],{},[647,742,743,744,747],{},"Custom callback. When provided, replaces default ",[280,745,746],{},"node.open.value = false",".",[284,749,751],{"id":750},"returns","Returns",[277,753,754,756,757,760,761,763,764,767],{},[280,755,205],{}," returns ",[280,758,759],{},"void",". When an outside press is confirmed, it updates ",[280,762,746],{}," (or invokes ",[280,765,766],{},"options.onOutsideClick"," if provided).",[284,769,771],{"id":770},"details","Details",[773,774,776],"h3",{"id":775},"unified-input-model-pointer-lifecycle","Unified Input Model & Pointer Lifecycle",[277,778,779,781],{},[280,780,205],{}," automatically adapts to desktop mouse, touchscreen, and assistive technologies without manual event configuration:",[783,784,785,799,855],"ul",{},[786,787,788,795,796,798],"li",{},[789,790,791,792,339],"strong",{},"Desktop Mouse & Pen (",[280,793,794],{},"pointerdown"," Handled eagerly on ",[280,797,794],{}," ($t = 0$) in the capture phase. This gives desktop users instant feedback without waiting for release clicks, while automatically suppressing text selection drag-outs (selecting text inside the overlay and releasing outside cannot dismiss the overlay).",[786,800,801,811],{},[789,802,803,804,807,808,339],{},"Mobile Touchscreens (",[280,805,806],{},"pointerup"," & ",[280,809,810],{},"pointercancel",[783,812,813,825,849],{},[786,814,815,818,819,821,822,824],{},[789,816,817],{},"Scroll-Safe:"," On initial touch contact (",[280,820,794],{},"), dismissal is deferred. If the user touches the screen to scroll, pan, or zoom, the browser cancels the touch stream with ",[280,823,810],{},", keeping the overlay open.",[786,826,827,830,831,833,834,837,838,841,842,845,846,848],{},[789,828,829],{},"iOS Safari \u002F WebKit Compatibility:"," When a user taps to dismiss, the gesture completes with ",[280,832,806],{},". Unlike synthetic ",[280,835,836],{},"click"," events (which iOS Safari suppresses on non-interactive elements like plain ",[280,839,840],{},"\u003Cdiv>"," containers, ",[280,843,844],{},"\u003Cbody>",", or blank background whitespace), standard W3C ",[280,847,806],{}," events fire across all DOM nodes, ensuring reliable dismissal on mobile Safari.",[786,850,851,854],{},[789,852,853],{},"Drag-Out Protection:"," Touch interactions that begin inside the floating surface and drag outward are ignored on release because the initial touch-down was internal.",[786,856,857,862,863,866,867,870,871,873,874,877,878,880,881,884],{},[789,858,859,860,339],{},"Keyboard & Screen Readers (",[280,861,836],{}," Virtual activations from keyboard keys (",[280,864,865],{},"Enter"," \u002F ",[280,868,869],{},"Space",") or assistive technology (VoiceOver, TalkBack) fire synthetic ",[280,872,836],{}," events with ",[280,875,876],{},"detail === 0",". These are detected and handled on ",[280,879,836],{},". Physical trailing clicks (",[280,882,883],{},"detail > 0",") are ignored to avoid duplicate callback invocations.",[773,886,888],{"id":887},"family-aware-hierarchy-traversal","Family-Aware Hierarchy Traversal",[277,890,891,893],{},[280,892,205],{}," works seamlessly with nested menus and popovers:",[783,895,896,909,915,921],{},[786,897,898,901,902,905,906,908],{},[789,899,900],{},"Composite Node Containment:"," ",[280,903,904],{},"node.contains(target)"," traverses open child surfaces. Clicking inside a child submenu (even if teleported to ",[280,907,844],{},") is recognized as internal to parent menus, preventing unwanted parent closures.",[786,910,911,914],{},[789,912,913],{},"Clean-Slate Dismissal:"," Clicking the outside background closes all open levels simultaneously, matching universal user expectations for contextual menus and dropdowns.",[786,916,917,920],{},[789,918,919],{},"Independent Stacks:"," Unrelated floating nodes on the same page remain isolated. Clicking outside a popover closes only the relevant surface while respecting neighboring overlays.",[786,922,923,926,927,930],{},[789,924,925],{},"Shadow DOM Target Resolution:"," The press source is resolved via ",[280,928,929],{},"composedPath()"," when available, so clicks inside shadow roots are correctly attributed to the containing surface.",[773,932,934],{"id":933},"scrollbar-hit-testing","Scrollbar Hit-Testing",[783,936,937,947],{},[786,938,939,942,943,946],{},[789,940,941],{},"Scrollbar Protection:"," When ",[280,944,945],{},"ignoreScrollbar: true"," (default), clicks inside vertical or horizontal scrollbar gutters on overflowing parent elements or the viewport are ignored, allowing users to scroll without closing the overlay.",[786,948,949,952],{},[789,950,951],{},"RTL-Aware:"," Correctly detects left-hand scrollbar gutters on right-to-left documents.",[773,954,956],{"id":955},"iframe-focus-detection","Iframe Focus Detection",[783,958,959],{},[786,960,961,962,965,966,968,969,972,973,976],{},"When focus moves directly into an external ",[280,963,964],{},"\u003Ciframe>"," outside the floating family, mouse and pointer events are swallowed by the frame. ",[280,967,205],{}," listens for window ",[280,970,971],{},"blur"," events and verifies whether ",[280,974,975],{},"document.activeElement"," transitioned into an external iframe, automatically closing the overlay.",[284,978,980],{"id":979},"example","Example",[289,982,986],{"className":983,"code":984,"language":985,"meta":294,"style":294},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClick, useFloatingNode, useOutsideClick, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n  },\n});\n\nuseClick(node);\nuseOutsideClick(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\">Toggle Popover\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" class=\"popover\">\n    \u003Cp>Click outside this panel to close it.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[280,987,988,1013,1039,1075,1079,1112,1141,1145,1175,1186,1202,1211,1224,1237,1256,1261,1269,1273,1282,1290,1299,1304,1314,1356,1361,1406,1425,1435],{"__ignoreMap":294},[298,989,990,992,995,998,1001,1004,1006,1008,1010],{"class":300,"line":301},[298,991,378],{"class":312},[298,993,994],{"class":369},"script",[298,996,997],{"class":304}," setup",[298,999,1000],{"class":304}," lang",[298,1002,1003],{"class":312},"=",[298,1005,505],{"class":312},[298,1007,293],{"class":501},[298,1009,505],{"class":312},[298,1011,1012],{"class":312},">\n",[298,1014,1015,1019,1022,1025,1028,1031,1033,1035,1037],{"class":300,"line":348},[298,1016,1018],{"class":1017},"s7zQu","import",[298,1020,1021],{"class":312}," {",[298,1023,1024],{"class":557}," ref",[298,1026,1027],{"class":312}," }",[298,1029,1030],{"class":1017}," from",[298,1032,498],{"class":312},[298,1034,985],{"class":501},[298,1036,505],{"class":312},[298,1038,345],{"class":312},[298,1040,1041,1043,1045,1048,1050,1053,1055,1057,1059,1062,1064,1066,1068,1071,1073],{"class":300,"line":355},[298,1042,1018],{"class":1017},[298,1044,1021],{"class":312},[298,1046,1047],{"class":557}," useClick",[298,1049,327],{"class":312},[298,1051,1052],{"class":557}," useFloatingNode",[298,1054,327],{"class":312},[298,1056,309],{"class":557},[298,1058,327],{"class":312},[298,1060,1061],{"class":557}," usePosition",[298,1063,1027],{"class":312},[298,1065,1030],{"class":1017},[298,1067,498],{"class":312},[298,1069,1070],{"class":501},"v-float",[298,1072,505],{"class":312},[298,1074,345],{"class":312},[298,1076,1077],{"class":300,"line":366},[298,1078,352],{"emptyLinePlaceholder":351},[298,1080,1081,1084,1087,1089,1091,1093,1096,1098,1100,1103,1105,1108,1110],{"class":300,"line":387},[298,1082,1083],{"class":304},"const",[298,1085,1086],{"class":557}," anchorEl ",[298,1088,1003],{"class":312},[298,1090,1024],{"class":308},[298,1092,378],{"class":312},[298,1094,1095],{"class":323},"HTMLElement",[298,1097,444],{"class":312},[298,1099,532],{"class":323},[298,1101,1102],{"class":312},">",[298,1104,313],{"class":557},[298,1106,1107],{"class":312},"null",[298,1109,460],{"class":557},[298,1111,345],{"class":312},[298,1113,1114,1116,1119,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139],{"class":300,"line":400},[298,1115,1083],{"class":304},[298,1117,1118],{"class":557}," floatingEl ",[298,1120,1003],{"class":312},[298,1122,1024],{"class":308},[298,1124,378],{"class":312},[298,1126,1095],{"class":323},[298,1128,444],{"class":312},[298,1130,532],{"class":323},[298,1132,1102],{"class":312},[298,1134,313],{"class":557},[298,1136,1107],{"class":312},[298,1138,460],{"class":557},[298,1140,345],{"class":312},[298,1142,1143],{"class":300,"line":412},[298,1144,352],{"emptyLinePlaceholder":351},[298,1146,1147,1149,1152,1154,1156,1158,1161,1164,1166,1168,1171,1173],{"class":300,"line":425},[298,1148,1083],{"class":304},[298,1150,1151],{"class":557}," node ",[298,1153,1003],{"class":312},[298,1155,1052],{"class":308},[298,1157,313],{"class":557},[298,1159,1160],{"class":312},"{",[298,1162,1163],{"class":557}," anchorEl",[298,1165,327],{"class":312},[298,1167,1118],{"class":557},[298,1169,1170],{"class":312},"}",[298,1172,460],{"class":557},[298,1174,345],{"class":312},[298,1176,1177,1179,1182,1184],{"class":300,"line":470},[298,1178,171],{"class":308},[298,1180,1181],{"class":557},"(node",[298,1183,327],{"class":312},[298,1185,363],{"class":312},[298,1187,1188,1191,1193,1195,1198,1200],{"class":300,"line":476},[298,1189,1190],{"class":369},"  placement",[298,1192,320],{"class":312},[298,1194,498],{"class":312},[298,1196,1197],{"class":501},"bottom-start",[298,1199,505],{"class":312},[298,1201,575],{"class":312},[298,1203,1204,1207,1209],{"class":300,"line":481},[298,1205,1206],{"class":369},"  middlewares",[298,1208,320],{"class":312},[298,1210,363],{"class":312},[298,1212,1213,1216,1218,1222],{"class":300,"line":490},[298,1214,1215],{"class":369},"    offset",[298,1217,320],{"class":312},[298,1219,1221],{"class":1220},"sbssI"," 8",[298,1223,575],{"class":312},[298,1225,1226,1229,1231,1235],{"class":300,"line":519},[298,1227,1228],{"class":369},"    flip",[298,1230,320],{"class":312},[298,1232,1234],{"class":1233},"sfNiH"," true",[298,1236,575],{"class":312},[298,1238,1239,1242,1244,1246,1249,1251,1253],{"class":300,"line":537},[298,1240,1241],{"class":369},"    shift",[298,1243,320],{"class":312},[298,1245,1021],{"class":312},[298,1247,1248],{"class":369}," padding",[298,1250,320],{"class":312},[298,1252,1221],{"class":1220},[298,1254,1255],{"class":312}," },\n",[298,1257,1258],{"class":300,"line":542},[298,1259,1260],{"class":312},"  },\n",[298,1262,1263,1265,1267],{"class":300,"line":547},[298,1264,1170],{"class":312},[298,1266,460],{"class":557},[298,1268,345],{"class":312},[298,1270,1271],{"class":300,"line":561},[298,1272,352],{"emptyLinePlaceholder":351},[298,1274,1275,1277,1280],{"class":300,"line":578},[298,1276,189],{"class":308},[298,1278,1279],{"class":557},"(node)",[298,1281,345],{"class":312},[298,1283,1284,1286,1288],{"class":300,"line":593},[298,1285,205],{"class":308},[298,1287,1279],{"class":557},[298,1289,345],{"class":312},[298,1291,1292,1295,1297],{"class":300,"line":605},[298,1293,1294],{"class":312},"\u003C\u002F",[298,1296,994],{"class":369},[298,1298,1012],{"class":312},[298,1300,1302],{"class":300,"line":1301},21,[298,1303,352],{"emptyLinePlaceholder":351},[298,1305,1307,1309,1312],{"class":300,"line":1306},22,[298,1308,378],{"class":312},[298,1310,1311],{"class":369},"template",[298,1313,1012],{"class":312},[298,1315,1317,1320,1323,1325,1327,1329,1332,1334,1337,1339,1341,1343,1345,1347,1350,1352,1354],{"class":300,"line":1316},23,[298,1318,1319],{"class":312},"  \u003C",[298,1321,1322],{"class":369},"button",[298,1324,1024],{"class":304},[298,1326,1003],{"class":312},[298,1328,505],{"class":312},[298,1330,1331],{"class":501},"anchorEl",[298,1333,505],{"class":312},[298,1335,1336],{"class":304}," type",[298,1338,1003],{"class":312},[298,1340,505],{"class":312},[298,1342,1322],{"class":501},[298,1344,505],{"class":312},[298,1346,1102],{"class":312},[298,1348,1349],{"class":557},"Toggle Popover",[298,1351,1294],{"class":312},[298,1353,1322],{"class":369},[298,1355,1012],{"class":312},[298,1357,1359],{"class":300,"line":1358},24,[298,1360,352],{"emptyLinePlaceholder":351},[298,1362,1364,1366,1369,1372,1374,1376,1379,1381,1383,1385,1387,1390,1392,1395,1397,1399,1402,1404],{"class":300,"line":1363},25,[298,1365,1319],{"class":312},[298,1367,1368],{"class":369},"div",[298,1370,1371],{"class":304}," v-if",[298,1373,1003],{"class":312},[298,1375,505],{"class":312},[298,1377,1378],{"class":501},"node.open.value",[298,1380,505],{"class":312},[298,1382,1024],{"class":304},[298,1384,1003],{"class":312},[298,1386,505],{"class":312},[298,1388,1389],{"class":501},"floatingEl",[298,1391,505],{"class":312},[298,1393,1394],{"class":304}," class",[298,1396,1003],{"class":312},[298,1398,505],{"class":312},[298,1400,1401],{"class":501},"popover",[298,1403,505],{"class":312},[298,1405,1012],{"class":312},[298,1407,1409,1412,1414,1416,1419,1421,1423],{"class":300,"line":1408},26,[298,1410,1411],{"class":312},"    \u003C",[298,1413,277],{"class":369},[298,1415,1102],{"class":312},[298,1417,1418],{"class":557},"Click outside this panel to close it.",[298,1420,1294],{"class":312},[298,1422,277],{"class":369},[298,1424,1012],{"class":312},[298,1426,1428,1431,1433],{"class":300,"line":1427},27,[298,1429,1430],{"class":312},"  \u003C\u002F",[298,1432,1368],{"class":369},[298,1434,1012],{"class":312},[298,1436,1438,1440,1442],{"class":300,"line":1437},28,[298,1439,1294],{"class":312},[298,1441,1311],{"class":369},[298,1443,1012],{"class":312},[284,1445,1447],{"id":1446},"see-also","See Also",[783,1449,1450,1458,1465,1472],{},[786,1451,1452,1457],{},[1453,1454,1455],"a",{"href":210},[280,1456,209],{}," - Close on Escape key press with leaf-first tree coordination",[786,1459,1460,1464],{},[1453,1461,1462],{"href":190},[280,1463,189],{}," - Toggle open on click or keyboard activation",[786,1466,1467,1471],{},[1453,1468,1469],{"href":163},[280,1470,162],{}," - Composite node with parent-child coordination",[786,1473,1474,1477],{},[1453,1475,1476],{"href":63},"Build Popovers & Dropdowns"," - Popover interaction patterns",[1479,1480,1481],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":294,"searchDepth":348,"depth":348,"links":1483},[1484,1485,1486,1487,1493,1494],{"id":286,"depth":348,"text":287},{"id":618,"depth":348,"text":619},{"id":750,"depth":348,"text":751},{"id":770,"depth":348,"text":771,"children":1488},[1489,1490,1491,1492],{"id":775,"depth":355,"text":776},{"id":887,"depth":355,"text":888},{"id":933,"depth":355,"text":934},{"id":955,"depth":355,"text":956},{"id":979,"depth":348,"text":980},{"id":1446,"depth":348,"text":1447},"Closes floating content when pointer input lands outside its floating family.","md",null,{},{"title":205,"description":1495},"uYTy4gqKO1k2NpD0Qu06YxGuIPQ3ZhmCB29MvaRq5nk",[1502,1504],{"title":201,"path":202,"stem":203,"description":1503,"children":-1},"Manages modal focus containment, background inert isolation, and return focus.",{"title":209,"path":210,"stem":211,"description":1505,"children":-1},"Closes floating content when the user presses the Escape key.",1791046165701]