Mixins / foldkit-mixins-ui

ListboxView

namespace · packages/mixins-ui/src/listboxView.ts:7

export * as ListboxView from './listboxView.js'

Forked listbox views: the single and multi variants over the shared transcription in ./listboxShared.js. Each create binds the upstream bundle for the item/value pair and swaps in only the view; state, Messages, update, Commands, Mounts, and subscriptions stay upstream.

In the guides

Members

ListboxView.create

function · packages/mixins-ui/src/listboxView.ts:93

function create<
  Item = string,
  Value extends string = Item extends string ? Item : string,
>(): SingleBundle<Item, Value>

Pairs the forked single view with upstream's update and helpers.

ListboxView.defaultToView

function · packages/mixins-ui/src/listboxView.ts:32

function defaultToView(
  h: HtmlBuilder<Message>,
): (render: ListboxRenderInfo) => Html

Upstream's markup from the computed bundles: the default toView.

ListboxView.ListboxGroupRender

type · packages/mixins-ui/src/listboxShared.ts:55

type ListboxGroupRender = Readonly<{
  key: string
  heading: ListboxHeadingRender | undefined
  group:
    | {
        key: string
        attributes: ReadonlyArray<ChildAttribute>
      }
    | undefined
  separator:
    | {
        key: string
        attributes: ReadonlyArray<ChildAttribute>
      }
    | undefined
  items: ReadonlyArray<ListboxItemRender>
}>

One rendered group; group is undefined for the ungrouped pass-through.

ListboxView.ListboxHeadingRender

type · packages/mixins-ui/src/listboxShared.ts:48

type ListboxHeadingRender = Readonly<{
  id: string
  attributes: ReadonlyArray<ChildAttribute>
  content: Html
}>

A heading element's bundle, present only when the group names one.

ListboxView.ListboxItemRender

type · packages/mixins-ui/src/listboxShared.ts:41

type ListboxItemRender = Readonly<{
  key: string
  attributes: ReadonlyArray<ChildAttribute>
  content: Html
}>

One listbox item's bundle: element key, attributes, and caller content.

ListboxView.ListboxRenderInfo

type · packages/mixins-ui/src/listboxShared.ts:69

type ListboxRenderInfo = Readonly<{
  id: string
  isVisible: boolean
  wrapper: ReadonlyArray<ChildAttribute>
  button: ReadonlyArray<ChildAttribute>
  buttonContent: Html
  hiddenInputs: ReadonlyArray<Html>
  backdrop:
    | {
        key: string
        attributes: ReadonlyArray<ChildAttribute>
      }
    | undefined
  items:
    | {
        key: string
        attributes: ReadonlyArray<ChildAttribute>
      }
    | undefined
  scroll: ReadonlyArray<ChildAttribute> | undefined
  groups: ReadonlyArray<ListboxGroupRender>
}>

The listbox's computed bundles. backdrop, items, scroll, and groups are present only while visible; a closed listbox carries the rest alone, as upstream renders it. hiddenInputs are the form inputs submitted under name, passed through for the draw to place.

ListboxView.Multi

const · packages/mixins-ui/src/listboxView.ts:122

const Multi = { create }

Pairs the forked multi view with upstream's update and helpers.

ListboxView.MultiBundle

type · packages/mixins-ui/src/listboxView.ts:114

type MultiBundle<
  Item = string,
  Value extends string = Item extends string ? Item : string,
> = Omit<UpstreamMultiBundle<Item, Value>, 'view'> & {
  readonly view: SubmodelView<MultiModel, Message, MultiViewInputs<Item, Value>>
}

Upstream multi Bundle with the forked view.

ListboxView.MultiViewInputs

type · packages/mixins-ui/src/listboxView.ts:61

type MultiViewInputs<
  Item = string,
  Value extends string = Item extends string ? Item : string,
> = UpstreamListbox.Multi.ViewInputs<Item, Value> &
  Readonly<{
    toView?: (render: ListboxRenderInfo) => Html
  }>

Upstream multi view inputs plus the seam.

ListboxView.SingleBundle

type · packages/mixins-ui/src/listboxView.ts:85

type SingleBundle<
  Item = string,
  Value extends string = Item extends string ? Item : string,
> = Omit<UpstreamSingleBundle<Item, Value>, 'view'> & {
  readonly view: SubmodelView<
    SingleModel,
    Message,
    SingleViewInputs<Item, Value>
  >
}

Upstream single Bundle with the forked view.

ListboxView.SingleViewInputs

type · packages/mixins-ui/src/listboxView.ts:55

type SingleViewInputs<
  Item = string,
  Value extends string = Item extends string ? Item : string,
> = UpstreamSingleInputs<Item, Value> &
  Readonly<{
    toView?: (render: ListboxRenderInfo) => Html
  }>

Upstream single view inputs plus the seam.