@typed/ui 1.0.0-beta.0 → 1.0.0-beta.10
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/LICENSE +21 -0
- package/README.md +78 -26
- package/dist/Alert.d.ts +72 -0
- package/dist/Alert.d.ts.map +1 -0
- package/dist/Alert.js +40 -0
- package/dist/Button.d.ts +100 -0
- package/dist/Button.d.ts.map +1 -0
- package/dist/Button.js +42 -0
- package/dist/Carousel.d.ts +346 -0
- package/dist/Carousel.d.ts.map +1 -0
- package/dist/Carousel.js +264 -0
- package/dist/Checkbox.d.ts +168 -0
- package/dist/Checkbox.d.ts.map +1 -0
- package/dist/Checkbox.js +146 -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 +367 -0
- package/dist/Combobox.d.ts.map +1 -0
- package/dist/Combobox.js +300 -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 +357 -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 +1727 -0
- package/dist/Form.d.ts.map +1 -0
- package/dist/Form.js +1142 -0
- package/dist/Grid.d.ts +388 -0
- package/dist/Grid.d.ts.map +1 -0
- package/dist/Grid.js +284 -0
- package/dist/Group.d.ts +128 -0
- package/dist/Group.d.ts.map +1 -0
- package/dist/Group.js +71 -0
- package/dist/Heading.d.ts +87 -0
- package/dist/Heading.d.ts.map +1 -0
- package/dist/Heading.js +58 -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 +199 -56
- package/dist/Link.d.ts +63 -28
- package/dist/Link.d.ts.map +1 -1
- package/dist/Link.js +84 -37
- package/dist/Listbox.d.ts +305 -0
- package/dist/Listbox.d.ts.map +1 -0
- package/dist/Listbox.js +245 -0
- package/dist/Menu.d.ts +663 -0
- package/dist/Menu.d.ts.map +1 -0
- package/dist/Menu.js +569 -0
- package/dist/Menubar.d.ts +249 -0
- package/dist/Menubar.d.ts.map +1 -0
- package/dist/Menubar.js +207 -0
- package/dist/Meter.d.ts +157 -0
- package/dist/Meter.d.ts.map +1 -0
- package/dist/Meter.js +87 -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 +66 -0
- package/dist/NativeDialog.d.ts.map +1 -0
- package/dist/NativeDialog.js +88 -0
- package/dist/NativePopover.d.ts +43 -0
- package/dist/NativePopover.d.ts.map +1 -0
- package/dist/NativePopover.js +84 -0
- package/dist/Popover.d.ts +240 -0
- package/dist/Popover.d.ts.map +1 -0
- package/dist/Popover.js +140 -0
- package/dist/RadioGroup.d.ts +330 -0
- package/dist/RadioGroup.d.ts.map +1 -0
- package/dist/RadioGroup.js +241 -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 +418 -0
- package/dist/Select.d.ts.map +1 -0
- package/dist/Select.js +357 -0
- package/dist/Separator.d.ts +58 -0
- package/dist/Separator.d.ts.map +1 -0
- package/dist/Separator.js +32 -0
- package/dist/Slider.d.ts +141 -0
- package/dist/Slider.d.ts.map +1 -0
- package/dist/Slider.js +101 -0
- package/dist/SpinButton.d.ts +141 -0
- package/dist/SpinButton.d.ts.map +1 -0
- package/dist/SpinButton.js +101 -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 +148 -0
- package/dist/Switch.d.ts.map +1 -0
- package/dist/Switch.js +110 -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 +411 -0
- package/dist/Tabs.d.ts.map +1 -0
- package/dist/Tabs.js +262 -0
- package/dist/Toolbar.d.ts +248 -0
- package/dist/Toolbar.d.ts.map +1 -0
- package/dist/Toolbar.js +187 -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 +405 -0
- package/dist/Tree.d.ts.map +1 -0
- package/dist/Tree.js +333 -0
- package/dist/TreeGrid.d.ts +426 -0
- package/dist/TreeGrid.d.ts.map +1 -0
- package/dist/TreeGrid.js +308 -0
- package/dist/VisuallyHidden.d.ts +68 -0
- package/dist/VisuallyHidden.d.ts.map +1 -0
- package/dist/VisuallyHidden.js +44 -0
- package/dist/WindowSplitter.d.ts +336 -0
- package/dist/WindowSplitter.d.ts.map +1 -0
- package/dist/WindowSplitter.js +305 -0
- package/dist/index.d.ts +48 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +48 -0
- package/package.json +47 -14
- package/src/HttpRouter.test.ts +0 -294
- package/src/HttpRouter.ts +0 -168
- package/src/Link.test.ts +0 -85
- package/src/Link.ts +0 -107
- package/src/index.ts +0 -2
- package/tsconfig.json +0 -6
package/dist/Tabs.js
ADDED
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tabs separates active focus from selected tab and supports automatic or manual activation. List
|
|
3
|
+
* handles orientation-aware movement; Tab publishes stable aria-controls state; Panel retains its
|
|
4
|
+
* node while hidden.
|
|
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
|
+
* Learn the interaction in the [Tabs guide](/explore/ui-tabs).
|
|
12
|
+
*
|
|
13
|
+
* @since 1.0.0
|
|
14
|
+
* @category modules
|
|
15
|
+
* @packageDocumentation
|
|
16
|
+
*/
|
|
17
|
+
import * as Effect from "effect/Effect";
|
|
18
|
+
import * as Schema from "effect/Schema";
|
|
19
|
+
import { RefSubject } from "@typed/fx";
|
|
20
|
+
import { EventHandler, html, } 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
|
+
/**
|
|
25
|
+
* Effect Schema used by makeState to encode, decode, and hydrate Tabs state.
|
|
26
|
+
*
|
|
27
|
+
* @remarks
|
|
28
|
+
* @example
|
|
29
|
+
* ```ts
|
|
30
|
+
* import * as Schema from "effect/Schema";
|
|
31
|
+
* import * as Tabs from "@typed/ui/Tabs";
|
|
32
|
+
*
|
|
33
|
+
* const decodeState = Schema.decodeUnknownEffect(Tabs.StateSchema);
|
|
34
|
+
* ```
|
|
35
|
+
* @since 1.0.0
|
|
36
|
+
* @category Selection and focus
|
|
37
|
+
*/
|
|
38
|
+
export const StateSchema = Schema.Struct({
|
|
39
|
+
selectedId: Schema.String,
|
|
40
|
+
activeId: Schema.String,
|
|
41
|
+
activationMode: Schema.Literals(["automatic", "manual"]),
|
|
42
|
+
orientation: Schema.Literals(["horizontal", "vertical"]),
|
|
43
|
+
loop: Schema.Boolean,
|
|
44
|
+
rtl: Schema.Boolean,
|
|
45
|
+
virtualFocus: Schema.Boolean,
|
|
46
|
+
});
|
|
47
|
+
/**
|
|
48
|
+
* Creates hydrated Tabs state. The caller supplies value; activeId defaults to value, activation
|
|
49
|
+
* is automatic, orientation horizontal, and loop true.
|
|
50
|
+
*
|
|
51
|
+
* @remarks
|
|
52
|
+
* The returned Effect creates the RefSubject when run. That state is renderer-independent;
|
|
53
|
+
* collection registrations belong to the separate Scope that runs register or ref, not to state
|
|
54
|
+
* creation.
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```ts
|
|
58
|
+
* import * as Effect from "effect/Effect";
|
|
59
|
+
* import * as Tabs from "@typed/ui/Tabs";
|
|
60
|
+
*
|
|
61
|
+
* const program = Effect.scoped(
|
|
62
|
+
* Effect.gen(function* () {
|
|
63
|
+
* const state = yield* Tabs.makeState({ selectedId: "overview" });
|
|
64
|
+
* const collection = yield* Tabs.makeCollection();
|
|
65
|
+
* return { state: yield* state, collection: yield* collection };
|
|
66
|
+
* }),
|
|
67
|
+
* );
|
|
68
|
+
* ```
|
|
69
|
+
* @since 1.0.0
|
|
70
|
+
* @category Selection and focus
|
|
71
|
+
*/
|
|
72
|
+
export function makeState(initial) {
|
|
73
|
+
return RefSubject.hydrate(StateSchema, {
|
|
74
|
+
selectedId: initial.selectedId,
|
|
75
|
+
activeId: initial.activeId ?? initial.selectedId,
|
|
76
|
+
activationMode: initial.activationMode ?? "automatic",
|
|
77
|
+
orientation: initial.orientation ?? "horizontal",
|
|
78
|
+
loop: initial.loop ?? true,
|
|
79
|
+
rtl: initial.rtl ?? false,
|
|
80
|
+
virtualFocus: false,
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Creates a scoped Collection for Tabs items.
|
|
85
|
+
*
|
|
86
|
+
* @remarks
|
|
87
|
+
* The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
|
|
88
|
+
* owned by the Scope that runs register, independently of this construction Effect.
|
|
89
|
+
*
|
|
90
|
+
* @example
|
|
91
|
+
* ```ts
|
|
92
|
+
* import * as Effect from "effect/Effect";
|
|
93
|
+
* import * as Tabs from "@typed/ui/Tabs";
|
|
94
|
+
*
|
|
95
|
+
* const program = Effect.scoped(
|
|
96
|
+
* Effect.gen(function* () {
|
|
97
|
+
* const collection = yield* Tabs.makeCollection();
|
|
98
|
+
* return yield* collection;
|
|
99
|
+
* }),
|
|
100
|
+
* );
|
|
101
|
+
* ```
|
|
102
|
+
* @since 1.0.0
|
|
103
|
+
* @category Tab registration
|
|
104
|
+
*/
|
|
105
|
+
export const makeCollection = Collection.makeState;
|
|
106
|
+
/**
|
|
107
|
+
* Selects a tab and makes it the active roving-focus item.
|
|
108
|
+
*
|
|
109
|
+
* @remarks
|
|
110
|
+
* The operation exposes Tabs's transition directly so callers can compose it in Effect programs
|
|
111
|
+
* and native event handlers.
|
|
112
|
+
*
|
|
113
|
+
* @since 1.0.0
|
|
114
|
+
* @category Panel activation
|
|
115
|
+
*/
|
|
116
|
+
export function select(state, selectedId) {
|
|
117
|
+
return RefSubject.update(state, (current) => ({ ...current, activeId: selectedId, selectedId }));
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Moves activeId through registered tabs without selecting under manual activation.
|
|
121
|
+
*
|
|
122
|
+
* @remarks
|
|
123
|
+
* The operation exposes Tabs's transition directly so callers can compose it in Effect programs
|
|
124
|
+
* and native event handlers.
|
|
125
|
+
*
|
|
126
|
+
* @since 1.0.0
|
|
127
|
+
* @category Tab navigation
|
|
128
|
+
*/
|
|
129
|
+
export function move(state, items, direction) {
|
|
130
|
+
return Effect.gen(function* () {
|
|
131
|
+
const current = yield* state;
|
|
132
|
+
const activeId = Composite.moveActiveId(items, current, direction);
|
|
133
|
+
if (activeId === null)
|
|
134
|
+
return current;
|
|
135
|
+
return yield* RefSubject.update(state, (value) => ({
|
|
136
|
+
...value,
|
|
137
|
+
activeId,
|
|
138
|
+
selectedId: value.activationMode === "automatic" ? activeId : value.selectedId,
|
|
139
|
+
}));
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
function moveAndFocus(state, collection, direction) {
|
|
143
|
+
return Effect.gen(function* () {
|
|
144
|
+
const next = yield* move(state, yield* collection, direction);
|
|
145
|
+
yield* Composite.focusActive({ state, collection });
|
|
146
|
+
yield* Composite.scrollActive({ state, collection });
|
|
147
|
+
return next;
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
function listInternalProps(options) {
|
|
151
|
+
const orientation = RefSubject.map(options.state, (state) => state.orientation);
|
|
152
|
+
const onkeydown = options.collection === undefined && options.items === undefined
|
|
153
|
+
? undefined
|
|
154
|
+
: EventHandler.make(Effect.fn(function* (event) {
|
|
155
|
+
const direction = Composite.keyMove(event, yield* options.state);
|
|
156
|
+
if (direction !== undefined) {
|
|
157
|
+
event.preventDefault();
|
|
158
|
+
if (options.collection !== undefined) {
|
|
159
|
+
yield* moveAndFocus(options.state, options.collection, direction);
|
|
160
|
+
}
|
|
161
|
+
else {
|
|
162
|
+
yield* move(options.state, options.items, direction);
|
|
163
|
+
}
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
if ((event.key === "Enter" || event.key === " ") &&
|
|
167
|
+
(yield* options.state).activationMode === "manual") {
|
|
168
|
+
event.preventDefault();
|
|
169
|
+
yield* select(options.state, (yield* options.state).activeId);
|
|
170
|
+
}
|
|
171
|
+
}));
|
|
172
|
+
return ({ property }) => ({
|
|
173
|
+
role: "tablist",
|
|
174
|
+
"aria-label": property("label", undefined),
|
|
175
|
+
"aria-orientation": orientation,
|
|
176
|
+
onkeydown,
|
|
177
|
+
ref: options.state,
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Renders the tablist and applies orientation-aware movement plus Enter/Space activation in manual
|
|
182
|
+
* mode.
|
|
183
|
+
*
|
|
184
|
+
* @remarks
|
|
185
|
+
* The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
|
|
186
|
+
* collection registrations only when rendered. The rendering Scope removes those resources;
|
|
187
|
+
* unrelated nodes and attributes remain caller-owned.
|
|
188
|
+
*
|
|
189
|
+
* @since 1.0.0
|
|
190
|
+
* @category Tab list
|
|
191
|
+
*/
|
|
192
|
+
export function List(options, host) {
|
|
193
|
+
return Dom.renderHost()(options, host, listInternalProps(options), options.content, (props, content) => {
|
|
194
|
+
return html `<div ...${props}>${content}</div>`;
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
function tabInternalProps(options) {
|
|
198
|
+
const selected = RefSubject.map(options.state, (state) => state.selectedId === options.id);
|
|
199
|
+
const register = options.collection === undefined
|
|
200
|
+
? undefined
|
|
201
|
+
: Collection.ref(options.collection, {
|
|
202
|
+
id: options.id,
|
|
203
|
+
value: options.id,
|
|
204
|
+
textValue: options.id,
|
|
205
|
+
disabled: options.disabled,
|
|
206
|
+
});
|
|
207
|
+
return () => ({
|
|
208
|
+
id: options.id,
|
|
209
|
+
type: "button",
|
|
210
|
+
role: "tab",
|
|
211
|
+
"aria-controls": options.panelId,
|
|
212
|
+
"aria-selected": selected,
|
|
213
|
+
"aria-disabled": options.disabled ?? false,
|
|
214
|
+
tabindex: Composite.tabIndex(options.state, options.id),
|
|
215
|
+
onclick: options.disabled === true ? Effect.void : select(options.state, options.id),
|
|
216
|
+
onfocus: options.disabled === true
|
|
217
|
+
? Effect.void
|
|
218
|
+
: RefSubject.update(options.state, (state) => state.activationMode === "automatic"
|
|
219
|
+
? { ...state, activeId: options.id, selectedId: options.id }
|
|
220
|
+
: { ...state, activeId: options.id }),
|
|
221
|
+
ref: Dom.composeRefs(register, options.ref),
|
|
222
|
+
});
|
|
223
|
+
}
|
|
224
|
+
/**
|
|
225
|
+
* Renders and optionally registers a tab with stable aria-controls, selected state, and roving
|
|
226
|
+
* tabindex.
|
|
227
|
+
*
|
|
228
|
+
* @remarks
|
|
229
|
+
* The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
|
|
230
|
+
* collection registrations only when rendered. The rendering Scope removes those resources;
|
|
231
|
+
* unrelated nodes and attributes remain caller-owned.
|
|
232
|
+
*
|
|
233
|
+
* @since 1.0.0
|
|
234
|
+
* @category Tab controls
|
|
235
|
+
*/
|
|
236
|
+
export function Tab(options, host) {
|
|
237
|
+
return Dom.renderHost()(options, host, tabInternalProps(options), options.content, (props, content) => html `<button ...${props}>${content}</button>`);
|
|
238
|
+
}
|
|
239
|
+
function panelInternalProps(options) {
|
|
240
|
+
const selected = RefSubject.map(options.state, (state) => state.selectedId === options.tabId);
|
|
241
|
+
return () => ({
|
|
242
|
+
id: options.id,
|
|
243
|
+
role: "tabpanel",
|
|
244
|
+
"aria-labelledby": options.tabId,
|
|
245
|
+
tabindex: 0,
|
|
246
|
+
"?hidden": RefSubject.map(selected, (value) => !value),
|
|
247
|
+
});
|
|
248
|
+
}
|
|
249
|
+
/**
|
|
250
|
+
* Renders a labelled tabpanel and hides it reactively when its tab is not selected.
|
|
251
|
+
*
|
|
252
|
+
* @remarks
|
|
253
|
+
* The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
|
|
254
|
+
* collection registrations only when rendered. The rendering Scope removes those resources;
|
|
255
|
+
* unrelated nodes and attributes remain caller-owned.
|
|
256
|
+
*
|
|
257
|
+
* @since 1.0.0
|
|
258
|
+
* @category Panel visibility
|
|
259
|
+
*/
|
|
260
|
+
export function Panel(options, host) {
|
|
261
|
+
return Dom.renderHost()(options, host, panelInternalProps(options), options.content, (props, content) => html `<div ...${props}>${content}</div>`);
|
|
262
|
+
}
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Toolbar is a roving-focus composite with toolbar and button roles. Orientation and RTL control
|
|
3
|
+
* Arrow-key order; Home and End select the document-order endpoints.
|
|
4
|
+
*
|
|
5
|
+
* @remarks
|
|
6
|
+
* The module keeps policy, state transitions, and DOM rendering separable so applications can use
|
|
7
|
+
* the state and pure operations without mounting UI, or supply custom hosts without replacing native
|
|
8
|
+
* events and browser-owned focus.
|
|
9
|
+
*
|
|
10
|
+
* Learn the interaction in the [Toolbar guide](/explore/ui-toolbar).
|
|
11
|
+
*
|
|
12
|
+
* @since 1.0.0
|
|
13
|
+
* @category modules
|
|
14
|
+
* @packageDocumentation
|
|
15
|
+
*/
|
|
16
|
+
import * as Effect from "effect/Effect";
|
|
17
|
+
import type * as Scope from "effect/Scope";
|
|
18
|
+
import * as Schema from "effect/Schema";
|
|
19
|
+
import type { Fx } from "@typed/fx/Fx";
|
|
20
|
+
import { RefSubject } from "@typed/fx";
|
|
21
|
+
import { EventHandler, type Renderable, type RenderEvent, type RenderTemplate } from "@typed/template";
|
|
22
|
+
import * as Collection from "./Collection.js";
|
|
23
|
+
import * as Composite from "./Composite.js";
|
|
24
|
+
import * as Dom from "./Dom.js";
|
|
25
|
+
import type { HostResult } from "./Dom/Types.js";
|
|
26
|
+
/**
|
|
27
|
+
* The active command and arrow-navigation policy.
|
|
28
|
+
* Formatting preferences such as bold or italic are separate application state.
|
|
29
|
+
*
|
|
30
|
+
* @since 1.0.0
|
|
31
|
+
* @category Command focus
|
|
32
|
+
*/
|
|
33
|
+
export interface State extends Composite.State {
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Initial Toolbar values. Uses Composite defaults unless overridden.
|
|
37
|
+
*
|
|
38
|
+
* @since 1.0.0
|
|
39
|
+
* @category Command focus
|
|
40
|
+
*/
|
|
41
|
+
export type InitialState = Composite.InitialState;
|
|
42
|
+
/**
|
|
43
|
+
* Effect Schema used by makeState to encode, decode, and hydrate Toolbar state.
|
|
44
|
+
*
|
|
45
|
+
* @remarks
|
|
46
|
+
* @example
|
|
47
|
+
* ```ts
|
|
48
|
+
* import * as Schema from "effect/Schema";
|
|
49
|
+
* import * as Toolbar from "@typed/ui/Toolbar";
|
|
50
|
+
*
|
|
51
|
+
* const decodeState = Schema.decodeUnknownEffect(Toolbar.StateSchema);
|
|
52
|
+
* ```
|
|
53
|
+
* @since 1.0.0
|
|
54
|
+
* @category Command focus
|
|
55
|
+
*/
|
|
56
|
+
export declare const StateSchema: Schema.Struct<{
|
|
57
|
+
readonly activeId: Schema.NullOr<Schema.String>;
|
|
58
|
+
readonly orientation: Schema.Literals<readonly ["horizontal", "vertical", "both"]>;
|
|
59
|
+
readonly loop: Schema.Boolean;
|
|
60
|
+
readonly rtl: Schema.Boolean;
|
|
61
|
+
readonly virtualFocus: Schema.Boolean;
|
|
62
|
+
}>;
|
|
63
|
+
/**
|
|
64
|
+
* Creates hydrated Toolbar state. Uses Composite defaults unless overridden.
|
|
65
|
+
*
|
|
66
|
+
* @remarks
|
|
67
|
+
* The returned Effect creates the RefSubject when run. That state is renderer-independent;
|
|
68
|
+
* collection registrations belong to the separate Scope that runs register or ref, not to state
|
|
69
|
+
* creation.
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* ```ts
|
|
73
|
+
* import * as Effect from "effect/Effect";
|
|
74
|
+
* import * as Toolbar from "@typed/ui/Toolbar";
|
|
75
|
+
*
|
|
76
|
+
* const program = Effect.scoped(
|
|
77
|
+
* Effect.gen(function* () {
|
|
78
|
+
* const state = yield* Toolbar.makeState({});
|
|
79
|
+
* const collection = yield* Toolbar.makeCollection();
|
|
80
|
+
* return { state: yield* state, collection: yield* collection };
|
|
81
|
+
* }),
|
|
82
|
+
* );
|
|
83
|
+
* ```
|
|
84
|
+
* @since 1.0.0
|
|
85
|
+
* @category Command focus
|
|
86
|
+
*/
|
|
87
|
+
export declare function makeState(initial?: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
|
|
88
|
+
readonly activeId: string | null;
|
|
89
|
+
readonly orientation: "both" | "horizontal" | "vertical";
|
|
90
|
+
readonly loop: boolean;
|
|
91
|
+
readonly rtl: boolean;
|
|
92
|
+
readonly virtualFocus: boolean;
|
|
93
|
+
}, Schema.SchemaError, never, never>, never, Scope.Scope>;
|
|
94
|
+
/**
|
|
95
|
+
* Creates a scoped Collection for Toolbar items.
|
|
96
|
+
*
|
|
97
|
+
* @remarks
|
|
98
|
+
* The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
|
|
99
|
+
* owned by the Scope that runs register, independently of this construction Effect.
|
|
100
|
+
*
|
|
101
|
+
* @example
|
|
102
|
+
* ```ts
|
|
103
|
+
* import * as Effect from "effect/Effect";
|
|
104
|
+
* import * as Toolbar from "@typed/ui/Toolbar";
|
|
105
|
+
*
|
|
106
|
+
* const program = Effect.scoped(
|
|
107
|
+
* Effect.gen(function* () {
|
|
108
|
+
* const collection = yield* Toolbar.makeCollection();
|
|
109
|
+
* return yield* collection;
|
|
110
|
+
* }),
|
|
111
|
+
* );
|
|
112
|
+
* ```
|
|
113
|
+
* @since 1.0.0
|
|
114
|
+
* @category Command registration
|
|
115
|
+
*/
|
|
116
|
+
export declare const makeCollection: (initial?: Collection.State<string, Element>) => Effect.Effect<RefSubject.RefSubject<Collection.State<string, Element>, never, never>, never, Scope.Scope>;
|
|
117
|
+
/**
|
|
118
|
+
* Inputs accepted by Toolbar.Root in addition to the shared DOM host options.
|
|
119
|
+
*
|
|
120
|
+
* @since 1.0.0
|
|
121
|
+
* @category Toolbar surface
|
|
122
|
+
*/
|
|
123
|
+
export interface RootOptions extends Dom.HostOptions<HTMLDivElement> {
|
|
124
|
+
/**
|
|
125
|
+
* Renderer-independent RefSubject state consumed by this component or operation.
|
|
126
|
+
* @since 1.0.0
|
|
127
|
+
* @category State connection
|
|
128
|
+
*/
|
|
129
|
+
readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
|
|
130
|
+
/**
|
|
131
|
+
* Item registry used for collection-driven keyboard behavior and mounted ordering.
|
|
132
|
+
* @since 1.0.0
|
|
133
|
+
* @category Item registration
|
|
134
|
+
*/
|
|
135
|
+
readonly collection?: RefSubject.RefSubject<Collection.State<string>>;
|
|
136
|
+
/**
|
|
137
|
+
* Renderable child content for the component host.
|
|
138
|
+
* @since 1.0.0
|
|
139
|
+
* @category Rendered content
|
|
140
|
+
*/
|
|
141
|
+
readonly content: Renderable.Any;
|
|
142
|
+
/**
|
|
143
|
+
* Accessible label rendered through aria-label.
|
|
144
|
+
* @since 1.0.0
|
|
145
|
+
* @category Accessible naming
|
|
146
|
+
*/
|
|
147
|
+
readonly label?: Renderable.Any<string | null | undefined>;
|
|
148
|
+
}
|
|
149
|
+
declare function rootProps<const Options extends RootOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
|
|
150
|
+
readonly role: "toolbar";
|
|
151
|
+
readonly "aria-label": Exclude<Dom.Property<Options, "label">, Dom.Nullish> | undefined;
|
|
152
|
+
readonly "aria-orientation": RefSubject.Computed<Composite.Orientation, Schema.SchemaError, never>;
|
|
153
|
+
readonly tabindex: RefSubject.Computed<-1 | 0, Schema.SchemaError, never>;
|
|
154
|
+
readonly onfocus: Effect.Effect<void, Schema.SchemaError, never> | undefined;
|
|
155
|
+
readonly onkeydown: EventHandler.EventHandler<KeyboardEvent, Schema.SchemaError, never> | undefined;
|
|
156
|
+
readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
|
|
157
|
+
};
|
|
158
|
+
type RootProps<Options extends RootOptions> = ReturnType<ReturnType<typeof rootProps<Options>>>;
|
|
159
|
+
/**
|
|
160
|
+
* Renders the toolbar root and moves roving focus through registered items in DOM order.
|
|
161
|
+
*
|
|
162
|
+
* @remarks
|
|
163
|
+
* The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
|
|
164
|
+
* collection registrations only when rendered. The rendering Scope removes those resources;
|
|
165
|
+
* unrelated nodes and attributes remain caller-owned.
|
|
166
|
+
*
|
|
167
|
+
* @since 1.0.0
|
|
168
|
+
* @category Toolbar surface
|
|
169
|
+
*/
|
|
170
|
+
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>;
|
|
171
|
+
/**
|
|
172
|
+
* Consumer-facing alias of the canonical Toolbar component with identical behavior and lifetime.
|
|
173
|
+
*
|
|
174
|
+
* @remarks
|
|
175
|
+
* The alias acquires nothing. Rendering it has exactly the canonical component's Scope and DOM
|
|
176
|
+
* ownership contract.
|
|
177
|
+
*
|
|
178
|
+
* @since 1.0.0
|
|
179
|
+
* @category Toolbar surface
|
|
180
|
+
*/
|
|
181
|
+
export declare const Toolbar: typeof Root;
|
|
182
|
+
/**
|
|
183
|
+
* Inputs accepted by Toolbar.Item in addition to the shared DOM host options.
|
|
184
|
+
*
|
|
185
|
+
* @since 1.0.0
|
|
186
|
+
* @category Toolbar commands
|
|
187
|
+
*/
|
|
188
|
+
export interface ItemOptions extends Dom.HostOptions<HTMLDivElement> {
|
|
189
|
+
/**
|
|
190
|
+
* Renderer-independent RefSubject state consumed by this component or operation.
|
|
191
|
+
* @since 1.0.0
|
|
192
|
+
* @category State connection
|
|
193
|
+
*/
|
|
194
|
+
readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
|
|
195
|
+
/**
|
|
196
|
+
* Item registry used for collection-driven keyboard behavior and mounted ordering.
|
|
197
|
+
* @since 1.0.0
|
|
198
|
+
* @category Item registration
|
|
199
|
+
*/
|
|
200
|
+
readonly collection?: RefSubject.RefSubject<Collection.State<string>>;
|
|
201
|
+
/**
|
|
202
|
+
* Stable id used for collection identity and ARIA relationships.
|
|
203
|
+
* @since 1.0.0
|
|
204
|
+
* @category Identity and relationships
|
|
205
|
+
*/
|
|
206
|
+
readonly id: string;
|
|
207
|
+
/**
|
|
208
|
+
* Renderable child content for the component host.
|
|
209
|
+
* @since 1.0.0
|
|
210
|
+
* @category Rendered content
|
|
211
|
+
*/
|
|
212
|
+
readonly content: Renderable.Any;
|
|
213
|
+
/**
|
|
214
|
+
* Search text used by typeahead independently of rendered markup.
|
|
215
|
+
* @since 1.0.0
|
|
216
|
+
* @category Text matching
|
|
217
|
+
*/
|
|
218
|
+
readonly textValue?: string;
|
|
219
|
+
/**
|
|
220
|
+
* Flag used by collection movement and widget handlers to skip activation by default.
|
|
221
|
+
* @since 1.0.0
|
|
222
|
+
* @category Availability
|
|
223
|
+
*/
|
|
224
|
+
readonly disabled?: boolean;
|
|
225
|
+
}
|
|
226
|
+
declare function itemProps<const Options extends ItemOptions>(options: Options): () => {
|
|
227
|
+
readonly id: string;
|
|
228
|
+
readonly role: "button";
|
|
229
|
+
readonly "aria-disabled": boolean;
|
|
230
|
+
readonly tabindex: RefSubject.Computed<-1 | 0, Schema.SchemaError, never>;
|
|
231
|
+
readonly onfocus: Effect.Effect<void, never, never> | Effect.Effect<State, Schema.SchemaError, never>;
|
|
232
|
+
readonly ref: ((element: Element & HTMLDivElement & RefSubject.HydrationElement) => Effect.Effect<void, any, any>) | undefined;
|
|
233
|
+
};
|
|
234
|
+
type ItemProps<Options extends ItemOptions> = ReturnType<ReturnType<typeof itemProps<Options>>>;
|
|
235
|
+
/**
|
|
236
|
+
* Renders and optionally registers a toolbar button; focus activates it unless disabled.
|
|
237
|
+
*
|
|
238
|
+
* @remarks
|
|
239
|
+
* The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
|
|
240
|
+
* collection registrations only when rendered. The rendering Scope removes those resources;
|
|
241
|
+
* unrelated nodes and attributes remain caller-owned.
|
|
242
|
+
*
|
|
243
|
+
* @since 1.0.0
|
|
244
|
+
* @category Toolbar commands
|
|
245
|
+
*/
|
|
246
|
+
export declare function Item<const Options extends ItemOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ItemProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
|
|
247
|
+
export {};
|
|
248
|
+
//# sourceMappingURL=Toolbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../src/Toolbar.ts"],"names":[],"mappings":"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"}
|