@foldkit/ui 0.155.0 → 0.156.0-canary.0053b7691fcd
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/dist/anchor/anchor.d.ts +18 -18
- package/dist/anchor/anchor.d.ts.map +1 -1
- package/dist/anchor/anchor.js +16 -16
- package/dist/animation/index.js +6 -6
- package/dist/animation/schema.d.ts +6 -6
- package/dist/animation/schema.d.ts.map +1 -1
- package/dist/animation/schema.js +5 -5
- package/dist/animation/update.d.ts +2 -2
- package/dist/animation/update.d.ts.map +1 -1
- package/dist/animation/update.js +9 -9
- package/dist/calendar/index.d.ts +56 -56
- package/dist/calendar/index.d.ts.map +1 -1
- package/dist/calendar/index.js +49 -37
- package/dist/checkbox/index.js +2 -2
- package/dist/combobox/multi.d.ts +19 -19
- package/dist/combobox/multi.d.ts.map +1 -1
- package/dist/combobox/multi.js +2 -2
- package/dist/combobox/shared.d.ts +61 -61
- package/dist/combobox/shared.d.ts.map +1 -1
- package/dist/combobox/shared.js +51 -51
- package/dist/combobox/single.d.ts +19 -19
- package/dist/combobox/single.d.ts.map +1 -1
- package/dist/combobox/single.js +2 -2
- package/dist/datePicker/index.d.ts +72 -72
- package/dist/datePicker/index.d.ts.map +1 -1
- package/dist/datePicker/index.js +9 -9
- package/dist/dialog/index.d.ts +14 -14
- package/dist/dialog/index.d.ts.map +1 -1
- package/dist/dialog/index.js +14 -14
- package/dist/disclosure/index.js +2 -2
- package/dist/dragAndDrop/index.d.ts +61 -61
- package/dist/dragAndDrop/index.d.ts.map +1 -1
- package/dist/dragAndDrop/index.js +85 -85
- package/dist/fileDrop/index.d.ts +6 -6
- package/dist/fileDrop/index.d.ts.map +1 -1
- package/dist/fileDrop/index.js +6 -6
- package/dist/hoverIntent/hoverIntent.d.ts +19 -16
- package/dist/hoverIntent/hoverIntent.d.ts.map +1 -1
- package/dist/hoverIntent/hoverIntent.js +49 -46
- package/dist/hoverIntent/message.d.ts +4 -4
- package/dist/hoverIntent/message.d.ts.map +1 -1
- package/dist/hoverIntent/message.js +4 -4
- package/dist/hoverIntent/public.d.ts +1 -1
- package/dist/hoverIntent/public.d.ts.map +1 -1
- package/dist/hoverIntent/public.js +1 -1
- package/dist/keyboard.js +2 -2
- package/dist/listbox/multi.d.ts +19 -19
- package/dist/listbox/multi.d.ts.map +1 -1
- package/dist/listbox/multi.js +2 -2
- package/dist/listbox/shared.d.ts +58 -58
- package/dist/listbox/shared.d.ts.map +1 -1
- package/dist/listbox/shared.js +52 -52
- package/dist/listbox/single.d.ts +19 -19
- package/dist/listbox/single.d.ts.map +1 -1
- package/dist/listbox/single.js +2 -2
- package/dist/menu/index.d.ts +67 -67
- package/dist/menu/index.d.ts.map +1 -1
- package/dist/menu/index.js +60 -57
- package/dist/popover/index.d.ts +34 -34
- package/dist/popover/index.d.ts.map +1 -1
- package/dist/popover/index.js +27 -27
- package/dist/radioGroup/index.d.ts +12 -12
- package/dist/radioGroup/index.d.ts.map +1 -1
- package/dist/radioGroup/index.js +16 -16
- package/dist/slider/index.d.ts +14 -14
- package/dist/slider/index.d.ts.map +1 -1
- package/dist/slider/index.js +31 -31
- package/dist/switch/index.js +2 -2
- package/dist/tabs/index.d.ts +14 -14
- package/dist/tabs/index.d.ts.map +1 -1
- package/dist/tabs/index.js +18 -18
- package/dist/test/apps/disabledButton.d.ts +12 -12
- package/dist/test/apps/disabledButton.d.ts.map +1 -1
- package/dist/test/apps/disabledButton.js +4 -4
- package/dist/toast/index.d.ts +63 -63
- package/dist/toast/index.d.ts.map +1 -1
- package/dist/toast/index.js +19 -19
- package/dist/toast/schema.d.ts +55 -55
- package/dist/toast/schema.d.ts.map +1 -1
- package/dist/toast/schema.js +25 -25
- package/dist/toast/update.d.ts +61 -61
- package/dist/toast/update.d.ts.map +1 -1
- package/dist/toast/update.js +5 -5
- package/dist/tooltip/message.d.ts +3 -3
- package/dist/tooltip/message.d.ts.map +1 -1
- package/dist/tooltip/message.js +3 -3
- package/dist/tooltip/tooltip.d.ts +24 -24
- package/dist/tooltip/tooltip.d.ts.map +1 -1
- package/dist/tooltip/tooltip.js +13 -13
- package/dist/typeahead.d.ts.map +1 -1
- package/dist/typeahead.js +3 -3
- package/dist/virtualList/index.d.ts +15 -15
- package/dist/virtualList/index.d.ts.map +1 -1
- package/dist/virtualList/index.js +13 -13
- package/package.json +4 -4
package/dist/menu/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
|
|
2
|
-
import { Array, Effect, Equal, Match
|
|
2
|
+
import { Array, Effect, Equal, Match, Option, Predicate, Schema, String, pipe, } from 'effect';
|
|
3
3
|
import * as Command from 'foldkit/command';
|
|
4
4
|
import * as Dom from 'foldkit/dom';
|
|
5
5
|
import { defineMessageUnion } from 'foldkit/message';
|
|
@@ -20,43 +20,46 @@ import { findFirstEnabledIndex, isPrintableKey, keyToIndex, } from '../keyboard.
|
|
|
20
20
|
import { resolveTypeaheadMatch } from '../typeahead.js';
|
|
21
21
|
// MODEL
|
|
22
22
|
/** Schema for the activation trigger: whether the user interacted via mouse or keyboard. */
|
|
23
|
-
export const ActivationTrigger =
|
|
24
|
-
const PointerOrigin =
|
|
25
|
-
screenX:
|
|
26
|
-
screenY:
|
|
27
|
-
timeStamp:
|
|
23
|
+
export const ActivationTrigger = Schema.Literals(['Pointer', 'Keyboard']);
|
|
24
|
+
const PointerOrigin = Schema.Struct({
|
|
25
|
+
screenX: Schema.Number,
|
|
26
|
+
screenY: Schema.Number,
|
|
27
|
+
timeStamp: Schema.Number,
|
|
28
28
|
});
|
|
29
29
|
/** Schema for the menu component's state, tracking open/closed status, active item, activation trigger, and typeahead search. */
|
|
30
|
-
export const Model =
|
|
31
|
-
id:
|
|
32
|
-
isOpen:
|
|
33
|
-
isAnimated:
|
|
34
|
-
isModal:
|
|
30
|
+
export const Model = Schema.Struct({
|
|
31
|
+
id: Schema.String,
|
|
32
|
+
isOpen: Schema.Boolean,
|
|
33
|
+
isAnimated: Schema.Boolean,
|
|
34
|
+
isModal: Schema.Boolean,
|
|
35
35
|
animation: AnimationModel,
|
|
36
|
-
maybeActiveItemIndex:
|
|
36
|
+
maybeActiveItemIndex: Schema.Option(Schema.Number),
|
|
37
37
|
activationTrigger: ActivationTrigger,
|
|
38
|
-
searchQuery:
|
|
39
|
-
searchVersion:
|
|
40
|
-
maybeLastPointerPosition:
|
|
41
|
-
maybeLastButtonPointerType:
|
|
42
|
-
maybePointerOrigin:
|
|
38
|
+
searchQuery: Schema.String,
|
|
39
|
+
searchVersion: Schema.Number,
|
|
40
|
+
maybeLastPointerPosition: Schema.Option(Schema.Struct({ screenX: Schema.Number, screenY: Schema.Number })),
|
|
41
|
+
maybeLastButtonPointerType: Schema.Option(Schema.String),
|
|
42
|
+
maybePointerOrigin: Schema.Option(PointerOrigin),
|
|
43
43
|
});
|
|
44
44
|
// MESSAGE
|
|
45
45
|
/** Union of all messages the menu component can produce. */
|
|
46
46
|
export const Message = defineMessageUnion({
|
|
47
|
-
Opened: { maybeActiveItemIndex:
|
|
47
|
+
Opened: { maybeActiveItemIndex: Schema.Option(Schema.Number) },
|
|
48
48
|
Closed: {},
|
|
49
49
|
BlurredItems: {},
|
|
50
|
-
ActivatedItem: { index:
|
|
50
|
+
ActivatedItem: { index: Schema.Number, activationTrigger: ActivationTrigger },
|
|
51
51
|
DeactivatedItem: {},
|
|
52
|
-
SelectedItem: { index:
|
|
53
|
-
RequestedItemClick: { index:
|
|
54
|
-
Searched: {
|
|
55
|
-
|
|
52
|
+
SelectedItem: { index: Schema.Number, item: Schema.String },
|
|
53
|
+
RequestedItemClick: { index: Schema.Number },
|
|
54
|
+
Searched: {
|
|
55
|
+
key: Schema.String,
|
|
56
|
+
maybeTargetIndex: Schema.Option(Schema.Number),
|
|
57
|
+
},
|
|
58
|
+
CompletedDelayClearSearch: { version: Schema.Number },
|
|
56
59
|
MovedPointerOverItem: {
|
|
57
|
-
index:
|
|
58
|
-
screenX:
|
|
59
|
-
screenY:
|
|
60
|
+
index: Schema.Number,
|
|
61
|
+
screenX: Schema.Number,
|
|
62
|
+
screenY: Schema.Number,
|
|
60
63
|
},
|
|
61
64
|
CompletedFocusItems: {},
|
|
62
65
|
CompletedFocusButton: {},
|
|
@@ -72,23 +75,23 @@ export const Message = defineMessageUnion({
|
|
|
72
75
|
CompletedPortalMenuBackdrop: {},
|
|
73
76
|
GotAnimationMessage: { message: AnimationMessage },
|
|
74
77
|
PressedPointerOnButton: {
|
|
75
|
-
pointerType:
|
|
76
|
-
button:
|
|
77
|
-
screenX:
|
|
78
|
-
screenY:
|
|
79
|
-
timeStamp:
|
|
78
|
+
pointerType: Schema.String,
|
|
79
|
+
button: Schema.Number,
|
|
80
|
+
screenX: Schema.Number,
|
|
81
|
+
screenY: Schema.Number,
|
|
82
|
+
timeStamp: Schema.Number,
|
|
80
83
|
},
|
|
81
84
|
ReleasedPointerOnItems: {
|
|
82
|
-
screenX:
|
|
83
|
-
screenY:
|
|
84
|
-
timeStamp:
|
|
85
|
+
screenX: Schema.Number,
|
|
86
|
+
screenY: Schema.Number,
|
|
87
|
+
timeStamp: Schema.Number,
|
|
85
88
|
},
|
|
86
89
|
});
|
|
87
90
|
// OUT MESSAGE
|
|
88
91
|
/** Union of OutMessages the menu component can produce. The parent's
|
|
89
92
|
* `Update.foldChild` config handles them through `foldOutMessage`. */
|
|
90
93
|
export const OutMessage = defineMessageUnion({
|
|
91
|
-
Selected: { value:
|
|
94
|
+
Selected: { value: Schema.String, index: Schema.Number },
|
|
92
95
|
});
|
|
93
96
|
// INIT
|
|
94
97
|
const SEARCH_DEBOUNCE_MILLISECONDS = 350;
|
|
@@ -140,49 +143,49 @@ export const UnlockScroll = Command.define('UnlockScroll', {
|
|
|
140
143
|
});
|
|
141
144
|
/** Marks all elements outside the menu as inert for modal behavior. */
|
|
142
145
|
export const InertOthers = Command.define('InertOthers', {
|
|
143
|
-
args: { id:
|
|
146
|
+
args: { id: Schema.String },
|
|
144
147
|
messages: [Message.CompletedInertOthers],
|
|
145
148
|
execute: ({ id }) => __foldkitBrandViewResult((Dom.inertOthers(id, [buttonSelector(id), itemsSelector(id)]).pipe(Effect.as(Message.CompletedInertOthers()))), "@foldkit/ui/menu/index.js#execute"),
|
|
146
149
|
});
|
|
147
150
|
/** Removes the inert attribute from elements outside the menu. */
|
|
148
151
|
export const RestoreInert = Command.define('RestoreInert', {
|
|
149
|
-
args: { id:
|
|
152
|
+
args: { id: Schema.String },
|
|
150
153
|
messages: [Message.CompletedRestoreInert],
|
|
151
154
|
execute: ({ id }) => __foldkitBrandViewResult((Dom.restoreInert(id).pipe(Effect.as(Message.CompletedRestoreInert()))), "@foldkit/ui/menu/index.js#execute~2"),
|
|
152
155
|
});
|
|
153
156
|
/** Moves focus to the menu items container after opening. */
|
|
154
157
|
export const FocusItems = Command.define('FocusItems', {
|
|
155
|
-
args: { id:
|
|
158
|
+
args: { id: Schema.String },
|
|
156
159
|
messages: [Message.CompletedFocusItems],
|
|
157
160
|
execute: ({ id }) => __foldkitBrandViewResult((Dom.focus(itemsSelector(id)).pipe(Effect.ignore, Effect.as(Message.CompletedFocusItems()))), "@foldkit/ui/menu/index.js#execute~3"),
|
|
158
161
|
});
|
|
159
162
|
/** Moves focus back to the menu button after closing. */
|
|
160
163
|
export const FocusButton = Command.define('FocusButton', {
|
|
161
|
-
args: { id:
|
|
164
|
+
args: { id: Schema.String },
|
|
162
165
|
messages: [Message.CompletedFocusButton],
|
|
163
166
|
execute: ({ id }) => __foldkitBrandViewResult((Dom.focus(buttonSelector(id)).pipe(Effect.ignore, Effect.as(Message.CompletedFocusButton()))), "@foldkit/ui/menu/index.js#execute~4"),
|
|
164
167
|
});
|
|
165
168
|
/** Scrolls the active menu item into view after keyboard navigation. */
|
|
166
169
|
export const ScrollIntoView = Command.define('ScrollIntoView', {
|
|
167
|
-
args: { id:
|
|
170
|
+
args: { id: Schema.String, index: Schema.Number },
|
|
168
171
|
messages: [Message.CompletedScrollIntoView],
|
|
169
172
|
execute: ({ id, index }) => __foldkitBrandViewResult((Dom.scrollIntoView(itemSelector(id, index)).pipe(Effect.ignore, Effect.as(Message.CompletedScrollIntoView()))), "@foldkit/ui/menu/index.js#execute~5"),
|
|
170
173
|
});
|
|
171
174
|
/** Programmatically clicks the active menu item's DOM element. */
|
|
172
175
|
export const ClickItem = Command.define('ClickItem', {
|
|
173
|
-
args: { id:
|
|
176
|
+
args: { id: Schema.String, index: Schema.Number },
|
|
174
177
|
messages: [Message.CompletedClickItem],
|
|
175
178
|
execute: ({ id, index }) => __foldkitBrandViewResult((Dom.clickElement(itemSelector(id, index)).pipe(Effect.ignore, Effect.as(Message.CompletedClickItem()))), "@foldkit/ui/menu/index.js#execute~6"),
|
|
176
179
|
});
|
|
177
180
|
/** Waits for the typeahead search debounce period before clearing the query. */
|
|
178
181
|
export const DelayClearSearch = Command.define('DelayClearSearch', {
|
|
179
|
-
args: { version:
|
|
182
|
+
args: { version: Schema.Number },
|
|
180
183
|
messages: [Message.CompletedDelayClearSearch],
|
|
181
184
|
execute: ({ version }) => __foldkitBrandViewResult((Effect.sleep(SEARCH_DEBOUNCE_MILLISECONDS).pipe(Effect.as(Message.CompletedDelayClearSearch({ version })))), "@foldkit/ui/menu/index.js#execute~7"),
|
|
182
185
|
});
|
|
183
186
|
/** Detects whether the menu button moved or the leave animation ended. Whichever comes first; both outcomes signal the Animation submodel that leave is complete. */
|
|
184
187
|
export const DetectMovementOrAnimationEnd = Command.define('DetectMovementOrAnimationEnd', {
|
|
185
|
-
args: { id:
|
|
188
|
+
args: { id: Schema.String },
|
|
186
189
|
messages: [Message.GotAnimationMessage],
|
|
187
190
|
execute: ({ id }) => __foldkitBrandViewResult((Effect.raceFirst(Dom.detectElementMovement(buttonSelector(id)).pipe(Effect.as(Message.GotAnimationMessage({
|
|
188
191
|
message: AnimationMessage.EndedAnimation(),
|
|
@@ -190,7 +193,7 @@ export const DetectMovementOrAnimationEnd = Command.define('DetectMovementOrAnim
|
|
|
190
193
|
message: AnimationMessage.EndedAnimation(),
|
|
191
194
|
}))))), "@foldkit/ui/menu/index.js#execute~8"),
|
|
192
195
|
});
|
|
193
|
-
const foldAnimationOutMessage =
|
|
196
|
+
const foldAnimationOutMessage = Match.type().pipe(Match.withReturnType(), Match.tagsExhaustive({
|
|
194
197
|
StartedLeaveAnimating: () => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({
|
|
195
198
|
model,
|
|
196
199
|
commands: [DetectMovementOrAnimationEnd({ id: model.id })],
|
|
@@ -396,7 +399,7 @@ export const update = (model, message) => {
|
|
|
396
399
|
* Exposed so Scene tests can call
|
|
397
400
|
* `Scene.Mount.resolve(AnchorMenu, Message.CompletedAnchorMenu())`. */
|
|
398
401
|
export const AnchorMenu = Mount.define('AnchorMenu', {
|
|
399
|
-
args: { buttonId:
|
|
402
|
+
args: { buttonId: Schema.String, anchor: AnchorConfig },
|
|
400
403
|
messages: [Message.CompletedAnchorMenu],
|
|
401
404
|
execute: ({ element, buttonId, anchor }) => __foldkitBrandViewResult((Effect.gen(function* () {
|
|
402
405
|
yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((anchorSetup(element, {
|
|
@@ -439,21 +442,21 @@ const menuViewImpl = defineView((model, viewInputs, h) => {
|
|
|
439
442
|
const dispatchSelectedItem = (item, index) => __foldkitBrandViewResult((Message.SelectedItem({ index, item })), "@foldkit/ui/menu/index.js#dispatchSelectedItem");
|
|
440
443
|
const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
|
|
441
444
|
const isVisible = isOpen || isLeaving;
|
|
442
|
-
const animationAttributes =
|
|
445
|
+
const animationAttributes = Match.value(transitionState).pipe(Match.when('EnterStart', () => __foldkitBrandViewResult(([
|
|
443
446
|
h.DataAttribute('closed', ''),
|
|
444
447
|
h.DataAttribute('enter', ''),
|
|
445
448
|
h.DataAttribute('transition', ''),
|
|
446
|
-
]), "@foldkit/ui/menu/index.js#anonymous~20")),
|
|
449
|
+
]), "@foldkit/ui/menu/index.js#anonymous~20")), Match.when('EnterAnimating', () => __foldkitBrandViewResult(([
|
|
447
450
|
h.DataAttribute('enter', ''),
|
|
448
451
|
h.DataAttribute('transition', ''),
|
|
449
|
-
]), "@foldkit/ui/menu/index.js#anonymous~21")),
|
|
452
|
+
]), "@foldkit/ui/menu/index.js#anonymous~21")), Match.when('LeaveStart', () => __foldkitBrandViewResult(([
|
|
450
453
|
h.DataAttribute('leave', ''),
|
|
451
454
|
h.DataAttribute('transition', ''),
|
|
452
|
-
]), "@foldkit/ui/menu/index.js#anonymous~22")),
|
|
455
|
+
]), "@foldkit/ui/menu/index.js#anonymous~22")), Match.when('LeaveAnimating', () => __foldkitBrandViewResult(([
|
|
453
456
|
h.DataAttribute('closed', ''),
|
|
454
457
|
h.DataAttribute('leave', ''),
|
|
455
458
|
h.DataAttribute('transition', ''),
|
|
456
|
-
]), "@foldkit/ui/menu/index.js#anonymous~23")),
|
|
459
|
+
]), "@foldkit/ui/menu/index.js#anonymous~23")), Match.orElse(() => __foldkitBrandViewResult(([]), "@foldkit/ui/menu/index.js#anonymous~24")));
|
|
457
460
|
const isDisabled = (index) => __foldkitBrandViewResult((Predicate.isNotUndefined(isItemDisabled) &&
|
|
458
461
|
pipe(items, Array.get(index), Option.exists(item => __foldkitBrandViewResult((isItemDisabled(item, index)), "@foldkit/ui/menu/index.js#anonymous~25")))), "@foldkit/ui/menu/index.js#isDisabled");
|
|
459
462
|
const firstEnabledIndex = findFirstEnabledIndex(items.length, 0, isDisabled)(0, 1);
|
|
@@ -462,11 +465,11 @@ const menuViewImpl = defineView((model, viewInputs, h) => {
|
|
|
462
465
|
if (isOpen) {
|
|
463
466
|
return __foldkitBrandViewResult((handleItemsKeyDown(key)), "@foldkit/ui/menu/index.js#handleButtonKeyDown");
|
|
464
467
|
}
|
|
465
|
-
return __foldkitBrandViewResult((
|
|
468
|
+
return __foldkitBrandViewResult((Match.value(key).pipe(Match.whenOr('Enter', ' ', 'ArrowDown', () => __foldkitBrandViewResult((Option.some(Message.Opened({
|
|
466
469
|
maybeActiveItemIndex: Option.some(firstEnabledIndex),
|
|
467
|
-
}))), "@foldkit/ui/menu/index.js#anonymous~26")),
|
|
470
|
+
}))), "@foldkit/ui/menu/index.js#anonymous~26")), Match.when('ArrowUp', () => __foldkitBrandViewResult((Option.some(Message.Opened({
|
|
468
471
|
maybeActiveItemIndex: Option.some(lastEnabledIndex),
|
|
469
|
-
}))), "@foldkit/ui/menu/index.js#anonymous~27")),
|
|
472
|
+
}))), "@foldkit/ui/menu/index.js#anonymous~27")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/menu/index.js#anonymous~28")))), "@foldkit/ui/menu/index.js#handleButtonKeyDown");
|
|
470
473
|
};
|
|
471
474
|
const handleButtonPointerDown = (pointerType, button, screenX, screenY, timeStamp) => __foldkitBrandViewResult((Option.some(Message.PressedPointerOnButton({
|
|
472
475
|
pointerType,
|
|
@@ -491,15 +494,15 @@ const menuViewImpl = defineView((model, viewInputs, h) => {
|
|
|
491
494
|
const resolveActiveIndex = keyToIndex('ArrowDown', 'ArrowUp', items.length, Option.getOrElse(maybeActiveItemIndex, () => __foldkitBrandViewResult((0), "@foldkit/ui/menu/index.js#anonymous~30")), isDisabled);
|
|
492
495
|
const searchForKey = (key) => {
|
|
493
496
|
const nextQuery = searchQuery + key;
|
|
494
|
-
const maybeTargetIndex = resolveTypeaheadMatch(items, nextQuery, maybeActiveItemIndex, isDisabled, itemToSearchText,
|
|
497
|
+
const maybeTargetIndex = resolveTypeaheadMatch(items, nextQuery, maybeActiveItemIndex, isDisabled, itemToSearchText, String.isNonEmpty(searchQuery));
|
|
495
498
|
return __foldkitBrandViewResult((Option.some(Message.Searched({ key, maybeTargetIndex }))), "@foldkit/ui/menu/index.js#searchForKey");
|
|
496
499
|
};
|
|
497
|
-
const handleItemsKeyDown = (key) => __foldkitBrandViewResult((
|
|
500
|
+
const handleItemsKeyDown = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.when('Escape', () => __foldkitBrandViewResult((Option.some(Message.Closed())), "@foldkit/ui/menu/index.js#anonymous~31")), Match.when('Enter', () => __foldkitBrandViewResult((Option.map(maybeActiveItemIndex, index => __foldkitBrandViewResult((Message.RequestedItemClick({ index })), "@foldkit/ui/menu/index.js#anonymous~33"))), "@foldkit/ui/menu/index.js#anonymous~32")), Match.when(' ', () => __foldkitBrandViewResult((String.isNonEmpty(searchQuery)
|
|
498
501
|
? searchForKey(' ')
|
|
499
|
-
: Option.map(maybeActiveItemIndex, index => __foldkitBrandViewResult((Message.RequestedItemClick({ index })), "@foldkit/ui/menu/index.js#anonymous~35"))), "@foldkit/ui/menu/index.js#anonymous~34")),
|
|
502
|
+
: Option.map(maybeActiveItemIndex, index => __foldkitBrandViewResult((Message.RequestedItemClick({ index })), "@foldkit/ui/menu/index.js#anonymous~35"))), "@foldkit/ui/menu/index.js#anonymous~34")), Match.whenOr('ArrowDown', 'ArrowUp', 'Home', 'End', 'PageUp', 'PageDown', () => __foldkitBrandViewResult((Option.some(Message.ActivatedItem({
|
|
500
503
|
index: resolveActiveIndex(key),
|
|
501
504
|
activationTrigger: 'Keyboard',
|
|
502
|
-
}))), "@foldkit/ui/menu/index.js#anonymous~36")),
|
|
505
|
+
}))), "@foldkit/ui/menu/index.js#anonymous~36")), Match.when(isPrintableKey, () => __foldkitBrandViewResult((searchForKey(key)), "@foldkit/ui/menu/index.js#anonymous~37")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/menu/index.js#anonymous~38")))), "@foldkit/ui/menu/index.js#handleItemsKeyDown");
|
|
503
506
|
const handleItemsPointerUp = (screenX, screenY, pointerType, timeStamp) => __foldkitBrandViewResult((OptionExt.when(pointerType === 'mouse', Message.ReleasedPointerOnItems({ screenX, screenY, timeStamp }))), "@foldkit/ui/menu/index.js#handleItemsPointerUp");
|
|
504
507
|
const resolveButtonLabel = () => {
|
|
505
508
|
if (Predicate.isNotUndefined(ariaLabel)) {
|
package/dist/popover/index.d.ts
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { Effect, Option, Schema
|
|
1
|
+
import { Effect, Option, Schema } from 'effect';
|
|
2
2
|
import * as Command from 'foldkit/command';
|
|
3
3
|
import { type ChildAttribute, type Html } from 'foldkit/html';
|
|
4
4
|
import * as Mount from 'foldkit/mount';
|
|
5
5
|
import * as Update from 'foldkit/update';
|
|
6
6
|
import { AnchorConfig } from '../anchor/index.js';
|
|
7
7
|
/** Schema for the popover component's state, tracking open/closed status and animation lifecycle. */
|
|
8
|
-
export declare const Model:
|
|
9
|
-
readonly id:
|
|
10
|
-
readonly isOpen:
|
|
11
|
-
readonly isAnimated:
|
|
12
|
-
readonly isModal:
|
|
13
|
-
readonly contentFocus:
|
|
14
|
-
readonly animation:
|
|
15
|
-
readonly id:
|
|
16
|
-
readonly isShowing:
|
|
17
|
-
readonly transitionState:
|
|
8
|
+
export declare const Model: Schema.Struct<{
|
|
9
|
+
readonly id: Schema.String;
|
|
10
|
+
readonly isOpen: Schema.Boolean;
|
|
11
|
+
readonly isAnimated: Schema.Boolean;
|
|
12
|
+
readonly isModal: Schema.Boolean;
|
|
13
|
+
readonly contentFocus: Schema.Boolean;
|
|
14
|
+
readonly animation: Schema.Struct<{
|
|
15
|
+
readonly id: Schema.String;
|
|
16
|
+
readonly isShowing: Schema.Boolean;
|
|
17
|
+
readonly transitionState: Schema.Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
|
|
18
18
|
}>;
|
|
19
|
-
readonly maybeLastButtonPointerType:
|
|
19
|
+
readonly maybeLastButtonPointerType: Schema.Option<Schema.String>;
|
|
20
20
|
}>;
|
|
21
21
|
export type Model = typeof Model.Type;
|
|
22
22
|
/** Union of all messages the popover component can produce. */
|
|
@@ -25,8 +25,8 @@ export declare const Message: import("foldkit/message").MessageUnion<{
|
|
|
25
25
|
readonly RequestedClose: {};
|
|
26
26
|
readonly BlurredPanel: {};
|
|
27
27
|
readonly PressedPointerOnButton: {
|
|
28
|
-
pointerType:
|
|
29
|
-
button:
|
|
28
|
+
pointerType: Schema.String;
|
|
29
|
+
button: Schema.Number;
|
|
30
30
|
};
|
|
31
31
|
readonly CompletedFocusPanel: {};
|
|
32
32
|
readonly CompletedFocusButton: {};
|
|
@@ -94,31 +94,31 @@ export declare const UnlockScroll: Command.CommandDefinitionNoArgs<"UnlockScroll
|
|
|
94
94
|
}, never, never>>;
|
|
95
95
|
/** Marks all elements outside the popover as inert for modal behavior. */
|
|
96
96
|
export declare const InertOthers: Command.CommandDefinitionWithArgs<"InertOthers", {
|
|
97
|
-
id:
|
|
97
|
+
id: Schema.String;
|
|
98
98
|
}, Effect.Effect<{
|
|
99
99
|
readonly _tag: "CompletedInertOthers";
|
|
100
100
|
}, never, never>>;
|
|
101
101
|
/** Removes the inert attribute from elements outside the popover. */
|
|
102
102
|
export declare const RestoreInert: Command.CommandDefinitionWithArgs<"RestoreInert", {
|
|
103
|
-
id:
|
|
103
|
+
id: Schema.String;
|
|
104
104
|
}, Effect.Effect<{
|
|
105
105
|
readonly _tag: "CompletedRestoreInert";
|
|
106
106
|
}, never, never>>;
|
|
107
107
|
/** Moves focus to the popover panel after opening. */
|
|
108
108
|
export declare const FocusPanel: Command.CommandDefinitionWithArgs<"FocusPanel", {
|
|
109
|
-
id:
|
|
109
|
+
id: Schema.String;
|
|
110
110
|
}, Effect.Effect<{
|
|
111
111
|
readonly _tag: "CompletedFocusPanel";
|
|
112
112
|
}, never, never>>;
|
|
113
113
|
/** Moves focus back to the popover button after closing. */
|
|
114
114
|
export declare const FocusButton: Command.CommandDefinitionWithArgs<"FocusButton", {
|
|
115
|
-
id:
|
|
115
|
+
id: Schema.String;
|
|
116
116
|
}, Effect.Effect<{
|
|
117
117
|
readonly _tag: "CompletedFocusButton";
|
|
118
118
|
}, never, never>>;
|
|
119
119
|
/** Detects whether the popover button moved or the leave animation ended. Whichever comes first; both outcomes signal the Animation submodel that leave is complete. */
|
|
120
120
|
export declare const DetectMovementOrAnimationEnd: Command.CommandDefinitionWithArgs<"DetectMovementOrAnimationEnd", {
|
|
121
|
-
id:
|
|
121
|
+
id: Schema.String;
|
|
122
122
|
}, Effect.Effect<{
|
|
123
123
|
readonly _tag: "GotAnimationMessage";
|
|
124
124
|
readonly message: {
|
|
@@ -199,23 +199,23 @@ export declare const update: (model: Model, message: Message) => Readonly<{
|
|
|
199
199
|
* Scene tests can call `Scene.Mount.resolve(AnchorPopover, CompletedAnchorPopover())`
|
|
200
200
|
* to acknowledge the mount produced by the rendered panel. */
|
|
201
201
|
export declare const AnchorPopover: Mount.MountDefinitionWithArgs<"AnchorPopover", {
|
|
202
|
-
buttonId:
|
|
203
|
-
anchor:
|
|
204
|
-
readonly placement:
|
|
205
|
-
readonly gap:
|
|
206
|
-
readonly offset:
|
|
207
|
-
readonly padding:
|
|
208
|
-
readonly top:
|
|
209
|
-
readonly right:
|
|
210
|
-
readonly bottom:
|
|
211
|
-
readonly left:
|
|
202
|
+
buttonId: Schema.String;
|
|
203
|
+
anchor: Schema.Struct<{
|
|
204
|
+
readonly placement: Schema.optional<Schema.Literals<readonly ["top", "right", "bottom", "left", "top-start", "top-end", "right-start", "right-end", "bottom-start", "bottom-end", "left-start", "left-end"]>>;
|
|
205
|
+
readonly gap: Schema.optional<Schema.Number>;
|
|
206
|
+
readonly offset: Schema.optional<Schema.Number>;
|
|
207
|
+
readonly padding: Schema.optional<Schema.Union<readonly [Schema.Number, Schema.Struct<{
|
|
208
|
+
readonly top: Schema.optionalKey<Schema.Number>;
|
|
209
|
+
readonly right: Schema.optionalKey<Schema.Number>;
|
|
210
|
+
readonly bottom: Schema.optionalKey<Schema.Number>;
|
|
211
|
+
readonly left: Schema.optionalKey<Schema.Number>;
|
|
212
212
|
}>]>>;
|
|
213
|
-
readonly portal:
|
|
214
|
-
readonly isPlacementLocked:
|
|
213
|
+
readonly portal: Schema.optional<Schema.Boolean>;
|
|
214
|
+
readonly isPlacementLocked: Schema.optional<Schema.Boolean>;
|
|
215
215
|
}>;
|
|
216
|
-
focusSelector:
|
|
217
|
-
arrowId:
|
|
218
|
-
arrowPadding:
|
|
216
|
+
focusSelector: Schema.optional<Schema.String>;
|
|
217
|
+
arrowId: Schema.optional<Schema.String>;
|
|
218
|
+
arrowPadding: Schema.optional<Schema.Number>;
|
|
219
219
|
}, {
|
|
220
220
|
readonly _tag: "CompletedAnchorPopover";
|
|
221
221
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAGN,MAAM,EAEN,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.ts"],"names":[],"mappings":"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"}
|
package/dist/popover/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
|
|
2
|
-
import { Array, Effect, Equal, Match
|
|
2
|
+
import { Array, Effect, Equal, Match, Option, Predicate, Schema, pipe, } from 'effect';
|
|
3
3
|
import * as Command from 'foldkit/command';
|
|
4
4
|
import * as Dom from 'foldkit/dom';
|
|
5
5
|
import { childAttributes } from 'foldkit/html';
|
|
@@ -18,14 +18,14 @@ import * as OptionExt from '../internal/optionExtensions.js';
|
|
|
18
18
|
import { idSelector } from '../internal/selectors.js';
|
|
19
19
|
// MODEL
|
|
20
20
|
/** Schema for the popover component's state, tracking open/closed status and animation lifecycle. */
|
|
21
|
-
export const Model =
|
|
22
|
-
id:
|
|
23
|
-
isOpen:
|
|
24
|
-
isAnimated:
|
|
25
|
-
isModal:
|
|
26
|
-
contentFocus:
|
|
21
|
+
export const Model = Schema.Struct({
|
|
22
|
+
id: Schema.String,
|
|
23
|
+
isOpen: Schema.Boolean,
|
|
24
|
+
isAnimated: Schema.Boolean,
|
|
25
|
+
isModal: Schema.Boolean,
|
|
26
|
+
contentFocus: Schema.Boolean,
|
|
27
27
|
animation: AnimationModel,
|
|
28
|
-
maybeLastButtonPointerType:
|
|
28
|
+
maybeLastButtonPointerType: Schema.Option(Schema.String),
|
|
29
29
|
});
|
|
30
30
|
// MESSAGE
|
|
31
31
|
/** Union of all messages the popover component can produce. */
|
|
@@ -34,8 +34,8 @@ export const Message = defineMessageUnion({
|
|
|
34
34
|
RequestedClose: {},
|
|
35
35
|
BlurredPanel: {},
|
|
36
36
|
PressedPointerOnButton: {
|
|
37
|
-
pointerType:
|
|
38
|
-
button:
|
|
37
|
+
pointerType: Schema.String,
|
|
38
|
+
button: Schema.Number,
|
|
39
39
|
},
|
|
40
40
|
CompletedFocusPanel: {},
|
|
41
41
|
CompletedFocusButton: {},
|
|
@@ -98,31 +98,31 @@ export const UnlockScroll = Command.define('UnlockScroll', {
|
|
|
98
98
|
});
|
|
99
99
|
/** Marks all elements outside the popover as inert for modal behavior. */
|
|
100
100
|
export const InertOthers = Command.define('InertOthers', {
|
|
101
|
-
args: { id:
|
|
101
|
+
args: { id: Schema.String },
|
|
102
102
|
messages: [Message.CompletedInertOthers],
|
|
103
103
|
execute: ({ id }) => __foldkitBrandViewResult((Dom.inertOthers(id, [buttonSelector(id), panelSelector(id)]).pipe(Effect.as(Message.CompletedInertOthers()))), "@foldkit/ui/popover/index.js#execute"),
|
|
104
104
|
});
|
|
105
105
|
/** Removes the inert attribute from elements outside the popover. */
|
|
106
106
|
export const RestoreInert = Command.define('RestoreInert', {
|
|
107
|
-
args: { id:
|
|
107
|
+
args: { id: Schema.String },
|
|
108
108
|
messages: [Message.CompletedRestoreInert],
|
|
109
109
|
execute: ({ id }) => __foldkitBrandViewResult((Dom.restoreInert(id).pipe(Effect.as(Message.CompletedRestoreInert()))), "@foldkit/ui/popover/index.js#execute~2"),
|
|
110
110
|
});
|
|
111
111
|
/** Moves focus to the popover panel after opening. */
|
|
112
112
|
export const FocusPanel = Command.define('FocusPanel', {
|
|
113
|
-
args: { id:
|
|
113
|
+
args: { id: Schema.String },
|
|
114
114
|
messages: [Message.CompletedFocusPanel],
|
|
115
115
|
execute: ({ id }) => __foldkitBrandViewResult((Dom.focus(panelSelector(id)).pipe(Effect.ignore, Effect.as(Message.CompletedFocusPanel()))), "@foldkit/ui/popover/index.js#execute~3"),
|
|
116
116
|
});
|
|
117
117
|
/** Moves focus back to the popover button after closing. */
|
|
118
118
|
export const FocusButton = Command.define('FocusButton', {
|
|
119
|
-
args: { id:
|
|
119
|
+
args: { id: Schema.String },
|
|
120
120
|
messages: [Message.CompletedFocusButton],
|
|
121
121
|
execute: ({ id }) => __foldkitBrandViewResult((Dom.focus(buttonSelector(id)).pipe(Effect.ignore, Effect.as(Message.CompletedFocusButton()))), "@foldkit/ui/popover/index.js#execute~4"),
|
|
122
122
|
});
|
|
123
123
|
/** Detects whether the popover button moved or the leave animation ended. Whichever comes first; both outcomes signal the Animation submodel that leave is complete. */
|
|
124
124
|
export const DetectMovementOrAnimationEnd = Command.define('DetectMovementOrAnimationEnd', {
|
|
125
|
-
args: { id:
|
|
125
|
+
args: { id: Schema.String },
|
|
126
126
|
messages: [Message.GotAnimationMessage],
|
|
127
127
|
execute: ({ id }) => __foldkitBrandViewResult((Effect.raceFirst(Dom.detectElementMovement(buttonSelector(id)).pipe(Effect.as(Message.GotAnimationMessage({
|
|
128
128
|
message: AnimationMessage.EndedAnimation(),
|
|
@@ -130,7 +130,7 @@ export const DetectMovementOrAnimationEnd = Command.define('DetectMovementOrAnim
|
|
|
130
130
|
message: AnimationMessage.EndedAnimation(),
|
|
131
131
|
}))))), "@foldkit/ui/popover/index.js#execute~5"),
|
|
132
132
|
});
|
|
133
|
-
const foldAnimationOutMessage =
|
|
133
|
+
const foldAnimationOutMessage = Match.type().pipe(Match.withReturnType(), Match.tagsExhaustive({
|
|
134
134
|
StartedLeaveAnimating: () => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({
|
|
135
135
|
model,
|
|
136
136
|
commands: [DetectMovementOrAnimationEnd({ id: model.id })],
|
|
@@ -246,11 +246,11 @@ export const update = (model, message) => {
|
|
|
246
246
|
* to acknowledge the mount produced by the rendered panel. */
|
|
247
247
|
export const AnchorPopover = Mount.define('AnchorPopover', {
|
|
248
248
|
args: {
|
|
249
|
-
buttonId:
|
|
249
|
+
buttonId: Schema.String,
|
|
250
250
|
anchor: AnchorConfig,
|
|
251
|
-
focusSelector:
|
|
252
|
-
arrowId:
|
|
253
|
-
arrowPadding:
|
|
251
|
+
focusSelector: Schema.optional(Schema.String),
|
|
252
|
+
arrowId: Schema.optional(Schema.String),
|
|
253
|
+
arrowPadding: Schema.optional(Schema.Number),
|
|
254
254
|
},
|
|
255
255
|
messages: [Message.CompletedAnchorPopover],
|
|
256
256
|
execute: ({ element, buttonId, anchor, focusSelector, arrowId, arrowPadding, }) => __foldkitBrandViewResult((Effect.gen(function* () {
|
|
@@ -289,22 +289,22 @@ export const view = defineView((model, viewInputs, h) => {
|
|
|
289
289
|
const { anchor, toView, isDisabled, focusSelector, arrowPadding, ariaLabel, ariaLabelledBy, } = viewInputs;
|
|
290
290
|
const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
|
|
291
291
|
const isVisible = isOpen || isLeaving;
|
|
292
|
-
const animationAttributes =
|
|
292
|
+
const animationAttributes = Match.value(transitionState).pipe(Match.when('EnterStart', () => __foldkitBrandViewResult(([
|
|
293
293
|
h.DataAttribute('closed', ''),
|
|
294
294
|
h.DataAttribute('enter', ''),
|
|
295
295
|
h.DataAttribute('transition', ''),
|
|
296
|
-
]), "@foldkit/ui/popover/index.js#anonymous~15")),
|
|
296
|
+
]), "@foldkit/ui/popover/index.js#anonymous~15")), Match.when('EnterAnimating', () => __foldkitBrandViewResult(([
|
|
297
297
|
h.DataAttribute('enter', ''),
|
|
298
298
|
h.DataAttribute('transition', ''),
|
|
299
|
-
]), "@foldkit/ui/popover/index.js#anonymous~16")),
|
|
299
|
+
]), "@foldkit/ui/popover/index.js#anonymous~16")), Match.when('LeaveStart', () => __foldkitBrandViewResult(([
|
|
300
300
|
h.DataAttribute('leave', ''),
|
|
301
301
|
h.DataAttribute('transition', ''),
|
|
302
|
-
]), "@foldkit/ui/popover/index.js#anonymous~17")),
|
|
302
|
+
]), "@foldkit/ui/popover/index.js#anonymous~17")), Match.when('LeaveAnimating', () => __foldkitBrandViewResult(([
|
|
303
303
|
h.DataAttribute('closed', ''),
|
|
304
304
|
h.DataAttribute('leave', ''),
|
|
305
305
|
h.DataAttribute('transition', ''),
|
|
306
|
-
]), "@foldkit/ui/popover/index.js#anonymous~18")),
|
|
307
|
-
const handleButtonKeyDown = (key) => __foldkitBrandViewResult((
|
|
306
|
+
]), "@foldkit/ui/popover/index.js#anonymous~18")), Match.orElse(() => __foldkitBrandViewResult(([]), "@foldkit/ui/popover/index.js#anonymous~19")));
|
|
307
|
+
const handleButtonKeyDown = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.whenOr('Enter', ' ', 'ArrowDown', () => __foldkitBrandViewResult((Option.some(isOpen ? Message.RequestedClose() : Message.RequestedOpen())), "@foldkit/ui/popover/index.js#anonymous~20")), Match.when('Escape', () => __foldkitBrandViewResult((OptionExt.when(isOpen, Message.RequestedClose())), "@foldkit/ui/popover/index.js#anonymous~21")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/popover/index.js#anonymous~22")))), "@foldkit/ui/popover/index.js#handleButtonKeyDown");
|
|
308
308
|
const handleButtonPointerDown = (pointerType, button) => __foldkitBrandViewResult((Option.some(Message.PressedPointerOnButton({ pointerType, button }))), "@foldkit/ui/popover/index.js#handleButtonPointerDown");
|
|
309
309
|
const handleButtonClick = () => {
|
|
310
310
|
const isMouse = Option.exists(maybeLastButtonPointerType, type => __foldkitBrandViewResult((type === 'mouse'), "@foldkit/ui/popover/index.js#anonymous~23"));
|
|
@@ -319,7 +319,7 @@ export const view = defineView((model, viewInputs, h) => {
|
|
|
319
319
|
}
|
|
320
320
|
};
|
|
321
321
|
const handleSpaceKeyUp = (key) => __foldkitBrandViewResult((OptionExt.when(key === ' ', Message.SuppressedSpaceScroll())), "@foldkit/ui/popover/index.js#handleSpaceKeyUp");
|
|
322
|
-
const handlePanelKeyDown = (key) => __foldkitBrandViewResult((
|
|
322
|
+
const handlePanelKeyDown = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.when('Escape', () => __foldkitBrandViewResult((Option.some(Message.RequestedClose())), "@foldkit/ui/popover/index.js#anonymous~24")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/popover/index.js#anonymous~25")))), "@foldkit/ui/popover/index.js#handlePanelKeyDown");
|
|
323
323
|
const resolveButtonLabel = () => {
|
|
324
324
|
if (Predicate.isNotUndefined(ariaLabel)) {
|
|
325
325
|
return __foldkitBrandViewResult(([h.AriaLabel(ariaLabel)]), "@foldkit/ui/popover/index.js#resolveButtonLabel");
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { Effect, Option, Schema
|
|
1
|
+
import { Effect, Option, Schema } from 'effect';
|
|
2
2
|
import { type Update } from 'foldkit';
|
|
3
3
|
import * as Command from 'foldkit/command';
|
|
4
4
|
import { type ChildAttribute, type Html } from 'foldkit/html';
|
|
5
5
|
import { type View as SubmodelView } from 'foldkit/submodel';
|
|
6
6
|
/** Controls the radio group layout direction and which arrow keys navigate between options. */
|
|
7
|
-
export declare const Orientation:
|
|
7
|
+
export declare const Orientation: Schema.Literals<readonly ["Horizontal", "Vertical"]>;
|
|
8
8
|
export type Orientation = typeof Orientation.Type;
|
|
9
9
|
/** Schema for the radio group's private interaction state. The selected
|
|
10
10
|
* option is owned by the parent and passed in via `ViewInputs.selectedValue`,
|
|
11
11
|
* so it is not stored here. `maybeFocusedIndex` is the roving-tabindex
|
|
12
12
|
* cursor: `None` means keyboard focus follows the selection, and a read-only
|
|
13
13
|
* group stores `Some(index)` while focus diverges from it. */
|
|
14
|
-
export declare const Model:
|
|
15
|
-
readonly id:
|
|
16
|
-
readonly maybeFocusedIndex:
|
|
14
|
+
export declare const Model: Schema.Struct<{
|
|
15
|
+
readonly id: Schema.String;
|
|
16
|
+
readonly maybeFocusedIndex: Schema.Option<Schema.Number>;
|
|
17
17
|
}>;
|
|
18
18
|
export type Model = typeof Model.Type;
|
|
19
19
|
/** Union of all messages the radio group can produce. */
|
|
20
20
|
export declare const Message: import("foldkit/message").MessageUnion<{
|
|
21
21
|
readonly SelectedOption: {
|
|
22
|
-
index:
|
|
23
|
-
value:
|
|
22
|
+
index: Schema.Number;
|
|
23
|
+
value: Schema.String;
|
|
24
24
|
};
|
|
25
25
|
readonly FocusedOption: {
|
|
26
|
-
index:
|
|
26
|
+
index: Schema.Number;
|
|
27
27
|
};
|
|
28
28
|
readonly CompletedFocusOption: {};
|
|
29
29
|
}>;
|
|
@@ -39,8 +39,8 @@ export type Selected<Value extends string = string> = Readonly<{
|
|
|
39
39
|
* `Update.foldChild` config handles them through `foldOutMessage`. */
|
|
40
40
|
export declare const OutMessage: import("foldkit/message").MessageUnion<{
|
|
41
41
|
readonly Selected: {
|
|
42
|
-
value:
|
|
43
|
-
index:
|
|
42
|
+
value: Schema.String;
|
|
43
|
+
index: Schema.Number;
|
|
44
44
|
};
|
|
45
45
|
}>;
|
|
46
46
|
/** Generic over `Value extends string` so consumers using
|
|
@@ -57,8 +57,8 @@ export type InitConfig = Readonly<{
|
|
|
57
57
|
export declare const init: (config: InitConfig) => Model;
|
|
58
58
|
/** Moves focus to the option at the given index. */
|
|
59
59
|
export declare const FocusOption: Command.CommandDefinitionWithArgs<"FocusOption", {
|
|
60
|
-
id:
|
|
61
|
-
index:
|
|
60
|
+
id: Schema.String;
|
|
61
|
+
index: Schema.Number;
|
|
62
62
|
}, Effect.Effect<{
|
|
63
63
|
readonly _tag: "CompletedFocusOption";
|
|
64
64
|
}, never, never>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/radioGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAEN,MAAM,EAEN,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/radioGroup/index.ts"],"names":[],"mappings":"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"}
|