Mixins / foldkit-mixins-ui

Anchor

namespace · packages/mixins-ui/src/anchor.ts:15

export * as Anchor from './anchor.js'

@foldkit/ui's anchor positioning as a Mount and a Behavior: the floating element is placed against the button whose id is given, with placement, gap, offset, padding, portal and flip handled by anchorSetup, which also releases on unmount. The Mount writes position, top and left on the element itself, imperatively; a Style on the same slot must leave those alone, and data-placement is written by @foldkit/ui for styling.

portal defaults to true upstream: the element is relocated into a portal root, so the runtime no longer patches it and a test sees it move. Pass portal: false to keep the node where the view drew it. Positioning without layout (jsdom's zero geometry) burns tens of seconds, portal or not — drive the config, not the clock, in tests.

In the guides

Members

Anchor.Anchor

const · packages/mixins-ui/src/anchor.ts:20

const Anchor: Mount.MountDefinitionWithArgs<
  'Anchor',
  {
    buttonId: Schema.String
    anchor: Schema.Struct<{
      readonly placement: Schema.optional<
        Schema.Literals<
          readonly [
            'top',
            'right',
            'bottom',
            'left',
            'top-start',
            'top-end',
            'right-start',
            'right-end',
            'bottom-start',
            'bottom-end',
            'left-start',
            'left-end',
          ]
        >
      >
      readonly gap: Schema.optional<Schema.Number>
      readonly offset: Schema.optional<Schema.Number>
      readonly padding: Schema.optional<
        Schema.Union<
          readonly [
            Schema.Number,
            Schema.Struct<{
              readonly top: Schema.optionalKey<Schema.Number>
              readonly right: Schema.optionalKey<Schema.Number>
              readonly bottom: Schema.optionalKey<Schema.Number>
              readonly left: Schema.optionalKey<Schema.Number>
            }>,
          ]
        >
      >
      readonly portal: Schema.optional<Schema.Boolean>
      readonly isPlacementLocked: Schema.optional<Schema.Boolean>
    }>
    interceptTab: Schema.optional<Schema.Boolean>
    focusAfterPosition: Schema.optional<Schema.Boolean>
    focusSelector: Schema.optional<Schema.String>
    arrowId: Schema.optional<Schema.String>
    arrowPadding: Schema.optional<Schema.Number>
  },
  never
>

Anchor.AnchorArgs

type · packages/mixins-ui/src/anchor.ts:52

type AnchorArgs = Parameters<typeof Anchor>[0]

Anchor.behavior

function · packages/mixins-ui/src/anchor.ts:61

function behavior<Slots>(
  slots: Slots,
): <Input, ParentMessage>(
  options: BehaviorOptions<Input, Slots>,
) => Behavior.NamedBehavior<Slots, Input, ParentMessage>

Mounts the anchor on the floating slot with the config the input gives.

Anchor.BehaviorOptions

interface · packages/mixins-ui/src/anchor.ts:54

interface BehaviorOptions<Input, Slots> {
  readonly floating: keyof Slots & string
  readonly config: (input: Input) => AnchorArgs
}