@foldkit/ui 0.155.0 → 0.156.0-canary.13f4f703eb6a
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 +4 -2
- package/dist/animation/update.d.ts.map +1 -1
- package/dist/animation/update.js +18 -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 +61 -61
- 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 +22 -22
- 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 +61 -61
- 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 +69 -66
- package/dist/popover/index.d.ts +34 -34
- package/dist/popover/index.d.ts.map +1 -1
- package/dist/popover/index.js +36 -36
- 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 +11 -11
- 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 +4 -4
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';
|
|
@@ -12,20 +12,20 @@ import { AnchorConfig, anchorSetup, portalToContainingRoot, } from '../anchor/in
|
|
|
12
12
|
// NOTE: Animation imports are split across schema + update to avoid a circular
|
|
13
13
|
// dependency: animation → html → runtime → devtools → popover → animation.
|
|
14
14
|
// The barrel (../animation) imports from html, which starts the cycle.
|
|
15
|
-
import
|
|
15
|
+
import * as Animation from '../animation/schema.js';
|
|
16
16
|
import { update as animationUpdate } from '../animation/update.js';
|
|
17
17
|
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:
|
|
27
|
-
animation:
|
|
28
|
-
maybeLastButtonPointerType:
|
|
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
|
+
animation: Animation.Model,
|
|
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: {},
|
|
@@ -47,7 +47,7 @@ export const Message = defineMessageUnion({
|
|
|
47
47
|
SuppressedSpaceScroll: {},
|
|
48
48
|
CompletedAnchorPopover: {},
|
|
49
49
|
CompletedPortalPopoverBackdrop: {},
|
|
50
|
-
GotAnimationMessage: { message:
|
|
50
|
+
GotAnimationMessage: { message: Animation.Message },
|
|
51
51
|
});
|
|
52
52
|
// OUT MESSAGE
|
|
53
53
|
/** Union of OutMessages the popover component can produce. Handle open and
|
|
@@ -66,7 +66,7 @@ export const init = (config) => (__foldkitBrandViewResult(({
|
|
|
66
66
|
isAnimated: config.isAnimated ?? false,
|
|
67
67
|
isModal: config.isModal ?? false,
|
|
68
68
|
contentFocus: config.contentFocus ?? false,
|
|
69
|
-
animation:
|
|
69
|
+
animation: Animation.init({ id: `${config.id}-panel` }),
|
|
70
70
|
maybeLastButtonPointerType: Option.none(),
|
|
71
71
|
}), "@foldkit/ui/popover/index.js#init"));
|
|
72
72
|
// UPDATE
|
|
@@ -98,45 +98,45 @@ 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
|
-
message:
|
|
128
|
+
message: Animation.Message.EndedAnimation(),
|
|
129
129
|
}))), Dom.waitForAnimationSettled(panelSelector(id)).pipe(Effect.as(Message.GotAnimationMessage({
|
|
130
|
-
message:
|
|
130
|
+
message: Animation.Message.EndedAnimation(),
|
|
131
131
|
}))))), "@foldkit/ui/popover/index.js#execute~5"),
|
|
132
132
|
});
|
|
133
|
-
const foldAnimationOutMessage =
|
|
133
|
+
const foldAnimationOutMessage = Animation.OutMessage.match({
|
|
134
134
|
StartedLeaveAnimating: () => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({
|
|
135
135
|
model,
|
|
136
136
|
commands: [DetectMovementOrAnimationEnd({ id: model.id })],
|
|
137
137
|
}), "@foldkit/ui/popover/index.js#anonymous"))), "@foldkit/ui/popover/index.js#StartedLeaveAnimating"),
|
|
138
138
|
TransitionedOut: () => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/popover/index.js#anonymous~2"))), "@foldkit/ui/popover/index.js#TransitionedOut"),
|
|
139
|
-
})
|
|
139
|
+
});
|
|
140
140
|
const foldAnimation = Update.foldChild({
|
|
141
141
|
update: animationUpdate,
|
|
142
142
|
read: (model) => __foldkitBrandViewResult((Option.some(model.animation)), "@foldkit/ui/popover/index.js#read"),
|
|
@@ -165,7 +165,7 @@ export const update = (model, message) => {
|
|
|
165
165
|
if (model.isAnimated) {
|
|
166
166
|
const popoverOpen = Update.combine(baseModel, [
|
|
167
167
|
stepModel => (__foldkitBrandViewResult(({ model: stepModel, commands: openCommands }), "@foldkit/ui/popover/index.js#anonymous~3")),
|
|
168
|
-
foldAnimation(
|
|
168
|
+
foldAnimation(Animation.Message.Showed()),
|
|
169
169
|
stepModel => (__foldkitBrandViewResult(({
|
|
170
170
|
model: evo(stepModel, { isOpen: () => __foldkitBrandViewResult((true), "@foldkit/ui/popover/index.js#isOpen~2") }),
|
|
171
171
|
}), "@foldkit/ui/popover/index.js#anonymous~4")),
|
|
@@ -186,7 +186,7 @@ export const update = (model, message) => {
|
|
|
186
186
|
if (model.isAnimated) {
|
|
187
187
|
return __foldkitBrandViewResult((Update.combine(closed, [
|
|
188
188
|
stepModel => (__foldkitBrandViewResult(({ model: stepModel, commands }), "@foldkit/ui/popover/index.js#anonymous~5")),
|
|
189
|
-
foldAnimation(
|
|
189
|
+
foldAnimation(Animation.Message.Hid()),
|
|
190
190
|
])), "@foldkit/ui/popover/index.js#closePopoverModel");
|
|
191
191
|
}
|
|
192
192
|
return __foldkitBrandViewResult(({ model: closed, commands }), "@foldkit/ui/popover/index.js#closePopoverModel");
|
|
@@ -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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"}
|
package/dist/radioGroup/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
|
|
2
|
-
import { Array, Effect, Match
|
|
2
|
+
import { Array, Effect, 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 { childAttributes } from 'foldkit/html';
|
|
@@ -10,32 +10,32 @@ import { idSelector } from '../internal/selectors.js';
|
|
|
10
10
|
import { keyToIndex } from '../keyboard.js';
|
|
11
11
|
// MODEL
|
|
12
12
|
/** Controls the radio group layout direction and which arrow keys navigate between options. */
|
|
13
|
-
export const Orientation =
|
|
13
|
+
export const Orientation = Schema.Literals(['Horizontal', 'Vertical']);
|
|
14
14
|
/** Schema for the radio group's private interaction state. The selected
|
|
15
15
|
* option is owned by the parent and passed in via `ViewInputs.selectedValue`,
|
|
16
16
|
* so it is not stored here. `maybeFocusedIndex` is the roving-tabindex
|
|
17
17
|
* cursor: `None` means keyboard focus follows the selection, and a read-only
|
|
18
18
|
* group stores `Some(index)` while focus diverges from it. */
|
|
19
|
-
export const Model =
|
|
20
|
-
id:
|
|
21
|
-
maybeFocusedIndex:
|
|
19
|
+
export const Model = Schema.Struct({
|
|
20
|
+
id: Schema.String,
|
|
21
|
+
maybeFocusedIndex: Schema.Option(Schema.Number),
|
|
22
22
|
});
|
|
23
23
|
// MESSAGE
|
|
24
24
|
/** Union of all messages the radio group can produce. */
|
|
25
25
|
export const Message = defineMessageUnion({
|
|
26
26
|
SelectedOption: {
|
|
27
|
-
index:
|
|
28
|
-
value:
|
|
27
|
+
index: Schema.Number,
|
|
28
|
+
value: Schema.String,
|
|
29
29
|
},
|
|
30
|
-
FocusedOption: { index:
|
|
30
|
+
FocusedOption: { index: Schema.Number },
|
|
31
31
|
CompletedFocusOption: {},
|
|
32
32
|
});
|
|
33
33
|
/** Union of OutMessages the radio group can produce. The parent's
|
|
34
34
|
* `Update.foldChild` config handles them through `foldOutMessage`. */
|
|
35
35
|
export const OutMessage = defineMessageUnion({
|
|
36
36
|
Selected: {
|
|
37
|
-
value:
|
|
38
|
-
index:
|
|
37
|
+
value: Schema.String,
|
|
38
|
+
index: Schema.Number,
|
|
39
39
|
},
|
|
40
40
|
});
|
|
41
41
|
/** Creates an initial radio group model from a config. Focus follows the
|
|
@@ -51,7 +51,7 @@ const labelId = (id, index) => __foldkitBrandViewResult((`${id}-option-${index}-
|
|
|
51
51
|
const descriptionId = (id, index) => __foldkitBrandViewResult((`${id}-option-${index}-description`), "@foldkit/ui/radioGroup/index.js#descriptionId");
|
|
52
52
|
/** Moves focus to the option at the given index. */
|
|
53
53
|
export const FocusOption = Command.define('FocusOption', {
|
|
54
|
-
args: { id:
|
|
54
|
+
args: { id: Schema.String, index: Schema.Number },
|
|
55
55
|
messages: [Message.CompletedFocusOption],
|
|
56
56
|
execute: ({ id, index }) => __foldkitBrandViewResult((Dom.focus(idSelector(optionId(id, index))).pipe(Effect.ignore, Effect.as(Message.CompletedFocusOption()))), "@foldkit/ui/radioGroup/index.js#execute"),
|
|
57
57
|
});
|
|
@@ -91,17 +91,17 @@ const internalView = defineView((model, viewInputs, h) => {
|
|
|
91
91
|
const selectionTabStopIndex = pipe(selectedIndex, Option.filter(Predicate.not(isDisabled)), Option.getOrElse(() => __foldkitBrandViewResult((firstEnabledIndex), "@foldkit/ui/radioGroup/index.js#anonymous~7")));
|
|
92
92
|
const isNavigableIndex = (index) => __foldkitBrandViewResult((index < options.length && !isDisabled(index)), "@foldkit/ui/radioGroup/index.js#isNavigableIndex");
|
|
93
93
|
const focusedIndex = pipe(maybeFocusedIndex, Option.filter(isNavigableIndex), Option.getOrElse(() => __foldkitBrandViewResult((selectionTabStopIndex), "@foldkit/ui/radioGroup/index.js#anonymous~8")));
|
|
94
|
-
const { nextKey, previousKey } =
|
|
94
|
+
const { nextKey, previousKey } = Match.value(orientation).pipe(Match.when('Horizontal', () => (__foldkitBrandViewResult(({
|
|
95
95
|
nextKey: 'ArrowRight',
|
|
96
96
|
previousKey: 'ArrowLeft',
|
|
97
|
-
}), "@foldkit/ui/radioGroup/index.js#anonymous~9"))),
|
|
97
|
+
}), "@foldkit/ui/radioGroup/index.js#anonymous~9"))), Match.when('Vertical', () => (__foldkitBrandViewResult(({
|
|
98
98
|
nextKey: 'ArrowDown',
|
|
99
99
|
previousKey: 'ArrowUp',
|
|
100
|
-
}), "@foldkit/ui/radioGroup/index.js#anonymous~10"))),
|
|
100
|
+
}), "@foldkit/ui/radioGroup/index.js#anonymous~10"))), Match.exhaustive);
|
|
101
101
|
const resolveKeyIndex = keyToIndex(nextKey, previousKey, options.length, focusedIndex, isDisabled);
|
|
102
102
|
const optionSelectedAt = (index) => __foldkitBrandViewResult((pipe(options, Array.get(index), Option.map(value => __foldkitBrandViewResult((Message.SelectedOption({ index, value })), "@foldkit/ui/radioGroup/index.js#anonymous~11")))), "@foldkit/ui/radioGroup/index.js#optionSelectedAt");
|
|
103
|
-
const handleSelectingKeyDown = (currentIndex, key) => __foldkitBrandViewResult((
|
|
104
|
-
const handleReadOnlyKeyDown = (key) => __foldkitBrandViewResult((
|
|
103
|
+
const handleSelectingKeyDown = (currentIndex, key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => __foldkitBrandViewResult((optionSelectedAt(resolveKeyIndex(key))), "@foldkit/ui/radioGroup/index.js#anonymous~12")), Match.when(' ', () => __foldkitBrandViewResult((optionSelectedAt(currentIndex)), "@foldkit/ui/radioGroup/index.js#anonymous~13")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/radioGroup/index.js#anonymous~14")))), "@foldkit/ui/radioGroup/index.js#handleSelectingKeyDown");
|
|
104
|
+
const handleReadOnlyKeyDown = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => __foldkitBrandViewResult((Option.some(Message.FocusedOption({ index: resolveKeyIndex(key) }))), "@foldkit/ui/radioGroup/index.js#anonymous~15")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/radioGroup/index.js#anonymous~16")))), "@foldkit/ui/radioGroup/index.js#handleReadOnlyKeyDown");
|
|
105
105
|
const handleKeyDown = (currentIndex) => __foldkitBrandViewResult(((key) => {
|
|
106
106
|
if (isReadOnly) {
|
|
107
107
|
return __foldkitBrandViewResult((handleReadOnlyKeyDown(key)), "@foldkit/ui/radioGroup/index.js#anonymous~17");
|
package/dist/slider/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
|
import { type Reflect } from 'foldkit/submodel';
|
|
@@ -8,15 +8,15 @@ import * as Subscription from 'foldkit/subscription';
|
|
|
8
8
|
* not stored here. `min`/`max`/`step` are configuration the drag subscription
|
|
9
9
|
* reads to map pointer positions into values. `dragState` tracks the active
|
|
10
10
|
* drag phase and captures the pre-drag value so Escape can restore it. */
|
|
11
|
-
export declare const Model:
|
|
12
|
-
readonly id:
|
|
13
|
-
readonly min:
|
|
14
|
-
readonly max:
|
|
15
|
-
readonly step:
|
|
11
|
+
export declare const Model: Schema.Struct<{
|
|
12
|
+
readonly id: Schema.String;
|
|
13
|
+
readonly min: Schema.Number;
|
|
14
|
+
readonly max: Schema.Number;
|
|
15
|
+
readonly step: Schema.Number;
|
|
16
16
|
readonly dragState: import("foldkit/schema").TaggedUnion<{
|
|
17
17
|
readonly Idle: {};
|
|
18
18
|
readonly Dragging: {
|
|
19
|
-
originValue:
|
|
19
|
+
originValue: Schema.Number;
|
|
20
20
|
};
|
|
21
21
|
}>;
|
|
22
22
|
}>;
|
|
@@ -24,20 +24,20 @@ export type Model = typeof Model.Type;
|
|
|
24
24
|
/** Union of all messages the slider component can produce. */
|
|
25
25
|
export declare const Message: import("foldkit/message").MessageUnion<{
|
|
26
26
|
readonly PressedThumb: {
|
|
27
|
-
originValue:
|
|
27
|
+
originValue: Schema.Number;
|
|
28
28
|
};
|
|
29
29
|
readonly PressedPointer: {
|
|
30
|
-
value:
|
|
31
|
-
originValue:
|
|
30
|
+
value: Schema.Number;
|
|
31
|
+
originValue: Schema.Number;
|
|
32
32
|
};
|
|
33
33
|
readonly MovedDragPointer: {
|
|
34
|
-
value:
|
|
34
|
+
value: Schema.Number;
|
|
35
35
|
};
|
|
36
36
|
readonly ReleasedDragPointer: {};
|
|
37
37
|
readonly CancelledDrag: {};
|
|
38
38
|
readonly PressedKeyboardNavigation: {
|
|
39
|
-
direction:
|
|
40
|
-
value:
|
|
39
|
+
direction: Schema.Literals<readonly ["StepDecrement", "StepIncrement", "PageDecrement", "PageIncrement", "Min", "Max"]>;
|
|
40
|
+
value: Schema.Number;
|
|
41
41
|
};
|
|
42
42
|
}>;
|
|
43
43
|
export type Message = typeof Message.Type;
|
|
@@ -50,7 +50,7 @@ export type PressedKeyboardNavigation = typeof Message.PressedKeyboardNavigation
|
|
|
50
50
|
/** Union of all out-messages the slider component can emit to its parent. */
|
|
51
51
|
export declare const OutMessage: import("foldkit/message").MessageUnion<{
|
|
52
52
|
readonly ChangedValue: {
|
|
53
|
-
value:
|
|
53
|
+
value: Schema.Number;
|
|
54
54
|
};
|
|
55
55
|
}>;
|
|
56
56
|
export type OutMessage = typeof OutMessage.Type;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slider/index.ts"],"names":[],"mappings":"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"}
|
package/dist/slider/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
|
|
2
|
-
import { Effect, Equal, Function, Match
|
|
2
|
+
import { Effect, Equal, Function, Match, Option, Schema, Stream, String, pipe, } from 'effect';
|
|
3
3
|
import { childAttributes } from 'foldkit/html';
|
|
4
4
|
import { defineMessageUnion } from 'foldkit/message';
|
|
5
5
|
import { defineTaggedUnion } from 'foldkit/schema';
|
|
@@ -10,33 +10,33 @@ import { attributeSelector } from '../internal/selectors.js';
|
|
|
10
10
|
// MODEL
|
|
11
11
|
const DragState = defineTaggedUnion({
|
|
12
12
|
Idle: {},
|
|
13
|
-
Dragging: { originValue:
|
|
13
|
+
Dragging: { originValue: Schema.Number },
|
|
14
14
|
});
|
|
15
15
|
/** Schema for the slider component's private interaction state. The current
|
|
16
16
|
* value is owned by the parent and passed in via `ViewInputs.value`, so it is
|
|
17
17
|
* not stored here. `min`/`max`/`step` are configuration the drag subscription
|
|
18
18
|
* reads to map pointer positions into values. `dragState` tracks the active
|
|
19
19
|
* drag phase and captures the pre-drag value so Escape can restore it. */
|
|
20
|
-
export const Model =
|
|
21
|
-
id:
|
|
22
|
-
min:
|
|
23
|
-
max:
|
|
24
|
-
step:
|
|
20
|
+
export const Model = Schema.Struct({
|
|
21
|
+
id: Schema.String,
|
|
22
|
+
min: Schema.Number,
|
|
23
|
+
max: Schema.Number,
|
|
24
|
+
step: Schema.Number,
|
|
25
25
|
dragState: DragState,
|
|
26
26
|
});
|
|
27
27
|
// MESSAGE
|
|
28
28
|
/** Union of all messages the slider component can produce. */
|
|
29
29
|
export const Message = defineMessageUnion({
|
|
30
|
-
PressedThumb: { originValue:
|
|
30
|
+
PressedThumb: { originValue: Schema.Number },
|
|
31
31
|
PressedPointer: {
|
|
32
|
-
value:
|
|
33
|
-
originValue:
|
|
32
|
+
value: Schema.Number,
|
|
33
|
+
originValue: Schema.Number,
|
|
34
34
|
},
|
|
35
|
-
MovedDragPointer: { value:
|
|
35
|
+
MovedDragPointer: { value: Schema.Number },
|
|
36
36
|
ReleasedDragPointer: {},
|
|
37
37
|
CancelledDrag: {},
|
|
38
38
|
PressedKeyboardNavigation: {
|
|
39
|
-
direction:
|
|
39
|
+
direction: Schema.Literals([
|
|
40
40
|
'StepDecrement',
|
|
41
41
|
'StepIncrement',
|
|
42
42
|
'PageDecrement',
|
|
@@ -44,13 +44,13 @@ export const Message = defineMessageUnion({
|
|
|
44
44
|
'Min',
|
|
45
45
|
'Max',
|
|
46
46
|
]),
|
|
47
|
-
value:
|
|
47
|
+
value: Schema.Number,
|
|
48
48
|
},
|
|
49
49
|
});
|
|
50
50
|
// OUT MESSAGE
|
|
51
51
|
/** Union of all out-messages the slider component can emit to its parent. */
|
|
52
52
|
export const OutMessage = defineMessageUnion({
|
|
53
|
-
ChangedValue: { value:
|
|
53
|
+
ChangedValue: { value: Schema.Number },
|
|
54
54
|
});
|
|
55
55
|
/** Creates an initial slider model from a config. The value lives in the
|
|
56
56
|
* parent Model; initialize it there and snap it with {@link snapAndClamp}. */
|
|
@@ -64,7 +64,7 @@ export const init = (config) => (__foldkitBrandViewResult(({
|
|
|
64
64
|
// HELPERS
|
|
65
65
|
const stepDecimals = (step) => {
|
|
66
66
|
const text = step.toString();
|
|
67
|
-
return __foldkitBrandViewResult((pipe(text,
|
|
67
|
+
return __foldkitBrandViewResult((pipe(text, String.indexOf('.'), Option.match({
|
|
68
68
|
onNone: () => __foldkitBrandViewResult((0), "@foldkit/ui/slider/index.js#onNone"),
|
|
69
69
|
onSome: dotIndex => __foldkitBrandViewResult((text.length - dotIndex - 1), "@foldkit/ui/slider/index.js#onSome"),
|
|
70
70
|
}))), "@foldkit/ui/slider/index.js#stepDecimals");
|
|
@@ -93,8 +93,8 @@ export const fractionOfValue = (value, min, max) => {
|
|
|
93
93
|
}
|
|
94
94
|
};
|
|
95
95
|
const PAGE_STEP_MULTIPLIER = 10;
|
|
96
|
-
const nextValueForDirection = (value, min, max, step, direction) => __foldkitBrandViewResult((
|
|
97
|
-
const withUpdateReturn =
|
|
96
|
+
const nextValueForDirection = (value, min, max, step, direction) => __foldkitBrandViewResult((Match.value(direction).pipe(Match.withReturnType(), Match.when('StepIncrement', () => __foldkitBrandViewResult((snapAndClamp(value + step, min, max, step)), "@foldkit/ui/slider/index.js#anonymous")), Match.when('StepDecrement', () => __foldkitBrandViewResult((snapAndClamp(value - step, min, max, step)), "@foldkit/ui/slider/index.js#anonymous~2")), Match.when('PageIncrement', () => __foldkitBrandViewResult((snapAndClamp(value + step * PAGE_STEP_MULTIPLIER, min, max, step)), "@foldkit/ui/slider/index.js#anonymous~3")), Match.when('PageDecrement', () => __foldkitBrandViewResult((snapAndClamp(value - step * PAGE_STEP_MULTIPLIER, min, max, step)), "@foldkit/ui/slider/index.js#anonymous~4")), Match.when('Min', () => __foldkitBrandViewResult((min), "@foldkit/ui/slider/index.js#anonymous~5")), Match.when('Max', () => __foldkitBrandViewResult((max), "@foldkit/ui/slider/index.js#anonymous~6")), Match.exhaustive)), "@foldkit/ui/slider/index.js#nextValueForDirection");
|
|
97
|
+
const withUpdateReturn = Match.withReturnType();
|
|
98
98
|
const withChangedValue = (model, currentValue, nextValue) => {
|
|
99
99
|
if (nextValue === currentValue) {
|
|
100
100
|
return __foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#withChangedValue");
|
|
@@ -112,7 +112,7 @@ const withChangedValue = (model, currentValue, nextValue) => {
|
|
|
112
112
|
* and value changes surface as `ChangedValue` rather than mutating this
|
|
113
113
|
* Model. */
|
|
114
114
|
export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
|
|
115
|
-
PressedThumb: ({ originValue }) => __foldkitBrandViewResult((
|
|
115
|
+
PressedThumb: ({ originValue }) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Dragging', () => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#anonymous~7"))), Match.orElse(() => (__foldkitBrandViewResult(({
|
|
116
116
|
model: evo(model, {
|
|
117
117
|
dragState: () => __foldkitBrandViewResult((DragState.Dragging({ originValue })), "@foldkit/ui/slider/index.js#dragState"),
|
|
118
118
|
}),
|
|
@@ -123,25 +123,25 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
|
|
|
123
123
|
// from the thumb's current position. Fine-grained sliders (e.g. step
|
|
124
124
|
// 0.05) see a visible jump without this guard, because the cursor sits
|
|
125
125
|
// off-center on a non-zero-width thumb.
|
|
126
|
-
PressedPointer: ({ value, originValue }) => __foldkitBrandViewResult((
|
|
126
|
+
PressedPointer: ({ value, originValue }) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Dragging', () => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#anonymous~9"))), Match.orElse(() => {
|
|
127
127
|
const snapped = snapAndClamp(value, model.min, model.max, model.step);
|
|
128
128
|
return __foldkitBrandViewResult((withChangedValue(evo(model, {
|
|
129
129
|
dragState: () => __foldkitBrandViewResult((DragState.Dragging({ originValue })), "@foldkit/ui/slider/index.js#dragState~2"),
|
|
130
130
|
}), originValue, snapped)), "@foldkit/ui/slider/index.js#anonymous~10");
|
|
131
131
|
}))), "@foldkit/ui/slider/index.js#PressedPointer"),
|
|
132
|
-
MovedDragPointer: ({ value }) => __foldkitBrandViewResult((
|
|
132
|
+
MovedDragPointer: ({ value }) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Dragging', () => (__foldkitBrandViewResult(({
|
|
133
133
|
model,
|
|
134
134
|
outMessage: OutMessage.ChangedValue({
|
|
135
135
|
value: snapAndClamp(value, model.min, model.max, model.step),
|
|
136
136
|
}),
|
|
137
|
-
}), "@foldkit/ui/slider/index.js#anonymous~11"))),
|
|
138
|
-
ReleasedDragPointer: () => __foldkitBrandViewResult((
|
|
137
|
+
}), "@foldkit/ui/slider/index.js#anonymous~11"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#anonymous~12"))))), "@foldkit/ui/slider/index.js#MovedDragPointer"),
|
|
138
|
+
ReleasedDragPointer: () => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Dragging', () => (__foldkitBrandViewResult(({
|
|
139
139
|
model: evo(model, { dragState: () => __foldkitBrandViewResult((DragState.Idle()), "@foldkit/ui/slider/index.js#dragState~3") }),
|
|
140
|
-
}), "@foldkit/ui/slider/index.js#anonymous~13"))),
|
|
141
|
-
CancelledDrag: () => __foldkitBrandViewResult((
|
|
140
|
+
}), "@foldkit/ui/slider/index.js#anonymous~13"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#anonymous~14"))))), "@foldkit/ui/slider/index.js#ReleasedDragPointer"),
|
|
141
|
+
CancelledDrag: () => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Dragging', ({ originValue }) => (__foldkitBrandViewResult(({
|
|
142
142
|
model: evo(model, { dragState: () => __foldkitBrandViewResult((DragState.Idle()), "@foldkit/ui/slider/index.js#dragState~4") }),
|
|
143
143
|
outMessage: OutMessage.ChangedValue({ value: originValue }),
|
|
144
|
-
}), "@foldkit/ui/slider/index.js#anonymous~15"))),
|
|
144
|
+
}), "@foldkit/ui/slider/index.js#anonymous~15"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#anonymous~16"))))), "@foldkit/ui/slider/index.js#CancelledDrag"),
|
|
145
145
|
PressedKeyboardNavigation: ({ direction, value }) => __foldkitBrandViewResult((withChangedValue(model, value, nextValueForDirection(value, model.min, model.max, model.step, direction))), "@foldkit/ui/slider/index.js#PressedKeyboardNavigation"),
|
|
146
146
|
})), "@foldkit/ui/slider/index.js#update");
|
|
147
147
|
/** Reflects an externally-driven range onto the slider. Use this when min/max
|
|
@@ -153,8 +153,8 @@ export const reflectRange = Function.dual(2, (model, range) => __foldkitBrandVie
|
|
|
153
153
|
max: () => __foldkitBrandViewResult((range.max), "@foldkit/ui/slider/index.js#max"),
|
|
154
154
|
})), "@foldkit/ui/slider/index.js#anonymous~17"));
|
|
155
155
|
// SUBSCRIPTION
|
|
156
|
-
const DragActivity =
|
|
157
|
-
const dragActivityFromModel = (model) => __foldkitBrandViewResult((
|
|
156
|
+
const DragActivity = Schema.Literals(['Idle', 'Active']);
|
|
157
|
+
const dragActivityFromModel = (model) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(Match.withReturnType(), Match.tag('Dragging', () => __foldkitBrandViewResult(('Active'), "@foldkit/ui/slider/index.js#anonymous~18")), Match.orElse(() => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/slider/index.js#anonymous~19")))), "@foldkit/ui/slider/index.js#dragActivityFromModel");
|
|
158
158
|
const trackElement = (id, root) => __foldkitBrandViewResult((Option.fromNullishOr(root.querySelector(attributeSelector('data-slider-track-id', id)))), "@foldkit/ui/slider/index.js#trackElement");
|
|
159
159
|
const valueFromClientX = (clientX, trackElement_, min, max) => {
|
|
160
160
|
const rect = trackElement_.getBoundingClientRect();
|
|
@@ -173,9 +173,9 @@ const valueFromClientX = (clientX, trackElement_, min, max) => {
|
|
|
173
173
|
export const subscriptionsForRoot = (getTrackRoot) => __foldkitBrandViewResult((Subscription.make()(entry => (__foldkitBrandViewResult(({
|
|
174
174
|
dragPointer: entry({
|
|
175
175
|
dragActivity: DragActivity,
|
|
176
|
-
id:
|
|
177
|
-
min:
|
|
178
|
-
max:
|
|
176
|
+
id: Schema.String,
|
|
177
|
+
min: Schema.Number,
|
|
178
|
+
max: Schema.Number,
|
|
179
179
|
}, {
|
|
180
180
|
modelToDependencies: model => (__foldkitBrandViewResult(({
|
|
181
181
|
dragActivity: dragActivityFromModel(model),
|
|
@@ -216,7 +216,7 @@ export const subscriptions = subscriptionsForRoot(() => __foldkitBrandViewResult
|
|
|
216
216
|
// VIEW
|
|
217
217
|
const LEFT_MOUSE_BUTTON = 0;
|
|
218
218
|
const labelId = (id) => __foldkitBrandViewResult((`${id}-label`), "@foldkit/ui/slider/index.js#labelId");
|
|
219
|
-
const keyToDirection = (key) => __foldkitBrandViewResult((
|
|
219
|
+
const keyToDirection = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.withReturnType(), Match.whenOr('ArrowRight', 'ArrowUp', () => __foldkitBrandViewResult(('StepIncrement'), "@foldkit/ui/slider/index.js#anonymous~36")), Match.whenOr('ArrowLeft', 'ArrowDown', () => __foldkitBrandViewResult(('StepDecrement'), "@foldkit/ui/slider/index.js#anonymous~37")), Match.when('PageUp', () => __foldkitBrandViewResult(('PageIncrement'), "@foldkit/ui/slider/index.js#anonymous~38")), Match.when('PageDown', () => __foldkitBrandViewResult(('PageDecrement'), "@foldkit/ui/slider/index.js#anonymous~39")), Match.when('Home', () => __foldkitBrandViewResult(('Min'), "@foldkit/ui/slider/index.js#anonymous~40")), Match.when('End', () => __foldkitBrandViewResult(('Max'), "@foldkit/ui/slider/index.js#anonymous~41")), Match.option)), "@foldkit/ui/slider/index.js#keyToDirection");
|
|
220
220
|
const percentString = (fraction) => __foldkitBrandViewResult((`${Math.round(fraction * 10000) / 100}%`), "@foldkit/ui/slider/index.js#percentString");
|
|
221
221
|
/** Renders an accessible slider by building ARIA attribute groups and
|
|
222
222
|
* delegating layout to the consumer's `toView` callback. Follows the
|