@foldkit/ui 0.156.0 → 0.157.0
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.d.ts +4 -4
- package/dist/animation/index.d.ts.map +1 -1
- package/dist/animation/index.js +8 -8
- package/dist/animation/public.d.ts +1 -1
- package/dist/animation/public.d.ts.map +1 -1
- package/dist/animation/public.js +1 -1
- 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 +8 -2
- package/dist/animation/update.d.ts.map +1 -1
- package/dist/animation/update.js +22 -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 +74 -62
- 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 +12 -12
- package/dist/dialog/index.d.ts +14 -14
- package/dist/dialog/index.d.ts.map +1 -1
- package/dist/dialog/index.js +35 -23
- 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 +15 -15
- package/dist/hoverIntent/hoverIntent.d.ts.map +1 -1
- package/dist/hoverIntent/hoverIntent.js +17 -17
- 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/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 +74 -62
- 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 +82 -67
- package/dist/popover/index.d.ts +34 -34
- package/dist/popover/index.d.ts.map +1 -1
- package/dist/popover/index.js +49 -37
- 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 +5 -5
- package/dist/textarea/index.d.ts +2 -2
- package/dist/textarea/index.d.ts.map +1 -1
- 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 +29 -29
- package/dist/toast/test.d.ts.map +1 -1
- package/dist/toast/test.js +3 -3
- package/dist/toast/update.d.ts +61 -61
- package/dist/toast/update.d.ts.map +1 -1
- package/dist/toast/update.js +13 -13
- 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 +16 -16
- package/dist/virtualList/index.d.ts.map +1 -1
- package/dist/virtualList/index.js +13 -13
- package/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
|
|
2
|
-
import { Array, Effect, Equal, Equivalence, Match
|
|
2
|
+
import { Array, Effect, Equal, Equivalence, Match, Option, Queue, Schema, Stream, pipe, } from 'effect';
|
|
3
3
|
import * as Command from 'foldkit/command';
|
|
4
4
|
import * as Dom from 'foldkit/dom';
|
|
5
5
|
import { inertHtml as ih } from 'foldkit/html';
|
|
@@ -10,81 +10,81 @@ import * as Subscription from 'foldkit/subscription';
|
|
|
10
10
|
import * as Update from 'foldkit/update';
|
|
11
11
|
import { attributeSelector } from '../internal/selectors.js';
|
|
12
12
|
// MODEL
|
|
13
|
-
const Orientation =
|
|
14
|
-
const ScreenPoint =
|
|
15
|
-
screenX:
|
|
16
|
-
screenY:
|
|
13
|
+
const Orientation = Schema.Literals(['Horizontal', 'Vertical']);
|
|
14
|
+
const ScreenPoint = Schema.Struct({
|
|
15
|
+
screenX: Schema.Number,
|
|
16
|
+
screenY: Schema.Number,
|
|
17
17
|
});
|
|
18
|
-
const ClientPoint =
|
|
19
|
-
clientX:
|
|
20
|
-
clientY:
|
|
18
|
+
const ClientPoint = Schema.Struct({
|
|
19
|
+
clientX: Schema.Number,
|
|
20
|
+
clientY: Schema.Number,
|
|
21
21
|
});
|
|
22
|
-
const DropTarget =
|
|
23
|
-
containerId:
|
|
24
|
-
index:
|
|
22
|
+
const DropTarget = Schema.Struct({
|
|
23
|
+
containerId: Schema.String,
|
|
24
|
+
index: Schema.Number,
|
|
25
25
|
});
|
|
26
26
|
const DragState = defineTaggedUnion({
|
|
27
27
|
Idle: {},
|
|
28
28
|
Pending: {
|
|
29
|
-
itemId:
|
|
30
|
-
containerId:
|
|
31
|
-
index:
|
|
29
|
+
itemId: Schema.String,
|
|
30
|
+
containerId: Schema.String,
|
|
31
|
+
index: Schema.Number,
|
|
32
32
|
origin: ScreenPoint,
|
|
33
33
|
},
|
|
34
34
|
Dragging: {
|
|
35
|
-
itemId:
|
|
36
|
-
sourceContainerId:
|
|
37
|
-
sourceIndex:
|
|
35
|
+
itemId: Schema.String,
|
|
36
|
+
sourceContainerId: Schema.String,
|
|
37
|
+
sourceIndex: Schema.Number,
|
|
38
38
|
origin: ScreenPoint,
|
|
39
39
|
current: ClientPoint,
|
|
40
|
-
maybeDropTarget:
|
|
40
|
+
maybeDropTarget: Schema.Option(DropTarget),
|
|
41
41
|
},
|
|
42
42
|
KeyboardDragging: {
|
|
43
|
-
itemId:
|
|
44
|
-
sourceContainerId:
|
|
45
|
-
sourceIndex:
|
|
46
|
-
targetContainerId:
|
|
47
|
-
targetIndex:
|
|
43
|
+
itemId: Schema.String,
|
|
44
|
+
sourceContainerId: Schema.String,
|
|
45
|
+
sourceIndex: Schema.Number,
|
|
46
|
+
targetContainerId: Schema.String,
|
|
47
|
+
targetIndex: Schema.Number,
|
|
48
48
|
},
|
|
49
49
|
});
|
|
50
50
|
/** Schema for the drag-and-drop component's state, tracking its unique ID, orientation, and current drag phase. */
|
|
51
|
-
export const Model =
|
|
52
|
-
id:
|
|
51
|
+
export const Model = Schema.Struct({
|
|
52
|
+
id: Schema.String,
|
|
53
53
|
orientation: Orientation,
|
|
54
|
-
activationThreshold:
|
|
54
|
+
activationThreshold: Schema.Number,
|
|
55
55
|
dragState: DragState,
|
|
56
56
|
});
|
|
57
57
|
// MESSAGE
|
|
58
58
|
/** Union of all messages the drag-and-drop component can produce. */
|
|
59
59
|
export const Message = defineMessageUnion({
|
|
60
60
|
PressedDraggable: {
|
|
61
|
-
itemId:
|
|
62
|
-
containerId:
|
|
63
|
-
index:
|
|
64
|
-
screenX:
|
|
65
|
-
screenY:
|
|
61
|
+
itemId: Schema.String,
|
|
62
|
+
containerId: Schema.String,
|
|
63
|
+
index: Schema.Number,
|
|
64
|
+
screenX: Schema.Number,
|
|
65
|
+
screenY: Schema.Number,
|
|
66
66
|
},
|
|
67
67
|
MovedPointer: {
|
|
68
|
-
screenX:
|
|
69
|
-
screenY:
|
|
70
|
-
clientX:
|
|
71
|
-
clientY:
|
|
72
|
-
maybeDropTarget:
|
|
68
|
+
screenX: Schema.Number,
|
|
69
|
+
screenY: Schema.Number,
|
|
70
|
+
clientX: Schema.Number,
|
|
71
|
+
clientY: Schema.Number,
|
|
72
|
+
maybeDropTarget: Schema.Option(DropTarget),
|
|
73
73
|
},
|
|
74
74
|
ReleasedPointer: {},
|
|
75
75
|
CancelledDrag: {},
|
|
76
76
|
ActivatedKeyboardDrag: {
|
|
77
|
-
itemId:
|
|
78
|
-
containerId:
|
|
79
|
-
index:
|
|
77
|
+
itemId: Schema.String,
|
|
78
|
+
containerId: Schema.String,
|
|
79
|
+
index: Schema.Number,
|
|
80
80
|
},
|
|
81
81
|
CompletedResolveKeyboardMove: {
|
|
82
|
-
targetContainerId:
|
|
83
|
-
targetIndex:
|
|
82
|
+
targetContainerId: Schema.String,
|
|
83
|
+
targetIndex: Schema.Number,
|
|
84
84
|
},
|
|
85
85
|
ConfirmedKeyboardDrop: {},
|
|
86
86
|
PressedArrowKey: {
|
|
87
|
-
direction:
|
|
87
|
+
direction: Schema.Literals([
|
|
88
88
|
'Up',
|
|
89
89
|
'Down',
|
|
90
90
|
'Left',
|
|
@@ -100,11 +100,11 @@ export const Message = defineMessageUnion({
|
|
|
100
100
|
/** Union of all out-messages the drag-and-drop component can emit to its parent. */
|
|
101
101
|
export const OutMessage = defineMessageUnion({
|
|
102
102
|
Reordered: {
|
|
103
|
-
itemId:
|
|
104
|
-
fromContainerId:
|
|
105
|
-
fromIndex:
|
|
106
|
-
toContainerId:
|
|
107
|
-
toIndex:
|
|
103
|
+
itemId: Schema.String,
|
|
104
|
+
fromContainerId: Schema.String,
|
|
105
|
+
fromIndex: Schema.Number,
|
|
106
|
+
toContainerId: Schema.String,
|
|
107
|
+
toIndex: Schema.Number,
|
|
108
108
|
},
|
|
109
109
|
Cancelled: {},
|
|
110
110
|
});
|
|
@@ -120,7 +120,7 @@ export const init = (config) => (__foldkitBrandViewResult(({
|
|
|
120
120
|
}), "@foldkit/ui/dragAndDrop/index.js#init"));
|
|
121
121
|
/** Focuses a draggable item by ID after a keyboard move, drop, or cancel. */
|
|
122
122
|
export const FocusItem = Command.define('FocusItem', {
|
|
123
|
-
args: { itemId:
|
|
123
|
+
args: { itemId: Schema.String },
|
|
124
124
|
messages: [Message.CompletedFocusItem],
|
|
125
125
|
execute: ({ itemId }) => __foldkitBrandViewResult((Dom.focus(attributeSelector('data-draggable-id', itemId)).pipe(Effect.ignore, Effect.as(Message.CompletedFocusItem()))), "@foldkit/ui/dragAndDrop/index.js#execute"),
|
|
126
126
|
});
|
|
@@ -154,30 +154,30 @@ const resolveBetweenContainers = (config) => {
|
|
|
154
154
|
targetIndex: 0,
|
|
155
155
|
})), "@foldkit/ui/dragAndDrop/index.js#resolveBetweenContainers");
|
|
156
156
|
};
|
|
157
|
-
const resolveKeyboardMoveTarget = (config) => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((
|
|
157
|
+
const resolveKeyboardMoveTarget = (config) => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((Match.value(config.direction).pipe(Match.withReturnType(), Match.whenOr('Down', 'Right', () => __foldkitBrandViewResult((resolveWithinContainer({
|
|
158
158
|
itemId: config.itemId,
|
|
159
159
|
containerId: config.currentContainerId,
|
|
160
160
|
currentIndex: config.currentIndex,
|
|
161
161
|
isForward: true,
|
|
162
|
-
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~5")),
|
|
162
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~5")), Match.whenOr('Up', 'Left', () => __foldkitBrandViewResult((resolveWithinContainer({
|
|
163
163
|
itemId: config.itemId,
|
|
164
164
|
containerId: config.currentContainerId,
|
|
165
165
|
currentIndex: config.currentIndex,
|
|
166
166
|
isForward: false,
|
|
167
|
-
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~6")),
|
|
167
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~6")), Match.when('NextContainer', () => __foldkitBrandViewResult((resolveBetweenContainers({
|
|
168
168
|
currentContainerId: config.currentContainerId,
|
|
169
169
|
isForward: true,
|
|
170
|
-
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~7")),
|
|
170
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~7")), Match.when('PreviousContainer', () => __foldkitBrandViewResult((resolveBetweenContainers({
|
|
171
171
|
currentContainerId: config.currentContainerId,
|
|
172
172
|
isForward: false,
|
|
173
|
-
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~8")),
|
|
173
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~8")), Match.exhaustive)), "@foldkit/ui/dragAndDrop/index.js#anonymous~4"))), "@foldkit/ui/dragAndDrop/index.js#resolveKeyboardMoveTarget");
|
|
174
174
|
/** Resolves the next keyboard drag position by querying the DOM for adjacent sortable items and containers. */
|
|
175
175
|
export const ResolveKeyboardMove = Command.define('ResolveKeyboardMove', {
|
|
176
176
|
args: {
|
|
177
|
-
itemId:
|
|
178
|
-
currentContainerId:
|
|
179
|
-
currentIndex:
|
|
180
|
-
direction:
|
|
177
|
+
itemId: Schema.String,
|
|
178
|
+
currentContainerId: Schema.String,
|
|
179
|
+
currentIndex: Schema.Number,
|
|
180
|
+
direction: Schema.Literals([
|
|
181
181
|
'Up',
|
|
182
182
|
'Down',
|
|
183
183
|
'Left',
|
|
@@ -189,7 +189,7 @@ export const ResolveKeyboardMove = Command.define('ResolveKeyboardMove', {
|
|
|
189
189
|
messages: [Message.CompletedResolveKeyboardMove],
|
|
190
190
|
execute: resolveKeyboardMoveTarget,
|
|
191
191
|
});
|
|
192
|
-
const withUpdateReturn =
|
|
192
|
+
const withUpdateReturn = Match.withReturnType();
|
|
193
193
|
/** Processes a drag-and-drop Message and returns the next Model, optional
|
|
194
194
|
* Commands, and an optional OutMessage for the parent. */
|
|
195
195
|
export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
|
|
@@ -203,7 +203,7 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
|
|
|
203
203
|
})), "@foldkit/ui/dragAndDrop/index.js#dragState"),
|
|
204
204
|
}),
|
|
205
205
|
}), "@foldkit/ui/dragAndDrop/index.js#PressedDraggable")),
|
|
206
|
-
MovedPointer: ({ screenX, screenY, clientX, clientY, maybeDropTarget }) => __foldkitBrandViewResult((
|
|
206
|
+
MovedPointer: ({ screenX, screenY, clientX, clientY, maybeDropTarget }) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Pending', pending => {
|
|
207
207
|
const deltaX = screenX - pending.origin.screenX;
|
|
208
208
|
const deltaY = screenY - pending.origin.screenY;
|
|
209
209
|
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
|
@@ -222,7 +222,7 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
|
|
|
222
222
|
})), "@foldkit/ui/dragAndDrop/index.js#dragState~2"),
|
|
223
223
|
}),
|
|
224
224
|
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~9");
|
|
225
|
-
}),
|
|
225
|
+
}), Match.tag('Dragging', dragging => (__foldkitBrandViewResult(({
|
|
226
226
|
model: evo(model, {
|
|
227
227
|
dragState: () => __foldkitBrandViewResult((DragState.Dragging({
|
|
228
228
|
...dragging,
|
|
@@ -230,10 +230,10 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
|
|
|
230
230
|
maybeDropTarget,
|
|
231
231
|
})), "@foldkit/ui/dragAndDrop/index.js#dragState~3"),
|
|
232
232
|
}),
|
|
233
|
-
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~10"))),
|
|
234
|
-
ReleasedPointer: () => __foldkitBrandViewResult((
|
|
233
|
+
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~10"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/dragAndDrop/index.js#anonymous~11"))))), "@foldkit/ui/dragAndDrop/index.js#MovedPointer"),
|
|
234
|
+
ReleasedPointer: () => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Pending', () => (__foldkitBrandViewResult(({
|
|
235
235
|
model: evo(model, { dragState: () => __foldkitBrandViewResult((DragState.Idle()), "@foldkit/ui/dragAndDrop/index.js#dragState~4") }),
|
|
236
|
-
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~12"))),
|
|
236
|
+
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~12"))), Match.tag('Dragging', dragging => __foldkitBrandViewResult((Option.match(dragging.maybeDropTarget, {
|
|
237
237
|
onNone: () => (__foldkitBrandViewResult(({
|
|
238
238
|
model: evo(model, { dragState: () => __foldkitBrandViewResult((DragState.Idle()), "@foldkit/ui/dragAndDrop/index.js#dragState~5") }),
|
|
239
239
|
outMessage: OutMessage.Cancelled(),
|
|
@@ -248,7 +248,7 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
|
|
|
248
248
|
toIndex: dropTarget.index,
|
|
249
249
|
}),
|
|
250
250
|
}), "@foldkit/ui/dragAndDrop/index.js#onSome")),
|
|
251
|
-
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~13")),
|
|
251
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~13")), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/dragAndDrop/index.js#anonymous~14"))))), "@foldkit/ui/dragAndDrop/index.js#ReleasedPointer"),
|
|
252
252
|
CancelledDrag: () => {
|
|
253
253
|
const maybeFocusCommand = Option.liftPredicate(model.dragState, dragState => __foldkitBrandViewResult((dragState._tag === 'KeyboardDragging'), "@foldkit/ui/dragAndDrop/index.js#anonymous~15")).pipe(Option.map(({ itemId }) => __foldkitBrandViewResult((FocusItem({ itemId })), "@foldkit/ui/dragAndDrop/index.js#anonymous~16")));
|
|
254
254
|
const maybeOutMessage = Option.liftPredicate(model.dragState._tag, _tag => __foldkitBrandViewResult((_tag === 'Dragging' || _tag === 'KeyboardDragging'), "@foldkit/ui/dragAndDrop/index.js#anonymous~17")).pipe(Option.map(() => __foldkitBrandViewResult((OutMessage.Cancelled()), "@foldkit/ui/dragAndDrop/index.js#anonymous~18")));
|
|
@@ -269,7 +269,7 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
|
|
|
269
269
|
})), "@foldkit/ui/dragAndDrop/index.js#dragState~8"),
|
|
270
270
|
}),
|
|
271
271
|
}), "@foldkit/ui/dragAndDrop/index.js#ActivatedKeyboardDrag")),
|
|
272
|
-
CompletedResolveKeyboardMove: ({ targetContainerId, targetIndex }) => __foldkitBrandViewResult((
|
|
272
|
+
CompletedResolveKeyboardMove: ({ targetContainerId, targetIndex }) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('KeyboardDragging', keyboardDragging => (__foldkitBrandViewResult(({
|
|
273
273
|
model: evo(model, {
|
|
274
274
|
dragState: () => __foldkitBrandViewResult((DragState.KeyboardDragging({
|
|
275
275
|
...keyboardDragging,
|
|
@@ -278,8 +278,8 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
|
|
|
278
278
|
})), "@foldkit/ui/dragAndDrop/index.js#dragState~9"),
|
|
279
279
|
}),
|
|
280
280
|
commands: [FocusItem({ itemId: keyboardDragging.itemId })],
|
|
281
|
-
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~19"))),
|
|
282
|
-
ConfirmedKeyboardDrop: () => __foldkitBrandViewResult((
|
|
281
|
+
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~19"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/dragAndDrop/index.js#anonymous~20"))))), "@foldkit/ui/dragAndDrop/index.js#CompletedResolveKeyboardMove"),
|
|
282
|
+
ConfirmedKeyboardDrop: () => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('KeyboardDragging', keyboardDragging => (__foldkitBrandViewResult(({
|
|
283
283
|
model: evo(model, { dragState: () => __foldkitBrandViewResult((DragState.Idle()), "@foldkit/ui/dragAndDrop/index.js#dragState~10") }),
|
|
284
284
|
commands: [FocusItem({ itemId: keyboardDragging.itemId })],
|
|
285
285
|
outMessage: OutMessage.Reordered({
|
|
@@ -289,8 +289,8 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
|
|
|
289
289
|
toContainerId: keyboardDragging.targetContainerId,
|
|
290
290
|
toIndex: keyboardDragging.targetIndex,
|
|
291
291
|
}),
|
|
292
|
-
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~21"))),
|
|
293
|
-
PressedArrowKey: ({ direction }) => __foldkitBrandViewResult((
|
|
292
|
+
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~21"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/dragAndDrop/index.js#anonymous~22"))))), "@foldkit/ui/dragAndDrop/index.js#ConfirmedKeyboardDrop"),
|
|
293
|
+
PressedArrowKey: ({ direction }) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('KeyboardDragging', keyboardDragging => (__foldkitBrandViewResult(({
|
|
294
294
|
model,
|
|
295
295
|
commands: [
|
|
296
296
|
ResolveKeyboardMove({
|
|
@@ -300,14 +300,14 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
|
|
|
300
300
|
direction,
|
|
301
301
|
}),
|
|
302
302
|
],
|
|
303
|
-
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~23"))),
|
|
303
|
+
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~23"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/dragAndDrop/index.js#anonymous~24"))))), "@foldkit/ui/dragAndDrop/index.js#PressedArrowKey"),
|
|
304
304
|
AdvancedAutoScrollFrame: () => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/dragAndDrop/index.js#AdvancedAutoScrollFrame")),
|
|
305
305
|
CompletedFocusItem: () => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/dragAndDrop/index.js#CompletedFocusItem")),
|
|
306
306
|
})), "@foldkit/ui/dragAndDrop/index.js#update");
|
|
307
307
|
// SUBSCRIPTION
|
|
308
|
-
const DragActivity =
|
|
309
|
-
const PointerDragActivity =
|
|
310
|
-
const KeyboardDragActivity =
|
|
308
|
+
const DragActivity = Schema.Literals(['Idle', 'Active']);
|
|
309
|
+
const PointerDragActivity = Schema.Literals(['Idle', 'Active']);
|
|
310
|
+
const KeyboardDragActivity = Schema.Literals(['Idle', 'Active']);
|
|
311
311
|
const resolveDropTarget = (clientX, clientY, orientation) => {
|
|
312
312
|
const maybeContainer = pipe(document.elementsFromPoint(clientX, clientY), Array.fromIterable, Array.findFirst(element => __foldkitBrandViewResult((element.hasAttribute('data-droppable-id')), "@foldkit/ui/dragAndDrop/index.js#anonymous~25")));
|
|
313
313
|
return __foldkitBrandViewResult((Option.flatMap(maybeContainer, container => {
|
|
@@ -318,7 +318,7 @@ const resolveDropTarget = (clientX, clientY, orientation) => {
|
|
|
318
318
|
const sortableItems = Array.fromIterable(container.querySelectorAll('[data-sortable-id]'));
|
|
319
319
|
const insertionIndex = pipe(sortableItems, Array.findFirstIndex(item => {
|
|
320
320
|
const rect = item.getBoundingClientRect();
|
|
321
|
-
return __foldkitBrandViewResult((
|
|
321
|
+
return __foldkitBrandViewResult((Match.value(orientation).pipe(Match.when('Vertical', () => __foldkitBrandViewResult((clientY < rect.top + rect.height / 2), "@foldkit/ui/dragAndDrop/index.js#anonymous~28")), Match.when('Horizontal', () => __foldkitBrandViewResult((clientX < rect.left + rect.width / 2), "@foldkit/ui/dragAndDrop/index.js#anonymous~29")), Match.exhaustive)), "@foldkit/ui/dragAndDrop/index.js#anonymous~27");
|
|
322
322
|
}), Option.getOrElse(() => __foldkitBrandViewResult((sortableItems.length), "@foldkit/ui/dragAndDrop/index.js#anonymous~30")));
|
|
323
323
|
return __foldkitBrandViewResult((Option.some({ containerId, index: insertionIndex })), "@foldkit/ui/dragAndDrop/index.js#anonymous~26");
|
|
324
324
|
})), "@foldkit/ui/dragAndDrop/index.js#resolveDropTarget");
|
|
@@ -340,9 +340,9 @@ const autoScroll = (clientY) => {
|
|
|
340
340
|
window.scrollBy(0, speed);
|
|
341
341
|
}
|
|
342
342
|
};
|
|
343
|
-
const pointerDragActivityFromModel = (model) => __foldkitBrandViewResult((
|
|
344
|
-
const dragActivityFromModel = (model) => __foldkitBrandViewResult((
|
|
345
|
-
const keyboardDragActivityFromModel = (model) => __foldkitBrandViewResult((
|
|
343
|
+
const pointerDragActivityFromModel = (model) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(Match.withReturnType(), Match.tag('Pending', 'Dragging', () => __foldkitBrandViewResult(('Active'), "@foldkit/ui/dragAndDrop/index.js#anonymous~31")), Match.orElse(() => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/dragAndDrop/index.js#anonymous~32")))), "@foldkit/ui/dragAndDrop/index.js#pointerDragActivityFromModel");
|
|
344
|
+
const dragActivityFromModel = (model) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(Match.withReturnType(), Match.tag('Idle', () => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/dragAndDrop/index.js#anonymous~33")), Match.orElse(() => __foldkitBrandViewResult(('Active'), "@foldkit/ui/dragAndDrop/index.js#anonymous~34")))), "@foldkit/ui/dragAndDrop/index.js#dragActivityFromModel");
|
|
345
|
+
const keyboardDragActivityFromModel = (model) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(Match.withReturnType(), Match.tag('KeyboardDragging', () => __foldkitBrandViewResult(('Active'), "@foldkit/ui/dragAndDrop/index.js#anonymous~35")), Match.orElse(() => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/dragAndDrop/index.js#anonymous~36")))), "@foldkit/ui/dragAndDrop/index.js#keyboardDragActivityFromModel");
|
|
346
346
|
/** Document-level subscriptions for pointer and keyboard events during drag operations. */
|
|
347
347
|
export const subscriptions = Subscription.make()(entry => (__foldkitBrandViewResult(({
|
|
348
348
|
documentPointer: entry({
|
|
@@ -415,8 +415,8 @@ export const subscriptions = Subscription.make()(entry => (__foldkitBrandViewRes
|
|
|
415
415
|
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~50")), Stream.filter(Option.isSome), Stream.map(option => __foldkitBrandViewResult((option.value), "@foldkit/ui/dragAndDrop/index.js#anonymous~53"))), Effect.sync(() => __foldkitBrandViewResult((dragActivity === 'Active'), "@foldkit/ui/dragAndDrop/index.js#anonymous~54")))), "@foldkit/ui/dragAndDrop/index.js#dependenciesToStream~3"),
|
|
416
416
|
}),
|
|
417
417
|
autoScroll: entry({
|
|
418
|
-
isDragging:
|
|
419
|
-
clientY:
|
|
418
|
+
isDragging: Schema.Boolean,
|
|
419
|
+
clientY: Schema.Number,
|
|
420
420
|
}, {
|
|
421
421
|
modelToDependencies: model => (__foldkitBrandViewResult(({
|
|
422
422
|
isDragging: model.dragState._tag === 'Dragging',
|
|
@@ -441,7 +441,7 @@ export const subscriptions = Subscription.make()(entry => (__foldkitBrandViewRes
|
|
|
441
441
|
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~37")));
|
|
442
442
|
// VIEW
|
|
443
443
|
const LEFT_MOUSE_BUTTON = 0;
|
|
444
|
-
const arrowKeyToDirection = (key) => __foldkitBrandViewResult((
|
|
444
|
+
const arrowKeyToDirection = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.withReturnType(), Match.when('ArrowUp', () => __foldkitBrandViewResult(('Up'), "@foldkit/ui/dragAndDrop/index.js#anonymous~61")), Match.when('ArrowDown', () => __foldkitBrandViewResult(('Down'), "@foldkit/ui/dragAndDrop/index.js#anonymous~62")), Match.when('ArrowLeft', () => __foldkitBrandViewResult(('Left'), "@foldkit/ui/dragAndDrop/index.js#anonymous~63")), Match.when('ArrowRight', () => __foldkitBrandViewResult(('Right'), "@foldkit/ui/dragAndDrop/index.js#anonymous~64")), Match.option)), "@foldkit/ui/dragAndDrop/index.js#arrowKeyToDirection");
|
|
445
445
|
/** Returns attributes the parent attaches to a draggable element. Handles pointer-down, keyboard activation, and ARIA. */
|
|
446
446
|
export const draggable = (config, h) => {
|
|
447
447
|
const isKeyboardDragActivationKey = (key) => __foldkitBrandViewResult((key === ' ' || key === 'Enter'), "@foldkit/ui/dragAndDrop/index.js#isKeyboardDragActivationKey");
|
|
@@ -494,20 +494,20 @@ export const sortable = (itemId) => __foldkitBrandViewResult(([
|
|
|
494
494
|
]), "@foldkit/ui/dragAndDrop/index.js#sortable");
|
|
495
495
|
const ghostTransform = (clientX, clientY) => __foldkitBrandViewResult((`translate3d(${String(clientX)}px, ${String(clientY)}px, 0)`), "@foldkit/ui/dragAndDrop/index.js#ghostTransform");
|
|
496
496
|
/** Returns positioning styles for the ghost element, or None when not dragging with a pointer. */
|
|
497
|
-
export const ghostStyle = (model) => __foldkitBrandViewResult((
|
|
497
|
+
export const ghostStyle = (model) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(Match.tag('Dragging', dragging => (__foldkitBrandViewResult(({
|
|
498
498
|
position: 'fixed',
|
|
499
499
|
top: '0',
|
|
500
500
|
left: '0',
|
|
501
501
|
transform: ghostTransform(dragging.current.clientX, dragging.current.clientY),
|
|
502
502
|
'pointer-events': 'none',
|
|
503
503
|
'z-index': '9999',
|
|
504
|
-
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~67"))),
|
|
504
|
+
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~67"))), Match.option)), "@foldkit/ui/dragAndDrop/index.js#ghostStyle");
|
|
505
505
|
/** Returns true when the component is actively dragging (pointer or keyboard). */
|
|
506
506
|
export const isDragging = ({ dragState: { _tag } }) => __foldkitBrandViewResult((_tag === 'Dragging' || _tag === 'KeyboardDragging'), "@foldkit/ui/dragAndDrop/index.js#isDragging");
|
|
507
507
|
/** Returns the ID of the item currently being dragged or pending, if any. */
|
|
508
|
-
export const maybeDraggedItemId = (model) => __foldkitBrandViewResult((
|
|
508
|
+
export const maybeDraggedItemId = (model) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(Match.tag('Pending', pending => __foldkitBrandViewResult((pending.itemId), "@foldkit/ui/dragAndDrop/index.js#anonymous~68")), Match.tag('Dragging', dragging => __foldkitBrandViewResult((dragging.itemId), "@foldkit/ui/dragAndDrop/index.js#anonymous~69")), Match.tag('KeyboardDragging', keyboardDragging => __foldkitBrandViewResult((keyboardDragging.itemId), "@foldkit/ui/dragAndDrop/index.js#anonymous~70")), Match.option)), "@foldkit/ui/dragAndDrop/index.js#maybeDraggedItemId");
|
|
509
509
|
/** Returns the current drop target, if any. Populated during pointer drag (from collision detection) and keyboard drag (from resolved position). */
|
|
510
|
-
export const maybeDropTarget = (model) => __foldkitBrandViewResult((
|
|
510
|
+
export const maybeDropTarget = (model) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(Match.tag('Dragging', dragging => __foldkitBrandViewResult((dragging.maybeDropTarget), "@foldkit/ui/dragAndDrop/index.js#anonymous~71")), Match.tag('KeyboardDragging', keyboardDragging => __foldkitBrandViewResult((Option.some({
|
|
511
511
|
containerId: keyboardDragging.targetContainerId,
|
|
512
512
|
index: keyboardDragging.targetIndex,
|
|
513
|
-
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~72")),
|
|
513
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~72")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/dragAndDrop/index.js#anonymous~73")))), "@foldkit/ui/dragAndDrop/index.js#maybeDropTarget");
|
package/dist/fileDrop/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Schema
|
|
1
|
+
import { Schema } from 'effect';
|
|
2
2
|
import { type Update } from 'foldkit';
|
|
3
3
|
import { type ChildAttribute, type Html } from 'foldkit/html';
|
|
4
4
|
/** Schema for the file-drop component's state.
|
|
@@ -7,9 +7,9 @@ import { type ChildAttribute, type Html } from 'foldkit/html';
|
|
|
7
7
|
* drag is hovering. The html layer's `OnDragEnter`/`OnDragLeave` handlers
|
|
8
8
|
* track the per-element active state internally so transitions between
|
|
9
9
|
* children of the zone do not flicker the boolean off-and-on. */
|
|
10
|
-
export declare const Model:
|
|
11
|
-
readonly id:
|
|
12
|
-
readonly isDragOver:
|
|
10
|
+
export declare const Model: Schema.Struct<{
|
|
11
|
+
readonly id: Schema.String;
|
|
12
|
+
readonly isDragOver: Schema.Boolean;
|
|
13
13
|
}>;
|
|
14
14
|
export type Model = typeof Model.Type;
|
|
15
15
|
/** Union of all messages the file-drop component can produce. */
|
|
@@ -17,7 +17,7 @@ export declare const Message: import("foldkit/message").MessageUnion<{
|
|
|
17
17
|
readonly EnteredDragZone: {};
|
|
18
18
|
readonly LeftDragZone: {};
|
|
19
19
|
readonly DroppedFiles: {
|
|
20
|
-
files:
|
|
20
|
+
files: Schema.NonEmptyArray<Schema.Schema<File>>;
|
|
21
21
|
};
|
|
22
22
|
readonly DroppedNonFiles: {};
|
|
23
23
|
}>;
|
|
@@ -26,7 +26,7 @@ export type Message = typeof Message.Type;
|
|
|
26
26
|
* path and `RejectedNonFiles` when a drop event fires without files. */
|
|
27
27
|
export declare const OutMessage: import("foldkit/message").MessageUnion<{
|
|
28
28
|
readonly ReceivedFiles: {
|
|
29
|
-
files:
|
|
29
|
+
files: Schema.NonEmptyArray<Schema.Schema<File>>;
|
|
30
30
|
};
|
|
31
31
|
readonly RejectedNonFiles: {};
|
|
32
32
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fileDrop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fileDrop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,QAAQ,CAAA;AACtC,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,IAAI,EAAmB,MAAM,cAAc,CAAA;AAO9E;;;;;iEAKiE;AACjE,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,iEAAiE;AACjE,eAAO,MAAM,OAAO;;;;QAGF,KAAK;;;EAErB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC;wEACwE;AACxE,eAAO,MAAM,UAAU;;QACJ,KAAK;;;EAEtB,CAAA;AACF,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAI/C,gEAAgE;AAChE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;CACX,CAAC,CAAA;AAEF,qEAAqE;AACrE,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAGxC,CAAA;AAIF;kCACkC;AAClC,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;EAiBlD,CAAA;AAIH;yBACyB;AACzB,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC;;yCAEqC;IACrC,IAAI,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACnC;;2BAEuB;IACvB,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;CACrC,CAAC,CAAA;AAEF,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,MAAM,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAChD,MAAM,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC,CAAA;AASF;iDACiD;AACjD,eAAO,MAAM,IAAI;;;;;;;;;;;;;YAfP,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI;aACvC,aAAa,CAAC,MAAM,CAAC;eACnB,OAAO;iBACL,OAAO;GAkDrB,CAAA"}
|
package/dist/fileDrop/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
|
|
2
|
-
import { Array, Schema
|
|
2
|
+
import { Array, Schema } from 'effect';
|
|
3
3
|
import * as File from 'foldkit/file';
|
|
4
4
|
import { childAttributes } from 'foldkit/html';
|
|
5
5
|
import { defineMessageUnion } from 'foldkit/message';
|
|
@@ -12,23 +12,23 @@ import { defineView } from 'foldkit/submodel';
|
|
|
12
12
|
* drag is hovering. The html layer's `OnDragEnter`/`OnDragLeave` handlers
|
|
13
13
|
* track the per-element active state internally so transitions between
|
|
14
14
|
* children of the zone do not flicker the boolean off-and-on. */
|
|
15
|
-
export const Model =
|
|
16
|
-
id:
|
|
17
|
-
isDragOver:
|
|
15
|
+
export const Model = Schema.Struct({
|
|
16
|
+
id: Schema.String,
|
|
17
|
+
isDragOver: Schema.Boolean,
|
|
18
18
|
});
|
|
19
19
|
// MESSAGE
|
|
20
20
|
/** Union of all messages the file-drop component can produce. */
|
|
21
21
|
export const Message = defineMessageUnion({
|
|
22
22
|
EnteredDragZone: {},
|
|
23
23
|
LeftDragZone: {},
|
|
24
|
-
DroppedFiles: { files:
|
|
24
|
+
DroppedFiles: { files: Schema.NonEmptyArray(File.File) },
|
|
25
25
|
DroppedNonFiles: {},
|
|
26
26
|
});
|
|
27
27
|
// OUT MESSAGE
|
|
28
28
|
/** The file-drop component's OutMessages: `ReceivedFiles` on the happy
|
|
29
29
|
* path and `RejectedNonFiles` when a drop event fires without files. */
|
|
30
30
|
export const OutMessage = defineMessageUnion({
|
|
31
|
-
ReceivedFiles: { files:
|
|
31
|
+
ReceivedFiles: { files: Schema.NonEmptyArray(File.File) },
|
|
32
32
|
RejectedNonFiles: {},
|
|
33
33
|
});
|
|
34
34
|
/** Creates an initial file-drop model. Drag state starts cleared. */
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { Duration, Effect, Option, Schema
|
|
1
|
+
import { Duration, 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 Update from 'foldkit/update';
|
|
5
5
|
import { Message, OutMessage } from './message.js';
|
|
6
6
|
/** Schema for HoverIntent state. It tracks pointer and focus engagement over a trigger and its panel, visibility, delay timers, and Escape dismissal. */
|
|
7
|
-
export declare const Model:
|
|
8
|
-
readonly isOpen:
|
|
9
|
-
readonly isTriggerHovered:
|
|
10
|
-
readonly isPanelHovered:
|
|
11
|
-
readonly maybeFocusLocation:
|
|
12
|
-
readonly isDismissed:
|
|
13
|
-
readonly openDelay:
|
|
14
|
-
readonly closeDelay:
|
|
15
|
-
readonly pendingOpenVersion:
|
|
16
|
-
readonly pendingCloseVersion:
|
|
7
|
+
export declare const Model: Schema.Struct<{
|
|
8
|
+
readonly isOpen: Schema.Boolean;
|
|
9
|
+
readonly isTriggerHovered: Schema.Boolean;
|
|
10
|
+
readonly isPanelHovered: Schema.Boolean;
|
|
11
|
+
readonly maybeFocusLocation: Schema.Option<Schema.Literals<readonly ["Trigger", "Panel"]>>;
|
|
12
|
+
readonly isDismissed: Schema.Boolean;
|
|
13
|
+
readonly openDelay: Schema.DurationFromMillis;
|
|
14
|
+
readonly closeDelay: Schema.DurationFromMillis;
|
|
15
|
+
readonly pendingOpenVersion: Schema.Number;
|
|
16
|
+
readonly pendingCloseVersion: Schema.Number;
|
|
17
17
|
}>;
|
|
18
18
|
export type Model = typeof Model.Type;
|
|
19
19
|
/** Configuration for creating a HoverIntent Model. */
|
|
@@ -25,16 +25,16 @@ export type InitConfig = Readonly<{
|
|
|
25
25
|
export declare const init: (config?: InitConfig) => Model;
|
|
26
26
|
/** Waits before opening, then emits the version that scheduled the wait. */
|
|
27
27
|
export declare const WaitBeforeOpening: Command.CommandDefinitionWithArgs<"WaitBeforeOpening", {
|
|
28
|
-
delay:
|
|
29
|
-
version:
|
|
28
|
+
delay: Schema.DurationFromMillis;
|
|
29
|
+
version: Schema.Number;
|
|
30
30
|
}, Effect.Effect<{
|
|
31
31
|
readonly _tag: "CompletedWaitBeforeOpening";
|
|
32
32
|
readonly version: number;
|
|
33
33
|
}, never, never>>;
|
|
34
34
|
/** Waits before closing, then emits the version that scheduled the wait. */
|
|
35
35
|
export declare const WaitBeforeClosing: Command.CommandDefinitionWithArgs<"WaitBeforeClosing", {
|
|
36
|
-
delay:
|
|
37
|
-
version:
|
|
36
|
+
delay: Schema.DurationFromMillis;
|
|
37
|
+
version: Schema.Number;
|
|
38
38
|
}, Effect.Effect<{
|
|
39
39
|
readonly _tag: "CompletedWaitBeforeClosing";
|
|
40
40
|
readonly version: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hoverIntent.d.ts","sourceRoot":"","sources":["../../src/hoverIntent/hoverIntent.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"hoverIntent.d.ts","sourceRoot":"","sources":["../../src/hoverIntent/hoverIntent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAiB,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,IAAI,EAAmB,MAAM,cAAc,CAAA;AAG9E,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAExC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAOlD,yJAAyJ;AACzJ,eAAO,MAAM,KAAK;;;;;;;;;;EAUhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAKrC,sDAAsD;AACtD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,SAAS,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAA;IAC1B,UAAU,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAA;CAC5B,CAAC,CAAA;AAEF,yPAAyP;AACzP,eAAO,MAAM,IAAI,YAAY,UAAU,KAAQ,KAgB7C,CAAA;AAIF,4EAA4E;AAC5E,eAAO,MAAM,iBAAiB;;;;;;iBAO5B,CAAA;AAEF,4EAA4E;AAC5E,eAAO,MAAM,iBAAiB;;;;;;iBAO5B,CAAA;AAEF,KAAK,YAAY,GAAG,MAAM,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAA;AAyI3E;0EAC0E;AAC1E,eAAO,MAAM,KAAK,UAAW,KAAK,KAAG,YAOlC,CAAA;AAEH,iHAAiH;AACjH,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO,KAAG,YAyCpD,CAAA;AAIJ;;;;kEAIkE;AAClE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACtC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACpC,SAAS,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,uLAAuL;IACvL,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC,CAAC,CAAA;AAEF,8GAA8G;AAC9G,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IANf,uLAAuL;2BAChK,MAAM;YACrB,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI;GAiDrC,CAAA"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
|
|
2
|
-
import { Duration, Effect, Match
|
|
2
|
+
import { Duration, Effect, Match, Number, Option, Schema } from 'effect';
|
|
3
3
|
import * as Command from 'foldkit/command';
|
|
4
4
|
import { childAttributes } from 'foldkit/html';
|
|
5
5
|
import { evo } from 'foldkit/struct';
|
|
6
6
|
import { defineView } from 'foldkit/submodel';
|
|
7
7
|
import { Message, OutMessage } from './message.js';
|
|
8
8
|
// MODEL
|
|
9
|
-
const FocusLocation =
|
|
9
|
+
const FocusLocation = Schema.Literals(['Trigger', 'Panel']);
|
|
10
10
|
/** Schema for HoverIntent state. It tracks pointer and focus engagement over a trigger and its panel, visibility, delay timers, and Escape dismissal. */
|
|
11
|
-
export const Model =
|
|
12
|
-
isOpen:
|
|
13
|
-
isTriggerHovered:
|
|
14
|
-
isPanelHovered:
|
|
15
|
-
maybeFocusLocation:
|
|
16
|
-
isDismissed:
|
|
17
|
-
openDelay:
|
|
18
|
-
closeDelay:
|
|
19
|
-
pendingOpenVersion:
|
|
20
|
-
pendingCloseVersion:
|
|
11
|
+
export const Model = Schema.Struct({
|
|
12
|
+
isOpen: Schema.Boolean,
|
|
13
|
+
isTriggerHovered: Schema.Boolean,
|
|
14
|
+
isPanelHovered: Schema.Boolean,
|
|
15
|
+
maybeFocusLocation: Schema.Option(FocusLocation),
|
|
16
|
+
isDismissed: Schema.Boolean,
|
|
17
|
+
openDelay: Schema.DurationFromMillis,
|
|
18
|
+
closeDelay: Schema.DurationFromMillis,
|
|
19
|
+
pendingOpenVersion: Schema.Number,
|
|
20
|
+
pendingCloseVersion: Schema.Number,
|
|
21
21
|
});
|
|
22
22
|
const DEFAULT_OPEN_DELAY = Duration.millis(200);
|
|
23
23
|
const DEFAULT_CLOSE_DELAY = Duration.millis(300);
|
|
@@ -40,13 +40,13 @@ export const init = (config = {}) => (__foldkitBrandViewResult(({
|
|
|
40
40
|
// COMMAND
|
|
41
41
|
/** Waits before opening, then emits the version that scheduled the wait. */
|
|
42
42
|
export const WaitBeforeOpening = Command.define('WaitBeforeOpening', {
|
|
43
|
-
args: { delay:
|
|
43
|
+
args: { delay: Schema.DurationFromMillis, version: Schema.Number },
|
|
44
44
|
messages: [Message.CompletedWaitBeforeOpening],
|
|
45
45
|
execute: ({ delay, version }) => __foldkitBrandViewResult((Effect.sleep(delay).pipe(Effect.as(Message.CompletedWaitBeforeOpening({ version })))), "@foldkit/ui/hoverIntent/hoverIntent.js#execute"),
|
|
46
46
|
});
|
|
47
47
|
/** Waits before closing, then emits the version that scheduled the wait. */
|
|
48
48
|
export const WaitBeforeClosing = Command.define('WaitBeforeClosing', {
|
|
49
|
-
args: { delay:
|
|
49
|
+
args: { delay: Schema.DurationFromMillis, version: Schema.Number },
|
|
50
50
|
messages: [Message.CompletedWaitBeforeClosing],
|
|
51
51
|
execute: ({ delay, version }) => __foldkitBrandViewResult((Effect.sleep(delay).pipe(Effect.as(Message.CompletedWaitBeforeClosing({ version })))), "@foldkit/ui/hoverIntent/hoverIntent.js#execute~2"),
|
|
52
52
|
});
|
|
@@ -186,13 +186,13 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
|
|
|
186
186
|
})), "@foldkit/ui/hoverIntent/hoverIntent.js#update");
|
|
187
187
|
/** Renders headless HoverIntent event bundles. It owns no markup, ARIA semantics, positioning, or styling. */
|
|
188
188
|
export const view = defineView((model, { focusTriggerSelector, toView }, h) => {
|
|
189
|
-
const toPressedEscape = (source) => __foldkitBrandViewResult(((key) => __foldkitBrandViewResult((
|
|
189
|
+
const toPressedEscape = (source) => __foldkitBrandViewResult(((key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.when('Escape', () => __foldkitBrandViewResult((Option.some(Message.PressedEscape({ source }))), "@foldkit/ui/hoverIntent/hoverIntent.js#anonymous~6")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/hoverIntent/hoverIntent.js#anonymous~7")))), "@foldkit/ui/hoverIntent/hoverIntent.js#anonymous~5")), "@foldkit/ui/hoverIntent/hoverIntent.js#toPressedEscape");
|
|
190
190
|
const panelEscapeHandler = focusTriggerSelector === undefined
|
|
191
191
|
? h.OnKeyDownPreventDefault(toPressedEscape('Panel'))
|
|
192
|
-
: h.OnKeyDownFocus(key => __foldkitBrandViewResult((
|
|
192
|
+
: h.OnKeyDownFocus(key => __foldkitBrandViewResult((Match.value(key).pipe(Match.when('Escape', () => __foldkitBrandViewResult((Option.some({
|
|
193
193
|
focusSelector: focusTriggerSelector,
|
|
194
194
|
message: Message.PressedEscape({ source: 'Panel' }),
|
|
195
|
-
})), "@foldkit/ui/hoverIntent/hoverIntent.js#anonymous~9")),
|
|
195
|
+
})), "@foldkit/ui/hoverIntent/hoverIntent.js#anonymous~9")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/hoverIntent/hoverIntent.js#anonymous~10")))), "@foldkit/ui/hoverIntent/hoverIntent.js#anonymous~8"));
|
|
196
196
|
return __foldkitBrandViewResult((toView({
|
|
197
197
|
trigger: childAttributes([
|
|
198
198
|
h.OnMouseEnter(Message.EnteredTrigger()),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Schema
|
|
1
|
+
import { Schema } from 'effect';
|
|
2
2
|
/** Union of all Messages the HoverIntent component can produce. */
|
|
3
3
|
export declare const Message: import("foldkit/message").MessageUnion<{
|
|
4
4
|
readonly EnteredTrigger: {};
|
|
@@ -10,13 +10,13 @@ export declare const Message: import("foldkit/message").MessageUnion<{
|
|
|
10
10
|
readonly FocusedPanel: {};
|
|
11
11
|
readonly BlurredPanel: {};
|
|
12
12
|
readonly PressedEscape: {
|
|
13
|
-
source:
|
|
13
|
+
source: Schema.Literals<readonly ["Trigger", "Panel"]>;
|
|
14
14
|
};
|
|
15
15
|
readonly CompletedWaitBeforeOpening: {
|
|
16
|
-
version:
|
|
16
|
+
version: Schema.Number;
|
|
17
17
|
};
|
|
18
18
|
readonly CompletedWaitBeforeClosing: {
|
|
19
|
-
version:
|
|
19
|
+
version: Schema.Number;
|
|
20
20
|
};
|
|
21
21
|
}>;
|
|
22
22
|
export type Message = typeof Message.Type;
|