On this pageFunctions
Ui/Disclosure
/**
* Programmatically closes the disclosure, updating the model and returning
* focus commands plus a `ToggledOpenState` OutMessage when it was open.
*/
(model: Disclosure.Model): UpdateReturn/** Creates an initial disclosure model from a config. Defaults to closed. */
(config: InitConfig): Disclosure.Model/**
* Programmatically toggles the disclosure, updating the model and returning
* focus commands plus a `ToggledOpenState` OutMessage.
*/
(model: Disclosure.Model): UpdateReturn/** Processes a disclosure message and returns the next model, commands, and optional OutMessage. */
(
model: Disclosure.Model,
message: {
_tag: "Closed"
} | {
_tag: "CompletedFocusButton"
} | {
_tag: "Toggled"
}
): UpdateReturn/**
* Attribute groups the disclosure component provides to the consumer's
* `toView` callback. The consumer composes the button + panel layout
* themselves using these bundles.
*/
type DisclosureAttributes = Readonly<{
button: ReadonlyArray<ChildAttribute>
panel: ReadonlyArray<ChildAttribute>
}>/** Configuration for creating a disclosure model with `init`. */
type InitConfig = Readonly<Disclosure.Model>/** Sent when the disclosure button is clicked. Toggles the open/closed state. */
type Toggled = CallableTaggedStruct<"Toggled", {}>/**
* Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field.
*
* - `toView`: receives the disclosure's `button` and `panel` attribute
* bundles and returns the composed layout. The consumer reads
* `isOpen` from their parent model when they need to render
* conditionally on it.
* - `isDisabled`: when true, the button is not clickable, gets
* `aria-disabled` and a `data-disabled` attribute.
*/
type ViewInputs = Readonly<{
isDisabled: boolean
toView: (attributes: DisclosureAttributes) => Html
}>/** Sent to explicitly close the disclosure, regardless of its current state. */
const Closed: CallableTaggedStruct<"Closed", {}>/** Sent when the focus-button command completes after closing. */
const CompletedFocusButton: CallableTaggedStruct<"CompletedFocusButton", {}>/** Moves focus to the disclosure's toggle button. */
const FocusButton: CommandDefinitionWithArgs<"FocusButton", {
id: String
}, Effect<{
_tag: "CompletedFocusButton"
}, never, never>>/** Union of all messages the disclosure component can produce. */
const Message: S.Union<[typeof Toggled, typeof Closed, typeof CompletedFocusButton]>/** Schema for the disclosure component's state, tracking its unique ID and open/closed status. */
const Model: Struct<{
id: String
isOpen: Boolean
}>/** Sent to the parent each time the disclosure toggles. The new open state is available on the next model snapshot; this OutMessage signals only that the transition happened. Consumers typically use this for analytics, lazy content loading, or saving open/closed state to a store. */
const ToggledOpenState: CallableTaggedStruct<"ToggledOpenState", {
isOpen: Boolean
}>/**
* Reflects an externally-sourced open state onto the model without
* emitting an OutMessage or running the focus command. Use this to mirror
* external truth (restored storage, a deep link) onto the disclosure.
* Contrast with `toggle`/`close`, which represent user or programmatic
* *choices* and emit `ToggledOpenState`. Returns the model directly
* because it produces no commands and no OutMessage.
*/
const reflectOpenState: Reflect<Model, boolean>/**
* Renders a headless disclosure component with accessible ARIA
* attributes and keyboard support. The consumer composes the layout
* through the `toView` slot, spreading the published `button` and
* `panel` attribute bundles onto their own elements.
*
* Designed to be embedded via `h.submodel`. The consumer reacts to
* toggle events by pattern-matching the `ToggledOpenState` OutMessage
* from the third element of `update`'s return tuple.
*/
const view: SubmodelView<Disclosure.Model, {
_tag: "Closed"
} | {
_tag: "CompletedFocusButton"
} | {
_tag: "Toggled"
}, Readonly<{
isDisabled: boolean
toView: (attributes: DisclosureAttributes) => Html
}>>