[{"data":1,"prerenderedAt":1639},["ShallowReactive",2],{"navigation_docs":3,"-api-interactions-use-click":271,"-api-interactions-use-click-surround":1634},[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":189,"body":273,"description":1628,"extension":1629,"links":1630,"meta":1631,"navigation":369,"path":190,"seo":1632,"stem":191,"__hash__":1633},"docs\u002F2.api\u002F4.interactions\u002F1.use-click.md",{"type":274,"value":275,"toc":1614},"minimark",[276,283,301,306,527,531,686,690,707,711,716,768,777,833,837,845,952,955,973,977,1563,1567,1610],[277,278,279,282],"p",{},[280,281,189],"code",{}," toggles or opens a floating surface in response to pointer clicks, touchscreen taps, and keyboard activation on the anchor element.",[277,284,285,286,289,290,295,296,300],{},"It attaches listeners directly to the anchor element (or context element for virtual anchors) and updates ",[280,287,288],{},"node.open.value",". Pair it with ",[291,292,293],"a",{"href":206},[280,294,205],{}," and ",[291,297,298],{"href":210},[280,299,209],{}," when the surface should close on outside clicks or Escape key presses.",[302,303,305],"h2",{"id":304},"type","Type",[307,308,313],"pre",{"className":309,"code":310,"language":311,"meta":312,"style":312},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useClick(node: FloatingNode, options?: UseClickOptions): void;\n\ntype UseClickContext = FloatingNode;\n\ninterface UseClickOptions {\n  enabled?: MaybeRefOrGetter\u003Cboolean>;\n  event?: MaybeRefOrGetter\u003C\"click\" | \"mousedown\">;\n  toggle?: MaybeRefOrGetter\u003Cboolean>;\n  ignoreMouse?: MaybeRefOrGetter\u003Cboolean>;\n  ignoreKeyboard?: MaybeRefOrGetter\u003Cboolean>;\n  ignoreTouch?: MaybeRefOrGetter\u003Cboolean>;\n}\n","ts","",[280,314,315,364,371,386,391,402,423,457,473,489,505,521],{"__ignoreMap":312},[316,317,320,324,328,332,336,339,343,346,349,352,355,358,361],"span",{"class":318,"line":319},"line",1,[316,321,323],{"class":322},"spNyl","function",[316,325,327],{"class":326},"s2Zo4"," useClick",[316,329,331],{"class":330},"sMK4o","(",[316,333,335],{"class":334},"sHdIc","node",[316,337,338],{"class":330},":",[316,340,342],{"class":341},"sBMFI"," FloatingNode",[316,344,345],{"class":330},",",[316,347,348],{"class":334}," options",[316,350,351],{"class":330},"?:",[316,353,354],{"class":341}," UseClickOptions",[316,356,357],{"class":330},"):",[316,359,360],{"class":341}," void",[316,362,363],{"class":330},";\n",[316,365,367],{"class":318,"line":366},2,[316,368,370],{"emptyLinePlaceholder":369},true,"\n",[316,372,374,376,379,382,384],{"class":318,"line":373},3,[316,375,304],{"class":322},[316,377,378],{"class":341}," UseClickContext",[316,380,381],{"class":330}," =",[316,383,342],{"class":341},[316,385,363],{"class":330},[316,387,389],{"class":318,"line":388},4,[316,390,370],{"emptyLinePlaceholder":369},[316,392,394,397,399],{"class":318,"line":393},5,[316,395,396],{"class":322},"interface",[316,398,354],{"class":341},[316,400,401],{"class":330}," {\n",[316,403,405,409,411,414,417,420],{"class":318,"line":404},6,[316,406,408],{"class":407},"swJcz","  enabled",[316,410,351],{"class":330},[316,412,413],{"class":341}," MaybeRefOrGetter",[316,415,416],{"class":330},"\u003C",[316,418,419],{"class":341},"boolean",[316,421,422],{"class":330},">;\n",[316,424,426,429,431,433,435,438,442,444,447,450,453,455],{"class":318,"line":425},7,[316,427,428],{"class":407},"  event",[316,430,351],{"class":330},[316,432,413],{"class":341},[316,434,416],{"class":330},[316,436,437],{"class":330},"\"",[316,439,441],{"class":440},"sfazB","click",[316,443,437],{"class":330},[316,445,446],{"class":330}," |",[316,448,449],{"class":330}," \"",[316,451,452],{"class":440},"mousedown",[316,454,437],{"class":330},[316,456,422],{"class":330},[316,458,460,463,465,467,469,471],{"class":318,"line":459},8,[316,461,462],{"class":407},"  toggle",[316,464,351],{"class":330},[316,466,413],{"class":341},[316,468,416],{"class":330},[316,470,419],{"class":341},[316,472,422],{"class":330},[316,474,476,479,481,483,485,487],{"class":318,"line":475},9,[316,477,478],{"class":407},"  ignoreMouse",[316,480,351],{"class":330},[316,482,413],{"class":341},[316,484,416],{"class":330},[316,486,419],{"class":341},[316,488,422],{"class":330},[316,490,492,495,497,499,501,503],{"class":318,"line":491},10,[316,493,494],{"class":407},"  ignoreKeyboard",[316,496,351],{"class":330},[316,498,413],{"class":341},[316,500,416],{"class":330},[316,502,419],{"class":341},[316,504,422],{"class":330},[316,506,508,511,513,515,517,519],{"class":318,"line":507},11,[316,509,510],{"class":407},"  ignoreTouch",[316,512,351],{"class":330},[316,514,413],{"class":341},[316,516,416],{"class":330},[316,518,419],{"class":341},[316,520,422],{"class":330},[316,522,524],{"class":318,"line":523},12,[316,525,526],{"class":330},"}\n",[302,528,530],{"id":529},"options","Options",[532,533,534,552],"table",{},[535,536,537],"thead",{},[538,539,540,544,546,549],"tr",{},[541,542,543],"th",{},"Name",[541,545,305],{},[541,547,548],{},"Default",[541,550,551],{},"Notes",[553,554,555,580,604,625,646,666],"tbody",{},[538,556,557,563,568,573],{},[558,559,560],"td",{},[280,561,562],{},"enabled",[558,564,565],{},[280,566,567],{},"MaybeRefOrGetter\u003Cboolean>",[558,569,570],{},[280,571,572],{},"true",[558,574,575,576,579],{},"Reactive toggle. Setting to ",[280,577,578],{},"false"," disables interaction and removes all DOM event listeners from the anchor element.",[538,581,582,587,592,597],{},[558,583,584],{},[280,585,586],{},"event",[558,588,589],{},[280,590,591],{},"MaybeRefOrGetter\u003C\"click\" | \"mousedown\">",[558,593,594],{},[280,595,596],{},"\"click\"",[558,598,599,600,603],{},"Which pointer DOM event triggers opening or toggling. ",[280,601,602],{},"\"mousedown\""," fires immediately on press for mouse and pen devices, while touch input still safely uses the trailing click.",[538,605,606,611,615,619],{},[558,607,608],{},[280,609,610],{},"toggle",[558,612,613],{},[280,614,567],{},[558,616,617],{},[280,618,572],{},[558,620,621,622,624],{},"Whether subsequent clicks toggle the open state. When ",[280,623,578],{},", clicking opens the surface if closed, but never closes it if already open.",[538,626,627,632,636,640],{},[558,628,629],{},[280,630,631],{},"ignoreMouse",[558,633,634],{},[280,635,567],{},[558,637,638],{},[280,639,578],{},[558,641,642,643,645],{},"When ",[280,644,572],{},", ignores mouse and mouse-like pointer interactions. Touch and pen devices continue to trigger normally.",[538,647,648,653,657,661],{},[558,649,650],{},[280,651,652],{},"ignoreKeyboard",[558,654,655],{},[280,656,567],{},[558,658,659],{},[280,660,578],{},[558,662,642,663,665],{},[280,664,572],{},", disables Enter and Space keyboard activation and ignores synthetic clicks generated by keyboard events.",[538,667,668,673,677,681],{},[558,669,670],{},[280,671,672],{},"ignoreTouch",[558,674,675],{},[280,676,567],{},[558,678,679],{},[280,680,578],{},[558,682,642,683,685],{},[280,684,572],{},", ignores touch tap gestures. Mouse and pen devices continue to trigger normally.",[302,687,689],{"id":688},"returns","Returns",[277,691,692,694,695,698,699,702,703,706],{},[280,693,189],{}," returns ",[280,696,697],{},"void",". It manages event listeners directly on ",[280,700,701],{},"node.refs.anchorEl"," (or the underlying ",[280,704,705],{},"contextElement"," for virtual anchors) and automatically synchronizes when reactive options or elements change.",[302,708,710],{"id":709},"details","Details",[712,713,715],"h3",{"id":714},"pointer-and-touch-handling","Pointer and Touch Handling",[717,718,719,731,755],"ul",{},[720,721,722,726,727,730],"li",{},[723,724,725],"strong",{},"Primary Button Only:"," Only primary clicks (",[280,728,729],{},"e.button === 0",") trigger activation. Auxiliary clicks (middle mouse button) and secondary clicks (context menu right-click) are ignored.",[720,732,733,736,737,739,740,743,744,743,747,750,751,754],{},[723,734,735],{},"Modality Tracking:"," ",[280,738,189],{}," tracks the input device modality (",[280,741,742],{},"\"mouse\"",", ",[280,745,746],{},"\"touch\"",[280,748,749],{},"\"pen\"",") via ",[280,752,753],{},"pointerdown",".",[720,756,757,760,761,764,765,767],{},[723,758,759],{},"Cancellation Safety:"," If a touch gesture is cancelled before release (e.g. when the user starts scrolling or dragging away, firing ",[280,762,763],{},"pointercancel","), ",[280,766,189],{}," resets its internal interaction state so subsequent gestures are not blocked.",[712,769,771,773,774,776],{"id":770},"click-vs-mousedown-activation",[280,772,441],{}," vs ",[280,775,452],{}," Activation",[717,778,779,791,799,819],{},[720,780,781,787,788,790],{},[723,782,783,786],{},[280,784,785],{},"event: \"click\""," (default):"," Opening or toggling occurs on the standard DOM ",[280,789,441],{}," event.",[720,792,793,798],{},[723,794,795,338],{},[280,796,797],{},"event: \"mousedown\""," Triggers immediately on press for mouse and pen devices, skipping the latency of waiting for mouse release. This is ideal for fast-response interfaces such as menus, toolbars, and contextual popovers.",[720,800,801,806,807,809,810,812,813,815,816,818],{},[723,802,803,804,338],{},"Touch Safety with ",[280,805,452],{}," When ",[280,808,797],{}," is used, touch devices do not trigger prematurely on touch-emulated ",[280,811,452],{}," events; ",[280,814,189],{}," waits for the trailing ",[280,817,441],{}," event to ensure natural touch scrolling.",[720,820,821,806,824,826,827,829,830,832],{},[723,822,823],{},"Deduplication:",[280,825,797],{}," handles the press event, ",[280,828,189],{}," automatically swallows the trailing ",[280,831,441],{}," event from the same gesture to prevent double-toggling.",[712,834,836],{"id":835},"keyboard-activation-semantics","Keyboard Activation Semantics",[277,838,642,839,841,842,844],{},[280,840,652],{}," is ",[280,843,578],{}," (the default):",[717,846,847,882,899,923,939],{},[720,848,849,852,853,855,856,743,859,743,862,743,865,743,868,743,871,874,875,877,878,881],{},[723,850,851],{},"Native Buttons:"," Elements that natively dispatch synthetic ",[280,854,441],{}," events upon pressing Space or Enter (",[280,857,858],{},"\u003Cbutton>",[280,860,861],{},"\u003Cinput type=\"button\">",[280,863,864],{},"\u003Cinput type=\"submit\">",[280,866,867],{},"\u003Cinput type=\"reset\">",[280,869,870],{},"\u003Cinput type=\"image\">",[280,872,873],{},"\u003Csummary>",") are detected automatically. ",[280,876,189],{}," avoids duplicating actions on ",[280,879,880],{},"keydown"," and allows the native click emission to handle toggling.",[720,883,884,887,888,891,892,895,896,898],{},[723,885,886],{},"Native Links:"," Links with an ",[280,889,890],{},"href"," attribute (",[280,893,894],{},"\u003Ca href=\"...\">",") natively activate on Enter. ",[280,897,189],{}," permits standard link navigation on Enter without double-toggling, while still supporting Space key activation.",[720,900,901,904,905,908,909,912,913,915,916,918,919,922],{},[723,902,903],{},"Custom \u002F ARIA Buttons:"," Custom trigger elements (such as ",[280,906,907],{},"\u003Cdiv role=\"button\" tabindex=\"0\">"," or ",[280,910,911],{},"\u003Ca>"," without ",[280,914,890],{},") are fully supported. Pressing Enter triggers immediately on ",[280,917,880],{},", while pressing Space triggers on ",[280,920,921],{},"keyup"," (faithfully matching native browser button semantics).",[720,924,925,928,929,743,932,743,935,938],{},[723,926,927],{},"Typeable Elements:"," If the anchor is a form control that accepts text entry (",[280,930,931],{},"\u003Cinput type=\"text\">",[280,933,934],{},"\u003Ctextarea>",[280,936,937],{},"\u003Cselect>","), Space and Enter are passed through without toggling the floating node.",[720,940,941,806,944,947,948,951],{},[723,942,943],{},"Synthetic Keyboard Clicks:",[280,945,946],{},"ignoreKeyboard: true",", synthetic click events dispatched by keyboard activation (where ",[280,949,950],{},"e.detail === 0"," and no pointer gesture occurred) are ignored.",[712,953,84],{"id":954},"virtual-anchors",[277,956,957,959,960,966,967,969,970,972],{},[280,958,189],{}," supports ",[291,961,963],{"href":962},"\u002Fapi\u002Foverview\u002Ftypes#virtualelement",[280,964,965],{},"VirtualElement"," anchors. If the virtual anchor provides a ",[280,968,705],{}," property, ",[280,971,189],{}," automatically resolves and binds DOM event listeners to that element.",[302,974,976],{"id":975},"example","Example",[307,978,982],{"className":979,"code":980,"language":981,"meta":312,"style":312},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClick, useEscapeKey, 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);\nuseEscapeKey(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\">Toggle Menu\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" class=\"dropdown\">\n    \u003Cbutton type=\"button\" @click=\"node.open.value = false\">Profile\u003C\u002Fbutton>\n    \u003Cbutton type=\"button\" @click=\"node.open.value = false\">Settings\u003C\u002Fbutton>\n    \u003Cbutton type=\"button\" @click=\"node.open.value = false\">Logout\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[280,983,984,1009,1036,1077,1081,1116,1145,1149,1179,1190,1207,1216,1229,1243,1263,1269,1278,1283,1293,1302,1311,1321,1326,1336,1378,1383,1427,1468,1506,1544,1554],{"__ignoreMap":312},[316,985,986,988,991,994,997,1000,1002,1004,1006],{"class":318,"line":319},[316,987,416],{"class":330},[316,989,990],{"class":407},"script",[316,992,993],{"class":322}," setup",[316,995,996],{"class":322}," lang",[316,998,999],{"class":330},"=",[316,1001,437],{"class":330},[316,1003,311],{"class":440},[316,1005,437],{"class":330},[316,1007,1008],{"class":330},">\n",[316,1010,1011,1015,1018,1022,1025,1028,1030,1032,1034],{"class":318,"line":366},[316,1012,1014],{"class":1013},"s7zQu","import",[316,1016,1017],{"class":330}," {",[316,1019,1021],{"class":1020},"sTEyZ"," ref",[316,1023,1024],{"class":330}," }",[316,1026,1027],{"class":1013}," from",[316,1029,449],{"class":330},[316,1031,981],{"class":440},[316,1033,437],{"class":330},[316,1035,363],{"class":330},[316,1037,1038,1040,1042,1044,1046,1049,1051,1054,1056,1059,1061,1064,1066,1068,1070,1073,1075],{"class":318,"line":373},[316,1039,1014],{"class":1013},[316,1041,1017],{"class":330},[316,1043,327],{"class":1020},[316,1045,345],{"class":330},[316,1047,1048],{"class":1020}," useEscapeKey",[316,1050,345],{"class":330},[316,1052,1053],{"class":1020}," useFloatingNode",[316,1055,345],{"class":330},[316,1057,1058],{"class":1020}," useOutsideClick",[316,1060,345],{"class":330},[316,1062,1063],{"class":1020}," usePosition",[316,1065,1024],{"class":330},[316,1067,1027],{"class":1013},[316,1069,449],{"class":330},[316,1071,1072],{"class":440},"v-float",[316,1074,437],{"class":330},[316,1076,363],{"class":330},[316,1078,1079],{"class":318,"line":388},[316,1080,370],{"emptyLinePlaceholder":369},[316,1082,1083,1086,1089,1091,1093,1095,1098,1100,1103,1106,1108,1111,1114],{"class":318,"line":393},[316,1084,1085],{"class":322},"const",[316,1087,1088],{"class":1020}," anchorEl ",[316,1090,999],{"class":330},[316,1092,1021],{"class":326},[316,1094,416],{"class":330},[316,1096,1097],{"class":341},"HTMLElement",[316,1099,446],{"class":330},[316,1101,1102],{"class":341}," null",[316,1104,1105],{"class":330},">",[316,1107,331],{"class":1020},[316,1109,1110],{"class":330},"null",[316,1112,1113],{"class":1020},")",[316,1115,363],{"class":330},[316,1117,1118,1120,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143],{"class":318,"line":404},[316,1119,1085],{"class":322},[316,1121,1122],{"class":1020}," floatingEl ",[316,1124,999],{"class":330},[316,1126,1021],{"class":326},[316,1128,416],{"class":330},[316,1130,1097],{"class":341},[316,1132,446],{"class":330},[316,1134,1102],{"class":341},[316,1136,1105],{"class":330},[316,1138,331],{"class":1020},[316,1140,1110],{"class":330},[316,1142,1113],{"class":1020},[316,1144,363],{"class":330},[316,1146,1147],{"class":318,"line":425},[316,1148,370],{"emptyLinePlaceholder":369},[316,1150,1151,1153,1156,1158,1160,1162,1165,1168,1170,1172,1175,1177],{"class":318,"line":459},[316,1152,1085],{"class":322},[316,1154,1155],{"class":1020}," node ",[316,1157,999],{"class":330},[316,1159,1053],{"class":326},[316,1161,331],{"class":1020},[316,1163,1164],{"class":330},"{",[316,1166,1167],{"class":1020}," anchorEl",[316,1169,345],{"class":330},[316,1171,1122],{"class":1020},[316,1173,1174],{"class":330},"}",[316,1176,1113],{"class":1020},[316,1178,363],{"class":330},[316,1180,1181,1183,1186,1188],{"class":318,"line":475},[316,1182,171],{"class":326},[316,1184,1185],{"class":1020},"(node",[316,1187,345],{"class":330},[316,1189,401],{"class":330},[316,1191,1192,1195,1197,1199,1202,1204],{"class":318,"line":491},[316,1193,1194],{"class":407},"  placement",[316,1196,338],{"class":330},[316,1198,449],{"class":330},[316,1200,1201],{"class":440},"bottom-start",[316,1203,437],{"class":330},[316,1205,1206],{"class":330},",\n",[316,1208,1209,1212,1214],{"class":318,"line":507},[316,1210,1211],{"class":407},"  middlewares",[316,1213,338],{"class":330},[316,1215,401],{"class":330},[316,1217,1218,1221,1223,1227],{"class":318,"line":523},[316,1219,1220],{"class":407},"    offset",[316,1222,338],{"class":330},[316,1224,1226],{"class":1225},"sbssI"," 8",[316,1228,1206],{"class":330},[316,1230,1232,1235,1237,1241],{"class":318,"line":1231},13,[316,1233,1234],{"class":407},"    flip",[316,1236,338],{"class":330},[316,1238,1240],{"class":1239},"sfNiH"," true",[316,1242,1206],{"class":330},[316,1244,1246,1249,1251,1253,1256,1258,1260],{"class":318,"line":1245},14,[316,1247,1248],{"class":407},"    shift",[316,1250,338],{"class":330},[316,1252,1017],{"class":330},[316,1254,1255],{"class":407}," padding",[316,1257,338],{"class":330},[316,1259,1226],{"class":1225},[316,1261,1262],{"class":330}," },\n",[316,1264,1266],{"class":318,"line":1265},15,[316,1267,1268],{"class":330},"  },\n",[316,1270,1272,1274,1276],{"class":318,"line":1271},16,[316,1273,1174],{"class":330},[316,1275,1113],{"class":1020},[316,1277,363],{"class":330},[316,1279,1281],{"class":318,"line":1280},17,[316,1282,370],{"emptyLinePlaceholder":369},[316,1284,1286,1288,1291],{"class":318,"line":1285},18,[316,1287,189],{"class":326},[316,1289,1290],{"class":1020},"(node)",[316,1292,363],{"class":330},[316,1294,1296,1298,1300],{"class":318,"line":1295},19,[316,1297,205],{"class":326},[316,1299,1290],{"class":1020},[316,1301,363],{"class":330},[316,1303,1305,1307,1309],{"class":318,"line":1304},20,[316,1306,209],{"class":326},[316,1308,1290],{"class":1020},[316,1310,363],{"class":330},[316,1312,1314,1317,1319],{"class":318,"line":1313},21,[316,1315,1316],{"class":330},"\u003C\u002F",[316,1318,990],{"class":407},[316,1320,1008],{"class":330},[316,1322,1324],{"class":318,"line":1323},22,[316,1325,370],{"emptyLinePlaceholder":369},[316,1327,1329,1331,1334],{"class":318,"line":1328},23,[316,1330,416],{"class":330},[316,1332,1333],{"class":407},"template",[316,1335,1008],{"class":330},[316,1337,1339,1342,1345,1347,1349,1351,1354,1356,1359,1361,1363,1365,1367,1369,1372,1374,1376],{"class":318,"line":1338},24,[316,1340,1341],{"class":330},"  \u003C",[316,1343,1344],{"class":407},"button",[316,1346,1021],{"class":322},[316,1348,999],{"class":330},[316,1350,437],{"class":330},[316,1352,1353],{"class":440},"anchorEl",[316,1355,437],{"class":330},[316,1357,1358],{"class":322}," type",[316,1360,999],{"class":330},[316,1362,437],{"class":330},[316,1364,1344],{"class":440},[316,1366,437],{"class":330},[316,1368,1105],{"class":330},[316,1370,1371],{"class":1020},"Toggle Menu",[316,1373,1316],{"class":330},[316,1375,1344],{"class":407},[316,1377,1008],{"class":330},[316,1379,1381],{"class":318,"line":1380},25,[316,1382,370],{"emptyLinePlaceholder":369},[316,1384,1386,1388,1391,1394,1396,1398,1400,1402,1404,1406,1408,1411,1413,1416,1418,1420,1423,1425],{"class":318,"line":1385},26,[316,1387,1341],{"class":330},[316,1389,1390],{"class":407},"div",[316,1392,1393],{"class":322}," v-if",[316,1395,999],{"class":330},[316,1397,437],{"class":330},[316,1399,288],{"class":440},[316,1401,437],{"class":330},[316,1403,1021],{"class":322},[316,1405,999],{"class":330},[316,1407,437],{"class":330},[316,1409,1410],{"class":440},"floatingEl",[316,1412,437],{"class":330},[316,1414,1415],{"class":322}," class",[316,1417,999],{"class":330},[316,1419,437],{"class":330},[316,1421,1422],{"class":440},"dropdown",[316,1424,437],{"class":330},[316,1426,1008],{"class":330},[316,1428,1430,1433,1435,1437,1439,1441,1443,1445,1448,1450,1452,1455,1457,1459,1462,1464,1466],{"class":318,"line":1429},27,[316,1431,1432],{"class":330},"    \u003C",[316,1434,1344],{"class":407},[316,1436,1358],{"class":322},[316,1438,999],{"class":330},[316,1440,437],{"class":330},[316,1442,1344],{"class":440},[316,1444,437],{"class":330},[316,1446,1447],{"class":322}," @click",[316,1449,999],{"class":330},[316,1451,437],{"class":330},[316,1453,1454],{"class":440},"node.open.value = false",[316,1456,437],{"class":330},[316,1458,1105],{"class":330},[316,1460,1461],{"class":1020},"Profile",[316,1463,1316],{"class":330},[316,1465,1344],{"class":407},[316,1467,1008],{"class":330},[316,1469,1471,1473,1475,1477,1479,1481,1483,1485,1487,1489,1491,1493,1495,1497,1500,1502,1504],{"class":318,"line":1470},28,[316,1472,1432],{"class":330},[316,1474,1344],{"class":407},[316,1476,1358],{"class":322},[316,1478,999],{"class":330},[316,1480,437],{"class":330},[316,1482,1344],{"class":440},[316,1484,437],{"class":330},[316,1486,1447],{"class":322},[316,1488,999],{"class":330},[316,1490,437],{"class":330},[316,1492,1454],{"class":440},[316,1494,437],{"class":330},[316,1496,1105],{"class":330},[316,1498,1499],{"class":1020},"Settings",[316,1501,1316],{"class":330},[316,1503,1344],{"class":407},[316,1505,1008],{"class":330},[316,1507,1509,1511,1513,1515,1517,1519,1521,1523,1525,1527,1529,1531,1533,1535,1538,1540,1542],{"class":318,"line":1508},29,[316,1510,1432],{"class":330},[316,1512,1344],{"class":407},[316,1514,1358],{"class":322},[316,1516,999],{"class":330},[316,1518,437],{"class":330},[316,1520,1344],{"class":440},[316,1522,437],{"class":330},[316,1524,1447],{"class":322},[316,1526,999],{"class":330},[316,1528,437],{"class":330},[316,1530,1454],{"class":440},[316,1532,437],{"class":330},[316,1534,1105],{"class":330},[316,1536,1537],{"class":1020},"Logout",[316,1539,1316],{"class":330},[316,1541,1344],{"class":407},[316,1543,1008],{"class":330},[316,1545,1547,1550,1552],{"class":318,"line":1546},30,[316,1548,1549],{"class":330},"  \u003C\u002F",[316,1551,1390],{"class":407},[316,1553,1008],{"class":330},[316,1555,1557,1559,1561],{"class":318,"line":1556},31,[316,1558,1316],{"class":330},[316,1560,1333],{"class":407},[316,1562,1008],{"class":330},[302,1564,1566],{"id":1565},"see-also","See Also",[717,1568,1569,1576,1583,1590,1597,1604],{},[720,1570,1571,1575],{},[291,1572,1573],{"href":194},[280,1574,193],{}," - Open on pointer hover with delay and safe polygon tracking",[720,1577,1578,1582],{},[291,1579,1580],{"href":206},[280,1581,205],{}," - Close on outside pointer interactions",[720,1584,1585,1589],{},[291,1586,1587],{"href":210},[280,1588,209],{}," - Close on Escape key press",[720,1591,1592,1596],{},[291,1593,1594],{"href":198},[280,1595,197],{}," - Open on keyboard focus and close on blur",[720,1598,1599,1603],{},[291,1600,1601],{"href":163},[280,1602,162],{}," - Shared node coordinating element refs and open state",[720,1605,1606,1609],{},[291,1607,1608],{"href":63},"Build Popovers and Dropdowns"," - Click and dismissal workflow",[1611,1612,1613],"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":312,"searchDepth":366,"depth":366,"links":1615},[1616,1617,1618,1619,1626,1627],{"id":304,"depth":366,"text":305},{"id":529,"depth":366,"text":530},{"id":688,"depth":366,"text":689},{"id":709,"depth":366,"text":710,"children":1620},[1621,1622,1624,1625],{"id":714,"depth":373,"text":715},{"id":770,"depth":373,"text":1623},"click vs mousedown Activation",{"id":835,"depth":373,"text":836},{"id":954,"depth":373,"text":84},{"id":975,"depth":366,"text":976},{"id":1565,"depth":366,"text":1566},"Opens and closes floating content on click, tap, or keyboard activation.","md",null,{},{"title":189,"description":1628},"TdCc4ip8G3U2t3z1_zXKVxELkDFnqIN45GzIojunv5s",[1635,1637],{"title":179,"path":180,"stem":181,"description":1636,"children":-1},"Positions a floating element relative to pointer coordinates using a virtual anchor.",{"title":193,"path":194,"stem":195,"description":1638,"children":-1},"Opens and closes floating content on pointer hover.",1791046165701]