@foldkit/ui 0.128.1 → 0.130.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.js +12 -11
- package/dist/animation/index.js +11 -10
- package/dist/animation/schema.js +3 -2
- package/dist/animation/update.js +26 -25
- package/dist/button/index.js +3 -2
- package/dist/calendar/index.js +159 -158
- package/dist/checkbox/index.js +9 -8
- package/dist/combobox/multi.d.ts +1 -0
- package/dist/combobox/multi.d.ts.map +1 -1
- package/dist/combobox/multi.js +20 -19
- package/dist/combobox/shared.d.ts +1 -0
- package/dist/combobox/shared.d.ts.map +1 -1
- package/dist/combobox/shared.js +169 -168
- package/dist/combobox/single.d.ts +1 -0
- package/dist/combobox/single.d.ts.map +1 -1
- package/dist/combobox/single.js +23 -22
- package/dist/datePicker/index.js +69 -68
- package/dist/dialog/index.js +52 -51
- package/dist/disclosure/index.js +11 -10
- package/dist/dragAndDrop/index.js +122 -121
- package/dist/fieldset/index.js +5 -4
- package/dist/fileDrop/index.js +23 -22
- package/dist/group.js +7 -6
- package/dist/input/index.js +4 -3
- package/dist/internal/optionExtensions.js +2 -1
- package/dist/internal/selectors.js +2 -1
- package/dist/keyboard.js +5 -4
- package/dist/listbox/multi.d.ts +1 -0
- package/dist/listbox/multi.d.ts.map +1 -1
- package/dist/listbox/multi.js +12 -11
- package/dist/listbox/shared.d.ts +1 -0
- package/dist/listbox/shared.d.ts.map +1 -1
- package/dist/listbox/shared.js +171 -170
- package/dist/listbox/single.d.ts +1 -0
- package/dist/listbox/single.d.ts.map +1 -1
- package/dist/listbox/single.js +13 -12
- package/dist/menu/index.js +167 -166
- package/dist/nav/index.js +7 -6
- package/dist/popover/index.js +87 -86
- package/dist/radioGroup/index.js +23 -22
- package/dist/select/index.js +4 -3
- package/dist/slider/index.js +72 -71
- package/dist/switch/index.js +6 -5
- package/dist/tabs/index.js +34 -33
- package/dist/test/apps/disabledButton.js +17 -16
- package/dist/textarea/index.js +4 -3
- package/dist/toast/index.d.ts +4 -0
- package/dist/toast/index.d.ts.map +1 -1
- package/dist/toast/index.js +19 -18
- package/dist/toast/schema.js +10 -9
- package/dist/toast/test.js +2 -1
- package/dist/toast/update.d.ts +4 -0
- package/dist/toast/update.d.ts.map +1 -1
- package/dist/toast/update.js +79 -78
- package/dist/tooltip/index.js +59 -58
- package/dist/typeahead.js +6 -5
- package/dist/virtualList/index.js +66 -65
- package/package.json +4 -3
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
|
|
1
2
|
import { Array, Effect, Equal, Equivalence, Match as M, Option, Queue, Schema as S, Stream, pipe, } from 'effect';
|
|
2
3
|
import * as Command from 'foldkit/command';
|
|
3
4
|
import * as Dom from 'foldkit/dom';
|
|
@@ -129,61 +130,61 @@ export const OutMessage = S.Union([Reordered, Cancelled]);
|
|
|
129
130
|
/** Configuration for creating a drag-and-drop model with `init`. */
|
|
130
131
|
const DEFAULT_ACTIVATION_THRESHOLD_PIXELS = 5;
|
|
131
132
|
/** Creates an initial drag-and-drop model. Starts in the Idle state with Vertical orientation and 5px activation threshold by default. */
|
|
132
|
-
export const init = (config) => ({
|
|
133
|
+
export const init = (config) => (__foldkitBrandViewResult(({
|
|
133
134
|
id: config.id,
|
|
134
135
|
orientation: config.orientation ?? 'Vertical',
|
|
135
136
|
activationThreshold: config.activationThreshold ?? DEFAULT_ACTIVATION_THRESHOLD_PIXELS,
|
|
136
137
|
dragState: Idle(),
|
|
137
|
-
});
|
|
138
|
+
}), "@foldkit/ui/dragAndDrop/index.js#init"));
|
|
138
139
|
/** Focuses a draggable item by ID after keyboard drop or cancel. */
|
|
139
|
-
export const FocusItem = Command.define('FocusItem', { itemId: S.String }, CompletedFocusItem)(({ itemId }) => Dom.focus(`[data-draggable-id="${itemId}"]`).pipe(Effect.ignore, Effect.as(CompletedFocusItem())));
|
|
140
|
+
export const FocusItem = Command.define('FocusItem', { itemId: S.String }, CompletedFocusItem)(({ itemId }) => __foldkitBrandViewResult((Dom.focus(`[data-draggable-id="${itemId}"]`).pipe(Effect.ignore, Effect.as(CompletedFocusItem()))), "@foldkit/ui/dragAndDrop/index.js#anonymous"));
|
|
140
141
|
const resolveWithinContainer = (config) => {
|
|
141
142
|
const container = document.querySelector(`[data-droppable-id="${config.containerId}"]`);
|
|
142
143
|
if (!container) {
|
|
143
|
-
return ResolvedKeyboardMove({
|
|
144
|
+
return __foldkitBrandViewResult((ResolvedKeyboardMove({
|
|
144
145
|
targetContainerId: config.containerId,
|
|
145
146
|
targetIndex: config.currentIndex,
|
|
146
|
-
});
|
|
147
|
+
})), "@foldkit/ui/dragAndDrop/index.js#resolveWithinContainer");
|
|
147
148
|
}
|
|
148
|
-
const itemCount = pipe(container.querySelectorAll('[data-sortable-id]'), Array.fromIterable, Array.filter(({ dataset }) => dataset['sortableId'] !== config.itemId), Array.length);
|
|
149
|
+
const itemCount = pipe(container.querySelectorAll('[data-sortable-id]'), Array.fromIterable, Array.filter(({ dataset }) => __foldkitBrandViewResult((dataset['sortableId'] !== config.itemId), "@foldkit/ui/dragAndDrop/index.js#anonymous~2")), Array.length);
|
|
149
150
|
const nextIndex = config.isForward
|
|
150
151
|
? Math.min(config.currentIndex + 1, itemCount)
|
|
151
152
|
: Math.max(config.currentIndex - 1, 0);
|
|
152
|
-
return ResolvedKeyboardMove({
|
|
153
|
+
return __foldkitBrandViewResult((ResolvedKeyboardMove({
|
|
153
154
|
targetContainerId: config.containerId,
|
|
154
155
|
targetIndex: nextIndex,
|
|
155
|
-
});
|
|
156
|
+
})), "@foldkit/ui/dragAndDrop/index.js#resolveWithinContainer");
|
|
156
157
|
};
|
|
157
158
|
const resolveBetweenContainers = (config) => {
|
|
158
159
|
const allContainers = Array.fromIterable(document.querySelectorAll('[data-droppable-id]'));
|
|
159
|
-
const currentContainerIndex = pipe(allContainers, Array.findFirstIndex(({ dataset }) => dataset['droppableId'] === config.currentContainerId), Option.getOrElse(() => 0));
|
|
160
|
+
const currentContainerIndex = pipe(allContainers, Array.findFirstIndex(({ dataset }) => __foldkitBrandViewResult((dataset['droppableId'] === config.currentContainerId), "@foldkit/ui/dragAndDrop/index.js#anonymous~3")), Option.getOrElse(() => __foldkitBrandViewResult((0), "@foldkit/ui/dragAndDrop/index.js#anonymous~4")));
|
|
160
161
|
const nextContainerIndex = config.isForward
|
|
161
162
|
? Math.min(currentContainerIndex + 1, allContainers.length - 1)
|
|
162
163
|
: Math.max(currentContainerIndex - 1, 0);
|
|
163
164
|
const nextContainerId = allContainers[nextContainerIndex]?.dataset['droppableId'] ??
|
|
164
165
|
config.currentContainerId;
|
|
165
|
-
return ResolvedKeyboardMove({
|
|
166
|
+
return __foldkitBrandViewResult((ResolvedKeyboardMove({
|
|
166
167
|
targetContainerId: nextContainerId,
|
|
167
168
|
targetIndex: 0,
|
|
168
|
-
});
|
|
169
|
+
})), "@foldkit/ui/dragAndDrop/index.js#resolveBetweenContainers");
|
|
169
170
|
};
|
|
170
|
-
const resolveKeyboardMoveTarget = (config) => Effect.sync(() => M.value(config.direction).pipe(M.withReturnType(), M.whenOr('Down', 'Right', () => resolveWithinContainer({
|
|
171
|
+
const resolveKeyboardMoveTarget = (config) => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((M.value(config.direction).pipe(M.withReturnType(), M.whenOr('Down', 'Right', () => __foldkitBrandViewResult((resolveWithinContainer({
|
|
171
172
|
itemId: config.itemId,
|
|
172
173
|
containerId: config.currentContainerId,
|
|
173
174
|
currentIndex: config.currentIndex,
|
|
174
175
|
isForward: true,
|
|
175
|
-
})), M.whenOr('Up', 'Left', () => resolveWithinContainer({
|
|
176
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~6")), M.whenOr('Up', 'Left', () => __foldkitBrandViewResult((resolveWithinContainer({
|
|
176
177
|
itemId: config.itemId,
|
|
177
178
|
containerId: config.currentContainerId,
|
|
178
179
|
currentIndex: config.currentIndex,
|
|
179
180
|
isForward: false,
|
|
180
|
-
})), M.when('NextContainer', () => resolveBetweenContainers({
|
|
181
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~7")), M.when('NextContainer', () => __foldkitBrandViewResult((resolveBetweenContainers({
|
|
181
182
|
currentContainerId: config.currentContainerId,
|
|
182
183
|
isForward: true,
|
|
183
|
-
})), M.when('PreviousContainer', () => resolveBetweenContainers({
|
|
184
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~8")), M.when('PreviousContainer', () => __foldkitBrandViewResult((resolveBetweenContainers({
|
|
184
185
|
currentContainerId: config.currentContainerId,
|
|
185
186
|
isForward: false,
|
|
186
|
-
})), M.exhaustive));
|
|
187
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~9")), M.exhaustive)), "@foldkit/ui/dragAndDrop/index.js#anonymous~5"))), "@foldkit/ui/dragAndDrop/index.js#resolveKeyboardMoveTarget");
|
|
187
188
|
/** Resolves the next keyboard drag position by querying the DOM for adjacent sortable items and containers. */
|
|
188
189
|
export const ResolveKeyboardMove = Command.define('ResolveKeyboardMove', {
|
|
189
190
|
itemId: S.String,
|
|
@@ -200,63 +201,63 @@ export const ResolveKeyboardMove = Command.define('ResolveKeyboardMove', {
|
|
|
200
201
|
}, ResolvedKeyboardMove)(resolveKeyboardMoveTarget);
|
|
201
202
|
const withUpdateReturn = M.withReturnType();
|
|
202
203
|
/** Processes a drag-and-drop message and returns the next model, commands, and an optional out-message for the parent. */
|
|
203
|
-
export const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
|
|
204
|
-
PressedDraggable: ({ itemId, containerId, index, screenX, screenY }) => [
|
|
204
|
+
export const update = (model, message) => __foldkitBrandViewResult((M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
|
|
205
|
+
PressedDraggable: ({ itemId, containerId, index, screenX, screenY }) => __foldkitBrandViewResult(([
|
|
205
206
|
evo(model, {
|
|
206
|
-
dragState: () => Pending({
|
|
207
|
+
dragState: () => __foldkitBrandViewResult((Pending({
|
|
207
208
|
itemId,
|
|
208
209
|
containerId,
|
|
209
210
|
index,
|
|
210
211
|
origin: { screenX, screenY },
|
|
211
|
-
}),
|
|
212
|
+
})), "@foldkit/ui/dragAndDrop/index.js#dragState"),
|
|
212
213
|
}),
|
|
213
214
|
[],
|
|
214
215
|
Option.none(),
|
|
215
|
-
],
|
|
216
|
-
MovedPointer: ({ screenX, screenY, clientX, clientY, maybeDropTarget }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Pending', pending => {
|
|
216
|
+
]), "@foldkit/ui/dragAndDrop/index.js#PressedDraggable"),
|
|
217
|
+
MovedPointer: ({ screenX, screenY, clientX, clientY, maybeDropTarget }) => __foldkitBrandViewResult((M.value(model.dragState).pipe(withUpdateReturn, M.tag('Pending', pending => {
|
|
217
218
|
const deltaX = screenX - pending.origin.screenX;
|
|
218
219
|
const deltaY = screenY - pending.origin.screenY;
|
|
219
220
|
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
|
220
221
|
if (distance < model.activationThreshold) {
|
|
221
|
-
return [model, [], Option.none()];
|
|
222
|
+
return __foldkitBrandViewResult(([model, [], Option.none()]), "@foldkit/ui/dragAndDrop/index.js#anonymous~10");
|
|
222
223
|
}
|
|
223
|
-
return [
|
|
224
|
+
return __foldkitBrandViewResult(([
|
|
224
225
|
evo(model, {
|
|
225
|
-
dragState: () => Dragging({
|
|
226
|
+
dragState: () => __foldkitBrandViewResult((Dragging({
|
|
226
227
|
itemId: pending.itemId,
|
|
227
228
|
sourceContainerId: pending.containerId,
|
|
228
229
|
sourceIndex: pending.index,
|
|
229
230
|
origin: pending.origin,
|
|
230
231
|
current: { clientX, clientY },
|
|
231
232
|
maybeDropTarget,
|
|
232
|
-
}),
|
|
233
|
+
})), "@foldkit/ui/dragAndDrop/index.js#dragState~2"),
|
|
233
234
|
}),
|
|
234
235
|
[],
|
|
235
236
|
Option.none(),
|
|
236
|
-
];
|
|
237
|
-
}), M.tag('Dragging', dragging => [
|
|
237
|
+
]), "@foldkit/ui/dragAndDrop/index.js#anonymous~10");
|
|
238
|
+
}), M.tag('Dragging', dragging => __foldkitBrandViewResult(([
|
|
238
239
|
evo(model, {
|
|
239
|
-
dragState: () => Dragging({
|
|
240
|
+
dragState: () => __foldkitBrandViewResult((Dragging({
|
|
240
241
|
...dragging,
|
|
241
242
|
current: { clientX, clientY },
|
|
242
243
|
maybeDropTarget,
|
|
243
|
-
}),
|
|
244
|
+
})), "@foldkit/ui/dragAndDrop/index.js#dragState~3"),
|
|
244
245
|
}),
|
|
245
246
|
[],
|
|
246
247
|
Option.none(),
|
|
247
|
-
]), M.orElse(() => [model, [], Option.none()])),
|
|
248
|
-
ReleasedPointer: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Pending', () => [
|
|
249
|
-
evo(model, { dragState: () => Idle() }),
|
|
248
|
+
]), "@foldkit/ui/dragAndDrop/index.js#anonymous~11")), M.orElse(() => __foldkitBrandViewResult(([model, [], Option.none()]), "@foldkit/ui/dragAndDrop/index.js#anonymous~12")))), "@foldkit/ui/dragAndDrop/index.js#MovedPointer"),
|
|
249
|
+
ReleasedPointer: () => __foldkitBrandViewResult((M.value(model.dragState).pipe(withUpdateReturn, M.tag('Pending', () => __foldkitBrandViewResult(([
|
|
250
|
+
evo(model, { dragState: () => __foldkitBrandViewResult((Idle()), "@foldkit/ui/dragAndDrop/index.js#dragState~4") }),
|
|
250
251
|
[],
|
|
251
252
|
Option.none(),
|
|
252
|
-
]), M.tag('Dragging', dragging => Option.match(dragging.maybeDropTarget, {
|
|
253
|
-
onNone: () => [
|
|
254
|
-
evo(model, { dragState: () => Idle() }),
|
|
253
|
+
]), "@foldkit/ui/dragAndDrop/index.js#anonymous~13")), M.tag('Dragging', dragging => __foldkitBrandViewResult((Option.match(dragging.maybeDropTarget, {
|
|
254
|
+
onNone: () => __foldkitBrandViewResult(([
|
|
255
|
+
evo(model, { dragState: () => __foldkitBrandViewResult((Idle()), "@foldkit/ui/dragAndDrop/index.js#dragState~5") }),
|
|
255
256
|
[],
|
|
256
257
|
Option.some(Cancelled()),
|
|
257
|
-
],
|
|
258
|
-
onSome: dropTarget => [
|
|
259
|
-
evo(model, { dragState: () => Idle() }),
|
|
258
|
+
]), "@foldkit/ui/dragAndDrop/index.js#onNone"),
|
|
259
|
+
onSome: dropTarget => __foldkitBrandViewResult(([
|
|
260
|
+
evo(model, { dragState: () => __foldkitBrandViewResult((Idle()), "@foldkit/ui/dragAndDrop/index.js#dragState~6") }),
|
|
260
261
|
[],
|
|
261
262
|
Option.some(Reordered({
|
|
262
263
|
itemId: dragging.itemId,
|
|
@@ -265,43 +266,43 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
|
|
|
265
266
|
toContainerId: dropTarget.containerId,
|
|
266
267
|
toIndex: dropTarget.index,
|
|
267
268
|
})),
|
|
268
|
-
],
|
|
269
|
-
})), M.orElse(() => [model, [], Option.none()])),
|
|
269
|
+
]), "@foldkit/ui/dragAndDrop/index.js#onSome"),
|
|
270
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~14")), M.orElse(() => __foldkitBrandViewResult(([model, [], Option.none()]), "@foldkit/ui/dragAndDrop/index.js#anonymous~15")))), "@foldkit/ui/dragAndDrop/index.js#ReleasedPointer"),
|
|
270
271
|
CancelledDrag: () => {
|
|
271
|
-
const maybeFocusCommand = Option.liftPredicate(model.dragState, dragState => dragState._tag === 'KeyboardDragging').pipe(Option.map(({ itemId }) => FocusItem({ itemId })));
|
|
272
|
-
const maybeOutMessage = Option.liftPredicate(model.dragState._tag, _tag => _tag === 'Dragging' || _tag === 'KeyboardDragging').pipe(Option.map(() => Cancelled()));
|
|
273
|
-
return [
|
|
274
|
-
evo(model, { dragState: () => Idle() }),
|
|
272
|
+
const maybeFocusCommand = Option.liftPredicate(model.dragState, dragState => __foldkitBrandViewResult((dragState._tag === 'KeyboardDragging'), "@foldkit/ui/dragAndDrop/index.js#anonymous~16")).pipe(Option.map(({ itemId }) => __foldkitBrandViewResult((FocusItem({ itemId })), "@foldkit/ui/dragAndDrop/index.js#anonymous~17")));
|
|
273
|
+
const maybeOutMessage = Option.liftPredicate(model.dragState._tag, _tag => __foldkitBrandViewResult((_tag === 'Dragging' || _tag === 'KeyboardDragging'), "@foldkit/ui/dragAndDrop/index.js#anonymous~18")).pipe(Option.map(() => __foldkitBrandViewResult((Cancelled()), "@foldkit/ui/dragAndDrop/index.js#anonymous~19")));
|
|
274
|
+
return __foldkitBrandViewResult(([
|
|
275
|
+
evo(model, { dragState: () => __foldkitBrandViewResult((Idle()), "@foldkit/ui/dragAndDrop/index.js#dragState~7") }),
|
|
275
276
|
Option.toArray(maybeFocusCommand),
|
|
276
277
|
maybeOutMessage,
|
|
277
|
-
];
|
|
278
|
+
]), "@foldkit/ui/dragAndDrop/index.js#CancelledDrag");
|
|
278
279
|
},
|
|
279
|
-
ActivatedKeyboardDrag: ({ itemId, containerId, index }) => [
|
|
280
|
+
ActivatedKeyboardDrag: ({ itemId, containerId, index }) => __foldkitBrandViewResult(([
|
|
280
281
|
evo(model, {
|
|
281
|
-
dragState: () => KeyboardDragging({
|
|
282
|
+
dragState: () => __foldkitBrandViewResult((KeyboardDragging({
|
|
282
283
|
itemId,
|
|
283
284
|
sourceContainerId: containerId,
|
|
284
285
|
sourceIndex: index,
|
|
285
286
|
targetContainerId: containerId,
|
|
286
287
|
targetIndex: index,
|
|
287
|
-
}),
|
|
288
|
+
})), "@foldkit/ui/dragAndDrop/index.js#dragState~8"),
|
|
288
289
|
}),
|
|
289
290
|
[],
|
|
290
291
|
Option.none(),
|
|
291
|
-
],
|
|
292
|
-
ResolvedKeyboardMove: ({ targetContainerId, targetIndex }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('KeyboardDragging', keyboardDragging => [
|
|
292
|
+
]), "@foldkit/ui/dragAndDrop/index.js#ActivatedKeyboardDrag"),
|
|
293
|
+
ResolvedKeyboardMove: ({ targetContainerId, targetIndex }) => __foldkitBrandViewResult((M.value(model.dragState).pipe(withUpdateReturn, M.tag('KeyboardDragging', keyboardDragging => __foldkitBrandViewResult(([
|
|
293
294
|
evo(model, {
|
|
294
|
-
dragState: () => KeyboardDragging({
|
|
295
|
+
dragState: () => __foldkitBrandViewResult((KeyboardDragging({
|
|
295
296
|
...keyboardDragging,
|
|
296
297
|
targetContainerId,
|
|
297
298
|
targetIndex,
|
|
298
|
-
}),
|
|
299
|
+
})), "@foldkit/ui/dragAndDrop/index.js#dragState~9"),
|
|
299
300
|
}),
|
|
300
301
|
[],
|
|
301
302
|
Option.none(),
|
|
302
|
-
]), M.orElse(() => [model, [], Option.none()])),
|
|
303
|
-
ConfirmedKeyboardDrop: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('KeyboardDragging', keyboardDragging => [
|
|
304
|
-
evo(model, { dragState: () => Idle() }),
|
|
303
|
+
]), "@foldkit/ui/dragAndDrop/index.js#anonymous~20")), M.orElse(() => __foldkitBrandViewResult(([model, [], Option.none()]), "@foldkit/ui/dragAndDrop/index.js#anonymous~21")))), "@foldkit/ui/dragAndDrop/index.js#ResolvedKeyboardMove"),
|
|
304
|
+
ConfirmedKeyboardDrop: () => __foldkitBrandViewResult((M.value(model.dragState).pipe(withUpdateReturn, M.tag('KeyboardDragging', keyboardDragging => __foldkitBrandViewResult(([
|
|
305
|
+
evo(model, { dragState: () => __foldkitBrandViewResult((Idle()), "@foldkit/ui/dragAndDrop/index.js#dragState~10") }),
|
|
305
306
|
[FocusItem({ itemId: keyboardDragging.itemId })],
|
|
306
307
|
Option.some(Reordered({
|
|
307
308
|
itemId: keyboardDragging.itemId,
|
|
@@ -310,8 +311,8 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
|
|
|
310
311
|
toContainerId: keyboardDragging.targetContainerId,
|
|
311
312
|
toIndex: keyboardDragging.targetIndex,
|
|
312
313
|
})),
|
|
313
|
-
]), M.orElse(() => [model, [], Option.none()])),
|
|
314
|
-
PressedArrowKey: ({ direction }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('KeyboardDragging', keyboardDragging => [
|
|
314
|
+
]), "@foldkit/ui/dragAndDrop/index.js#anonymous~22")), M.orElse(() => __foldkitBrandViewResult(([model, [], Option.none()]), "@foldkit/ui/dragAndDrop/index.js#anonymous~23")))), "@foldkit/ui/dragAndDrop/index.js#ConfirmedKeyboardDrop"),
|
|
315
|
+
PressedArrowKey: ({ direction }) => __foldkitBrandViewResult((M.value(model.dragState).pipe(withUpdateReturn, M.tag('KeyboardDragging', keyboardDragging => __foldkitBrandViewResult(([
|
|
315
316
|
model,
|
|
316
317
|
[
|
|
317
318
|
ResolveKeyboardMove({
|
|
@@ -322,28 +323,28 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
|
|
|
322
323
|
}),
|
|
323
324
|
],
|
|
324
325
|
Option.none(),
|
|
325
|
-
]), M.orElse(() => [model, [], Option.none()])),
|
|
326
|
-
AdvancedAutoScrollFrame: () => [model, [], Option.none()],
|
|
327
|
-
CompletedFocusItem: () => [model, [], Option.none()],
|
|
328
|
-
}));
|
|
326
|
+
]), "@foldkit/ui/dragAndDrop/index.js#anonymous~24")), M.orElse(() => __foldkitBrandViewResult(([model, [], Option.none()]), "@foldkit/ui/dragAndDrop/index.js#anonymous~25")))), "@foldkit/ui/dragAndDrop/index.js#PressedArrowKey"),
|
|
327
|
+
AdvancedAutoScrollFrame: () => __foldkitBrandViewResult(([model, [], Option.none()]), "@foldkit/ui/dragAndDrop/index.js#AdvancedAutoScrollFrame"),
|
|
328
|
+
CompletedFocusItem: () => __foldkitBrandViewResult(([model, [], Option.none()]), "@foldkit/ui/dragAndDrop/index.js#CompletedFocusItem"),
|
|
329
|
+
}))), "@foldkit/ui/dragAndDrop/index.js#update");
|
|
329
330
|
// SUBSCRIPTION
|
|
330
331
|
const DragActivity = S.Literals(['Idle', 'Active']);
|
|
331
332
|
const PointerDragActivity = S.Literals(['Idle', 'Active']);
|
|
332
333
|
const KeyboardDragActivity = S.Literals(['Idle', 'Active']);
|
|
333
334
|
const resolveDropTarget = (clientX, clientY, orientation) => {
|
|
334
|
-
const maybeContainer = pipe(document.elementsFromPoint(clientX, clientY), Array.fromIterable, Array.findFirst(element => element.hasAttribute('data-droppable-id')));
|
|
335
|
-
return Option.flatMap(maybeContainer, container => {
|
|
335
|
+
const maybeContainer = pipe(document.elementsFromPoint(clientX, clientY), Array.fromIterable, Array.findFirst(element => __foldkitBrandViewResult((element.hasAttribute('data-droppable-id')), "@foldkit/ui/dragAndDrop/index.js#anonymous~26")));
|
|
336
|
+
return __foldkitBrandViewResult((Option.flatMap(maybeContainer, container => {
|
|
336
337
|
const containerId = container.getAttribute('data-droppable-id');
|
|
337
338
|
if (!containerId) {
|
|
338
|
-
return Option.none();
|
|
339
|
+
return __foldkitBrandViewResult((Option.none()), "@foldkit/ui/dragAndDrop/index.js#anonymous~27");
|
|
339
340
|
}
|
|
340
341
|
const sortableItems = Array.fromIterable(container.querySelectorAll('[data-sortable-id]'));
|
|
341
342
|
const insertionIndex = pipe(sortableItems, Array.findFirstIndex(item => {
|
|
342
343
|
const rect = item.getBoundingClientRect();
|
|
343
|
-
return M.value(orientation).pipe(M.when('Vertical', () => clientY < rect.top + rect.height / 2), M.when('Horizontal', () => clientX < rect.left + rect.width / 2), M.exhaustive);
|
|
344
|
-
}), Option.getOrElse(() => sortableItems.length));
|
|
345
|
-
return Option.some({ containerId, index: insertionIndex });
|
|
346
|
-
});
|
|
344
|
+
return __foldkitBrandViewResult((M.value(orientation).pipe(M.when('Vertical', () => __foldkitBrandViewResult((clientY < rect.top + rect.height / 2), "@foldkit/ui/dragAndDrop/index.js#anonymous~29")), M.when('Horizontal', () => __foldkitBrandViewResult((clientX < rect.left + rect.width / 2), "@foldkit/ui/dragAndDrop/index.js#anonymous~30")), M.exhaustive)), "@foldkit/ui/dragAndDrop/index.js#anonymous~28");
|
|
345
|
+
}), Option.getOrElse(() => __foldkitBrandViewResult((sortableItems.length), "@foldkit/ui/dragAndDrop/index.js#anonymous~31")));
|
|
346
|
+
return __foldkitBrandViewResult((Option.some({ containerId, index: insertionIndex })), "@foldkit/ui/dragAndDrop/index.js#anonymous~27");
|
|
347
|
+
})), "@foldkit/ui/dragAndDrop/index.js#resolveDropTarget");
|
|
347
348
|
};
|
|
348
349
|
const DEFAULT_AUTO_SCROLL_EDGE_PIXELS = 40;
|
|
349
350
|
const DEFAULT_AUTO_SCROLL_MAX_SPEED = 15;
|
|
@@ -362,94 +363,94 @@ const autoScroll = (clientY) => {
|
|
|
362
363
|
window.scrollBy(0, speed);
|
|
363
364
|
}
|
|
364
365
|
};
|
|
365
|
-
const pointerDragActivityFromModel = (model) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Pending', 'Dragging', () => 'Active'), M.orElse(() => 'Idle'));
|
|
366
|
-
const dragActivityFromModel = (model) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Idle', () => 'Idle'), M.orElse(() => 'Active'));
|
|
367
|
-
const keyboardDragActivityFromModel = (model) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('KeyboardDragging', () => 'Active'), M.orElse(() => 'Idle'));
|
|
366
|
+
const pointerDragActivityFromModel = (model) => __foldkitBrandViewResult((M.value(model.dragState).pipe(M.withReturnType(), M.tag('Pending', 'Dragging', () => __foldkitBrandViewResult(('Active'), "@foldkit/ui/dragAndDrop/index.js#anonymous~32")), M.orElse(() => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/dragAndDrop/index.js#anonymous~33")))), "@foldkit/ui/dragAndDrop/index.js#pointerDragActivityFromModel");
|
|
367
|
+
const dragActivityFromModel = (model) => __foldkitBrandViewResult((M.value(model.dragState).pipe(M.withReturnType(), M.tag('Idle', () => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/dragAndDrop/index.js#anonymous~34")), M.orElse(() => __foldkitBrandViewResult(('Active'), "@foldkit/ui/dragAndDrop/index.js#anonymous~35")))), "@foldkit/ui/dragAndDrop/index.js#dragActivityFromModel");
|
|
368
|
+
const keyboardDragActivityFromModel = (model) => __foldkitBrandViewResult((M.value(model.dragState).pipe(M.withReturnType(), M.tag('KeyboardDragging', () => __foldkitBrandViewResult(('Active'), "@foldkit/ui/dragAndDrop/index.js#anonymous~36")), M.orElse(() => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/dragAndDrop/index.js#anonymous~37")))), "@foldkit/ui/dragAndDrop/index.js#keyboardDragActivityFromModel");
|
|
368
369
|
/** Document-level subscriptions for pointer and keyboard events during drag operations. */
|
|
369
|
-
export const subscriptions = Subscription.make()(entry => ({
|
|
370
|
+
export const subscriptions = Subscription.make()(entry => (__foldkitBrandViewResult(({
|
|
370
371
|
documentPointer: entry({
|
|
371
372
|
dragActivity: PointerDragActivity,
|
|
372
373
|
orientation: Orientation,
|
|
373
374
|
}, {
|
|
374
|
-
modelToDependencies: model => ({
|
|
375
|
+
modelToDependencies: model => (__foldkitBrandViewResult(({
|
|
375
376
|
dragActivity: pointerDragActivityFromModel(model),
|
|
376
377
|
orientation: model.orientation,
|
|
377
|
-
}),
|
|
378
|
+
}), "@foldkit/ui/dragAndDrop/index.js#modelToDependencies")),
|
|
378
379
|
dependenciesToStream: ({ dragActivity, orientation }) => {
|
|
379
|
-
const pointerEvents = Stream.merge(Stream.fromEventListener(document, 'pointermove').pipe(Stream.mapEffect(event => Effect.sync(() => MovedPointer({
|
|
380
|
+
const pointerEvents = Stream.merge(Stream.fromEventListener(document, 'pointermove').pipe(Stream.mapEffect(event => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((MovedPointer({
|
|
380
381
|
screenX: event.screenX,
|
|
381
382
|
screenY: event.screenY,
|
|
382
383
|
clientX: event.clientX,
|
|
383
384
|
clientY: event.clientY,
|
|
384
385
|
maybeDropTarget: resolveDropTarget(event.clientX, event.clientY, orientation),
|
|
385
|
-
})))), Stream.fromEventListener(document, 'pointerup').pipe(Stream.map(() => ReleasedPointer())));
|
|
386
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~40"))), "@foldkit/ui/dragAndDrop/index.js#anonymous~39"))), Stream.fromEventListener(document, 'pointerup').pipe(Stream.map(() => __foldkitBrandViewResult((ReleasedPointer()), "@foldkit/ui/dragAndDrop/index.js#anonymous~41"))));
|
|
386
387
|
// NOTE: prevents text selection and locks cursor to grabbing during
|
|
387
388
|
// pointer drag. Uses a <style> element for cursor because inline styles
|
|
388
389
|
// on <html> don't override descendant elements' cursor values.
|
|
389
|
-
const documentDragStyles = Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
|
|
390
|
+
const documentDragStyles = Stream.callback(() => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
|
|
390
391
|
document.documentElement.style.setProperty('user-select', 'none');
|
|
391
392
|
document.documentElement.style.setProperty('-webkit-user-select', 'none');
|
|
392
393
|
const cursorStyle = document.createElement('style');
|
|
393
394
|
cursorStyle.textContent = '* { cursor: grabbing !important; }';
|
|
394
395
|
document.head.appendChild(cursorStyle);
|
|
395
|
-
return cursorStyle;
|
|
396
|
-
}), cursorStyle => Effect.sync(() => {
|
|
396
|
+
return __foldkitBrandViewResult((cursorStyle), "@foldkit/ui/dragAndDrop/index.js#anonymous~43");
|
|
397
|
+
}), cursorStyle => __foldkitBrandViewResult((Effect.sync(() => {
|
|
397
398
|
document.documentElement.style.removeProperty('user-select');
|
|
398
399
|
document.documentElement.style.removeProperty('-webkit-user-select');
|
|
399
400
|
cursorStyle.remove();
|
|
400
|
-
})).pipe(Effect.flatMap(() => Effect.never)));
|
|
401
|
-
return Stream.when(Stream.merge(pointerEvents, documentDragStyles), Effect.sync(() => dragActivity === 'Active'));
|
|
401
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~44")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@foldkit/ui/dragAndDrop/index.js#anonymous~46")))), "@foldkit/ui/dragAndDrop/index.js#anonymous~42"));
|
|
402
|
+
return __foldkitBrandViewResult((Stream.when(Stream.merge(pointerEvents, documentDragStyles), Effect.sync(() => __foldkitBrandViewResult((dragActivity === 'Active'), "@foldkit/ui/dragAndDrop/index.js#anonymous~47")))), "@foldkit/ui/dragAndDrop/index.js#dependenciesToStream");
|
|
402
403
|
},
|
|
403
404
|
}),
|
|
404
405
|
documentEscape: entry({ dragActivity: DragActivity }, {
|
|
405
|
-
modelToDependencies: model => ({
|
|
406
|
+
modelToDependencies: model => (__foldkitBrandViewResult(({
|
|
406
407
|
dragActivity: dragActivityFromModel(model),
|
|
407
|
-
}),
|
|
408
|
-
dependenciesToStream: ({ dragActivity }) => Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.filter(({ key }) => key === 'Escape'), Stream.map(() => CancelledDrag())), Effect.sync(() => dragActivity === 'Active')),
|
|
408
|
+
}), "@foldkit/ui/dragAndDrop/index.js#modelToDependencies~2")),
|
|
409
|
+
dependenciesToStream: ({ dragActivity }) => __foldkitBrandViewResult((Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.filter(({ key }) => __foldkitBrandViewResult((key === 'Escape'), "@foldkit/ui/dragAndDrop/index.js#anonymous~48")), Stream.map(() => __foldkitBrandViewResult((CancelledDrag()), "@foldkit/ui/dragAndDrop/index.js#anonymous~49"))), Effect.sync(() => __foldkitBrandViewResult((dragActivity === 'Active'), "@foldkit/ui/dragAndDrop/index.js#anonymous~50")))), "@foldkit/ui/dragAndDrop/index.js#dependenciesToStream~2"),
|
|
409
410
|
}),
|
|
410
411
|
documentKeyboard: entry({ dragActivity: KeyboardDragActivity }, {
|
|
411
|
-
modelToDependencies: model => ({
|
|
412
|
+
modelToDependencies: model => (__foldkitBrandViewResult(({
|
|
412
413
|
dragActivity: keyboardDragActivityFromModel(model),
|
|
413
|
-
}),
|
|
414
|
-
dependenciesToStream: ({ dragActivity }) => Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.mapEffect((event) => Effect.sync(() => {
|
|
414
|
+
}), "@foldkit/ui/dragAndDrop/index.js#modelToDependencies~3")),
|
|
415
|
+
dependenciesToStream: ({ dragActivity }) => __foldkitBrandViewResult((Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.mapEffect((event) => __foldkitBrandViewResult((Effect.sync(() => {
|
|
415
416
|
// NOTE: the draggable's OnKeyDownPreventDefault calls preventDefault on
|
|
416
417
|
// the Space that activates keyboard drag. Skip it here so the same
|
|
417
418
|
// keypress doesn't also confirm the drop in the same tick.
|
|
418
419
|
if (event.defaultPrevented) {
|
|
419
|
-
return Option.none();
|
|
420
|
+
return __foldkitBrandViewResult((Option.none()), "@foldkit/ui/dragAndDrop/index.js#anonymous~52");
|
|
420
421
|
}
|
|
421
422
|
if (event.key === 'Tab') {
|
|
422
423
|
event.preventDefault();
|
|
423
|
-
return Option.some(PressedArrowKey({
|
|
424
|
+
return __foldkitBrandViewResult((Option.some(PressedArrowKey({
|
|
424
425
|
direction: event.shiftKey
|
|
425
426
|
? 'PreviousContainer'
|
|
426
427
|
: 'NextContainer',
|
|
427
|
-
}));
|
|
428
|
+
}))), "@foldkit/ui/dragAndDrop/index.js#anonymous~52");
|
|
428
429
|
}
|
|
429
430
|
if (event.key === ' ' || event.key === 'Enter') {
|
|
430
431
|
event.preventDefault();
|
|
431
|
-
return Option.some(ConfirmedKeyboardDrop());
|
|
432
|
+
return __foldkitBrandViewResult((Option.some(ConfirmedKeyboardDrop())), "@foldkit/ui/dragAndDrop/index.js#anonymous~52");
|
|
432
433
|
}
|
|
433
|
-
return Option.map(arrowKeyToDirection(event.key), direction => {
|
|
434
|
+
return __foldkitBrandViewResult((Option.map(arrowKeyToDirection(event.key), direction => {
|
|
434
435
|
event.preventDefault();
|
|
435
|
-
return PressedArrowKey({ direction });
|
|
436
|
-
});
|
|
437
|
-
})), Stream.filter(Option.isSome), Stream.map(option => option.value)), Effect.sync(() => dragActivity === 'Active')),
|
|
436
|
+
return __foldkitBrandViewResult((PressedArrowKey({ direction })), "@foldkit/ui/dragAndDrop/index.js#anonymous~53");
|
|
437
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~52");
|
|
438
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~51")), Stream.filter(Option.isSome), Stream.map(option => __foldkitBrandViewResult((option.value), "@foldkit/ui/dragAndDrop/index.js#anonymous~54"))), Effect.sync(() => __foldkitBrandViewResult((dragActivity === 'Active'), "@foldkit/ui/dragAndDrop/index.js#anonymous~55")))), "@foldkit/ui/dragAndDrop/index.js#dependenciesToStream~3"),
|
|
438
439
|
}),
|
|
439
440
|
autoScroll: entry({
|
|
440
441
|
isDragging: S.Boolean,
|
|
441
442
|
clientY: S.Number,
|
|
442
443
|
}, {
|
|
443
|
-
modelToDependencies: model => ({
|
|
444
|
+
modelToDependencies: model => (__foldkitBrandViewResult(({
|
|
444
445
|
isDragging: model.dragState._tag === 'Dragging',
|
|
445
446
|
clientY: model.dragState._tag === 'Dragging'
|
|
446
447
|
? model.dragState.current.clientY
|
|
447
448
|
: 0,
|
|
448
|
-
}),
|
|
449
|
+
}), "@foldkit/ui/dragAndDrop/index.js#modelToDependencies~4")),
|
|
449
450
|
keepAliveEquivalence: Equivalence.Struct({
|
|
450
451
|
isDragging: Equivalence.Boolean,
|
|
451
452
|
}),
|
|
452
|
-
dependenciesToStream: ({ isDragging }, readDependencies) => Stream.when(Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
|
|
453
|
+
dependenciesToStream: ({ isDragging }, readDependencies) => __foldkitBrandViewResult((Stream.when(Stream.callback(queue => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
|
|
453
454
|
const ref = { id: 0 };
|
|
454
455
|
const step = () => {
|
|
455
456
|
autoScroll(readDependencies().clientY);
|
|
@@ -457,79 +458,79 @@ export const subscriptions = Subscription.make()(entry => ({
|
|
|
457
458
|
ref.id = requestAnimationFrame(step);
|
|
458
459
|
};
|
|
459
460
|
ref.id = requestAnimationFrame(step);
|
|
460
|
-
return ref;
|
|
461
|
-
}), ref => Effect.sync(() => cancelAnimationFrame(ref.id))).pipe(Effect.flatMap(() => Effect.never))), Effect.sync(() => isDragging)),
|
|
461
|
+
return __foldkitBrandViewResult((ref), "@foldkit/ui/dragAndDrop/index.js#anonymous~57");
|
|
462
|
+
}), ref => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((cancelAnimationFrame(ref.id)), "@foldkit/ui/dragAndDrop/index.js#anonymous~59"))), "@foldkit/ui/dragAndDrop/index.js#anonymous~58")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@foldkit/ui/dragAndDrop/index.js#anonymous~60")))), "@foldkit/ui/dragAndDrop/index.js#anonymous~56")), Effect.sync(() => __foldkitBrandViewResult((isDragging), "@foldkit/ui/dragAndDrop/index.js#anonymous~61")))), "@foldkit/ui/dragAndDrop/index.js#dependenciesToStream~4"),
|
|
462
463
|
}),
|
|
463
|
-
}));
|
|
464
|
+
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~38")));
|
|
464
465
|
// VIEW
|
|
465
466
|
const LEFT_MOUSE_BUTTON = 0;
|
|
466
|
-
const arrowKeyToDirection = (key) => M.value(key).pipe(M.withReturnType(), M.when('ArrowUp', () => 'Up'), M.when('ArrowDown', () => 'Down'), M.when('ArrowLeft', () => 'Left'), M.when('ArrowRight', () => 'Right'), M.option);
|
|
467
|
+
const arrowKeyToDirection = (key) => __foldkitBrandViewResult((M.value(key).pipe(M.withReturnType(), M.when('ArrowUp', () => __foldkitBrandViewResult(('Up'), "@foldkit/ui/dragAndDrop/index.js#anonymous~62")), M.when('ArrowDown', () => __foldkitBrandViewResult(('Down'), "@foldkit/ui/dragAndDrop/index.js#anonymous~63")), M.when('ArrowLeft', () => __foldkitBrandViewResult(('Left'), "@foldkit/ui/dragAndDrop/index.js#anonymous~64")), M.when('ArrowRight', () => __foldkitBrandViewResult(('Right'), "@foldkit/ui/dragAndDrop/index.js#anonymous~65")), M.option)), "@foldkit/ui/dragAndDrop/index.js#arrowKeyToDirection");
|
|
467
468
|
/** Returns attributes the parent attaches to a draggable element. Handles pointer-down, keyboard activation, and ARIA. */
|
|
468
469
|
export const draggable = (config) => {
|
|
469
470
|
const h = html();
|
|
470
|
-
const isKeyboardDragActivationKey = (key) => key === ' ' || key === 'Enter';
|
|
471
|
+
const isKeyboardDragActivationKey = (key) => __foldkitBrandViewResult((key === ' ' || key === 'Enter'), "@foldkit/ui/dragAndDrop/index.js#isKeyboardDragActivationKey");
|
|
471
472
|
const handleKeyDown = (key) => {
|
|
472
473
|
if (isKeyboardDragActivationKey(key) &&
|
|
473
474
|
config.model.dragState._tag === 'Idle') {
|
|
474
|
-
return Option.some(config.toParentMessage(ActivatedKeyboardDrag({
|
|
475
|
+
return __foldkitBrandViewResult((Option.some(config.toParentMessage(ActivatedKeyboardDrag({
|
|
475
476
|
itemId: config.itemId,
|
|
476
477
|
containerId: config.containerId,
|
|
477
478
|
index: config.index,
|
|
478
|
-
})));
|
|
479
|
+
})))), "@foldkit/ui/dragAndDrop/index.js#handleKeyDown");
|
|
479
480
|
}
|
|
480
|
-
return Option.none();
|
|
481
|
+
return __foldkitBrandViewResult((Option.none()), "@foldkit/ui/dragAndDrop/index.js#handleKeyDown");
|
|
481
482
|
};
|
|
482
|
-
return [
|
|
483
|
+
return __foldkitBrandViewResult(([
|
|
483
484
|
h.DataAttribute('draggable-id', config.itemId),
|
|
484
485
|
h.DataAttribute('sortable-id', config.itemId),
|
|
485
486
|
h.Role('option'),
|
|
486
487
|
h.AriaRoleDescription('draggable'),
|
|
487
488
|
h.Tabindex(0),
|
|
488
|
-
h.OnPointerDown((_pointerType, button, screenX, screenY) => pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.map(() => config.toParentMessage(PressedDraggable({
|
|
489
|
+
h.OnPointerDown((_pointerType, button, screenX, screenY) => __foldkitBrandViewResult((pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.map(() => __foldkitBrandViewResult((config.toParentMessage(PressedDraggable({
|
|
489
490
|
itemId: config.itemId,
|
|
490
491
|
containerId: config.containerId,
|
|
491
492
|
index: config.index,
|
|
492
493
|
screenX,
|
|
493
494
|
screenY,
|
|
494
|
-
}))))),
|
|
495
|
+
}))), "@foldkit/ui/dragAndDrop/index.js#anonymous~67")))), "@foldkit/ui/dragAndDrop/index.js#anonymous~66")),
|
|
495
496
|
h.OnKeyDownPreventDefault(handleKeyDown),
|
|
496
497
|
h.Style({
|
|
497
498
|
'touch-action': 'none',
|
|
498
499
|
'user-select': 'none',
|
|
499
500
|
'-webkit-user-select': 'none',
|
|
500
501
|
}),
|
|
501
|
-
];
|
|
502
|
+
]), "@foldkit/ui/dragAndDrop/index.js#draggable");
|
|
502
503
|
};
|
|
503
504
|
/** Returns attributes the parent attaches to a droppable container element. */
|
|
504
505
|
export const droppable = (containerId, label) => {
|
|
505
506
|
const h = html();
|
|
506
|
-
return [
|
|
507
|
+
return __foldkitBrandViewResult(([
|
|
507
508
|
h.DataAttribute('droppable-id', containerId),
|
|
508
509
|
h.Role('listbox'),
|
|
509
510
|
...(label ? [h.AriaLabel(label)] : []),
|
|
510
|
-
];
|
|
511
|
+
]), "@foldkit/ui/dragAndDrop/index.js#droppable");
|
|
511
512
|
};
|
|
512
513
|
/** Returns attributes the parent attaches to a sortable item element. Typically combined with `draggable`. */
|
|
513
514
|
export const sortable = (itemId) => {
|
|
514
515
|
const h = html();
|
|
515
|
-
return [h.DataAttribute('sortable-id', itemId)];
|
|
516
|
+
return __foldkitBrandViewResult(([h.DataAttribute('sortable-id', itemId)]), "@foldkit/ui/dragAndDrop/index.js#sortable");
|
|
516
517
|
};
|
|
517
|
-
const ghostTransform = (clientX, clientY) => `translate3d(${String(clientX)}px, ${String(clientY)}px, 0)
|
|
518
|
+
const ghostTransform = (clientX, clientY) => __foldkitBrandViewResult((`translate3d(${String(clientX)}px, ${String(clientY)}px, 0)`), "@foldkit/ui/dragAndDrop/index.js#ghostTransform");
|
|
518
519
|
/** Returns positioning styles for the ghost element, or None when not dragging with a pointer. */
|
|
519
|
-
export const ghostStyle = (model) => M.value(model.dragState).pipe(M.tag('Dragging', dragging => ({
|
|
520
|
+
export const ghostStyle = (model) => __foldkitBrandViewResult((M.value(model.dragState).pipe(M.tag('Dragging', dragging => (__foldkitBrandViewResult(({
|
|
520
521
|
position: 'fixed',
|
|
521
522
|
top: '0',
|
|
522
523
|
left: '0',
|
|
523
524
|
transform: ghostTransform(dragging.current.clientX, dragging.current.clientY),
|
|
524
525
|
'pointer-events': 'none',
|
|
525
526
|
'z-index': '9999',
|
|
526
|
-
})), M.option);
|
|
527
|
+
}), "@foldkit/ui/dragAndDrop/index.js#anonymous~68"))), M.option)), "@foldkit/ui/dragAndDrop/index.js#ghostStyle");
|
|
527
528
|
/** Returns true when the component is actively dragging (pointer or keyboard). */
|
|
528
|
-
export const isDragging = ({ dragState: { _tag } }) => _tag === 'Dragging' || _tag === 'KeyboardDragging';
|
|
529
|
+
export const isDragging = ({ dragState: { _tag } }) => __foldkitBrandViewResult((_tag === 'Dragging' || _tag === 'KeyboardDragging'), "@foldkit/ui/dragAndDrop/index.js#isDragging");
|
|
529
530
|
/** Returns the ID of the item currently being dragged or pending, if any. */
|
|
530
|
-
export const maybeDraggedItemId = (model) => M.value(model.dragState).pipe(M.tag('Pending', pending => pending.itemId), M.tag('Dragging', dragging => dragging.itemId), M.tag('KeyboardDragging', keyboardDragging => keyboardDragging.itemId), M.option);
|
|
531
|
+
export const maybeDraggedItemId = (model) => __foldkitBrandViewResult((M.value(model.dragState).pipe(M.tag('Pending', pending => __foldkitBrandViewResult((pending.itemId), "@foldkit/ui/dragAndDrop/index.js#anonymous~69")), M.tag('Dragging', dragging => __foldkitBrandViewResult((dragging.itemId), "@foldkit/ui/dragAndDrop/index.js#anonymous~70")), M.tag('KeyboardDragging', keyboardDragging => __foldkitBrandViewResult((keyboardDragging.itemId), "@foldkit/ui/dragAndDrop/index.js#anonymous~71")), M.option)), "@foldkit/ui/dragAndDrop/index.js#maybeDraggedItemId");
|
|
531
532
|
/** Returns the current drop target, if any. Populated during pointer drag (from collision detection) and keyboard drag (from resolved position). */
|
|
532
|
-
export const maybeDropTarget = (model) => M.value(model.dragState).pipe(M.tag('Dragging', dragging => dragging.maybeDropTarget), M.tag('KeyboardDragging', keyboardDragging => Option.some({
|
|
533
|
+
export const maybeDropTarget = (model) => __foldkitBrandViewResult((M.value(model.dragState).pipe(M.tag('Dragging', dragging => __foldkitBrandViewResult((dragging.maybeDropTarget), "@foldkit/ui/dragAndDrop/index.js#anonymous~72")), M.tag('KeyboardDragging', keyboardDragging => __foldkitBrandViewResult((Option.some({
|
|
533
534
|
containerId: keyboardDragging.targetContainerId,
|
|
534
535
|
index: keyboardDragging.targetIndex,
|
|
535
|
-
})), M.orElse(() => Option.none()));
|
|
536
|
+
})), "@foldkit/ui/dragAndDrop/index.js#anonymous~73")), M.orElse(() => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/dragAndDrop/index.js#anonymous~74")))), "@foldkit/ui/dragAndDrop/index.js#maybeDropTarget");
|
package/dist/fieldset/index.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
|
|
1
2
|
import { html } from 'foldkit/html';
|
|
2
3
|
/** Generates the legend element ID from the fieldset's base ID. */
|
|
3
|
-
export const legendId = (id) => `${id}-legend
|
|
4
|
+
export const legendId = (id) => __foldkitBrandViewResult((`${id}-legend`), "@foldkit/ui/fieldset/index.js#legendId");
|
|
4
5
|
/** Generates the description element ID from the fieldset's base ID. */
|
|
5
|
-
export const descriptionId = (id) => `${id}-description
|
|
6
|
+
export const descriptionId = (id) => __foldkitBrandViewResult((`${id}-description`), "@foldkit/ui/fieldset/index.js#descriptionId");
|
|
6
7
|
/** Renders an accessible fieldset by building ARIA attribute groups and delegating layout to the consumer's `toView` callback. */
|
|
7
8
|
export const view = (config) => {
|
|
8
9
|
const h = html();
|
|
@@ -17,9 +18,9 @@ export const view = (config) => {
|
|
|
17
18
|
];
|
|
18
19
|
const legendAttributes = [h.Id(legendId(id))];
|
|
19
20
|
const descriptionAttributes = [h.Id(descriptionId(id))];
|
|
20
|
-
return toView({
|
|
21
|
+
return __foldkitBrandViewResult((toView({
|
|
21
22
|
fieldset: allFieldsetAttributes,
|
|
22
23
|
legend: legendAttributes,
|
|
23
24
|
description: descriptionAttributes,
|
|
24
|
-
});
|
|
25
|
+
})), "@foldkit/ui/fieldset/index.js#view");
|
|
25
26
|
};
|