@net-advantage/jo-ui-dropdown

Publishable single-select dropdown package.

The dropdown follows a strict MVVM split. The model maps option values to select keys. The view-model owns uncontrolled state. The view renders the view-model.

MVVM

flowchart LR
  Props["DropdownProps"] --> ViewModel["useDropdownViewModel"]
  Model["dropdown.model.ts<br/>keys and described-by"] --> ViewModel
  ViewModel --> View["Dropdown.tsx"]
  Metadata["jo-ui-field-metadata"] --> View
  View -->|"onChange"| ViewModel
  ViewModel -->|"onValueChange"| Host["Host application"]

| Layer | File | Responsibility | | --- | --- | --- | | Contract | dropdown.types.ts | Option, value, props, and view-model | | Model | dropdown.model.ts | Map values to keys and build the described-by id | | View-model | dropdown.view-model.ts | Own uncontrolled value and report the mapped value | | View | Dropdown.tsx | Render the select from the view-model | | Shared metadata | @net-advantage/jo-ui-field-metadata | Lay out the label, helper text, required marker, and nested select |

Models

flowchart TD
  Option["DropdownOption"] --> Entry["DropdownOptionViewModel"]
  Value["DropdownValue"] --> Key["selected key"]
  None["DropdownNoneValue"] --> Key
  Entry --> ViewModel["DropdownViewModel"]
  Key --> ViewModel
  Props["DropdownProps"] --> ViewModel

• DropdownOptionValue is a string or number. DropdownNoneValue is '' or null.
• Each option is projected to a key such as opt-0. The None item uses __none__.
• The view changes the key. The view-model maps that key back to the option value or the None value before calling onValueChange.
• describedBy points at the error text when hasError is set, otherwise the helper text.

Features

• Single select only
• Optional None item
• None value can map to '' or null
• Label, helper, and error text support
• Configurable labelPlacement (top or left) and descriptionPlacement (below-label or below-control)
• Validation errors remain alerts below the select while ordinary helper text is rendered by FieldMetadata

Structure

• src: runtime component, model, view-model, types, and styles
• stories: Storybook stories for docs and visual testing

Publish footprint

This package publishes only:

• dist
• README.md