{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "portal-container",
  "title": "PortalContainer",
  "description": "Renders the tooltips, menus and selects opened in a landmark into that landmark, so their content stays inside the page's landmarks.",
  "files": [
    {
      "path": "lib/portal-container.tsx",
      "content": "'use client';\n\nimport { createContext, type ReactNode, useContext, useLayoutEffect, useReducer } from 'react';\n\n/*\n * Tooltips, menus and selects portal out of their trigger's layout. By\n * default they land in the body, after the page's landmarks, and axe's\n * best-practice \"region\" rule flags the open popup. Wrap a landmark's content\n * in PortalContainer with the landmark's id, and the popups opened inside it\n * render into the landmark. The context holds the id, not a ref: on the\n * hydration render a ref is still empty, but the server's element is in the\n * document, so a popup finds it before it first opens.\n *\n * A modal (Dialog, Sheet) and a popup that can hold other widgets (Popover,\n * DropdownMenu) set the id to null for their content: Radix hides the page\n * behind them, so a popup opened inside goes to the body, as upstream.\n */\nconst PortalContainerContext = createContext<string | null>(null);\n\nfunction PortalContainer({ id, children }: { id: string | null; children: ReactNode }) {\n  return <PortalContainerContext.Provider value={id}>{children}</PortalContainerContext.Provider>;\n}\n\n/** The caller's container, else the landmark's, else undefined: the body, as upstream. */\nfunction usePortalContainer(container?: Element | DocumentFragment | null) {\n  const id = useContext(PortalContainerContext);\n  const landmark = id && typeof document !== 'undefined' ? document.getElementById(id) : null;\n  const [, lookAgain] = useReducer((count: number) => count + 1, 0);\n  // Mounted on the client in the same commit as its landmark, the first lookup\n  // runs before the landmark is in the document: look once more after commit.\n  useLayoutEffect(() => {\n    if (id && !landmark && document.getElementById(id)) lookAgain();\n  }, [id, landmark]);\n  return container ?? landmark ?? undefined;\n}\n\nexport { PortalContainer, usePortalContainer };\n",
      "type": "registry:lib"
    }
  ],
  "type": "registry:lib"
}