Mixins / foldkit-mixins-ui

Menubar

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

export * as Menubar from './menubar.js'

In the guides

Members

Menubar.init

function · packages/mixins-ui/src/menubar.ts:68

function init(ids: ReadonlyArray<string>): Model

One shut menu per id, the first trigger the tab stop.

interface · packages/mixins-ui/src/menubar.ts:200

interface MenubarMenu {
  readonly label: string
  readonly items: ReadonlyArray<string>
  readonly isItemDisabled?: ((item: string) => boolean) | undefined
}

const · packages/mixins-ui/src/menubar.ts:31

const MenubarSlots: Slots.Contract<{
  readonly bar: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly [Event.EventToken<'keydown'>],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly menu: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly [Event.EventToken<'hover'>],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

A menu bar, shadcn's and the APG's: a row of @foldkit/ui Menus, so each menu's keys, typeahead, rows and dismissal stay the Menu's, and the bar adds what a row of them needs. One trigger is the bar's tab stop, and ArrowLeft and ArrowRight (Home and End while all are shut) move it; with a menu open they shut it and open the next, its first row active. While one is open, pointing at another trigger opens that one, and opening any menu shuts the rest. The menus' Models are this module's Model, which the application keeps and folds with update, as it folds a Menu's.

The bar's keys and hover listen outside each menu's submodel (a handler inside it would speak the Menu's Messages): keydown on the bar, which the triggers and rows bubble to, and mouseenter on each menu. The triggers stand above an open menu's backdrop (z-index: 1), which holds only while nothing between the bar and the page makes a stacking context.

interface · packages/mixins-ui/src/menubar.ts:207

interface MenubarView<ParentMessage> {
  readonly label: string
  readonly model: Model
  readonly menus: ReadonlyArray<MenubarMenu>
  readonly onMessage: (message: Message) => NoInfer<ParentMessage>
  readonly style?: NamedStyle<typeof MenubarSlots> | undefined
  readonly menuMixins: MixinList<ParentMessage>
}

Menubar.Message

const · packages/mixins-ui/src/menubar.ts:48

const Message: MessageUnion<{ readonly GotMenu: { readonly index: Schema.Number; readonly message: MessageUnion<{ readonly Opened: { maybeActiveItemIndex: Schema.Option<Schema.Number>; }; readonly Closed: {}; readonly BlurredItems: {}; readonly ActivatedItem: { index: Schema.Number; activationTrigger: Schema.Literals<readonly ["Pointer", "Keyboard"]>; }; readonly DeactivatedItem: {}; readonly SelectedItem: { index: Schema.Number; item: Schema.String; }; readonly RequestedItemClick: { index: Schema.Number; }; readonly Searched: { key: Schema.String; maybeTargetIndex: Schema.Option<Schema.Number>; }; readonly CompletedDelayClearSearch: { version: Schema.Number; }; readonly MovedPointerOverItem: { index: Schema.Number; screenX: Schema.Number; screenY: Schema.Number; }; readonly CompletedFocusItems: {}; readonly CompletedFocusButton: {}; readonly CompletedLockScroll: {}; readonly CompletedUnlockScroll: {}; readonly CompletedInertOthers: {}; readonly CompletedRestoreInert: {}; readonly CompletedScrollIntoView: {}; readonly CompletedClickItem: {}; readonly IgnoredMouseClick: {}; readonly SuppressedSpaceScroll: {}; readonly CompletedAnchorMenu: {}; readonly CompletedPortalMenuBackdrop: {}; readonly GotAnimationMessage: { message: import("foldkit/message").MessageUnion<{ readonly Showed: {}; readonly Hid: {}; readonly CompletedWaitForPaint: { generation: Schema.Number; }; readonly EndedAnimation: { generation: Schema.Number; }; }>; }; readonly PressedPointerOnButton: { pointerType: Schema.String; b …;

Menubar.Model

const · packages/mixins-ui/src/menubar.ts:36

const Model: Schema.Struct<{
  readonly menus: Schema.$Array<
    Schema.Struct<{
      readonly id: Schema.String
      readonly isOpen: Schema.Boolean
      readonly isAnimated: Schema.Boolean
      readonly isModal: Schema.Boolean
      readonly animation: Schema.Struct<{
        readonly id: Schema.String
        readonly isShowing: Schema.Boolean
        readonly transitionState: Schema.Literals<
          readonly [
            'Idle',
            'EnterStart',
            'EnterAnimating',
            'LeaveStart',
            'LeaveAnimating',
          ]
        >
        readonly transitionGeneration: Schema.Number
      }>
      readonly maybeActiveItemIndex: Schema.Option<Schema.Number>
      readonly activationTrigger: Schema.Literals<
        readonly ['Pointer', 'Keyboard']
      >
      readonly searchQuery: Schema.String
      readonly searchVersion: Schema.Number
      readonly maybeLastPointerPosition: Schema.Option<
        Schema.Struct<{
          readonly screenX: Schema.Number
          readonly screenY: Schema.Number
        }>
      >
      readonly maybeLastButtonPointerType: Schema.Option<Schema.String>
      readonly maybePointerOrigin: Schema.Option<
        Schema.Struct<{
          readonly screenX: Schema.Number
          readonly screenY: Schema.Number
          readonly timeStamp: Schema.Number
        }>
      >
    }>
  >
  readonly stop: Schema.Number
}>

Menubar.OutMessage

const · packages/mixins-ui/src/menubar.ts:61

const OutMessage: MessageUnion<{
  readonly Selected: {
    readonly menu: Schema.Number
    readonly value: Schema.String
  }
}>

Menubar.update

function · packages/mixins-ui/src/menubar.ts:151

function update(model: Model, message: Message): Return

The bar after message; the same Model when nothing changes.

Menubar.view

function · packages/mixins-ui/src/menubar.ts:220

function view<ParentMessage>(
  options: MenubarView<ParentMessage>,
  h: HtmlBuilder<ParentMessage>,
): Html