Skip to main content
On this pageFunctions

Ui/Anchor

Functions

anchorSetup

functionsource
/**
 * Positions a floating element relative to its button using Floating UI, then
 *  returns a cleanup function. Designed to be called inside an `OnMount`
 *  action: the consumer wraps the call in `Effect.sync` and stashes the
 *  returned cleanup in the `Mount` result. When `interceptTab` is true
 *  (default), Tab key in portal mode refocuses the button. Set to false for
 *  components like Popover where Tab should navigate naturally within the
 *  panel. When `focusAfterPosition` is true, the element is focused after the
 *  first position computation clears visibility, deferred via
 *  requestAnimationFrame so the element is painted before focus fires.
 *  `focusSelector` optionally targets a descendant (e.g. a calendar grid
 *  inside a popover panel) instead of the panel itself.
 *  The side the element currently sits on is written to `data-placement`, so
 *  CSS can react to it. When `isPlacementLocked` is true, the element keeps the
 *  side that the first positioning picks, `flip` is removed from every later
 *  update, and `data-placement` holds that locked side. Otherwise the attribute
 *  tracks the side each update resolves to, including the ones `flip` moves.
 */
(config: {
  anchor: Anchor.AnchorConfig
  buttonId: string
  focusAfterPosition: boolean
  focusSelector: string
  interceptTab: boolean
}): (element: Element) => () => void

portalToContainingRoot

functionsource
/**
 * Relocates an element into the shared `foldkit-portal-root` div within its
 *  containing root: the shadow root when mounted inside one, otherwise
 *  `document.body`. Escapes any ancestor stacking context while keeping the
 *  element under that root's scoped styles. Returns a cleanup function that
 *  removes the element from the portal root. Designed to be called from inside
 *  an `OnMount` action: the consumer wraps the call in `Effect.sync` and
 *  stashes the returned cleanup in the `Mount` result.
 */
(element: Element): () => void

Constants

AnchorConfig

constsource
/** Static configuration for anchor-based positioning of a floating element relative to a button. */
const AnchorConfig: Struct<{
  gap: optional<Number>
  isPlacementLocked: optional<Boolean>
  offset: optional<Number>
  padding: optional<Union<readonly [
    Number,
    Struct<{
      bottom: optionalKey<Number>
      left: optionalKey<Number>
      right: optionalKey<Number>
      top: optionalKey<Number>
    }>
  ]>>
  placement: optional<Literals<readonly ["top", "right", "bottom", "left", "top-start", "top-end", "right-start", "right-end", "bottom-start", "bottom-end", "left-start", "left-end"]>>
  portal: optional<Boolean>
}>

Padding

constsource
/**
 * Schema mirroring `@floating-ui/dom`'s `Padding` type: a uniform number or a
 *  partial per-side object (`top`/`right`/`bottom`/`left`).
 */
const Padding: Union<readonly [
  Number,
  Struct<{
    bottom: optionalKey<Number>
    left: optionalKey<Number>
    right: optionalKey<Number>
    top: optionalKey<Number>
  }>
]>

Placement

constsource
/**
 * Schema mirroring `@floating-ui/dom`'s `Placement` literal union: a side
 *  (`top`/`right`/`bottom`/`left`) optionally suffixed with `-start` or `-end`.
 */
const Placement: Literals<readonly ["top", "right", "bottom", "left", "top-start", "top-end", "right-start", "right-end", "bottom-start", "bottom-end", "left-start", "left-end"]>

Stay in the update loop.

New releases, patterns, and the occasional deep dive.


Built with Foldkit.

© 2026 Devin Jameson