https://floating-ui.com/_next/static/chunks/pages/docs/FloatingTree-cd4cbff98420ca38.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9008],{8541:function(i,s,h){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/FloatingTree",function(){return h(1921)}])},1921:function(i,s,h){"use strict";h.r(s),h.d(s,{default:function(){return a}});var e=h(5250),n=h(1894);function l(i){let s={a:"a",code:"code",em:"em",figure:"figure",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...(0,n.a)(),...i.components},{PackageLimited:h,PageCard:l,ShowFor:a}=s;return h||t("PackageLimited",!0),l||t("PageCard",!0),a||t("ShowFor",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(l,{children:[(0,e.jsx)(s.h1,{id:"floatingtree",children:"FloatingTree"}),(0,e.jsx)(s.p,{children:"Provides context for nested floating elements when they are not\nchildren of each other on the DOM."}),(0,e.jsx)(a,{packages:["react-dom"],children:(0,e.jsx)(h,{children:"@floating-ui/react only"})})]}),"\n",(0,e.jsx)(s.p,{children:"This is not necessary in all cases, except when there must be\nexplicit communication between parent and child floating\nelements. It is necessary for:"}),"\n",(0,e.jsxs)(s.ul,{children:["\n",(0,e.jsxs)(s.li,{children:["The ",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":".token","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#4fd6be","--shiki-light":"#007863"},children:"bubbles"})})})," option in the ",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:"useDismiss"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"()"})]})})})," Hook"]}),"\n",(0,e.jsx)(s.li,{children:(0,e.jsx)(s.a,{href:"/docs/useListNavigation#virtualitemref",children:"Nested virtual list navigation"})}),"\n",(0,e.jsx)(s.li,{children:"Nested floating elements that each open on hover"}),"\n",(0,e.jsx)(s.li,{children:"Custom communication between parent and child floating elements"}),"\n"]}),"\n",(0,e.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,e.jsxs)(s.p,{children:["The following creates an infinitely nestable ",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"<"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"Popover"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]})})}),"\ncomponent. Usage of this component must be wrapped in a single\n",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"<"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingTree"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]})})})," provider:"]}),"\n",(0,e.jsx)(s.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.pre,{tabIndex:"0","data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",style:{display:"grid"},children:[(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"import"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" {"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"  FloatingTree"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:","})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"  FloatingNode"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:","})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"  useFloatingNodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:","})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"}"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" from"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" '"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C3E88D","--shiki-light":"#5F7200"},children:"@floating-ui/react"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"'"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:" "}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"function"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#82AAFF","--shiki-light":"#2458C8"},children:" Popover"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"("}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"{"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FCA7EA","--shiki-light":"#CB0BA2"},children:"children"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:","}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FCA7EA","--shiki-light":"#CB0BA2"},children:" content"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"}"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:")"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" {"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"  const"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" ["}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF98A4","--shiki-light":"#CC3043"},children:"isOpen"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:","}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF98A4","--shiki-light":"#CC3043"},children:" setIsOpen"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"]"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" ="}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:" useState"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"("}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF966C","--shiki-light":"#D34200"},children:"false"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:")"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:" "}),"\n",(0,e.jsx)(s.span,{"data-line":"","data-highlighted-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#878EAE","--shiki-light":"#727895"},children:"  // Subscribe this component to the <FloatingTree> wrapper:"})}),"\n",(0,e.jsxs)(s.span,{"data-line":"","data-highlighted-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"  const"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF98A4","--shiki-light":"#CC3043"},children:" nodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" ="}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:" useFloatingNodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"}

1,children:"()"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:" "}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#878EAE","--shiki-light":"#727895"},children:"  // Pass the subscribed `nodeId` to `useFloating`:"})}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"  const"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" {"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF98A4","--shiki-light":"#CC3043"},children:"refs"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:","}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF98A4","--shiki-light":"#CC3043"},children:" floatingStyles"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"}"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" ="}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:" useFloating"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"({"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"","data-highlighted-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"    nodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:","})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#4FD6BE","--shiki-light":"#007863"},children:"    open"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:":"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:" isOpen"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:","})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#4FD6BE","--shiki-light":"#007863"},children:"    onOpenChange"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:":"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:" setIsOpen"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:","})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"  })"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:" "}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#878EAE","--shiki-light":"#727895"},children:"  // Wrap the rendered floating element in a `<FloatingNode>`,"})}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#878EAE","--shiki-light":"#727895"},children:"  // passing in the subscribed `nodeId`:"})}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"  return"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" ("})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"    <>"})}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"      {"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:"cloneElement"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"("}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"children"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:","}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" {"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#4FD6BE","--shiki-light":"#007863"},children:"ref"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:":"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:" refs"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"."}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#A9B8E8","--shiki-light":"#52586D"},children:"setReference"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"})"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"}"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"","data-highlighted-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"      <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingNode"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:" id"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"={"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"nodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"}>"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"        {"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"isOpen"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" &&"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" ("})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"          <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingPortal"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"            <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF757F","--shiki-light":"#D51826"},children:"div "}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"ref"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"={"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"refs"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"."}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#A9B8E8","--shiki-light":"#52586D"},children:"setFloating"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"}>{"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"content"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"}</"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF757F","--shiki-light":"#D51826"},children:"div"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"          </"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingPortal"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"        )"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"}"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"","data-highlighted-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"      </"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingNode"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"    </>"})}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"  )"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"}"})}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:" "}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"function"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#82AAFF","--shiki-light":"#2458C8"},children:" App"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"}

1,children:"()"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" {"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"  return"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" ("})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"","data-highlighted-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"    <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingTree"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"      <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"Popover"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"        content"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"={"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"          <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"Popover"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:" content"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"="}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:'"'}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C3E88D","--shiki-light":"#5F7200"},children:"Nested content"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:'"'}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"            <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF757F","--shiki-light":"#D51826"},children:"button"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#52586D"},children:"Nested reference"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"</"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF757F","--shiki-light":"#D51826"},children:"button"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"          </"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"Popover"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"        }"})}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"      >"})}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"        <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF757F","--shiki-light":"#D51826"},children:"button"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#52586D"},children:"Root reference"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"</"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF757F","--shiki-light":"#D51826"},children:"button"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"      </"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"Popover"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"","data-highlighted-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"    </"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingTree"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"  )"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"}"})})]})})}),"\n",(0,e.jsx)(s.h2,{id:"hooks",children:"Hooks"}),"\n",(0,e.jsxs)(s.ul,{children:["\n",(0,e.jsxs)(s.li,{children:[(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:"useFloatingNodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"}

1,children:"()"})]})})})," subscribes the component to the tree\ncontext. Call this only once as it has side effects."]}),"\n",(0,e.jsxs)(s.li,{children:[(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:"useFloatingParentNodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"()"})]})})})," returns the parent\n",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":".token","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#ffc777","--shiki-light":"#b75c00"},children:"FloatingNode"})})})," id, if it exists. This will be\n",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#7F85A3","--shiki-light":"#7F85A3"},children:"null"})})})})," for roots (not nested)."]}),"\n",(0,e.jsxs)(s.li,{children:[(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:"useFloatingTree"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"()"})]})})})," for accessing the tree object, which\nincludes an event emitter to communicate across the tree\ncomponents (",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":".token","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#4fd6be","--shiki-light":"#007863"},children:"events"})})}),")."]}),"\n"]}),"\n",(0,e.jsx)(s.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.pre,{tabIndex:"0","data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",style:{display:"grid"},children:[(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"interface"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:" FloatingTreeType"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" {"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#4FD6BE","--shiki-light":"#007863"},children:"  nodesRef"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:":"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:" React"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"."}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"MutableRefObject"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"<"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"Array"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"<"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingNodeType"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">>;"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#4FD6BE","--shiki-light":"#007863"},children:"  events"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:":"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:" FloatingEvents"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#82AAFF","--shiki-light":"#2458C8"},children:"  addNode"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"("}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FCA7EA","--shiki-light":"#CB0BA2"},children:"node"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:":"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:" FloatingNodeType"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:")"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:":"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF966C","--shiki-light":"#D34200"},children:" void"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#82AAFF","--shiki-light":"#2458C8"},children:"  removeNode"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"("}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FCA7EA","--shiki-light":"#CB0BA2"},children:"node"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:":"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:" FloatingNodeType"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:")"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:":"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF966C","--shiki-light":"#D34200"},children:" void"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"}"})})]})})}),"\n",(0,e.jsx)(s.h2,{id:"custom-parent",children:"Custom parent"}),"\n",(0,e.jsxs)(s.p,{children:["By default, the parent node is the closest\n",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"<"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingNode"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" />"})]})})}),", but you can specify a custom parent node\nby passing in the ",(0,e.jsx)(s.code,{children:"parentId"})," to ",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:"useFloatingNodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"}

1,children:"()"})]})})}),":"]}),"\n",(0,e.jsx)(s.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.pre,{tabIndex:"0","data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",style:{display:"grid"},children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"const"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF98A4","--shiki-light":"#CC3043"},children:" nodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" ="}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:" useFloatingNodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"("}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"parentId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:")"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]})})})}),"\n",(0,e.jsx)(s.p,{children:"This is useful if you want to mark a sibling floating element in\nthe React tree as the child of another sibling."}),"\n",(0,e.jsxs)(s.h2,{id:"floatingtree-wrapper",children:[(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"<"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingTree"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]})})})," wrapper"]}),"\n",(0,e.jsxs)(s.p,{children:["You can use the following technique to avoid having the consumer\nspecify the ",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"<"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingTree"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]})})})," wrapper:"]}),"\n",(0,e.jsx)(s.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.pre,{tabIndex:"0","data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",style:{display:"grid"},children:[(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"function"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#82AAFF","--shiki-light":"#2458C8"},children:" PopoverComponent"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"()"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" {"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#878EAE","--shiki-light":"#727895"},children:"  // Main logic as seen earlier"})}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"}"})}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:" "}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#878EAE","--shiki-light":"#727895"},children:"// This is the component the consumer uses"})}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"export"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:" function"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#82AAFF","--shiki-light":"#2458C8"},children:" Popover"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"("}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FCA7EA","--shiki-light":"#CB0BA2"},children:"props"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:")"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" {"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C099FF","--shiki-light":"#5A1EBA"},children:"  const"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF98A4","--shiki-light":"#CC3043"},children:" parentId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" ="}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:" useFloatingParentNodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"}

1,children:"()"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:" "}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#878EAE","--shiki-light":"#727895"},children:"  // This is a root, so we wrap it with the tree"})}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"  if"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" ("}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"parentId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" ==="}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#7F85A3","--shiki-light":"#7F85A3"},children:" null"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:")"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" {"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"    return"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:" ("})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"      <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingTree"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"        <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"PopoverComponent"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" {"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF757F","--shiki-light":"#D51826","--shiki-dark-font-weight":"bold","--shiki-light-font-weight":"bold"},children:"..."}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"props"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"}"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" />"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"      </"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingTree"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"    )"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:";"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"  }"})}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:" "}),"\n",(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"  return"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" <"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"PopoverComponent"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" {"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FF757F","--shiki-light":"#D51826","--shiki-dark-font-weight":"bold","--shiki-light-font-weight":"bold"},children:"..."}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#C8D3F5","--shiki-light":"#363A49"},children:"props"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"}"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:" />;"})]}),"\n",(0,e.jsx)(s.span,{"data-line":"",children:(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"},children:"}"})})]})})}),"\n",(0,e.jsx)(s.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,e.jsxs)(s.p,{children:["Ensure that the component that you’re calling\n",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#65BCFF","--shiki-light":"#006DC1"},children:"useFloatingNodeId"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#B4C2F0","--shiki-light":"#007091"}

1,children:"()"})]})})})," is a ",(0,e.jsx)(s.em,{children:"child"})," of the\n",(0,e.jsx)(s.span,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(s.code,{"data-language":"js","data-theme":"moonlight-ii moonlight-ii-light",children:(0,e.jsxs)(s.span,{"data-line":"",children:[(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:"<"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#FFC777","--shiki-light":"#B75C00"},children:"FloatingTree"}),(0,e.jsx)(s.span,{style:{"--shiki-dark":"#86E1FC","--shiki-light":"#007091"},children:">"})]})})})," wrapper. If it is not, then it will not be\nable to find the tree context."]})]})}function a(){let i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,n.a)(),...i.components};return s?(0,e.jsx)(s,{...i,children:(0,e.jsx)(l,{...i})}):l(i)}function t(i,s){throw Error("Expected "+(s?"component":"object")+" `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}}},function(i){i.O(0,[9774,2888,179],function(){return i(i.s=8541)}),_N_E=i.O()}]);