@typed/ui 1.0.0-beta.3 → 1.0.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -9
- package/dist/Alert.d.ts +78 -0
- package/dist/Alert.d.ts.map +1 -0
- package/dist/Alert.js +37 -0
- package/dist/Button.d.ts +144 -0
- package/dist/Button.d.ts.map +1 -0
- package/dist/Button.js +38 -0
- package/dist/Carousel.d.ts +547 -0
- package/dist/Carousel.d.ts.map +1 -0
- package/dist/Carousel.js +387 -0
- package/dist/Checkbox.d.ts +203 -0
- package/dist/Checkbox.d.ts.map +1 -0
- package/dist/Checkbox.js +140 -0
- package/dist/Collection.d.ts +254 -0
- package/dist/Collection.d.ts.map +1 -0
- package/dist/Collection.js +218 -0
- package/dist/Combobox.d.ts +516 -0
- package/dist/Combobox.d.ts.map +1 -0
- package/dist/Combobox.js +371 -0
- package/dist/Component.d.ts +127 -0
- package/dist/Component.d.ts.map +1 -0
- package/dist/Component.js +60 -0
- package/dist/Composite.d.ts +823 -0
- package/dist/Composite.d.ts.map +1 -0
- package/dist/Composite.js +615 -0
- package/dist/Dialog.d.ts +544 -0
- package/dist/Dialog.d.ts.map +1 -0
- package/dist/Dialog.js +355 -0
- package/dist/Disclosure.d.ts +219 -0
- package/dist/Disclosure.d.ts.map +1 -0
- package/dist/Disclosure.js +128 -0
- package/dist/Dom/Events.d.ts +122 -0
- package/dist/Dom/Events.d.ts.map +1 -0
- package/dist/Dom/Events.js +192 -0
- package/dist/Dom/Props.d.ts +161 -0
- package/dist/Dom/Props.d.ts.map +1 -0
- package/dist/Dom/Props.js +110 -0
- package/dist/Dom/Refs.d.ts +58 -0
- package/dist/Dom/Refs.d.ts.map +1 -0
- package/dist/Dom/Refs.js +61 -0
- package/dist/Dom/Render.d.ts +59 -0
- package/dist/Dom/Render.d.ts.map +1 -0
- package/dist/Dom/Render.js +71 -0
- package/dist/Dom/Types.d.ts +570 -0
- package/dist/Dom/Types.d.ts.map +1 -0
- package/dist/Dom/Types.js +1 -0
- package/dist/Dom/index.d.ts +20 -0
- package/dist/Dom/index.d.ts.map +1 -0
- package/dist/Dom/index.js +8 -0
- package/dist/Dom.d.ts +14 -0
- package/dist/Dom.d.ts.map +1 -0
- package/dist/Dom.js +13 -0
- package/dist/Focusable.d.ts +85 -0
- package/dist/Focusable.d.ts.map +1 -0
- package/dist/Focusable.js +35 -0
- package/dist/Form.d.ts +1695 -0
- package/dist/Form.d.ts.map +1 -0
- package/dist/Form.js +987 -0
- package/dist/Grid.d.ts +569 -0
- package/dist/Grid.d.ts.map +1 -0
- package/dist/Grid.js +379 -0
- package/dist/Group.d.ts +147 -0
- package/dist/Group.d.ts.map +1 -0
- package/dist/Group.js +63 -0
- package/dist/Heading.d.ts +86 -0
- package/dist/Heading.d.ts.map +1 -0
- package/dist/Heading.js +48 -0
- package/dist/Hovercard.d.ts +297 -0
- package/dist/Hovercard.d.ts.map +1 -0
- package/dist/Hovercard.js +188 -0
- package/dist/HttpRouter.d.ts +129 -6
- package/dist/HttpRouter.d.ts.map +1 -1
- package/dist/HttpRouter.js +197 -54
- package/dist/Link.d.ts +67 -28
- package/dist/Link.d.ts.map +1 -1
- package/dist/Link.js +91 -37
- package/dist/Listbox.d.ts +437 -0
- package/dist/Listbox.d.ts.map +1 -0
- package/dist/Listbox.js +316 -0
- package/dist/Menu.d.ts +972 -0
- package/dist/Menu.d.ts.map +1 -0
- package/dist/Menu.js +731 -0
- package/dist/Menubar.d.ts +367 -0
- package/dist/Menubar.d.ts.map +1 -0
- package/dist/Menubar.js +265 -0
- package/dist/Meter.d.ts +217 -0
- package/dist/Meter.d.ts.map +1 -0
- package/dist/Meter.js +94 -0
- package/dist/NativeDetails.d.ts +41 -0
- package/dist/NativeDetails.d.ts.map +1 -0
- package/dist/NativeDetails.js +40 -0
- package/dist/NativeDialog.d.ts +64 -0
- package/dist/NativeDialog.d.ts.map +1 -0
- package/dist/NativeDialog.js +50 -0
- package/dist/NativePopover.d.ts +41 -0
- package/dist/NativePopover.d.ts.map +1 -0
- package/dist/NativePopover.js +46 -0
- package/dist/Popover.d.ts +241 -0
- package/dist/Popover.d.ts.map +1 -0
- package/dist/Popover.js +141 -0
- package/dist/RadioGroup.d.ts +432 -0
- package/dist/RadioGroup.d.ts.map +1 -0
- package/dist/RadioGroup.js +291 -0
- package/dist/Role.d.ts +64 -0
- package/dist/Role.d.ts.map +1 -0
- package/dist/Role.js +27 -0
- package/dist/Select.d.ts +529 -0
- package/dist/Select.d.ts.map +1 -0
- package/dist/Select.js +407 -0
- package/dist/Separator.d.ts +54 -0
- package/dist/Separator.d.ts.map +1 -0
- package/dist/Separator.js +26 -0
- package/dist/Slider.d.ts +188 -0
- package/dist/Slider.d.ts.map +1 -0
- package/dist/Slider.js +96 -0
- package/dist/SpinButton.d.ts +188 -0
- package/dist/SpinButton.d.ts.map +1 -0
- package/dist/SpinButton.js +96 -0
- package/dist/Storybook.d.ts +76 -0
- package/dist/Storybook.d.ts.map +1 -0
- package/dist/Storybook.js +102 -0
- package/dist/Switch.d.ts +187 -0
- package/dist/Switch.d.ts.map +1 -0
- package/dist/Switch.js +116 -0
- package/dist/Tab.d.ts +26 -0
- package/dist/Tab.d.ts.map +1 -0
- package/dist/Tab.js +25 -0
- package/dist/Tabs.d.ts +591 -0
- package/dist/Tabs.d.ts.map +1 -0
- package/dist/Tabs.js +346 -0
- package/dist/Toolbar.d.ts +366 -0
- package/dist/Toolbar.d.ts.map +1 -0
- package/dist/Toolbar.js +245 -0
- package/dist/Tooltip.d.ts +296 -0
- package/dist/Tooltip.d.ts.map +1 -0
- package/dist/Tooltip.js +172 -0
- package/dist/Tree.d.ts +591 -0
- package/dist/Tree.d.ts.map +1 -0
- package/dist/Tree.js +434 -0
- package/dist/TreeGrid.d.ts +645 -0
- package/dist/TreeGrid.d.ts.map +1 -0
- package/dist/TreeGrid.js +420 -0
- package/dist/VisuallyHidden.d.ts +54 -0
- package/dist/VisuallyHidden.d.ts.map +1 -0
- package/dist/VisuallyHidden.js +27 -0
- package/dist/WindowSplitter.d.ts +376 -0
- package/dist/WindowSplitter.d.ts.map +1 -0
- package/dist/WindowSplitter.js +222 -0
- package/dist/index.d.ts +49 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +49 -0
- package/package.json +42 -15
- package/src/HttpRouter.test.ts +0 -294
- package/src/HttpRouter.ts +0 -168
- package/src/Link.test.ts +0 -84
- package/src/Link.ts +0 -107
- package/src/index.ts +0 -2
|
@@ -0,0 +1,437 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Listbox separates active and selected values, registers options in a Collection, and combines
|
|
3
|
+
* vertical keyboard movement with buffered typeahead. It supports roving focus by default and uses
|
|
4
|
+
* real focus, keydown, and click events.
|
|
5
|
+
*
|
|
6
|
+
* @remarks
|
|
7
|
+
* The module keeps policy, state transitions, and DOM rendering separable so applications can use
|
|
8
|
+
* the state and pure operations without mounting UI, or supply custom hosts without replacing native
|
|
9
|
+
* events and browser-owned focus.
|
|
10
|
+
*
|
|
11
|
+
* @since 1.0.0
|
|
12
|
+
* @category modules
|
|
13
|
+
* @packageDocumentation
|
|
14
|
+
*/
|
|
15
|
+
import * as Effect from "effect/Effect";
|
|
16
|
+
import type * as Scope from "effect/Scope";
|
|
17
|
+
import * as Schema from "effect/Schema";
|
|
18
|
+
import type { Fx } from "@typed/fx/Fx";
|
|
19
|
+
import { RefSubject } from "@typed/fx";
|
|
20
|
+
import { EventHandler, type Renderable, type RenderEvent, type RenderTemplate } from "@typed/template";
|
|
21
|
+
import * as Collection from "./Collection.js";
|
|
22
|
+
import * as Composite from "./Composite.js";
|
|
23
|
+
import * as Dom from "./Dom.js";
|
|
24
|
+
import type { HostResult } from "./Dom/Types.js";
|
|
25
|
+
/**
|
|
26
|
+
* Complete renderer-independent state for Listbox.
|
|
27
|
+
*
|
|
28
|
+
* @remarks
|
|
29
|
+
* ## Why
|
|
30
|
+
*
|
|
31
|
+
* Applications can inspect, update, and test Listbox behavior without mounting or coupling the
|
|
32
|
+
* state to a renderer.
|
|
33
|
+
*
|
|
34
|
+
* ## Ownership and lifetime
|
|
35
|
+
*
|
|
36
|
+
* This declaration is data or schema metadata and acquires no resources.
|
|
37
|
+
*
|
|
38
|
+
* ## Example
|
|
39
|
+
*
|
|
40
|
+
* Import with `import type { State } from "@typed/ui/Listbox";` Extend the [Listbox.makeState
|
|
41
|
+
* runnable setup](/reference/%40typed%2Fui%2FListbox%23makeState). Inside the linked program,
|
|
42
|
+
* `const snapshot: State = yield* state` exposes selection and active-option focus separately.
|
|
43
|
+
* @since 1.0.0
|
|
44
|
+
* @category models
|
|
45
|
+
*/
|
|
46
|
+
export interface State extends Omit<Composite.State, "orientation"> {
|
|
47
|
+
/**
|
|
48
|
+
* Axis used to interpret Arrow-key movement.
|
|
49
|
+
* @since 1.0.0
|
|
50
|
+
* @category models
|
|
51
|
+
*/
|
|
52
|
+
readonly orientation: "vertical";
|
|
53
|
+
/**
|
|
54
|
+
* Current semantic value selected or edited by the widget.
|
|
55
|
+
* @since 1.0.0
|
|
56
|
+
* @category models
|
|
57
|
+
*/
|
|
58
|
+
readonly value: string | null;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Initial Listbox values. value and activeId default to null, loop defaults to true, and roving
|
|
62
|
+
* focus is used.
|
|
63
|
+
*
|
|
64
|
+
* @remarks
|
|
65
|
+
* ## Why
|
|
66
|
+
*
|
|
67
|
+
* Making initialization explicit documents hydration-sensitive defaults and lets servers and
|
|
68
|
+
* clients construct matching state.
|
|
69
|
+
*
|
|
70
|
+
* ## Ownership and lifetime
|
|
71
|
+
*
|
|
72
|
+
* This declaration is data or schema metadata and acquires no resources.
|
|
73
|
+
*
|
|
74
|
+
* ## Example
|
|
75
|
+
*
|
|
76
|
+
* Import with `import type { InitialState } from "@typed/ui/Listbox";` Extend the
|
|
77
|
+
* [Listbox.makeState runnable setup](/reference/%40typed%2Fui%2FListbox%23makeState). Construct an
|
|
78
|
+
* empty selection with
|
|
79
|
+
* `const initial: InitialState = { value: null, activeId: null }; const state = yield* Listbox.makeState(initial)`.
|
|
80
|
+
* @since 1.0.0
|
|
81
|
+
* @category models
|
|
82
|
+
*/
|
|
83
|
+
export interface InitialState {
|
|
84
|
+
/**
|
|
85
|
+
* Current semantic value selected or edited by the widget.
|
|
86
|
+
* @since 1.0.0
|
|
87
|
+
* @category models
|
|
88
|
+
*/
|
|
89
|
+
readonly value?: string | null;
|
|
90
|
+
/**
|
|
91
|
+
* Id currently active for keyboard navigation; null means no active item.
|
|
92
|
+
* @since 1.0.0
|
|
93
|
+
* @category models
|
|
94
|
+
*/
|
|
95
|
+
readonly activeId?: string | null;
|
|
96
|
+
/**
|
|
97
|
+
* Whether movement wraps between the first and last enabled items.
|
|
98
|
+
* @since 1.0.0
|
|
99
|
+
* @category models
|
|
100
|
+
*/
|
|
101
|
+
readonly loop?: boolean;
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Effect Schema used by makeState to encode, decode, and hydrate Listbox state.
|
|
105
|
+
*
|
|
106
|
+
* @remarks
|
|
107
|
+
* ## Why
|
|
108
|
+
*
|
|
109
|
+
* A public schema makes hydration and serialized state use the same runtime validation as direct
|
|
110
|
+
* construction.
|
|
111
|
+
*
|
|
112
|
+
* ## Ownership and lifetime
|
|
113
|
+
*
|
|
114
|
+
* This declaration is data or schema metadata and acquires no resources.
|
|
115
|
+
*
|
|
116
|
+
* @example
|
|
117
|
+
* ```ts
|
|
118
|
+
* import * as Schema from "effect/Schema";
|
|
119
|
+
* import * as Listbox from "@typed/ui/Listbox";
|
|
120
|
+
*
|
|
121
|
+
* const decodeState = Schema.decodeUnknownEffect(Listbox.StateSchema);
|
|
122
|
+
* ```
|
|
123
|
+
* @since 1.0.0
|
|
124
|
+
* @category schemas
|
|
125
|
+
*/
|
|
126
|
+
export declare const StateSchema: Schema.Struct<{
|
|
127
|
+
readonly value: Schema.NullOr<Schema.String>;
|
|
128
|
+
readonly activeId: Schema.NullOr<Schema.String>;
|
|
129
|
+
readonly orientation: Schema.Literals<readonly ["vertical"]>;
|
|
130
|
+
readonly loop: Schema.Boolean;
|
|
131
|
+
readonly rtl: Schema.Boolean;
|
|
132
|
+
readonly virtualFocus: Schema.Boolean;
|
|
133
|
+
}>;
|
|
134
|
+
/**
|
|
135
|
+
* Creates hydrated Listbox state. value and activeId default to null, loop defaults to true, and
|
|
136
|
+
* roving focus is used.
|
|
137
|
+
*
|
|
138
|
+
* @remarks
|
|
139
|
+
* ## Why
|
|
140
|
+
*
|
|
141
|
+
* State and collection ownership can be composed and tested independently from any renderer.
|
|
142
|
+
*
|
|
143
|
+
* ## Ownership and lifetime
|
|
144
|
+
*
|
|
145
|
+
* The returned Effect creates the RefSubject when run. That state is renderer-independent;
|
|
146
|
+
* collection registrations belong to the separate Scope that runs register or ref, not to state
|
|
147
|
+
* creation.
|
|
148
|
+
*
|
|
149
|
+
* @example
|
|
150
|
+
* ```ts
|
|
151
|
+
* import * as Effect from "effect/Effect";
|
|
152
|
+
* import * as Listbox from "@typed/ui/Listbox";
|
|
153
|
+
*
|
|
154
|
+
* const program = Effect.scoped(
|
|
155
|
+
* Effect.gen(function* () {
|
|
156
|
+
* const state = yield* Listbox.makeState({});
|
|
157
|
+
* const collection = yield* Listbox.makeCollection();
|
|
158
|
+
* return { state: yield* state, collection: yield* collection };
|
|
159
|
+
* }),
|
|
160
|
+
* );
|
|
161
|
+
* ```
|
|
162
|
+
* @since 1.0.0
|
|
163
|
+
* @category constructors
|
|
164
|
+
*/
|
|
165
|
+
export declare function makeState(initial?: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
|
|
166
|
+
readonly value: string | null;
|
|
167
|
+
readonly activeId: string | null;
|
|
168
|
+
readonly orientation: "vertical";
|
|
169
|
+
readonly loop: boolean;
|
|
170
|
+
readonly rtl: boolean;
|
|
171
|
+
readonly virtualFocus: boolean;
|
|
172
|
+
}, Schema.SchemaError, never, never>, never, Scope.Scope>;
|
|
173
|
+
/**
|
|
174
|
+
* Creates a scoped Collection for Listbox items.
|
|
175
|
+
*
|
|
176
|
+
* @remarks
|
|
177
|
+
* ## Why
|
|
178
|
+
*
|
|
179
|
+
* State and collection ownership can be composed and tested independently from any renderer.
|
|
180
|
+
*
|
|
181
|
+
* ## Ownership and lifetime
|
|
182
|
+
*
|
|
183
|
+
* The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
|
|
184
|
+
* owned by the Scope that runs register, independently of this construction Effect.
|
|
185
|
+
*
|
|
186
|
+
* @example
|
|
187
|
+
* ```ts
|
|
188
|
+
* import * as Effect from "effect/Effect";
|
|
189
|
+
* import * as Listbox from "@typed/ui/Listbox";
|
|
190
|
+
*
|
|
191
|
+
* const program = Effect.scoped(
|
|
192
|
+
* Effect.gen(function* () {
|
|
193
|
+
* const collection = yield* Listbox.makeCollection();
|
|
194
|
+
* return yield* collection;
|
|
195
|
+
* }),
|
|
196
|
+
* );
|
|
197
|
+
* ```
|
|
198
|
+
* @since 1.0.0
|
|
199
|
+
* @category constructors
|
|
200
|
+
*/
|
|
201
|
+
export declare const makeCollection: (initial?: Collection.State<string, Element>) => Effect.Effect<RefSubject.RefSubject<Collection.State<string, Element>, never, never>, never, Scope.Scope>;
|
|
202
|
+
/**
|
|
203
|
+
* Sets both activeId and selected value in one update.
|
|
204
|
+
*
|
|
205
|
+
* @remarks
|
|
206
|
+
* ## Why
|
|
207
|
+
*
|
|
208
|
+
* The operation exposes Listbox's transition directly so callers can compose it in Effect programs
|
|
209
|
+
* and native event handlers.
|
|
210
|
+
*
|
|
211
|
+
* ## Ownership and lifetime
|
|
212
|
+
*
|
|
213
|
+
* The returned Effect performs the update or DOM side effect only when run, preserves the declared
|
|
214
|
+
* error and service channels, and retains no resources after completion.
|
|
215
|
+
*
|
|
216
|
+
* ## Example
|
|
217
|
+
*
|
|
218
|
+
* Import with `import { select } from "@typed/ui/Listbox";` Extend the [Listbox.makeState runnable
|
|
219
|
+
* setup](/reference/%40typed%2Fui%2FListbox%23makeState). Inside the linked Effect program invoke
|
|
220
|
+
* `yield* select(state, "nyc", "New York")`, then read state to observe selection and active focus
|
|
221
|
+
* update together.
|
|
222
|
+
* @since 1.0.0
|
|
223
|
+
* @category combinators
|
|
224
|
+
*/
|
|
225
|
+
export declare function select<E, R>(state: RefSubject.RefSubject<State, E, R>, id: string, value: string): Effect.Effect<State, E, R>;
|
|
226
|
+
/**
|
|
227
|
+
* Moves through the registered options, synchronizes value when the target has one, then focuses
|
|
228
|
+
* and scrolls the active option.
|
|
229
|
+
*
|
|
230
|
+
* @remarks
|
|
231
|
+
* ## Why
|
|
232
|
+
*
|
|
233
|
+
* The operation exposes Listbox's transition directly so callers can compose it in Effect programs
|
|
234
|
+
* and native event handlers.
|
|
235
|
+
*
|
|
236
|
+
* ## Ownership and lifetime
|
|
237
|
+
*
|
|
238
|
+
* The returned Effect performs the update or DOM side effect only when run, preserves the declared
|
|
239
|
+
* error and service channels, and retains no resources after completion.
|
|
240
|
+
*
|
|
241
|
+
* ## Example
|
|
242
|
+
*
|
|
243
|
+
* Import with `import { move } from "@typed/ui/Listbox";` Extend the [Listbox.makeState runnable
|
|
244
|
+
* setup](/reference/%40typed%2Fui%2FListbox%23makeState). Inside the linked Effect program invoke
|
|
245
|
+
* `yield* move(state, collection, "next")`, then read the state snapshot to observe the transition
|
|
246
|
+
* described above.
|
|
247
|
+
* @since 1.0.0
|
|
248
|
+
* @category combinators
|
|
249
|
+
*/
|
|
250
|
+
export declare function move(state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>, collection: RefSubject.RefSubject<Collection.State<string>>, direction: Composite.Move): Effect.Effect<State, Schema.SchemaError>;
|
|
251
|
+
/**
|
|
252
|
+
* Inputs accepted by Listbox.Root in addition to the shared DOM host options.
|
|
253
|
+
*
|
|
254
|
+
* @remarks
|
|
255
|
+
* ## Why
|
|
256
|
+
*
|
|
257
|
+
* The options type makes required state, content, accessible relationships, and custom-host inputs
|
|
258
|
+
* visible before rendering.
|
|
259
|
+
*
|
|
260
|
+
* ## Ownership and lifetime
|
|
261
|
+
*
|
|
262
|
+
* This declaration is data or schema metadata and acquires no resources.
|
|
263
|
+
*
|
|
264
|
+
* ## Example
|
|
265
|
+
*
|
|
266
|
+
* Import with `import type { RootOptions } from "@typed/ui/Listbox";` Extend the [Listbox.makeState
|
|
267
|
+
* runnable setup](/reference/%40typed%2Fui%2FListbox%23makeState). Enable collection-driven focus
|
|
268
|
+
* with `const options: RootOptions = { state, collection, label: "City", content: "Options" }`.
|
|
269
|
+
* @since 1.0.0
|
|
270
|
+
* @category models
|
|
271
|
+
*/
|
|
272
|
+
export interface RootOptions extends Dom.HostOptions<HTMLDivElement> {
|
|
273
|
+
/**
|
|
274
|
+
* Renderer-independent RefSubject state consumed by this component or operation.
|
|
275
|
+
* @since 1.0.0
|
|
276
|
+
* @category models
|
|
277
|
+
*/
|
|
278
|
+
readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
|
|
279
|
+
/**
|
|
280
|
+
* Item registry used for collection-driven keyboard behavior and mounted ordering.
|
|
281
|
+
* @since 1.0.0
|
|
282
|
+
* @category models
|
|
283
|
+
*/
|
|
284
|
+
readonly collection?: RefSubject.RefSubject<Collection.State<string>>;
|
|
285
|
+
/**
|
|
286
|
+
* Renderable child content for the component host.
|
|
287
|
+
* @since 1.0.0
|
|
288
|
+
* @category models
|
|
289
|
+
*/
|
|
290
|
+
readonly content: Renderable.Any;
|
|
291
|
+
/**
|
|
292
|
+
* Accessible label rendered through aria-label.
|
|
293
|
+
* @since 1.0.0
|
|
294
|
+
* @category models
|
|
295
|
+
*/
|
|
296
|
+
readonly label?: Renderable.Any<string | null | undefined>;
|
|
297
|
+
}
|
|
298
|
+
declare function rootProps<const Options extends RootOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
|
|
299
|
+
readonly role: "listbox";
|
|
300
|
+
readonly "aria-label": Exclude<Dom.Property<Options, "label">, Dom.Nullish> | undefined;
|
|
301
|
+
readonly "aria-activedescendant": RefSubject.Computed<string | undefined, Schema.SchemaError, never>;
|
|
302
|
+
readonly tabindex: RefSubject.Computed<-1 | 0, Schema.SchemaError, never>;
|
|
303
|
+
readonly onfocus: Effect.Effect<void, Schema.SchemaError, never> | undefined;
|
|
304
|
+
readonly onkeydown: EventHandler.EventHandler<KeyboardEvent, Schema.SchemaError, never> | undefined;
|
|
305
|
+
readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
|
|
306
|
+
};
|
|
307
|
+
type RootProps<Options extends RootOptions> = ReturnType<ReturnType<typeof rootProps<Options>>>;
|
|
308
|
+
/**
|
|
309
|
+
* Renders the listbox root, initializes selection on focus, and handles vertical movement and
|
|
310
|
+
* typeahead in DOM order.
|
|
311
|
+
*
|
|
312
|
+
* @remarks
|
|
313
|
+
* ## Why
|
|
314
|
+
*
|
|
315
|
+
* The component applies the family behavior while leaving callers free to supply a custom host
|
|
316
|
+
* through the shared DOM boundary.
|
|
317
|
+
*
|
|
318
|
+
* ## Ownership and lifetime
|
|
319
|
+
*
|
|
320
|
+
* The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
|
|
321
|
+
* collection registrations only when rendered. The rendering Scope removes those resources;
|
|
322
|
+
* unrelated nodes and attributes remain caller-owned.
|
|
323
|
+
*
|
|
324
|
+
* ## Example
|
|
325
|
+
*
|
|
326
|
+
* Import with `import { Root } from "@typed/ui/Listbox";` Extend the [Listbox.makeState runnable
|
|
327
|
+
* setup](/reference/%40typed%2Fui%2FListbox%23makeState). Replace the linked program's final
|
|
328
|
+
* snapshot read with `Root({ state, label: "City", content: "Options" })`; render that Fx before
|
|
329
|
+
* the same Scope closes.
|
|
330
|
+
* @since 1.0.0
|
|
331
|
+
* @category components
|
|
332
|
+
*/
|
|
333
|
+
export declare function Root<const Options extends RootOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, RootProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
|
|
334
|
+
/**
|
|
335
|
+
* Inputs accepted by Listbox.Option in addition to the shared DOM host options.
|
|
336
|
+
*
|
|
337
|
+
* @remarks
|
|
338
|
+
* ## Why
|
|
339
|
+
*
|
|
340
|
+
* The options type makes required state, content, accessible relationships, and custom-host inputs
|
|
341
|
+
* visible before rendering.
|
|
342
|
+
*
|
|
343
|
+
* ## Ownership and lifetime
|
|
344
|
+
*
|
|
345
|
+
* This declaration is data or schema metadata and acquires no resources.
|
|
346
|
+
*
|
|
347
|
+
* ## Example
|
|
348
|
+
*
|
|
349
|
+
* Import with `import type { OptionOptions } from "@typed/ui/Listbox";` Extend the
|
|
350
|
+
* [Listbox.makeState runnable setup](/reference/%40typed%2Fui%2FListbox%23makeState). A selectable
|
|
351
|
+
* option is
|
|
352
|
+
* `const options: OptionOptions = { state, collection, id: "nyc", value: "New York", content: "New York" }`.
|
|
353
|
+
* @since 1.0.0
|
|
354
|
+
* @category models
|
|
355
|
+
*/
|
|
356
|
+
export interface OptionOptions extends Dom.HostOptions<HTMLDivElement> {
|
|
357
|
+
/**
|
|
358
|
+
* Renderer-independent RefSubject state consumed by this component or operation.
|
|
359
|
+
* @since 1.0.0
|
|
360
|
+
* @category models
|
|
361
|
+
*/
|
|
362
|
+
readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
|
|
363
|
+
/**
|
|
364
|
+
* Item registry used for collection-driven keyboard behavior and mounted ordering.
|
|
365
|
+
* @since 1.0.0
|
|
366
|
+
* @category models
|
|
367
|
+
*/
|
|
368
|
+
readonly collection?: RefSubject.RefSubject<Collection.State<string>>;
|
|
369
|
+
/**
|
|
370
|
+
* Stable id used for collection identity and ARIA relationships.
|
|
371
|
+
* @since 1.0.0
|
|
372
|
+
* @category models
|
|
373
|
+
*/
|
|
374
|
+
readonly id: string;
|
|
375
|
+
/**
|
|
376
|
+
* Current semantic value selected or edited by the widget.
|
|
377
|
+
* @since 1.0.0
|
|
378
|
+
* @category models
|
|
379
|
+
*/
|
|
380
|
+
readonly value: string;
|
|
381
|
+
/**
|
|
382
|
+
* Renderable child content for the component host.
|
|
383
|
+
* @since 1.0.0
|
|
384
|
+
* @category models
|
|
385
|
+
*/
|
|
386
|
+
readonly content: Renderable.Any;
|
|
387
|
+
/**
|
|
388
|
+
* Search text used by typeahead independently of rendered markup.
|
|
389
|
+
* @since 1.0.0
|
|
390
|
+
* @category models
|
|
391
|
+
*/
|
|
392
|
+
readonly textValue?: string;
|
|
393
|
+
/**
|
|
394
|
+
* Flag used by collection movement and widget handlers to skip activation by default.
|
|
395
|
+
* @since 1.0.0
|
|
396
|
+
* @category models
|
|
397
|
+
*/
|
|
398
|
+
readonly disabled?: boolean;
|
|
399
|
+
}
|
|
400
|
+
declare function optionProps<const Options extends OptionOptions>(options: Options): () => {
|
|
401
|
+
readonly id: string;
|
|
402
|
+
readonly role: "option";
|
|
403
|
+
readonly "aria-selected": RefSubject.Computed<boolean, Schema.SchemaError, never>;
|
|
404
|
+
readonly "aria-disabled": boolean;
|
|
405
|
+
readonly tabindex: RefSubject.Computed<-1 | 0, Schema.SchemaError, never>;
|
|
406
|
+
readonly onclick: Effect.Effect<void, never, never> | Effect.Effect<State, Schema.SchemaError, never>;
|
|
407
|
+
readonly onfocus: Effect.Effect<void, never, never> | Effect.Effect<State, Schema.SchemaError, never>;
|
|
408
|
+
readonly ref: ((element: Element & HTMLDivElement & RefSubject.HydrationElement) => Effect.Effect<void, any, any>) | undefined;
|
|
409
|
+
};
|
|
410
|
+
type OptionProps<Options extends OptionOptions> = ReturnType<ReturnType<typeof optionProps<Options>>>;
|
|
411
|
+
/**
|
|
412
|
+
* Renders and optionally registers an option; focus or click selects it unless disabled.
|
|
413
|
+
*
|
|
414
|
+
* @remarks
|
|
415
|
+
* ## Why
|
|
416
|
+
*
|
|
417
|
+
* The component applies the family behavior while leaving callers free to supply a custom host
|
|
418
|
+
* through the shared DOM boundary.
|
|
419
|
+
*
|
|
420
|
+
* ## Ownership and lifetime
|
|
421
|
+
*
|
|
422
|
+
* The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
|
|
423
|
+
* collection registrations only when rendered. The rendering Scope removes those resources;
|
|
424
|
+
* unrelated nodes and attributes remain caller-owned.
|
|
425
|
+
*
|
|
426
|
+
* ## Example
|
|
427
|
+
*
|
|
428
|
+
* Import with `import { Option } from "@typed/ui/Listbox";` Extend the [Listbox.makeState runnable
|
|
429
|
+
* setup](/reference/%40typed%2Fui%2FListbox%23makeState). Replace the linked program's final
|
|
430
|
+
* snapshot read with `Option({ state, id: "nyc", value: "New York", content: "New York" })`; render
|
|
431
|
+
* that Fx before the same Scope closes.
|
|
432
|
+
* @since 1.0.0
|
|
433
|
+
* @category components
|
|
434
|
+
*/
|
|
435
|
+
export declare function Option<const Options extends OptionOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, OptionProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
|
|
436
|
+
export {};
|
|
437
|
+
//# sourceMappingURL=Listbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../src/Listbox.ts"],"names":[],"mappings":"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"}
|