foldkit 0.24.0 → 0.26.0

package/dist/ui/listbox/{index.js → shared.js}

@@ -2,37 +2,49 @@ import { Array, Effect, Match as M, Option, Predicate, Schema as S, String as St
 import { OptionExt } from '../../effectExtensions';
 import { html } from '../../html';
 import { m } from '../../message';
-import { evo } from '../../struct';
+import { makeConstrainedEvo } from '../../struct';
 import * as Task from '../../task';
+import { anchorHooks } from '../anchor';
 import { groupContiguous } from '../group';
 import { findFirstEnabledIndex, isPrintableKey, keyToIndex } from '../keyboard';
-import { anchorHooks } from '../menu/anchor';
+import { TransitionState } from '../transition';
 import { resolveTypeaheadMatch } from '../typeahead';
 export { resolveTypeaheadMatch };
 // MODEL
 /** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
 export const ActivationTrigger = S.Literal('Pointer', 'Keyboard');
-/** Schema for the transition animation state, tracking enter/leave phases for CSS transition coordination. */
-export const TransitionState = S.Literal('Idle', 'EnterStart', 'EnterAnimating', 'LeaveStart', 'LeaveAnimating');
 /** Schema for the listbox orientation — whether items flow vertically or horizontally. */
 export const Orientation = S.Literal('Vertical', 'Horizontal');
-/** Schema for the listbox component's state, tracking open/closed status, active item, selected items, activation trigger, and typeahead search. */
-export const Model = S.Struct({
+/** Schema fields shared by all listbox variants (single-select and multi-select). Spread into each variant's `S.Struct` to avoid duplicating field definitions. */
+export const BaseModel = S.Struct({
     id: S.String,
     isOpen: S.Boolean,
     isAnimated: S.Boolean,
     isModal: S.Boolean,
-    isMultiple: S.Boolean,
     orientation: Orientation,
     transitionState: TransitionState,
     maybeActiveItemIndex: S.OptionFromSelf(S.Number),
     activationTrigger: ActivationTrigger,
     searchQuery: S.String,
     searchVersion: S.Number,
-    selectedItems: S.Array(S.String),
     maybeLastPointerPosition: S.OptionFromSelf(S.Struct({ screenX: S.Number, screenY: S.Number })),
     maybeLastButtonPointerType: S.OptionFromSelf(S.String),
 });
+/** Creates the shared base fields for a listbox model from a config. Each variant spreads this and adds its selection field. */
+export const baseInit = (config) => ({
+    id: config.id,
+    isOpen: false,
+    isAnimated: config.isAnimated ?? false,
+    isModal: config.isModal ?? false,
+    orientation: config.orientation ?? 'Vertical',
+    transitionState: 'Idle',
+    maybeActiveItemIndex: Option.none(),
+    activationTrigger: 'Keyboard',
+    searchQuery: '',
+    searchVersion: 0,
+    maybeLastPointerPosition: Option.none(),
+    maybeLastButtonPointerType: Option.none(),
+});
 // MESSAGE
 /** Sent when the listbox opens via button click or keyboard. Contains an optional initial active item index — None for pointer, Some for keyboard. */
 export const Opened = m('Opened', {
@@ -83,30 +95,19 @@ export const PressedPointerOnButton = m('PressedPointerOnButton', {
 });
 /** Union of all messages the listbox component can produce. */
 export const Message = S.Union(Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, NoOp, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, PressedPointerOnButton);
-// INIT
-const SEARCH_DEBOUNCE_MILLISECONDS = 350;
-const LEFT_MOUSE_BUTTON = 0;
-/** Creates an initial listbox model from a config. Defaults to closed with no active item and no selection. */
-export const init = (config) => ({
-    id: config.id,
-    isOpen: false,
-    isAnimated: config.isAnimated ?? false,
-    isModal: config.isModal ?? false,
-    isMultiple: config.isMultiple ?? false,
-    orientation: config.orientation ?? 'Vertical',
-    transitionState: 'Idle',
-    maybeActiveItemIndex: Option.none(),
-    activationTrigger: 'Keyboard',
-    searchQuery: '',
-    searchVersion: 0,
-    selectedItems: config.selectedItems ?? [],
-    maybeLastPointerPosition: Option.none(),
-    maybeLastButtonPointerType: Option.none(),
-});
-// UPDATE
-const closedModel = (model) => evo(model, {
+// CONSTANTS
+export const SEARCH_DEBOUNCE_MILLISECONDS = 350;
+export const LEFT_MOUSE_BUTTON = 0;
+// SELECTORS
+export const buttonSelector = (id) => `#${id}-button`;
+export const itemsSelector = (id) => `#${id}-items`;
+export const itemSelector = (id, index) => `#${id}-item-${index}`;
+export const itemId = (id, index) => `${id}-item-${index}`;
+// HELPERS
+const constrainedEvo = makeConstrainedEvo();
+export const closedModel = (model) => constrainedEvo(model, {
     isOpen: () => false,
-    transitionState: () => (model.isAnimated ? 'LeaveStart' : 'Idle'),
+    transitionState: () => model.isAnimated ? 'LeaveStart' : 'Idle',
     maybeActiveItemIndex: () => Option.none(),
     activationTrigger: () => 'Keyboard',
     searchQuery: () => '',
@@ -114,182 +115,187 @@ const closedModel = (model) => evo(model, {
     maybeLastPointerPosition: () => Option.none(),
     maybeLastButtonPointerType: () => Option.none(),
 });
-const buttonSelector = (id) => `#${id}-button`;
-const itemsSelector = (id) => `#${id}-items`;
-const itemSelector = (id, index) => `#${id}-item-${index}`;
-const withUpdateReturn = M.withReturnType();
-/** Processes a listbox message and returns the next model and commands. */
-export const update = (model, message) => {
-    const maybeNextFrame = OptionExt.when(model.isAnimated, Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame())));
-    const maybeLockScroll = OptionExt.when(model.isModal, Task.lockScroll.pipe(Effect.as(NoOp())));
-    const maybeUnlockScroll = OptionExt.when(model.isModal, Task.unlockScroll.pipe(Effect.as(NoOp())));
-    const maybeInertOthers = OptionExt.when(model.isModal, Task.inertOthers(model.id, [
-        buttonSelector(model.id),
-        itemsSelector(model.id),
-    ]).pipe(Effect.as(NoOp())));
-    const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(NoOp())));
-    const focusButton = Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp()));
-    return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
-        Opened: ({ maybeActiveItemIndex }) => {
-            const nextModel = evo(model, {
-                isOpen: () => true,
-                transitionState: () => (model.isAnimated ? 'EnterStart' : 'Idle'),
-                maybeActiveItemIndex: () => maybeActiveItemIndex,
-                activationTrigger: () => Option.match(maybeActiveItemIndex, {
-                    onNone: () => 'Pointer',
-                    onSome: () => 'Keyboard',
-                }),
-                searchQuery: () => '',
-                searchVersion: () => 0,
-                maybeLastPointerPosition: () => Option.none(),
-            });
-            return [
-                nextModel,
-                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
-            ];
-        },
-        Closed: () => [
-            closedModel(model),
-            pipe(Array.getSomes([
-                maybeNextFrame,
-                maybeUnlockScroll,
-                maybeRestoreInert,
-            ]), Array.prepend(focusButton)),
-        ],
-        ClosedByTab: () => [
-            closedModel(model),
-            Array.getSomes([maybeNextFrame, maybeUnlockScroll, maybeRestoreInert]),
-        ],
-        ActivatedItem: ({ index, activationTrigger }) => [
-            evo(model, {
-                maybeActiveItemIndex: () => Option.some(index),
-                activationTrigger: () => activationTrigger,
-            }),
-            activationTrigger === 'Keyboard'
-                ? [
-                    Task.scrollIntoView(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
-                ]
-                : [],
-        ],
-        MovedPointerOverItem: ({ index, screenX, screenY }) => {
-            const isSamePosition = Option.exists(model.maybeLastPointerPosition, position => position.screenX === screenX && position.screenY === screenY);
-            if (isSamePosition) {
-                return [model, []];
-            }
-            return [
-                evo(model, {
-                    maybeActiveItemIndex: () => Option.some(index),
-                    activationTrigger: () => 'Pointer',
-                    maybeLastPointerPosition: () => Option.some({ screenX, screenY }),
-                }),
-                [],
-            ];
-        },
-        DeactivatedItem: () => model.activationTrigger === 'Pointer'
-            ? [evo(model, { maybeActiveItemIndex: () => Option.none() }), []]
-            : [model, []],
-        SelectedItem: ({ item }) => {
-            if (model.isMultiple) {
-                const nextSelectedItems = Array.contains(model.selectedItems, item)
-                    ? Array.filter(model.selectedItems, selected => selected !== item)
-                    : Array.append(model.selectedItems, item);
-                return [evo(model, { selectedItems: () => nextSelectedItems }), []];
-            }
-            return [
-                evo(closedModel(model), {
-                    selectedItems: () => [item],
-                }),
+export const makeUpdate = (handleSelectedItem) => {
+    const withUpdateReturn = M.withReturnType();
+    return (model, message) => {
+        const maybeNextFrame = OptionExt.when(model.isAnimated, Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame())));
+        const maybeLockScroll = OptionExt.when(model.isModal, Task.lockScroll.pipe(Effect.as(NoOp())));
+        const maybeUnlockScroll = OptionExt.when(model.isModal, Task.unlockScroll.pipe(Effect.as(NoOp())));
+        const maybeInertOthers = OptionExt.when(model.isModal, Task.inertOthers(model.id, [
+            buttonSelector(model.id),
+            itemsSelector(model.id),
+        ]).pipe(Effect.as(NoOp())));
+        const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(NoOp())));
+        const focusButton = Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp()));
+        return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+            Opened: ({ maybeActiveItemIndex }) => {
+                const nextModel = constrainedEvo(model, {
+                    isOpen: () => true,
+                    transitionState: () => model.isAnimated ? 'EnterStart' : 'Idle',
+                    maybeActiveItemIndex: () => maybeActiveItemIndex,
+                    activationTrigger: () => Option.match(maybeActiveItemIndex, {
+                        onNone: () => 'Pointer',
+                        onSome: () => 'Keyboard',
+                    }),
+                    searchQuery: () => '',
+                    searchVersion: () => 0,
+                    maybeLastPointerPosition: () => Option.none(),
+                });
+                return [
+                    nextModel,
+                    pipe(Array.getSomes([
+                        maybeNextFrame,
+                        maybeLockScroll,
+                        maybeInertOthers,
+                    ]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+                ];
+            },
+            Closed: () => [
+                closedModel(model),
                 pipe(Array.getSomes([
                     maybeNextFrame,
                     maybeUnlockScroll,
                     maybeRestoreInert,
                 ]), Array.prepend(focusButton)),
-            ];
-        },
-        RequestedItemClick: ({ index }) => [
-            model,
-            [
-                Task.clickElement(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
             ],
-        ],
-        Searched: ({ key, maybeTargetIndex }) => {
-            const nextSearchQuery = model.searchQuery + key;
-            const nextSearchVersion = model.searchVersion + 1;
-            return [
-                evo(model, {
-                    searchQuery: () => nextSearchQuery,
-                    searchVersion: () => nextSearchVersion,
-                    maybeActiveItemIndex: () => Option.orElse(maybeTargetIndex, () => model.maybeActiveItemIndex),
+            ClosedByTab: () => [
+                closedModel(model),
+                Array.getSomes([
+                    maybeNextFrame,
+                    maybeUnlockScroll,
+                    maybeRestoreInert,
+                ]),
+            ],
+            ActivatedItem: ({ index, activationTrigger }) => [
+                constrainedEvo(model, {
+                    maybeActiveItemIndex: () => Option.some(index),
+                    activationTrigger: () => activationTrigger,
                 }),
+                activationTrigger === 'Keyboard'
+                    ? [
+                        Task.scrollIntoView(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
+                    ]
+                    : [],
+            ],
+            MovedPointerOverItem: ({ index, screenX, screenY }) => {
+                const isSamePosition = Option.exists(model.maybeLastPointerPosition, position => position.screenX === screenX && position.screenY === screenY);
+                if (isSamePosition) {
+                    return [model, []];
+                }
+                return [
+                    constrainedEvo(model, {
+                        maybeActiveItemIndex: () => Option.some(index),
+                        activationTrigger: () => 'Pointer',
+                        maybeLastPointerPosition: () => Option.some({ screenX, screenY }),
+                    }),
+                    [],
+                ];
+            },
+            DeactivatedItem: () => model.activationTrigger === 'Pointer'
+                ? [
+                    constrainedEvo(model, {
+                        maybeActiveItemIndex: () => Option.none(),
+                    }),
+                    [],
+                ]
+                : [model, []],
+            SelectedItem: ({ item }) => handleSelectedItem(model, item, {
+                focusButton,
+                maybeNextFrame,
+                maybeUnlockScroll,
+                maybeRestoreInert,
+            }),
+            RequestedItemClick: ({ index }) => [
+                model,
                 [
-                    Task.delay(SEARCH_DEBOUNCE_MILLISECONDS).pipe(Effect.as(ClearedSearch({ version: nextSearchVersion }))),
+                    Task.clickElement(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
                 ],
-            ];
-        },
-        ClearedSearch: ({ version }) => {
-            if (version !== model.searchVersion) {
-                return [model, []];
-            }
-            return [evo(model, { searchQuery: () => '' }), []];
-        },
-        AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
-            evo(model, { transitionState: () => 'EnterAnimating' }),
-            [
-                Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition())),
-            ],
-        ]), M.when('LeaveStart', () => [
-            evo(model, { transitionState: () => 'LeaveAnimating' }),
-            [
-                Effect.raceFirst(Task.detectElementMovement(buttonSelector(model.id)).pipe(Effect.as(DetectedButtonMovement())), Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition()))),
             ],
-        ]), M.orElse(() => [model, []])),
-        EndedTransition: () => M.value(model.transitionState).pipe(withUpdateReturn, M.whenOr('EnterAnimating', 'LeaveAnimating', () => [
-            evo(model, { transitionState: () => 'Idle' }),
-            [],
-        ]), M.orElse(() => [model, []])),
-        DetectedButtonMovement: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('LeaveAnimating', () => [
-            evo(model, { transitionState: () => 'Idle' }),
-            [],
-        ]), M.orElse(() => [model, []])),
-        PressedPointerOnButton: ({ pointerType, button }) => {
-            const withPointerType = evo(model, {
-                maybeLastButtonPointerType: () => Option.some(pointerType),
-            });
-            if (pointerType !== 'mouse' || button !== LEFT_MOUSE_BUTTON) {
-                return [withPointerType, []];
-            }
-            if (model.isOpen) {
+            Searched: ({ key, maybeTargetIndex }) => {
+                const nextSearchQuery = model.searchQuery + key;
+                const nextSearchVersion = model.searchVersion + 1;
+                return [
+                    constrainedEvo(model, {
+                        searchQuery: () => nextSearchQuery,
+                        searchVersion: () => nextSearchVersion,
+                        maybeActiveItemIndex: () => Option.orElse(maybeTargetIndex, () => model.maybeActiveItemIndex),
+                    }),
+                    [
+                        Task.delay(SEARCH_DEBOUNCE_MILLISECONDS).pipe(Effect.as(ClearedSearch({ version: nextSearchVersion }))),
+                    ],
+                ];
+            },
+            ClearedSearch: ({ version }) => {
+                if (version !== model.searchVersion) {
+                    return [model, []];
+                }
+                return [constrainedEvo(model, { searchQuery: () => '' }), []];
+            },
+            AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
+                constrainedEvo(model, {
+                    transitionState: () => 'EnterAnimating',
+                }),
+                [
+                    Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition())),
+                ],
+            ]), M.when('LeaveStart', () => [
+                constrainedEvo(model, {
+                    transitionState: () => 'LeaveAnimating',
+                }),
+                [
+                    Effect.raceFirst(Task.detectElementMovement(buttonSelector(model.id)).pipe(Effect.as(DetectedButtonMovement())), Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition()))),
+                ],
+            ]), M.orElse(() => [model, []])),
+            EndedTransition: () => M.value(model.transitionState).pipe(withUpdateReturn, M.whenOr('EnterAnimating', 'LeaveAnimating', () => [
+                constrainedEvo(model, { transitionState: () => 'Idle' }),
+                [],
+            ]), M.orElse(() => [model, []])),
+            DetectedButtonMovement: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('LeaveAnimating', () => [
+                constrainedEvo(model, { transitionState: () => 'Idle' }),
+                [],
+            ]), M.orElse(() => [model, []])),
+            PressedPointerOnButton: ({ pointerType, button }) => {
+                const withPointerType = constrainedEvo(model, {
+                    maybeLastButtonPointerType: () => Option.some(pointerType),
+                });
+                if (pointerType !== 'mouse' || button !== LEFT_MOUSE_BUTTON) {
+                    return [withPointerType, []];
+                }
+                if (model.isOpen) {
+                    return [
+                        closedModel(withPointerType),
+                        pipe(Array.getSomes([
+                            maybeNextFrame,
+                            maybeUnlockScroll,
+                            maybeRestoreInert,
+                        ]), Array.prepend(focusButton)),
+                    ];
+                }
+                const nextModel = constrainedEvo(withPointerType, {
+                    isOpen: () => true,
+                    transitionState: () => model.isAnimated ? 'EnterStart' : 'Idle',
+                    maybeActiveItemIndex: () => Option.none(),
+                    activationTrigger: () => 'Pointer',
+                    searchQuery: () => '',
+                    searchVersion: () => 0,
+                    maybeLastPointerPosition: () => Option.none(),
+                });
                 return [
-                    closedModel(withPointerType),
+                    nextModel,
                     pipe(Array.getSomes([
                         maybeNextFrame,
-                        maybeUnlockScroll,
-                        maybeRestoreInert,
-                    ]), Array.prepend(focusButton)),
+                        maybeLockScroll,
+                        maybeInertOthers,
+                    ]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
                 ];
-            }
-            const nextModel = evo(withPointerType, {
-                isOpen: () => true,
-                transitionState: () => (model.isAnimated ? 'EnterStart' : 'Idle'),
-                maybeActiveItemIndex: () => Option.none(),
-                activationTrigger: () => 'Pointer',
-                searchQuery: () => '',
-                searchVersion: () => 0,
-                maybeLastPointerPosition: () => Option.none(),
-            });
-            return [
-                nextModel,
-                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
-            ];
-        },
-        NoOp: () => [model, []],
-    }));
+            },
+            NoOp: () => [model, []],
+        }));
+    };
 };
-const itemId = (id, index) => `${id}-item-${index}`;
-/** Renders a headless listbox with typeahead search, keyboard navigation, selection tracking, and aria-activedescendant focus management. */
-export const view = (config) => {
-    const { div, input, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaHasPopup, AriaLabelledBy, AriaOrientation, AriaSelected, Attribute, Class, DataAttribute, Id, Name, OnBlur, OnClick, OnDestroy, OnInsert, OnKeyDownPreventDefault, OnKeyUpPreventDefault, OnPointerDown, OnPointerLeave, OnPointerMove, Role, Style, Tabindex, Type, Value, keyed, } = html();
-    const { model: { id, isOpen, isMultiple, orientation, transitionState, maybeActiveItemIndex, selectedItems, searchQuery, maybeLastButtonPointerType, }, toMessage, items, itemToConfig, isItemDisabled, isButtonDisabled, buttonContent, buttonClassName, itemsClassName, backdropClassName, className, itemGroupKey, groupToHeading, groupClassName, separatorClassName, anchor, name, form, isDisabled, isInvalid, } = config;
+export const makeView = (behavior) => (config) => {
+    const { div, input, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaHasPopup, AriaLabelledBy, AriaMultiSelectable, AriaOrientation, AriaSelected, Attribute, Class, DataAttribute, Id, Name, OnBlur, OnClick, OnDestroy, OnInsert, OnKeyDownPreventDefault, OnKeyUpPreventDefault, OnPointerDown, OnPointerLeave, OnPointerMove, Role, Style, Tabindex, Type, Value, keyed, } = html();
+    const { model: { id, isOpen, orientation, transitionState, maybeActiveItemIndex, searchQuery, maybeLastButtonPointerType, }, toMessage, items, itemToConfig, isItemDisabled, isButtonDisabled, buttonContent, buttonClassName, itemsClassName, backdropClassName, className, itemGroupKey, groupToHeading, groupClassName, separatorClassName, anchor, name, form, isDisabled, isInvalid, } = config;
     const itemToValue = config.itemToValue ?? (item => String(item));
     const itemToSearchText = config.itemToSearchText ?? (item => itemToValue(item));
     const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
@@ -325,7 +331,7 @@ export const view = (config) => {
     const isNavigationKey = (key) => Array.contains(navigationKeys, key);
     const firstEnabledIndex = findFirstEnabledIndex(items.length, 0, isItemDisabledByIndex)(0, 1);
     const lastEnabledIndex = findFirstEnabledIndex(items.length, 0, isItemDisabledByIndex)(items.length - 1, -1);
-    const selectedItemIndex = pipe(Array.head(selectedItems), Option.flatMap(selectedItem => Array.findFirstIndex(items, item => itemToValue(item) === selectedItem)));
+    const selectedItemIndex = behavior.selectedItemIndex(config.model, items, itemToValue);
     const handleButtonKeyDown = (key) => M.value(key).pipe(M.whenOr('Enter', ' ', 'ArrowDown', () => Option.some(toMessage(Opened({
         maybeActiveItemIndex: Option.orElse(selectedItemIndex, () => Option.some(firstEnabledIndex)),
     })))), M.when('ArrowUp', () => Option.some(toMessage(Opened({
@@ -399,7 +405,7 @@ export const view = (config) => {
         Id(`${id}-items`),
         Role('listbox'),
         AriaOrientation(Str.toLowerCase(orientation)),
-        ...(isMultiple ? [Attribute('aria-multiselectable', 'true')] : []),
+        ...(behavior.ariaMultiSelectable ? [AriaMultiSelectable(true)] : []),
         AriaLabelledBy(`${id}-button`),
         ...maybeActiveDescendant,
         Tabindex(0),
@@ -417,7 +423,7 @@ export const view = (config) => {
     const listboxItems = Array.map(items, (item, index) => {
         const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
         const isDisabledItem = isItemDisabledByIndex(index);
-        const isSelectedItem = Array.contains(selectedItems, itemToValue(item));
+        const isSelectedItem = behavior.isItemSelected(config.model, itemToValue(item));
         const itemConfig = itemToConfig(item, {
             isActive: isActiveItem,
             isDisabled: isDisabledItem,
@@ -484,13 +490,16 @@ export const view = (config) => {
         keyed('div')(`${id}-items-container`, itemsContainerAttributes, renderedItems),
     ];
     const formAttribute = form ? [Attribute('form', form)] : [];
+    const selectedValues = pipe(items, Array.filter(item => behavior.isItemSelected(config.model, itemToValue(item))), Array.map(itemToValue));
     const hiddenInputs = name
-        ? Array.match(selectedItems, {
-            onEmpty: () => [input([Type('hidden'), Name(name), ...formAttribute])],
-            onNonEmpty: Array.map(selectedItem => input([
+        ? Array.match(selectedValues, {
+            onEmpty: () => [
+                input([Type('hidden'), Name(name), ...formAttribute]),
+            ],
+            onNonEmpty: Array.map(selectedValue => input([
                 Type('hidden'),
                 Name(name),
-                Value(selectedItem),
+                Value(selectedValue),
                 ...formAttribute,
             ])),
         })