SingleSelect

One of a known set.

#Contract

One of a known set. This is the archetype's identity: a component that keeps it is a SingleSelect on every target, however differently each one draws it. Its content category is a region, which decides where it may sit and what it may contain.

It emits change (from S.change).

#Anatomy

The published parts, with the role each one carries. The role is what a target derives the element from; the file never names an element.

text

trigger: control
  value: text
  indicator: icon
surface: container
  option: item
    check: icon  (optional)
    label: text

#Behaviours

Composed from the prelude's atoms. An optional one is marked.

How they are wired, in the composition algebra:

text

uses activation as A
uses presentation(surface: popover) as P
uses selection(mode: single, over: options) as S
uses browse(over: options, mode: roving) as B
uses dismiss(when: [outside,escape]) as D
wire A.invoke -> P.toggle
wire P.opened -> B.to(S.sel ?? first)
gate D active when P.open
wire D.dismissRequested -> P.close
wire option-activate -> S.select(B.active)
wire S.change when closeOnSelect -> P.close

States it exposes, which a part's paint can key on:

open while P.open
selected while S.selected
active while B.active

#Realization

web popover-listbox · Android dropdown/dialog · iOS menu/sheet/push/wheel

web: surface popover, browse roving, commit explicit, place bottom-start; flip; matchWidth; commit on click/enter
ios when style=wheel: surface inline-wheel, browse scroll-detent, commit continuous, drops activation, dismiss, wires B.active-changed -> S.select(B.active),

What the React target does with it

The React generator realizes every archetype the prelude defines, and its output is typechecked against the real React types for each one on every change. Where a part or a constraint cannot be expressed, the generator reports it rather than approximating.

#Start from it

A component that starts from SingleSelect, before the author touches it: the root and the published anatomy, each part with the kind its role gives it. Paste it into a file, or open it in the Playground, and add the contract, the tokens and the states.

milda

component SingleSelect {
  archetype SingleSelect

  part SingleSelect: container {
  }

  part trigger: control {
  }

  part trigger.value: text {
  }

  part trigger.indicator: icon {
  }

  part surface: container {
  }

  part surface.option: item {
  }

  part surface.option.check: icon {
  }

  part surface.option.label: text {
  }
}

Every statement a part can carry is in the reference; the tour shows the arc from archetype to generated code.