foldkit 0.71.0 → 0.73.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/html/index.d.ts +4 -4
- package/dist/html/index.d.ts.map +1 -1
- package/dist/html/index.js +1 -1
- package/dist/task/index.d.ts +1 -1
- package/dist/task/index.d.ts.map +1 -1
- package/dist/task/index.js +1 -1
- package/dist/task/public.d.ts +1 -1
- package/dist/task/public.d.ts.map +1 -1
- package/dist/task/public.js +1 -1
- package/dist/task/timing.d.ts +9 -5
- package/dist/task/timing.d.ts.map +1 -1
- package/dist/task/timing.js +11 -11
- package/dist/test/apps/disabledButton.d.ts +5 -5
- package/dist/test/apps/pointer.d.ts.map +1 -1
- package/dist/test/apps/pointer.js +2 -2
- package/dist/test/scene.d.ts +2 -0
- package/dist/test/scene.d.ts.map +1 -1
- package/dist/test/scene.js +12 -2
- package/dist/ui/{transition → animation}/index.d.ts +9 -8
- package/dist/ui/animation/index.d.ts.map +1 -0
- package/dist/ui/{transition → animation}/index.js +8 -7
- package/dist/ui/animation/public.d.ts +3 -0
- package/dist/ui/animation/public.d.ts.map +1 -0
- package/dist/ui/animation/public.js +1 -0
- package/dist/ui/{transition → animation}/schema.d.ts +14 -14
- package/dist/ui/animation/schema.d.ts.map +1 -0
- package/dist/ui/animation/schema.js +35 -0
- package/dist/ui/{transition → animation}/update.d.ts +7 -7
- package/dist/ui/animation/update.d.ts.map +1 -0
- package/dist/ui/{transition → animation}/update.js +12 -12
- package/dist/ui/combobox/multi.d.ts +7 -7
- package/dist/ui/combobox/public.d.ts +1 -1
- package/dist/ui/combobox/public.d.ts.map +1 -1
- package/dist/ui/combobox/public.js +1 -1
- package/dist/ui/combobox/shared.d.ts +13 -13
- package/dist/ui/combobox/shared.d.ts.map +1 -1
- package/dist/ui/combobox/shared.js +31 -31
- package/dist/ui/combobox/single.d.ts +7 -7
- package/dist/ui/datePicker/index.d.ts +3 -3
- package/dist/ui/dialog/index.d.ts +7 -7
- package/dist/ui/dialog/index.d.ts.map +1 -1
- package/dist/ui/dialog/index.js +28 -28
- package/dist/ui/dialog/public.d.ts +1 -1
- package/dist/ui/dialog/public.d.ts.map +1 -1
- package/dist/ui/dialog/public.js +1 -1
- package/dist/ui/index.d.ts +2 -1
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +2 -1
- package/dist/ui/listbox/multi.d.ts +7 -7
- package/dist/ui/listbox/public.d.ts +1 -1
- package/dist/ui/listbox/public.d.ts.map +1 -1
- package/dist/ui/listbox/public.js +1 -1
- package/dist/ui/listbox/shared.d.ts +13 -13
- package/dist/ui/listbox/shared.d.ts.map +1 -1
- package/dist/ui/listbox/shared.js +29 -29
- package/dist/ui/listbox/single.d.ts +7 -7
- package/dist/ui/menu/index.d.ts +11 -11
- package/dist/ui/menu/index.d.ts.map +1 -1
- package/dist/ui/menu/index.js +29 -29
- package/dist/ui/menu/public.d.ts +1 -1
- package/dist/ui/menu/public.d.ts.map +1 -1
- package/dist/ui/menu/public.js +1 -1
- package/dist/ui/popover/index.d.ts +12 -12
- package/dist/ui/popover/index.d.ts.map +1 -1
- package/dist/ui/popover/index.js +30 -30
- package/dist/ui/popover/public.d.ts +1 -1
- package/dist/ui/popover/public.d.ts.map +1 -1
- package/dist/ui/popover/public.js +1 -1
- package/dist/ui/slider/index.d.ts +171 -0
- package/dist/ui/slider/index.d.ts.map +1 -0
- package/dist/ui/slider/index.js +319 -0
- package/dist/ui/slider/public.d.ts +3 -0
- package/dist/ui/slider/public.d.ts.map +1 -0
- package/dist/ui/slider/public.js +1 -0
- package/dist/ui/toast/index.d.ts +44 -44
- package/dist/ui/toast/index.d.ts.map +1 -1
- package/dist/ui/toast/index.js +7 -7
- package/dist/ui/toast/public.d.ts +1 -1
- package/dist/ui/toast/public.d.ts.map +1 -1
- package/dist/ui/toast/public.js +1 -1
- package/dist/ui/toast/schema.d.ts +11 -11
- package/dist/ui/toast/schema.d.ts.map +1 -1
- package/dist/ui/toast/schema.js +7 -7
- package/dist/ui/toast/update.d.ts +35 -35
- package/dist/ui/toast/update.d.ts.map +1 -1
- package/dist/ui/toast/update.js +16 -16
- package/package.json +9 -5
- package/dist/ui/transition/index.d.ts.map +0 -1
- package/dist/ui/transition/public.d.ts +0 -3
- package/dist/ui/transition/public.d.ts.map +0 -1
- package/dist/ui/transition/public.js +0 -1
- package/dist/ui/transition/schema.d.ts.map +0 -1
- package/dist/ui/transition/schema.js +0 -35
- package/dist/ui/transition/update.d.ts.map +0 -1
package/dist/ui/popover/index.js
CHANGED
|
@@ -6,20 +6,20 @@ import { m } from '../../message';
|
|
|
6
6
|
import { evo } from '../../struct';
|
|
7
7
|
import * as Task from '../../task';
|
|
8
8
|
import { anchorHooks } from '../anchor';
|
|
9
|
-
// NOTE:
|
|
10
|
-
// dependency:
|
|
11
|
-
// The barrel (../
|
|
12
|
-
import {
|
|
13
|
-
import { update as
|
|
9
|
+
// NOTE: Animation imports are split across schema + update to avoid a circular
|
|
10
|
+
// dependency: animation → html → runtime → devtools → popover → animation.
|
|
11
|
+
// The barrel (../animation) imports from html, which starts the cycle.
|
|
12
|
+
import { EndedAnimation as AnimationEndedAnimation, Hid as AnimationHid, Message as AnimationMessage, Model as AnimationModel, Showed as AnimationShowed, init as animationInit, } from '../animation/schema';
|
|
13
|
+
import { update as animationUpdate } from '../animation/update';
|
|
14
14
|
// MODEL
|
|
15
|
-
/** Schema for the popover component's state, tracking open/closed status and
|
|
15
|
+
/** Schema for the popover component's state, tracking open/closed status and animation lifecycle. */
|
|
16
16
|
export const Model = S.Struct({
|
|
17
17
|
id: S.String,
|
|
18
18
|
isOpen: S.Boolean,
|
|
19
19
|
isAnimated: S.Boolean,
|
|
20
20
|
isModal: S.Boolean,
|
|
21
21
|
contentFocus: S.Boolean,
|
|
22
|
-
|
|
22
|
+
animation: AnimationModel,
|
|
23
23
|
maybeLastButtonPointerType: S.OptionFromSelf(S.String),
|
|
24
24
|
});
|
|
25
25
|
// MESSAGE
|
|
@@ -50,12 +50,12 @@ export const CompletedTeardownInert = m('CompletedTeardownInert');
|
|
|
50
50
|
export const IgnoredMouseClick = m('IgnoredMouseClick');
|
|
51
51
|
/** Sent when a Space key-up is captured to prevent page scrolling. */
|
|
52
52
|
export const SuppressedSpaceScroll = m('SuppressedSpaceScroll');
|
|
53
|
-
/** Wraps
|
|
54
|
-
export const
|
|
55
|
-
message:
|
|
53
|
+
/** Wraps an Animation submodel message for delegation. */
|
|
54
|
+
export const GotAnimationMessage = m('GotAnimationMessage', {
|
|
55
|
+
message: AnimationMessage,
|
|
56
56
|
});
|
|
57
57
|
/** Union of all messages the popover component can produce. */
|
|
58
|
-
export const Message = S.Union(Opened, Closed, ClosedByTab, PressedPointerOnButton, CompletedFocusPanel, CompletedFocusButton, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, IgnoredMouseClick, SuppressedSpaceScroll,
|
|
58
|
+
export const Message = S.Union(Opened, Closed, ClosedByTab, PressedPointerOnButton, CompletedFocusPanel, CompletedFocusButton, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, IgnoredMouseClick, SuppressedSpaceScroll, GotAnimationMessage);
|
|
59
59
|
// INIT
|
|
60
60
|
const LEFT_MOUSE_BUTTON = 0;
|
|
61
61
|
/** Creates an initial popover model from a config. Defaults to closed. */
|
|
@@ -65,7 +65,7 @@ export const init = (config) => ({
|
|
|
65
65
|
isAnimated: config.isAnimated ?? false,
|
|
66
66
|
isModal: config.isModal ?? false,
|
|
67
67
|
contentFocus: config.contentFocus ?? false,
|
|
68
|
-
|
|
68
|
+
animation: animationInit({ id: `${config.id}-panel` }),
|
|
69
69
|
maybeLastButtonPointerType: Option.none(),
|
|
70
70
|
});
|
|
71
71
|
// UPDATE
|
|
@@ -88,26 +88,26 @@ export const RestoreInert = Command.define('RestoreInert', CompletedTeardownIner
|
|
|
88
88
|
export const FocusPanel = Command.define('FocusPanel', CompletedFocusPanel);
|
|
89
89
|
/** Moves focus back to the popover button after closing. */
|
|
90
90
|
export const FocusButton = Command.define('FocusButton', CompletedFocusButton);
|
|
91
|
-
/** Detects whether the popover button moved or the leave
|
|
92
|
-
export const
|
|
93
|
-
const
|
|
94
|
-
const [
|
|
95
|
-
const mappedCommands =
|
|
91
|
+
/** Detects whether the popover button moved or the leave animation ended — whichever comes first. Both outcomes signal the Animation submodel that leave is complete. */
|
|
92
|
+
export const DetectMovementOrAnimationEnd = Command.define('DetectMovementOrAnimationEnd', GotAnimationMessage);
|
|
93
|
+
const delegateToAnimation = (model, animationMessage) => {
|
|
94
|
+
const [nextAnimation, animationCommands, maybeOutMessage] = animationUpdate(model.animation, animationMessage);
|
|
95
|
+
const mappedCommands = animationCommands.map(Command.mapEffect(Effect.map(message => GotAnimationMessage({ message }))));
|
|
96
96
|
const additionalCommands = Option.match(maybeOutMessage, {
|
|
97
97
|
onNone: () => [],
|
|
98
98
|
onSome: M.type().pipe(M.tagsExhaustive({
|
|
99
99
|
StartedLeaveAnimating: () => [
|
|
100
|
-
|
|
101
|
-
message:
|
|
102
|
-
}))), Task.
|
|
103
|
-
message:
|
|
100
|
+
DetectMovementOrAnimationEnd(Effect.raceFirst(Task.detectElementMovement(buttonSelector(model.id)).pipe(Effect.as(GotAnimationMessage({
|
|
101
|
+
message: AnimationEndedAnimation(),
|
|
102
|
+
}))), Task.waitForAnimationSettled(panelSelector(model.id)).pipe(Effect.as(GotAnimationMessage({
|
|
103
|
+
message: AnimationEndedAnimation(),
|
|
104
104
|
}))))),
|
|
105
105
|
],
|
|
106
106
|
TransitionedOut: () => [],
|
|
107
107
|
})),
|
|
108
108
|
});
|
|
109
109
|
return [
|
|
110
|
-
evo(model, {
|
|
110
|
+
evo(model, { animation: () => nextAnimation }),
|
|
111
111
|
[...mappedCommands, ...additionalCommands],
|
|
112
112
|
];
|
|
113
113
|
};
|
|
@@ -132,10 +132,10 @@ export const update = (model, message) => {
|
|
|
132
132
|
]);
|
|
133
133
|
const openPopover = (baseModel) => {
|
|
134
134
|
if (model.isAnimated) {
|
|
135
|
-
const [nextModel,
|
|
135
|
+
const [nextModel, animationCommands] = delegateToAnimation(baseModel, AnimationShowed());
|
|
136
136
|
return [
|
|
137
137
|
evo(nextModel, { isOpen: () => true }),
|
|
138
|
-
[...openCommands, ...
|
|
138
|
+
[...openCommands, ...animationCommands],
|
|
139
139
|
];
|
|
140
140
|
}
|
|
141
141
|
return [evo(baseModel, { isOpen: () => true }), openCommands];
|
|
@@ -143,8 +143,8 @@ export const update = (model, message) => {
|
|
|
143
143
|
const closePopover = (baseModel, commands) => {
|
|
144
144
|
const closed = closedModel(baseModel);
|
|
145
145
|
if (model.isAnimated) {
|
|
146
|
-
const [nextModel,
|
|
147
|
-
return [nextModel, [...commands, ...
|
|
146
|
+
const [nextModel, animationCommands] = delegateToAnimation(closed, AnimationHid());
|
|
147
|
+
return [nextModel, [...commands, ...animationCommands]];
|
|
148
148
|
}
|
|
149
149
|
return [closed, commands];
|
|
150
150
|
};
|
|
@@ -175,7 +175,7 @@ export const update = (model, message) => {
|
|
|
175
175
|
}
|
|
176
176
|
return openPopover(withPointerType);
|
|
177
177
|
},
|
|
178
|
-
|
|
178
|
+
GotAnimationMessage: ({ message: animationMessage }) => delegateToAnimation(model, animationMessage),
|
|
179
179
|
CompletedFocusPanel: () => [model, []],
|
|
180
180
|
CompletedFocusButton: () => [model, []],
|
|
181
181
|
CompletedLockScroll: () => [model, []],
|
|
@@ -198,12 +198,12 @@ export const close = (model) => update(model, Closed());
|
|
|
198
198
|
/** Renders a headless popover with a trigger button and a floating panel. Uses the disclosure ARIA pattern (aria-expanded + aria-controls) with no role on the panel. */
|
|
199
199
|
export const view = (config) => {
|
|
200
200
|
const { div, AriaControls, AriaDisabled, AriaExpanded, Class, DataAttribute, Id, OnBlur, OnClick, OnDestroy, OnInsert, OnKeyDownPreventDefault, OnKeyUpPreventDefault, OnPointerDown, Style, Tabindex, Type, keyed, } = html();
|
|
201
|
-
const { model: { id, isOpen, contentFocus,
|
|
201
|
+
const { model: { id, isOpen, contentFocus, animation: { transitionState }, maybeLastButtonPointerType, }, toParentMessage, onOpened, onClosed, anchor, buttonContent, buttonClassName, buttonAttributes = [], panelContent, panelClassName, panelAttributes = [], backdropClassName, backdropAttributes = [], isDisabled, focusSelector, className, attributes = [], } = config;
|
|
202
202
|
const dispatchOpened = () => onOpened ? onOpened() : toParentMessage(Opened());
|
|
203
203
|
const dispatchClosed = () => onClosed ? onClosed() : toParentMessage(Closed());
|
|
204
204
|
const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
|
|
205
205
|
const isVisible = isOpen || isLeaving;
|
|
206
|
-
const
|
|
206
|
+
const animationAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
|
|
207
207
|
DataAttribute('closed', ''),
|
|
208
208
|
DataAttribute('enter', ''),
|
|
209
209
|
DataAttribute('transition', ''),
|
|
@@ -275,7 +275,7 @@ export const view = (config) => {
|
|
|
275
275
|
Id(`${id}-panel`),
|
|
276
276
|
...(contentFocus ? [] : [Tabindex(0)]),
|
|
277
277
|
...anchorAttributes,
|
|
278
|
-
...
|
|
278
|
+
...animationAttributes,
|
|
279
279
|
...(isLeaving
|
|
280
280
|
? []
|
|
281
281
|
: [
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { init, update, open, close, view, lazy, Model, Message, Opened, Closed, CompletedFocusPanel, CompletedFocusButton, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert,
|
|
1
|
+
export { init, update, open, close, view, lazy, Model, Message, Opened, Closed, CompletedFocusPanel, CompletedFocusButton, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, GotAnimationMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusPanel, FocusButton, DetectMovementOrAnimationEnd, } from './index';
|
|
2
2
|
export type { ClosedByTab, PressedPointerOnButton, IgnoredMouseClick, SuppressedSpaceScroll, InitConfig, ViewConfig, } from './index';
|
|
3
3
|
export type { AnchorConfig } from '../anchor';
|
|
4
4
|
//# sourceMappingURL=public.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/popover/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,sBAAsB,EACtB,
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/popover/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,WAAW,EACX,4BAA4B,GAC7B,MAAM,SAAS,CAAA;AAEhB,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,UAAU,EACV,UAAU,GACX,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { init, update, open, close, view, lazy, Model, Message, Opened, Closed, CompletedFocusPanel, CompletedFocusButton, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert,
|
|
1
|
+
export { init, update, open, close, view, lazy, Model, Message, Opened, Closed, CompletedFocusPanel, CompletedFocusButton, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, GotAnimationMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusPanel, FocusButton, DetectMovementOrAnimationEnd, } from './index';
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import { Option, Schema as S } from 'effect';
|
|
2
|
+
import type { Command } from '../../command';
|
|
3
|
+
import { type Attribute, type Html } from '../../html';
|
|
4
|
+
/** Schema for the slider component's state. Tracks the current value, the
|
|
5
|
+
* range (min/max/step), and the active drag phase. */
|
|
6
|
+
export declare const Model: S.Struct<{
|
|
7
|
+
id: typeof S.String;
|
|
8
|
+
value: typeof S.Number;
|
|
9
|
+
min: typeof S.Number;
|
|
10
|
+
max: typeof S.Number;
|
|
11
|
+
step: typeof S.Number;
|
|
12
|
+
dragState: S.Union<[import("../../schema").CallableTaggedStruct<"Idle", {}>, import("../../schema").CallableTaggedStruct<"Dragging", {
|
|
13
|
+
originValue: typeof S.Number;
|
|
14
|
+
}>]>;
|
|
15
|
+
}>;
|
|
16
|
+
export type Model = typeof Model.Type;
|
|
17
|
+
/** The user pressed the thumb. Starts a drag without changing the value. */
|
|
18
|
+
export declare const PressedThumb: import("../../schema").CallableTaggedStruct<"PressedThumb", {}>;
|
|
19
|
+
/** The user pressed the track. Starts a drag and snaps the value to the
|
|
20
|
+
* cursor position. Ignored while already dragging, which absorbs the bubble
|
|
21
|
+
* from a thumb press so the value is not shifted. */
|
|
22
|
+
export declare const PressedPointer: import("../../schema").CallableTaggedStruct<"PressedPointer", {
|
|
23
|
+
value: typeof S.Number;
|
|
24
|
+
}>;
|
|
25
|
+
/** The pointer moved during a drag, producing a new snapped value from the
|
|
26
|
+
* cursor position within the track. */
|
|
27
|
+
export declare const MovedDragPointer: import("../../schema").CallableTaggedStruct<"MovedDragPointer", {
|
|
28
|
+
value: typeof S.Number;
|
|
29
|
+
}>;
|
|
30
|
+
/** The pointer was released during a drag. Commits the current value. */
|
|
31
|
+
export declare const ReleasedDragPointer: import("../../schema").CallableTaggedStruct<"ReleasedDragPointer", {}>;
|
|
32
|
+
/** Escape was pressed during a drag. Restores the value from the drag origin. */
|
|
33
|
+
export declare const CancelledDrag: import("../../schema").CallableTaggedStruct<"CancelledDrag", {}>;
|
|
34
|
+
/** The user pressed a keyboard navigation key on the focused thumb. */
|
|
35
|
+
export declare const PressedKeyboardNavigation: import("../../schema").CallableTaggedStruct<"PressedKeyboardNavigation", {
|
|
36
|
+
direction: S.Literal<["StepDecrement", "StepIncrement", "PageDecrement", "PageIncrement", "Min", "Max"]>;
|
|
37
|
+
}>;
|
|
38
|
+
/** Union of all messages the slider component can produce. */
|
|
39
|
+
export declare const Message: S.Union<[
|
|
40
|
+
typeof PressedThumb,
|
|
41
|
+
typeof PressedPointer,
|
|
42
|
+
typeof MovedDragPointer,
|
|
43
|
+
typeof ReleasedDragPointer,
|
|
44
|
+
typeof CancelledDrag,
|
|
45
|
+
typeof PressedKeyboardNavigation
|
|
46
|
+
]>;
|
|
47
|
+
export type Message = typeof Message.Type;
|
|
48
|
+
export type PressedThumb = typeof PressedThumb.Type;
|
|
49
|
+
export type PressedPointer = typeof PressedPointer.Type;
|
|
50
|
+
export type MovedDragPointer = typeof MovedDragPointer.Type;
|
|
51
|
+
export type ReleasedDragPointer = typeof ReleasedDragPointer.Type;
|
|
52
|
+
export type CancelledDrag = typeof CancelledDrag.Type;
|
|
53
|
+
export type PressedKeyboardNavigation = typeof PressedKeyboardNavigation.Type;
|
|
54
|
+
/** Emitted when the slider value changes. The parent uses this to react to
|
|
55
|
+
* value updates — e.g. to run validation or trigger a side effect. */
|
|
56
|
+
export declare const ChangedValue: import("../../schema").CallableTaggedStruct<"ChangedValue", {
|
|
57
|
+
value: typeof S.Number;
|
|
58
|
+
}>;
|
|
59
|
+
/** Union of all out-messages the slider component can emit to its parent. */
|
|
60
|
+
export declare const OutMessage: import("../../schema").CallableTaggedStruct<"ChangedValue", {
|
|
61
|
+
value: typeof S.Number;
|
|
62
|
+
}>;
|
|
63
|
+
export type OutMessage = typeof OutMessage.Type;
|
|
64
|
+
/** Configuration for creating a slider model with `init`. */
|
|
65
|
+
export type InitConfig = Readonly<{
|
|
66
|
+
id: string;
|
|
67
|
+
min: number;
|
|
68
|
+
max: number;
|
|
69
|
+
step: number;
|
|
70
|
+
initialValue: number;
|
|
71
|
+
}>;
|
|
72
|
+
/** Creates an initial slider model from a config. The initial value is
|
|
73
|
+
* snapped to the step and clamped into range. */
|
|
74
|
+
export declare const init: (config: InitConfig) => Model;
|
|
75
|
+
/** Computes the fraction (0–1) of a value between min and max. Returns 0 when
|
|
76
|
+
* the range has zero width. */
|
|
77
|
+
export declare const fractionOfValue: (model: Model) => number;
|
|
78
|
+
type UpdateReturn = readonly [
|
|
79
|
+
Model,
|
|
80
|
+
ReadonlyArray<Command<Message>>,
|
|
81
|
+
Option.Option<OutMessage>
|
|
82
|
+
];
|
|
83
|
+
/** Processes a slider message and returns the next model, commands, and an
|
|
84
|
+
* optional out-message for the parent. */
|
|
85
|
+
export declare const update: (model: Model, message: Message) => UpdateReturn;
|
|
86
|
+
/** Schema describing the subscription dependencies for document-level drag
|
|
87
|
+
* tracking. */
|
|
88
|
+
export declare const SubscriptionDeps: S.Struct<{
|
|
89
|
+
documentPointer: S.Struct<{
|
|
90
|
+
dragActivity: S.Literal<["Idle", "Active"]>;
|
|
91
|
+
id: typeof S.String;
|
|
92
|
+
min: typeof S.Number;
|
|
93
|
+
max: typeof S.Number;
|
|
94
|
+
}>;
|
|
95
|
+
documentEscape: S.Struct<{
|
|
96
|
+
dragActivity: S.Literal<["Idle", "Active"]>;
|
|
97
|
+
}>;
|
|
98
|
+
}>;
|
|
99
|
+
/** Document-level subscriptions for pointer and keyboard events during slider
|
|
100
|
+
* drag. */
|
|
101
|
+
export declare const subscriptions: import("../../runtime/subscription").Subscriptions<{
|
|
102
|
+
readonly value: number;
|
|
103
|
+
readonly id: string;
|
|
104
|
+
readonly max: number;
|
|
105
|
+
readonly min: number;
|
|
106
|
+
readonly step: number;
|
|
107
|
+
readonly dragState: {
|
|
108
|
+
readonly _tag: "Idle";
|
|
109
|
+
} | {
|
|
110
|
+
readonly _tag: "Dragging";
|
|
111
|
+
readonly originValue: number;
|
|
112
|
+
};
|
|
113
|
+
}, {
|
|
114
|
+
readonly _tag: "CancelledDrag";
|
|
115
|
+
} | {
|
|
116
|
+
readonly _tag: "PressedThumb";
|
|
117
|
+
} | {
|
|
118
|
+
readonly _tag: "PressedPointer";
|
|
119
|
+
readonly value: number;
|
|
120
|
+
} | {
|
|
121
|
+
readonly _tag: "MovedDragPointer";
|
|
122
|
+
readonly value: number;
|
|
123
|
+
} | {
|
|
124
|
+
readonly _tag: "ReleasedDragPointer";
|
|
125
|
+
} | {
|
|
126
|
+
readonly _tag: "PressedKeyboardNavigation";
|
|
127
|
+
readonly direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement";
|
|
128
|
+
}, S.Struct<{
|
|
129
|
+
documentPointer: S.Struct<{
|
|
130
|
+
dragActivity: S.Literal<["Idle", "Active"]>;
|
|
131
|
+
id: typeof S.String;
|
|
132
|
+
min: typeof S.Number;
|
|
133
|
+
max: typeof S.Number;
|
|
134
|
+
}>;
|
|
135
|
+
documentEscape: S.Struct<{
|
|
136
|
+
dragActivity: S.Literal<["Idle", "Active"]>;
|
|
137
|
+
}>;
|
|
138
|
+
}>, never>;
|
|
139
|
+
/** Attribute groups the slider component provides to the consumer's `toView`
|
|
140
|
+
* callback. */
|
|
141
|
+
export type SliderAttributes<Message> = Readonly<{
|
|
142
|
+
root: ReadonlyArray<Attribute<Message>>;
|
|
143
|
+
track: ReadonlyArray<Attribute<Message>>;
|
|
144
|
+
filledTrack: ReadonlyArray<Attribute<Message>>;
|
|
145
|
+
thumb: ReadonlyArray<Attribute<Message>>;
|
|
146
|
+
label: ReadonlyArray<Attribute<Message>>;
|
|
147
|
+
hiddenInput: ReadonlyArray<Attribute<Message>>;
|
|
148
|
+
}>;
|
|
149
|
+
/** Configuration for rendering a slider with `view`. */
|
|
150
|
+
export type ViewConfig<Message> = Readonly<{
|
|
151
|
+
model: Model;
|
|
152
|
+
toParentMessage: (message: PressedThumb | PressedPointer | MovedDragPointer | ReleasedDragPointer | CancelledDrag | PressedKeyboardNavigation) => Message;
|
|
153
|
+
toView: (attributes: SliderAttributes<Message>) => Html;
|
|
154
|
+
ariaLabel?: string;
|
|
155
|
+
ariaLabelledBy?: string;
|
|
156
|
+
formatValue?: (value: number) => string;
|
|
157
|
+
isDisabled?: boolean;
|
|
158
|
+
name?: string;
|
|
159
|
+
}>;
|
|
160
|
+
/** Renders an accessible slider by building ARIA attribute groups and
|
|
161
|
+
* delegating layout to the consumer's `toView` callback. Follows the
|
|
162
|
+
* WAI-ARIA slider pattern — role="slider" on the thumb, aria-valuemin /
|
|
163
|
+
* aria-valuemax / aria-valuenow, keyboard navigation by step / page / home /
|
|
164
|
+
* end. Pointer drag is handled by the component's document-level
|
|
165
|
+
* subscriptions. */
|
|
166
|
+
export declare const view: <Message>(config: ViewConfig<Message>) => Html;
|
|
167
|
+
/** Creates a memoized slider view. Static config is captured in a closure;
|
|
168
|
+
* only `model` and `toParentMessage` are compared per render via `createLazy`. */
|
|
169
|
+
export declare const lazy: <Message>(staticConfig: Omit<ViewConfig<Message>, "model" | "toParentMessage">) => ((model: Model, toParentMessage: ViewConfig<Message>["toParentMessage"]) => Html);
|
|
170
|
+
export {};
|
|
171
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/slider/index.ts"],"names":[],"mappings":"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"}
|