Mixins / foldkit-mixins-ui

Combobox

namespace · packages/mixins-ui/src/combobox.ts:1

export * as Combobox from './combobox.js'

In the guides

Members

Combobox.ComboboxSlots

const · packages/mixins-ui/src/combobox.ts:27

const ComboboxSlots: Slots.Contract<{ readonly wrapper: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly inputWrapper: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly input: Slot.UnnamedSlot<Capability.Capability<"TextInput", readonly [Capability.Capability<"Focusable", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>]>, readonly [Event.EventToken<"input">, Event.EventToken<"keydown">, Event.EventToken<"blur">, Event.EventToken<"focus">], readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-expanded">, Attr.AttrToken<"disabled">, Attr.AttrToken<"aria-disabled">], readonly Slot.RequirementName[], boolean>; readonly toggleButton: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly [Attr.AttrToken<"aria-expanded">, Attr.AttrToken<"disabled">, Attr.AttrToken<"aria-disabled">], readonly Slot.RequirementName[], boolean>; readonly backdrop: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Cap …;

Combobox is a nested Submodel: an input/inputWrapper pair with an optional toggleButton, plus a backdrop/items group with an item per entry (and group/heading/separator where the caller groups), so the resolver runs once per bundle and each base attribute passes through by identity. hiddenInputs are the form inputs submitted under formName: generated markup with no styling surface, passed through for the draw to place.

The input owns input/keydown/blur (and focus with openOnFocus); an item owns click while interactive; the toggle owns click while enabled. A Behavior adding its own handler to one of those is a conflict, not a second silent owner.

Combobox.fluid

const · packages/mixins-ui/src/combobox.ts:208

const fluid: readonly [Mixin<never>, Mixin<never>]

What moves the open panel's highlight and indicator: on its rows, the chosen row is measured (--fk-popup-chosen-*) and one highlight follows the pointer to the nearest row (--fk-popup-hover-*), and to the row the keys mark (data-active) while the pointer is away. A press in a gap is left alone: the field keeps focus. Pass them beside the style; until they run, each row marks itself.

Combobox.resolve

function · packages/mixins-ui/src/combobox.ts:107

function resolve<Input, Message>(
  render: ComboboxRenderInfo,
  mixins: MixinList<Message>,
  context: ResolveContext<Input, Message>,
): ResolvedCombobox<Message>

Resolves the combobox's bundles (and every item's).

Combobox.ResolvedCombobox

type · packages/mixins-ui/src/combobox.ts:83

type ResolvedCombobox<Message> = Omit<
  ComboboxRenderInfo,
  | 'wrapper'
  | 'inputWrapper'
  | 'input'
  | 'toggleButton'
  | 'backdrop'
  | 'items'
  | 'scroll'
  | 'groups'
> & {
  readonly wrapper: SlotAttributes<Message>
  readonly inputWrapper: SlotAttributes<Message>
  readonly input: SlotAttributes<Message>
  readonly toggleButton: ResolvedComboboxToggle<Message> | undefined
  readonly backdrop:
    | {
        key: string
        attributes: SlotAttributes<Message>
      }
    | undefined
  readonly items:
    | {
        key: string
        attributes: SlotAttributes<Message>
      }
    | undefined
  readonly scroll: SlotAttributes<Message> | undefined
  readonly rows: SlotAttributes<Message> | undefined
  readonly highlight: SlotAttributes<Message> | undefined
  readonly indicator: SlotAttributes<Message> | undefined
  readonly groups: ReadonlyArray<ResolvedComboboxGroup<Message>>
}

Combobox.ResolvedComboboxGroup

type · packages/mixins-ui/src/combobox.ts:67

type ResolvedComboboxGroup<Message> = Omit<
  ComboboxGroupRender,
  'heading' | 'group' | 'separator' | 'items'
> & {
  readonly heading: ResolvedComboboxHeading<Message> | undefined
  readonly group:
    | {
        key: string
        attributes: SlotAttributes<Message>
      }
    | undefined
  readonly separator:
    | {
        key: string
        attributes: SlotAttributes<Message>
      }
    | undefined
  readonly items: ReadonlyArray<ResolvedComboboxItem<Message>>
}

Combobox.ResolvedComboboxHeading

type · packages/mixins-ui/src/combobox.ts:63

type ResolvedComboboxHeading<Message> = Omit<
  ComboboxHeadingRender,
  'attributes'
> & {
  readonly attributes: SlotAttributes<Message>
}

Combobox.ResolvedComboboxItem

type · packages/mixins-ui/src/combobox.ts:59

type ResolvedComboboxItem<Message> = Omit<ComboboxItemRender, 'attributes'> & {
  readonly attributes: SlotAttributes<Message>
}

Combobox.ResolvedComboboxToggle

type · packages/mixins-ui/src/combobox.ts:77

type ResolvedComboboxToggle<Message> = Readonly<{
  key: string
  attributes: SlotAttributes<Message>
  content: Html
}>

Combobox.toView

function · packages/mixins-ui/src/combobox.ts:189

function toView<Message>(
  mixins: MixinList<Message>,
  context: ResolveContext<unknown, Message>,
  draw?: (resolved: ResolvedCombobox<Message>) => Html,
): (render: ComboboxRenderInfo) => Html

The combobox's toView: draw receives its bundles with mixins applied. Without one, it draws upstream's markup from them.