@foldkit/ui 0.127.0 → 0.128.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/README.md +2 -2
- package/dist/calendar/index.d.ts +17 -23
- package/dist/calendar/index.d.ts.map +1 -1
- package/dist/calendar/index.js +16 -25
- package/dist/calendar/public.d.ts +1 -1
- package/dist/calendar/public.d.ts.map +1 -1
- package/dist/calendar/public.js +1 -1
- package/dist/checkbox/index.d.ts +47 -104
- package/dist/checkbox/index.d.ts.map +1 -1
- package/dist/checkbox/index.js +48 -87
- package/dist/checkbox/public.d.ts +2 -2
- package/dist/checkbox/public.d.ts.map +1 -1
- package/dist/checkbox/public.js +1 -1
- package/dist/combobox/multi.d.ts +19 -30
- package/dist/combobox/multi.d.ts.map +1 -1
- package/dist/combobox/multi.js +32 -53
- package/dist/combobox/public.d.ts +2 -2
- package/dist/combobox/public.d.ts.map +1 -1
- package/dist/combobox/public.js +1 -1
- package/dist/combobox/shared.d.ts +59 -35
- package/dist/combobox/shared.d.ts.map +1 -1
- package/dist/combobox/shared.js +58 -45
- package/dist/combobox/single.d.ts +36 -48
- package/dist/combobox/single.d.ts.map +1 -1
- package/dist/combobox/single.js +49 -76
- package/dist/datePicker/index.d.ts +33 -41
- package/dist/datePicker/index.d.ts.map +1 -1
- package/dist/datePicker/index.js +31 -40
- package/dist/datePicker/public.d.ts +1 -1
- package/dist/datePicker/public.d.ts.map +1 -1
- package/dist/datePicker/public.js +1 -1
- package/dist/disclosure/index.d.ts +49 -113
- package/dist/disclosure/index.d.ts.map +1 -1
- package/dist/disclosure/index.js +35 -92
- package/dist/disclosure/public.d.ts +2 -2
- package/dist/disclosure/public.d.ts.map +1 -1
- package/dist/disclosure/public.js +1 -1
- package/dist/listbox/multi.d.ts +7 -21
- package/dist/listbox/multi.d.ts.map +1 -1
- package/dist/listbox/multi.js +12 -36
- package/dist/listbox/public.d.ts +1 -1
- package/dist/listbox/public.d.ts.map +1 -1
- package/dist/listbox/shared.d.ts +28 -20
- package/dist/listbox/shared.d.ts.map +1 -1
- package/dist/listbox/shared.js +6 -7
- package/dist/listbox/single.d.ts +17 -27
- package/dist/listbox/single.d.ts.map +1 -1
- package/dist/listbox/single.js +18 -30
- package/dist/radioGroup/index.d.ts +57 -142
- package/dist/radioGroup/index.d.ts.map +1 -1
- package/dist/radioGroup/index.js +44 -119
- package/dist/radioGroup/public.d.ts +2 -2
- package/dist/radioGroup/public.d.ts.map +1 -1
- package/dist/radioGroup/public.js +1 -1
- package/dist/slider/index.d.ts +51 -27
- package/dist/slider/index.d.ts.map +1 -1
- package/dist/slider/index.js +66 -66
- package/dist/slider/public.d.ts +1 -1
- package/dist/slider/public.d.ts.map +1 -1
- package/dist/slider/public.js +1 -1
- package/dist/switch/index.d.ts +45 -92
- package/dist/switch/index.d.ts.map +1 -1
- package/dist/switch/index.js +36 -81
- package/dist/switch/public.d.ts +2 -2
- package/dist/switch/public.d.ts.map +1 -1
- package/dist/switch/public.js +1 -1
- package/dist/tabs/index.d.ts +33 -33
- package/dist/tabs/index.d.ts.map +1 -1
- package/dist/tabs/index.js +36 -49
- package/dist/toast/index.d.ts +1 -0
- package/dist/toast/index.d.ts.map +1 -1
- package/dist/toast/index.js +1 -0
- package/dist/toast/public.d.ts +2 -0
- package/dist/toast/public.d.ts.map +1 -1
- package/dist/toast/public.js +1 -0
- package/dist/toast/test.d.ts +41 -0
- package/dist/toast/test.d.ts.map +1 -0
- package/dist/toast/test.js +36 -0
- package/package.json +2 -2
package/dist/disclosure/index.js
CHANGED
|
@@ -1,98 +1,39 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
import { childAttributes, html, } from 'foldkit/html';
|
|
5
|
-
import { m } from 'foldkit/message';
|
|
6
|
-
import { evo } from 'foldkit/struct';
|
|
7
|
-
import { defineView } from 'foldkit/submodel';
|
|
8
|
-
import { idSelector } from '../internal/selectors.js';
|
|
9
|
-
// MODEL
|
|
10
|
-
/** Schema for the disclosure component's state, tracking its unique ID and open/closed status. */
|
|
11
|
-
export const Model = S.Struct({
|
|
12
|
-
id: S.String,
|
|
13
|
-
isOpen: S.Boolean,
|
|
14
|
-
});
|
|
15
|
-
// MESSAGE
|
|
16
|
-
/** Sent when the disclosure button is clicked. Toggles the open/closed state. */
|
|
17
|
-
export const Toggled = m('Toggled');
|
|
18
|
-
/** Sent to explicitly close the disclosure, regardless of its current state. */
|
|
19
|
-
export const Closed = m('Closed');
|
|
20
|
-
/** Sent when the focus-button command completes after closing. */
|
|
21
|
-
export const CompletedFocusButton = m('CompletedFocusButton');
|
|
22
|
-
/** Union of all messages the disclosure component can produce. */
|
|
23
|
-
export const Message = S.Union([Toggled, Closed, CompletedFocusButton]);
|
|
24
|
-
// OUT MESSAGE
|
|
25
|
-
/** Sent to the parent each time the disclosure toggles. The new open state is available on the next model snapshot; this OutMessage signals only that the transition happened. Consumers typically use this for analytics, lazy content loading, or saving open/closed state to a store. */
|
|
26
|
-
export const ToggledOpenState = m('ToggledOpenState', { isOpen: S.Boolean });
|
|
27
|
-
export const OutMessage = S.Union([ToggledOpenState]);
|
|
28
|
-
/** Creates an initial disclosure model from a config. Defaults to closed. */
|
|
29
|
-
export const init = (config) => ({
|
|
30
|
-
id: config.id,
|
|
31
|
-
isOpen: config.isOpen ?? false,
|
|
32
|
-
});
|
|
33
|
-
// UPDATE
|
|
1
|
+
import { Match as M, Option, Predicate } from 'effect';
|
|
2
|
+
import { html } from 'foldkit/html';
|
|
3
|
+
// VIEW
|
|
34
4
|
/** Returns the bare DOM id of the disclosure toggle button, derived from the
|
|
35
5
|
* disclosure's base id. Use this to associate an external label with the
|
|
36
6
|
* button via a native `<label for={Disclosure.buttonId(id)}>` or an
|
|
37
7
|
* `aria-labelledby` reference. */
|
|
38
8
|
export const buttonId = (id) => `${id}-button`;
|
|
39
|
-
const buttonSelector = (id) => idSelector(buttonId(id));
|
|
40
9
|
const panelId = (id) => `${id}-panel`;
|
|
41
|
-
/** Moves focus to the disclosure's toggle button. */
|
|
42
|
-
export const FocusButton = Command.define('FocusButton', { id: S.String }, CompletedFocusButton)(({ id }) => Dom.focus(buttonSelector(id)).pipe(Effect.ignore, Effect.as(CompletedFocusButton())));
|
|
43
|
-
const withUpdateReturn = M.withReturnType();
|
|
44
|
-
/** Processes a disclosure message and returns the next model, commands, and optional OutMessage. */
|
|
45
|
-
export const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
|
|
46
|
-
Toggled: () => {
|
|
47
|
-
const nextIsOpen = !model.isOpen;
|
|
48
|
-
const maybeFocus = Option.liftPredicate(FocusButton({ id: model.id }), () => model.isOpen);
|
|
49
|
-
return [
|
|
50
|
-
evo(model, { isOpen: () => nextIsOpen }),
|
|
51
|
-
Option.toArray(maybeFocus),
|
|
52
|
-
Option.some(ToggledOpenState({ isOpen: nextIsOpen })),
|
|
53
|
-
];
|
|
54
|
-
},
|
|
55
|
-
Closed: () => {
|
|
56
|
-
if (!model.isOpen) {
|
|
57
|
-
return [model, [], Option.none()];
|
|
58
|
-
}
|
|
59
|
-
const maybeFocus = Option.liftPredicate(FocusButton({ id: model.id }), () => model.isOpen);
|
|
60
|
-
return [
|
|
61
|
-
evo(model, { isOpen: () => false }),
|
|
62
|
-
Option.toArray(maybeFocus),
|
|
63
|
-
Option.some(ToggledOpenState({ isOpen: false })),
|
|
64
|
-
];
|
|
65
|
-
},
|
|
66
|
-
CompletedFocusButton: () => [model, [], Option.none()],
|
|
67
|
-
}));
|
|
68
|
-
/** Programmatically toggles the disclosure, updating the model and returning
|
|
69
|
-
* focus commands plus a `ToggledOpenState` OutMessage. */
|
|
70
|
-
export const toggle = (model) => update(model, Toggled());
|
|
71
|
-
/** Programmatically closes the disclosure, updating the model and returning
|
|
72
|
-
* focus commands plus a `ToggledOpenState` OutMessage when it was open. */
|
|
73
|
-
export const close = (model) => update(model, Closed());
|
|
74
|
-
/** Reflects an externally-sourced open state onto the model without
|
|
75
|
-
* emitting an OutMessage or running the focus command. Use this to mirror
|
|
76
|
-
* external truth (restored storage, a deep link) onto the disclosure.
|
|
77
|
-
* Contrast with `toggle`/`close`, which represent user or programmatic
|
|
78
|
-
* *choices* and emit `ToggledOpenState`. Returns the model directly
|
|
79
|
-
* because it produces no commands and no OutMessage. */
|
|
80
|
-
export const reflectOpenState = Function.dual(2, (model, isOpen) => evo(model, { isOpen: () => isOpen }));
|
|
81
|
-
// VIEW
|
|
82
10
|
const panelSizeTransition = 'grid-template-rows 200ms ease-out';
|
|
83
|
-
/** Renders a headless disclosure
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
* `panel`
|
|
11
|
+
/** Renders a headless disclosure as a stateless controlled component. The
|
|
12
|
+
* parent owns the open state (`isOpen`) and receives the new state via
|
|
13
|
+
* `onToggle` when the user toggles it. The consumer composes the layout
|
|
14
|
+
* through `toView`, spreading the `button` and `panel` bundles onto their own
|
|
15
|
+
* elements.
|
|
16
|
+
*
|
|
17
|
+
* ```ts
|
|
18
|
+
* // In view:
|
|
19
|
+
* Disclosure.view<Message>({
|
|
20
|
+
* id: 'details',
|
|
21
|
+
* isOpen: model.isDetailsOpen,
|
|
22
|
+
* onToggle: isOpen => ToggledDetails({ isOpen }),
|
|
23
|
+
* toView: ({ button, panel, animatePanel }) => ...,
|
|
24
|
+
* })
|
|
87
25
|
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
|
|
26
|
+
* // In update:
|
|
27
|
+
* ToggledDetails: ({ isOpen }) => [
|
|
28
|
+
* evo(model, { isDetailsOpen: () => isOpen }),
|
|
29
|
+
* [],
|
|
30
|
+
* ],
|
|
31
|
+
* ``` */
|
|
32
|
+
export const view = (config) => {
|
|
92
33
|
const h = html();
|
|
93
|
-
const { id, isOpen } =
|
|
94
|
-
const
|
|
95
|
-
const handleKeyDown = (key) => M.value(key).pipe(M.whenOr('Enter', ' ', () => Option.some(
|
|
34
|
+
const { id, isOpen, onToggle, toView, isDisabled = false, ariaLabel, ariaLabelledBy, } = config;
|
|
35
|
+
const nextOpen = !isOpen;
|
|
36
|
+
const handleKeyDown = (key) => M.value(key).pipe(M.whenOr('Enter', ' ', () => Option.some(onToggle(nextOpen))), M.orElse(() => Option.none()));
|
|
96
37
|
const disabledAttributes = isDisabled
|
|
97
38
|
? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
|
|
98
39
|
: [];
|
|
@@ -107,18 +48,20 @@ export const view = defineView((model, viewInputs) => {
|
|
|
107
48
|
return [];
|
|
108
49
|
}
|
|
109
50
|
};
|
|
110
|
-
const buttonLabelAttributes = resolveButtonLabel();
|
|
111
51
|
const buttonAttributes = [
|
|
112
52
|
h.Id(buttonId(id)),
|
|
113
53
|
h.AriaExpanded(isOpen),
|
|
114
54
|
h.AriaControls(panelId(id)),
|
|
115
|
-
...
|
|
55
|
+
...resolveButtonLabel(),
|
|
116
56
|
h.Tabindex(0),
|
|
117
57
|
...(isOpen ? [h.DataAttribute('open', '')] : []),
|
|
118
58
|
...disabledAttributes,
|
|
119
59
|
...(isDisabled
|
|
120
60
|
? []
|
|
121
|
-
: [
|
|
61
|
+
: [
|
|
62
|
+
h.OnClick(onToggle(nextOpen)),
|
|
63
|
+
h.OnKeyDownPreventDefault(handleKeyDown),
|
|
64
|
+
]),
|
|
122
65
|
];
|
|
123
66
|
const panelAttributes = [
|
|
124
67
|
h.Id(panelId(id)),
|
|
@@ -138,8 +81,8 @@ export const view = defineView((model, viewInputs) => {
|
|
|
138
81
|
], [content]),
|
|
139
82
|
]);
|
|
140
83
|
return toView({
|
|
141
|
-
button:
|
|
142
|
-
panel:
|
|
84
|
+
button: buttonAttributes,
|
|
85
|
+
panel: panelAttributes,
|
|
143
86
|
animatePanel,
|
|
144
87
|
});
|
|
145
|
-
}
|
|
88
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export type {
|
|
1
|
+
export { view, buttonId } from './index.js';
|
|
2
|
+
export type { ViewConfig, DisclosureAttributes } from './index.js';
|
|
3
3
|
//# sourceMappingURL=public.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/disclosure/public.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/disclosure/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE3C,YAAY,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { view, buttonId } from './index.js';
|
package/dist/listbox/multi.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { Option, Schema as S } from 'effect';
|
|
2
2
|
import type * as Command from 'foldkit/command';
|
|
3
|
-
import type {
|
|
3
|
+
import type { View as SubmodelView } from 'foldkit/submodel';
|
|
4
4
|
import { type BaseInitConfig, type BaseViewInputs, type Message, type OutMessage } from './shared.js';
|
|
5
|
-
/** Schema for the multi-select listbox
|
|
5
|
+
/** Schema for the multi-select listbox's private interaction state (open/closed status, active item, activation trigger, typeahead search). The selection is owned by the parent and passed in via `ViewInputs.selectedValues`. */
|
|
6
6
|
export declare const Model: S.Struct<{
|
|
7
|
-
readonly selectedItems: S.$Array<S.String>;
|
|
8
7
|
readonly id: S.String;
|
|
9
8
|
readonly isOpen: S.Boolean;
|
|
10
9
|
readonly isAnimated: S.Boolean;
|
|
@@ -26,15 +25,12 @@ export declare const Model: S.Struct<{
|
|
|
26
25
|
readonly maybeLastButtonPointerType: S.Option<S.String>;
|
|
27
26
|
}>;
|
|
28
27
|
export type Model = typeof Model.Type;
|
|
29
|
-
/** Configuration for creating a multi-select listbox model with `init`. `isAnimated` enables CSS transition coordination (default `false`). `isModal` locks page scroll and inerts other elements when open (default `false`).
|
|
30
|
-
export type InitConfig = BaseInitConfig
|
|
31
|
-
|
|
32
|
-
}>;
|
|
33
|
-
/** Creates an initial multi-select listbox model from a config. Defaults to closed with no active item and no selection. */
|
|
28
|
+
/** Configuration for creating a multi-select listbox model with `init`. `isAnimated` enables CSS transition coordination (default `false`). `isModal` locks page scroll and inerts other elements when open (default `false`). */
|
|
29
|
+
export type InitConfig = BaseInitConfig;
|
|
30
|
+
/** Creates an initial multi-select listbox model from a config. Defaults to closed with no active item. */
|
|
34
31
|
export declare const init: (config: InitConfig) => Model;
|
|
35
|
-
/** Processes a listbox message and returns the next model, commands, and optional OutMessage. Stays open on selection
|
|
32
|
+
/** Processes a listbox message and returns the next model, commands, and optional OutMessage. Stays open on selection (multi-select behavior); emits a `Selected({ value })` OutMessage the parent folds by toggling the value's membership in the selection it owns. */
|
|
36
33
|
export declare const update: (model: S.Struct.ReadonlySide<{
|
|
37
|
-
readonly selectedItems: S.$Array<S.String>;
|
|
38
34
|
readonly id: S.String;
|
|
39
35
|
readonly isOpen: S.Boolean;
|
|
40
36
|
readonly isAnimated: S.Boolean;
|
|
@@ -55,7 +51,6 @@ export declare const update: (model: S.Struct.ReadonlySide<{
|
|
|
55
51
|
}>>;
|
|
56
52
|
readonly maybeLastButtonPointerType: S.Option<S.String>;
|
|
57
53
|
}, "Type">, message: Message) => readonly [S.Struct.ReadonlySide<{
|
|
58
|
-
readonly selectedItems: S.$Array<S.String>;
|
|
59
54
|
readonly id: S.String;
|
|
60
55
|
readonly isOpen: S.Boolean;
|
|
61
56
|
readonly isAnimated: S.Boolean;
|
|
@@ -144,7 +139,6 @@ export declare const update: (model: S.Struct.ReadonlySide<{
|
|
|
144
139
|
}>[], Option.Option<Readonly<{
|
|
145
140
|
readonly _tag: "Selected";
|
|
146
141
|
readonly value: string;
|
|
147
|
-
readonly wasAdded: boolean;
|
|
148
142
|
}>>];
|
|
149
143
|
type UpdateReturn = ReturnType<typeof update>;
|
|
150
144
|
/** Programmatically opens the listbox, updating the model and returning
|
|
@@ -153,15 +147,8 @@ export declare const open: (model: Model) => UpdateReturn;
|
|
|
153
147
|
/** Programmatically closes the listbox, updating the model and returning
|
|
154
148
|
* focus and modal commands. Use this in domain-event handlers to close the listbox. */
|
|
155
149
|
export declare const close: (model: Model) => UpdateReturn;
|
|
156
|
-
/** Programmatically
|
|
150
|
+
/** Programmatically activates an item in the multi-select listbox. Emits `Selected({ value })`; the parent toggles the value's membership. */
|
|
157
151
|
export declare const selectItem: (model: Model, item: string) => UpdateReturn;
|
|
158
|
-
/** Reflects an externally-sourced selection set onto the model without
|
|
159
|
-
* emitting an OutMessage or running selection side effects. Use this to
|
|
160
|
-
* mirror external truth (URL parameters, restored storage, a server push)
|
|
161
|
-
* onto the listbox's selected items. Contrast with `selectItem`, which
|
|
162
|
-
* toggles a single item as a user *choice* and emits `Selected`. Returns
|
|
163
|
-
* the model directly because it produces no commands and no OutMessage. */
|
|
164
|
-
export declare const reflectSelectedItems: Reflect<Model, ReadonlyArray<string>>;
|
|
165
152
|
/** Per-render view inputs passed to the view via `h.submodel`'s `viewInputs` field. */
|
|
166
153
|
export type ViewInputs<Item, Value extends string = string> = BaseViewInputs<Item, Value>;
|
|
167
154
|
/** Pairs the multi-select listbox's `view` and `update` (and programmatic
|
|
@@ -175,7 +162,6 @@ export declare const create: <Item = string, Value extends string = Item extends
|
|
|
175
162
|
selectItem: (model: Model, item: Value) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
|
|
176
163
|
open: (model: Model) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
|
|
177
164
|
close: (model: Model) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
|
|
178
|
-
reflectSelectedItems: Reflect<Model, ReadonlyArray<Value>>;
|
|
179
165
|
}>;
|
|
180
166
|
export {};
|
|
181
167
|
//# sourceMappingURL=multi.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi.d.ts","sourceRoot":"","sources":["../../src/listbox/multi.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"multi.d.ts","sourceRoot":"","sources":["../../src/listbox/multi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAC5C,OAAO,KAAK,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE5D,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEnB,KAAK,OAAO,EAEZ,KAAK,UAAU,EAMhB,MAAM,aAAa,CAAA;AAIpB,mOAAmO;AACnO,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;EAEhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,kOAAkO;AAClO,MAAM,MAAM,UAAU,GAAG,cAAc,CAAA;AAEvC,2GAA2G;AAC3G,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAAyB,CAAA;AAInE,yQAAyQ;AACzQ,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIjB,CAAA;AAEF,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAE7C;uFACuF;AACvF,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,YAC4B,CAAA;AAEhE;wFACwF;AACxF,eAAO,MAAM,KAAK,GAAI,OAAO,KAAK,KAAG,YAAuC,CAAA;AAE5E,8IAA8I;AAC9I,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,EAAE,MAAM,MAAM,KAAG,YACjB,CAAA;AAIvC,uFAAuF;AACvF,MAAM,MAAM,UAAU,CAAC,IAAI,EAAE,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,cAAc,CAC1E,IAAI,EACJ,KAAK,CACN,CAAA;AAID;;;;qBAIqB;AACrB,eAAO,MAAM,MAAM,GACjB,IAAI,GAAG,MAAM,EACb,KAAK,SAAS,MAAM,GAAG,IAAI,SAAS,MAAM,GAAG,IAAI,GAAG,MAAM,OACvD,QAAQ,CAAC;IACZ,IAAI,EAAE,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAC/D,MAAM,EAAE,CACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,KACb,SAAS,CACZ,KAAK,EACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACvC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CACjC,CAAA;IACD,UAAU,EAAE,CACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,KACR,SAAS,CACZ,KAAK,EACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACvC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CACjC,CAAA;IACD,IAAI,EAAE,CACJ,KAAK,EAAE,KAAK,KACT,SAAS,CACZ,KAAK,EACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACvC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CACjC,CAAA;IACD,KAAK,EAAE,CACL,KAAK,EAAE,KAAK,KACT,SAAS,CACZ,KAAK,EACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACvC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CACjC,CAAA;CACF,CAgBA,CAAA"}
|
package/dist/listbox/multi.js
CHANGED
|
@@ -1,50 +1,28 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { evo } from 'foldkit/struct';
|
|
1
|
+
import { Option, Schema as S } from 'effect';
|
|
3
2
|
import { BaseModel, Closed, Opened, SelectedItem, Selected as SharedSelected, baseInit, makeUpdate, makeView, } from './shared.js';
|
|
4
3
|
// MODEL
|
|
5
|
-
/** Schema for the multi-select listbox
|
|
4
|
+
/** Schema for the multi-select listbox's private interaction state (open/closed status, active item, activation trigger, typeahead search). The selection is owned by the parent and passed in via `ViewInputs.selectedValues`. */
|
|
6
5
|
export const Model = S.Struct({
|
|
7
6
|
...BaseModel.fields,
|
|
8
|
-
selectedItems: S.Array(S.String),
|
|
9
|
-
});
|
|
10
|
-
/** Creates an initial multi-select listbox model from a config. Defaults to closed with no active item and no selection. */
|
|
11
|
-
export const init = (config) => ({
|
|
12
|
-
...baseInit(config),
|
|
13
|
-
selectedItems: config.selectedItems ?? [],
|
|
14
7
|
});
|
|
8
|
+
/** Creates an initial multi-select listbox model from a config. Defaults to closed with no active item. */
|
|
9
|
+
export const init = (config) => baseInit(config);
|
|
15
10
|
// UPDATE
|
|
16
|
-
/** Processes a listbox message and returns the next model, commands, and optional OutMessage. Stays open on selection
|
|
17
|
-
export const update = makeUpdate((model, item) =>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
return [
|
|
23
|
-
evo(model, { selectedItems: () => nextSelectedItems }),
|
|
24
|
-
[],
|
|
25
|
-
Option.some(SharedSelected({ value: item, wasAdded })),
|
|
26
|
-
];
|
|
27
|
-
});
|
|
11
|
+
/** Processes a listbox message and returns the next model, commands, and optional OutMessage. Stays open on selection (multi-select behavior); emits a `Selected({ value })` OutMessage the parent folds by toggling the value's membership in the selection it owns. */
|
|
12
|
+
export const update = makeUpdate((model, item) => [
|
|
13
|
+
model,
|
|
14
|
+
[],
|
|
15
|
+
Option.some(SharedSelected({ value: item })),
|
|
16
|
+
]);
|
|
28
17
|
/** Programmatically opens the listbox, updating the model and returning
|
|
29
18
|
* focus and modal commands. Use this in domain-event handlers to open the listbox. */
|
|
30
19
|
export const open = (model) => update(model, Opened({ maybeActiveItemIndex: Option.none() }));
|
|
31
20
|
/** Programmatically closes the listbox, updating the model and returning
|
|
32
21
|
* focus and modal commands. Use this in domain-event handlers to close the listbox. */
|
|
33
22
|
export const close = (model) => update(model, Closed());
|
|
34
|
-
/** Programmatically
|
|
23
|
+
/** Programmatically activates an item in the multi-select listbox. Emits `Selected({ value })`; the parent toggles the value's membership. */
|
|
35
24
|
export const selectItem = (model, item) => update(model, SelectedItem({ item }));
|
|
36
|
-
|
|
37
|
-
* emitting an OutMessage or running selection side effects. Use this to
|
|
38
|
-
* mirror external truth (URL parameters, restored storage, a server push)
|
|
39
|
-
* onto the listbox's selected items. Contrast with `selectItem`, which
|
|
40
|
-
* toggles a single item as a user *choice* and emits `Selected`. Returns
|
|
41
|
-
* the model directly because it produces no commands and no OutMessage. */
|
|
42
|
-
export const reflectSelectedItems = Function.dual(2, (model, items) => evo(model, { selectedItems: () => items }));
|
|
43
|
-
const internalView = makeView({
|
|
44
|
-
isItemSelected: (model, itemValue) => Array.contains(model.selectedItems, itemValue),
|
|
45
|
-
selectedItemIndex: (model, items, itemToValue) => pipe(model.selectedItems, Array.head, Option.flatMap(selectedItem => Array.findFirstIndex(items, item => itemToValue(item) === selectedItem))),
|
|
46
|
-
ariaMultiSelectable: true,
|
|
47
|
-
});
|
|
25
|
+
const internalView = makeView({ ariaMultiSelectable: true });
|
|
48
26
|
/** Pairs the multi-select listbox's `view` and `update` (and programmatic
|
|
49
27
|
* helpers) behind a single Item-typed entry point. Same shape as
|
|
50
28
|
* `Listbox.create`. Two type params support object-typed items via
|
|
@@ -59,7 +37,5 @@ export const create = () => {
|
|
|
59
37
|
selectItem: (model, item) => typedUpdate(model, SelectedItem({ item })),
|
|
60
38
|
open: model => typedUpdate(model, Opened({ maybeActiveItemIndex: Option.none() })),
|
|
61
39
|
close: model => typedUpdate(model, Closed()),
|
|
62
|
-
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
|
|
63
|
-
reflectSelectedItems: reflectSelectedItems,
|
|
64
40
|
};
|
|
65
41
|
};
|
package/dist/listbox/public.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { init, create, Model } from './single.js';
|
|
2
2
|
export { buttonId } from './shared.js';
|
|
3
3
|
export { Message, OutMessage, Selected, Orientation, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedInertOthers, CompletedRestoreInert, CompletedFocusButton, CompletedFocusItems, CompletedScrollIntoView, CompletedClickItem, CompletedAnchorListbox, CompletedPortalListboxBackdrop, AnchorListbox, PortalListboxBackdrop, ClearedSearch, GotAnimationMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusButton, FocusItems, ScrollIntoView, ClickItem, DelayClearSearch, DetectMovementOrAnimationEnd, } from './shared.js';
|
|
4
|
-
export type { ActivationTrigger, Opened, Closed, BlurredItems, ActivatedItem, DeactivatedItem, MovedPointerOverItem, RequestedItemClick, Searched, PressedPointerOnButton, IgnoredMouseClick, SuppressedSpaceScroll, ItemConfig, GroupHeading, } from './shared.js';
|
|
4
|
+
export type { ActivationTrigger, Opened, Closed, BlurredItems, ActivatedItem, DeactivatedItem, MovedPointerOverItem, RequestedItemClick, Searched, PressedPointerOnButton, IgnoredMouseClick, SuppressedSpaceScroll, ItemConfig, GroupHeading, BaseViewInputsCommon, ItemToValueInput, } from './shared.js';
|
|
5
5
|
export type { InitConfig, ViewInputs } from './single.js';
|
|
6
6
|
export type { AnchorConfig } from '../anchor.js';
|
|
7
7
|
export * as Multi from './multiPublic.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/listbox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,sBAAsB,EACtB,8BAA8B,EAC9B,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AAEpB,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,YAAY,EACZ,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,UAAU,EACV,YAAY,
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/listbox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,sBAAsB,EACtB,8BAA8B,EAC9B,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AAEpB,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,YAAY,EACZ,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,UAAU,EACV,YAAY,EACZ,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,aAAa,CAAA;AAEpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAEzD,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAA"}
|
package/dist/listbox/shared.d.ts
CHANGED
|
@@ -156,20 +156,17 @@ export type IgnoredMouseClick = typeof IgnoredMouseClick.Type;
|
|
|
156
156
|
export type SuppressedSpaceScroll = typeof SuppressedSpaceScroll.Type;
|
|
157
157
|
export type PressedPointerOnButton = typeof PressedPointerOnButton.Type;
|
|
158
158
|
export type Message = typeof Message.Type;
|
|
159
|
-
/** Sent when
|
|
159
|
+
/** Sent when the user activates an item (single-select commit or multi-select toggle). Carries the neutral fact that the item was activated; the parent owns the selection and decides what it means (single-select sets it, multi-select toggles membership). Generic over `Value extends string`: the runtime schema stores `value: string`, but the type-level OutMessage exposes `value: Value` so consumers who supply `items: ReadonlyArray<MyUnion>` receive `value: MyUnion` from `update<MyUnion>` without casting. The cast is fenced inside this module's `update` return, sound because the value was extracted from the items array the consumer supplied. */
|
|
160
160
|
export declare const Selected: import("foldkit/schema").CallableTaggedStruct<"Selected", {
|
|
161
161
|
value: S.String;
|
|
162
|
-
wasAdded: S.Boolean;
|
|
163
162
|
}>;
|
|
164
163
|
export type Selected<Value extends string = string> = Readonly<{
|
|
165
164
|
readonly _tag: 'Selected';
|
|
166
165
|
readonly value: Value;
|
|
167
|
-
readonly wasAdded: boolean;
|
|
168
166
|
}>;
|
|
169
|
-
/** Union of out-messages the listbox component can produce.
|
|
167
|
+
/** Union of out-messages the listbox component can produce. The parent folds `Selected` into the selection it owns: single-select stores the value, multi-select toggles the value's membership. */
|
|
170
168
|
export declare const OutMessage: S.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"Selected", {
|
|
171
169
|
value: S.String;
|
|
172
|
-
wasAdded: S.Boolean;
|
|
173
170
|
}>]>;
|
|
174
171
|
/** Generic over `Value extends string` so consumers who create the listbox
|
|
175
172
|
* via `Listbox.create<MyUnion>()` receive `value: MyUnion` in the
|
|
@@ -338,7 +335,6 @@ export declare const makeUpdate: <Model extends BaseModel>(handleSelectedItem: (
|
|
|
338
335
|
}>[], Option.Option<Readonly<{
|
|
339
336
|
readonly _tag: "Selected";
|
|
340
337
|
readonly value: string;
|
|
341
|
-
readonly wasAdded: boolean;
|
|
342
338
|
}>>];
|
|
343
339
|
/** The anchor-positioning Mount this Listbox renders on its items panel.
|
|
344
340
|
* The panel is always anchored to the button via Floating UI and portaled
|
|
@@ -376,10 +372,10 @@ export type GroupHeading = Readonly<{
|
|
|
376
372
|
}>;
|
|
377
373
|
/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field.
|
|
378
374
|
*
|
|
379
|
-
* The Listbox emits a `Selected({ value
|
|
380
|
-
*
|
|
381
|
-
*
|
|
382
|
-
type BaseViewInputsCommon<Item> = Readonly<{
|
|
375
|
+
* The Listbox emits a `Selected({ value })` OutMessage on commit.
|
|
376
|
+
* Consumers pattern-match this in their `GotListboxMessage` handler:
|
|
377
|
+
* single-select stores the value, multi-select toggles its membership. */
|
|
378
|
+
export type BaseViewInputsCommon<Item> = Readonly<{
|
|
383
379
|
items: ReadonlyArray<Item>;
|
|
384
380
|
itemToConfig: (item: Item, context: Readonly<{
|
|
385
381
|
isActive: boolean;
|
|
@@ -414,19 +410,31 @@ type BaseViewInputsCommon<Item> = Readonly<{
|
|
|
414
410
|
ariaLabel?: string;
|
|
415
411
|
ariaLabelledBy?: string;
|
|
416
412
|
}>;
|
|
417
|
-
/**
|
|
418
|
-
* is optional when `Item` is itself a string (the default
|
|
419
|
-
* item unchanged) and required when items are objects, so the
|
|
420
|
-
* payload type can't drift from what the consumer actually
|
|
421
|
-
|
|
413
|
+
/** The `itemToValue` extractor piece of a Listbox's view inputs. The
|
|
414
|
+
* extractor is optional when `Item` is itself a string (the default
|
|
415
|
+
* returns the item unchanged) and required when items are objects, so the
|
|
416
|
+
* OutMessage payload type can't drift from what the consumer actually
|
|
417
|
+
* emits. */
|
|
418
|
+
export type ItemToValueInput<Item, Value extends string = string> = [
|
|
419
|
+
Item
|
|
420
|
+
] extends [string] ? Readonly<{
|
|
422
421
|
itemToValue?: (item: Item) => Value;
|
|
423
422
|
}> : Readonly<{
|
|
424
423
|
itemToValue: (item: Item) => Value;
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
424
|
+
}>;
|
|
425
|
+
/** Per-render view inputs for the shared array-based Listbox view. The
|
|
426
|
+
* multi-select variant exposes this shape directly; the single-select
|
|
427
|
+
* variant swaps `selectedValues` for `maybeSelectedValue` at its public
|
|
428
|
+
* seam and adapts to this shape internally. */
|
|
429
|
+
export type BaseViewInputs<Item, Value extends string = string> = BaseViewInputsCommon<Item> & Readonly<{
|
|
430
|
+
/** The selection the parent owns, passed in fresh on every render.
|
|
431
|
+
* Drives `aria-selected` and `data-selected` on items, which item the
|
|
432
|
+
* Listbox highlights when it opens onto a selection, and the hidden
|
|
433
|
+
* form inputs submitted under `name`. */
|
|
434
|
+
selectedValues: ReadonlyArray<Value>;
|
|
435
|
+
}> & ItemToValueInput<Item, Value>;
|
|
436
|
+
type ViewBehavior = Readonly<{
|
|
429
437
|
ariaMultiSelectable: boolean;
|
|
430
438
|
}>;
|
|
431
|
-
export declare const makeView: <Model extends BaseModel>(behavior: ViewBehavior
|
|
439
|
+
export declare const makeView: <Model extends BaseModel>(behavior: ViewBehavior) => <Item, Value extends string = string>() => SubmodelView<Model, Message, BaseViewInputs<Item, Value>>;
|
|
432
440
|
//# sourceMappingURL=shared.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/listbox/shared.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/listbox/shared.ts"],"names":[],"mappings":"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"}
|
package/dist/listbox/shared.js
CHANGED
|
@@ -149,12 +149,11 @@ export const Message = S.Union([
|
|
|
149
149
|
PressedPointerOnButton,
|
|
150
150
|
]);
|
|
151
151
|
// OUT MESSAGE
|
|
152
|
-
/** Sent when
|
|
152
|
+
/** Sent when the user activates an item (single-select commit or multi-select toggle). Carries the neutral fact that the item was activated; the parent owns the selection and decides what it means (single-select sets it, multi-select toggles membership). Generic over `Value extends string`: the runtime schema stores `value: string`, but the type-level OutMessage exposes `value: Value` so consumers who supply `items: ReadonlyArray<MyUnion>` receive `value: MyUnion` from `update<MyUnion>` without casting. The cast is fenced inside this module's `update` return, sound because the value was extracted from the items array the consumer supplied. */
|
|
153
153
|
export const Selected = m('Selected', {
|
|
154
154
|
value: S.String,
|
|
155
|
-
wasAdded: S.Boolean,
|
|
156
155
|
});
|
|
157
|
-
/** Union of out-messages the listbox component can produce.
|
|
156
|
+
/** Union of out-messages the listbox component can produce. The parent folds `Selected` into the selection it owns: single-select stores the value, multi-select toggles the value's membership. */
|
|
158
157
|
export const OutMessage = S.Union([Selected]);
|
|
159
158
|
// CONSTANTS
|
|
160
159
|
export const SEARCH_DEBOUNCE_MILLISECONDS = 350;
|
|
@@ -404,8 +403,9 @@ export const makeView = (behavior) => {
|
|
|
404
403
|
const impl = defineView((model, viewInputs) => {
|
|
405
404
|
const h = html();
|
|
406
405
|
const { id, isOpen, orientation, animation: { transitionState }, maybeActiveItemIndex, searchQuery, maybeLastButtonPointerType, } = model;
|
|
407
|
-
const { items, itemToConfig, isItemDisabled, isButtonDisabled, buttonContent, buttonClassName, buttonAttributes = [], itemsClassName, itemsAttributes = [], itemsScrollClassName, itemsScrollAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], itemGroupKey, groupToHeading, groupClassName, groupAttributes = [], separatorClassName, separatorAttributes = [], anchor = {}, name, form, isDisabled, isInvalid, ariaLabel, ariaLabelledBy, } = viewInputs;
|
|
406
|
+
const { items, itemToConfig, isItemDisabled, isButtonDisabled, buttonContent, buttonClassName, buttonAttributes = [], itemsClassName, itemsAttributes = [], itemsScrollClassName, itemsScrollAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], itemGroupKey, groupToHeading, groupClassName, groupAttributes = [], separatorClassName, separatorAttributes = [], anchor = {}, name, form, isDisabled, isInvalid, ariaLabel, ariaLabelledBy, selectedValues, } = viewInputs;
|
|
408
407
|
const itemToValue = viewInputs.itemToValue ?? ((item) => String(item));
|
|
408
|
+
const isValueSelected = (itemValue) => Array.contains(selectedValues, itemValue);
|
|
409
409
|
const itemToSearchText = viewInputs.itemToSearchText ?? ((item) => itemToValue(item));
|
|
410
410
|
const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
|
|
411
411
|
const isVisible = isOpen || isLeaving;
|
|
@@ -440,7 +440,7 @@ export const makeView = (behavior) => {
|
|
|
440
440
|
const isNavigationKey = (key) => Array.contains(navigationKeys, key);
|
|
441
441
|
const firstEnabledIndex = findFirstEnabledIndex(items.length, 0, isItemDisabledByIndex)(0, 1);
|
|
442
442
|
const lastEnabledIndex = findFirstEnabledIndex(items.length, 0, isItemDisabledByIndex)(items.length - 1, -1);
|
|
443
|
-
const selectedItemIndex =
|
|
443
|
+
const selectedItemIndex = pipe(selectedValues, Array.head, Option.flatMap(selectedValue => Array.findFirstIndex(items, item => itemToValue(item) === selectedValue)));
|
|
444
444
|
const handleButtonKeyDown = (key) => {
|
|
445
445
|
if (isOpen) {
|
|
446
446
|
return handleItemsKeyDown(key);
|
|
@@ -552,7 +552,7 @@ export const makeView = (behavior) => {
|
|
|
552
552
|
const listboxItems = Array.map(items, (item, index) => {
|
|
553
553
|
const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
|
|
554
554
|
const isDisabledItem = isItemDisabledByIndex(index);
|
|
555
|
-
const isSelectedItem =
|
|
555
|
+
const isSelectedItem = isValueSelected(itemToValue(item));
|
|
556
556
|
const itemConfig = itemToConfig(item, {
|
|
557
557
|
isActive: isActiveItem,
|
|
558
558
|
isDisabled: isDisabledItem,
|
|
@@ -655,7 +655,6 @@ export const makeView = (behavior) => {
|
|
|
655
655
|
h.keyed('div')(`${id}-items-container`, itemsContainerAttributes, scrollableItems),
|
|
656
656
|
];
|
|
657
657
|
const formAttribute = form ? [h.Attribute('form', form)] : [];
|
|
658
|
-
const selectedValues = pipe(items, Array.filter(item => behavior.isItemSelected(model, itemToValue(item))), Array.map(itemToValue));
|
|
659
658
|
const hiddenInputs = name
|
|
660
659
|
? Array.match(selectedValues, {
|
|
661
660
|
onEmpty: () => [
|