Anchored popup overlay positioned relative to a trigger element. Auto-detects viewport boundaries — prefers below, falls back to above. In RTL direction the inline alignment mirrors: the popup prefers aligning its inline-start edge with the trigger's and falls back to the other edge when the viewport is too narrow.

<HxPopupProvider zIndex={2000} gapToEdge={5}>
  <HxButton text="Open Menu" />
  <HxPopup>
    <HxFlex direction="dir-y">
      <HxButton text="Edit" variant="ghost" onClick={edit} />
      <HxButton text="Delete" variant="ghost" color="danger" onClick={del} />
    </HxFlex>
  </HxPopup>
</HxPopupProvider>

// Match trigger width
<HxPopupProvider sameWidthAtMinimum>
  <HxInput $model={form} $field="search" />
  <HxPopup>
    {/* Popup width >= input width */}
  </HxPopup>
</HxPopupProvider>

The popup portal is only rendered to the DOM when the popup is shown (show()). When hidden, no portal DOM nodes exist, reducing the initial DOM footprint. Use the steady prop for components that must remain mounted regardless of popup visibility (e.g. HxSelectOptionsHolder).

hidden → prepare → prepared → active → hide → hidden

useHxPopupContext() — accessible within popup content:

const { show, hide, toggle, isVisible } = useHxPopupContext();

Popup overlay forwards all standard DOM events. In practice you rarely need them — show/hide is controlled via useHxPopupContext(), and keyboard navigation is handled internally.

import { configHxWithPopup } from '@hx/components';
configHxWithPopup({ zIndex: 2000, gapToEdge: 5 });