@net-advantage/jo-ui-dialog

Admin-style dialog component with an optional left panel.

The dialog follows a strict MVVM split. The model owns class names. The view-model owns ids, defaults, and close rules. The view renders the view-model and uses Button for Cancel and Submit.

MVVM

flowchart LR
  Props["DialogProps"] --> ViewModel["useDialogViewModel"]
  Model["dialog.model.ts<br/>class names"] --> ViewModel
  ViewModel --> View["Dialog.tsx"]
  View -->|"close, cancel, submit"| ViewModel
  ViewModel -->|"onClose, onCancel, onSubmit"| Host["Host application"]
  View --> Button["jo-ui-button"]
  View -->|"loading"| Shadow["jo-ui-shadow"]

| Layer | File | Responsibility | | --- | --- | --- | | Contract | dialog.types.ts | Props and view-model | | Model | dialog.model.ts | Build the root and panel class names | | View-model | dialog.view-model.ts | Framework-free dialog observable; default labels, cancel, and the backdrop guard | | View | dialog.use-view-model.ts | useDialogViewModel reads that observable and owns the focus trap | | View-model | confirm-dialog.view-model.ts | Framework-free confirm dialog observable | | View | confirm-dialog.use-view-model.ts | useConfirmDialogViewModel reads that observable and owns the focus trap | | View | Dialog.tsx | Render the dialog from the view-model | | Focus trap | focus-trap.ts | Keep Tab inside the topmost open overlay. Escape closes that overlay on the way back up, and a child that already cancelled it is left alone | | Confirm | ConfirmDialog.tsx | Alert dialog with confirm and cancel actions |

Models

flowchart TD
  Props["DialogProps"] --> ViewModel["DialogViewModel"]
  Left["leftPanel"] --> Panel["panel class"]
  Panel --> ViewModel
  Title["title and subtitle"] --> Ids["titleId and describedBy"]
  Ids --> ViewModel

• open controls visibility. A closed dialog renders nothing.
• showLeftPanel adds the left-panel class only when the panel is shown. The panel is hidden by default.
• Cancel uses onCancel when it is set, otherwise onClose.
• The backdrop calls onClose only when closeOnBackdrop is set.
• Submit and Cancel labels default to Submit and Cancel.
• loading replaces the content with a jo-ui-shadow form skeleton (or loadingContent), sets aria-busy, and disables Submit.
• Escape closes the topmost overlay from a bubbling keydown. Dialog, ConfirmDialog, SidePanel, and the shell drawer share one stack, so a confirm opened over a side panel takes Escape and focus while the panel stays inert. Tab stays on the capture path. An Escape whose defaultPrevented is already set, or that a child stops, does not close the dialog. The date picker calendar uses that so Escape closes the calendar and leaves the dialog open.

Features

• Header with title, subtitle, and close button
• Content area for custom body content
• Footer with default Submit and Cancel actions
• Optional left panel spanning top to bottom
• Left panel hidden by default

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