Mixins / foldkit-mixins-ui

Command

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

export * as Command from './command.js'

Members

Command.CommandGroup

interface · packages/mixins-ui/src/command.ts:49

interface CommandGroup<Value extends string> {
  readonly heading?: string | undefined
  readonly items: ReadonlyArray<CommandItem<Value>>
}

Command.CommandItem

interface · packages/mixins-ui/src/command.ts:39

interface CommandItem<Value extends string> {
  readonly value: Value
  readonly label: string
  readonly keywords?: ReadonlyArray<string> | undefined
  readonly shortcut?: string | undefined
  readonly disabled?: boolean | undefined
}

Command.CommandSlots

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

const CommandSlots: Slots.Contract<{ readonly root: 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<"Focusable", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly [Event.EventToken<"input">, Event.EventToken<"keydown">], readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-expanded">], readonly Slot.RequirementName[], boolean>; readonly list: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">], readonly Slot.RequirementName[], boolean>; readonly group: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">], readonly Slot.RequirementName[], boolean>; readonly heading: 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 item: Slot.UnnamedS …;

A command menu, shadcn's Command and Fluid Functionalism's CommandMenu: a search field that keeps focus while the keys move through the rows and points at the highlighted one through aria-activedescendant, over a list of grouped rows. (A press on a row runs it; foldkit has no default-preventing mousedown to keep the field focused through the press, so a menu that stays open after a pressed row refocuses its field in the Command onRun starts.) ↑ and ↓ wrap through the enabled rows, Enter runs the highlighted one, a press runs the one pressed, and the pointer moves the highlight. Rows never re-sort as the query grows, so nothing moves under the pointer; whenever the highlighted row is filtered away, the first enabled row takes it, so Enter always has a target. The query and the highlighted value are the application's; filtered is what the view shows for a query.

Command.CommandView

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

interface CommandView<Value extends string, Message> {
  readonly id: string
  readonly label: string
  readonly placeholder?: string | undefined
  readonly groups: ReadonlyArray<CommandGroup<Value>>
  readonly query: string
  readonly onQuery: (query: string) => NoInfer<Message>
  readonly active: Option.Option<Value>
  readonly onActive: (value: Value) => NoInfer<Message>
  readonly onRun: (value: Value) => NoInfer<Message>
  readonly empty?: string | undefined
  readonly style?: NamedStyle<typeof CommandSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Command.filtered

function · packages/mixins-ui/src/command.ts:81

function filtered<Value extends string>(
  groups: ReadonlyArray<CommandGroup<Value>>,
  query: string,
): ReadonlyArray<CommandGroup<Value>>

The groups as a query leaves them: a row stays when every word of the query is in its label or keywords, in its place; a group left with no rows goes.

Command.view

function · packages/mixins-ui/src/command.ts:99

function view<Value extends string, Message>(
  options: CommandView<Value, Message>,
  h: HtmlBuilder<Message>,
): Html