foldkit 0.101.0 → 0.102.0

package/dist/ui/combobox/shared.js

@@ -2,7 +2,7 @@ import { Array, Effect, Match as M, Option, Predicate, Result, Schema as S, pipe
 import * as Command from '../../command/index.js';
 import * as Dom from '../../dom/index.js';
 import { OptionExt } from '../../effectExtensions/index.js';
-import { html } from '../../html/index.js';
+import { defineView, html, } from '../../html/index.js';
 import { m } from '../../message/index.js';
 import * as Mount from '../../mount/index.js';
 import { makeConstrainedEvo } from '../../struct/index.js';
@@ -16,7 +16,7 @@ import { groupContiguous } from '../group.js';
 import { findFirstEnabledIndex, keyToIndex } from '../keyboard.js';
 export { groupContiguous };
 // MODEL
-/** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
+/** Schema for the activation trigger: whether the user interacted via mouse or keyboard. */
 export const ActivationTrigger = S.Literals(['Pointer', 'Keyboard']);
 /** Schema fields shared by all combobox variants (single-select and multi-select). Spread into each variant's `S.Struct` to avoid duplicating field definitions. */
 export const BaseModel = S.Struct({
@@ -85,9 +85,9 @@ export const CompletedLockScroll = m('CompletedLockScroll');
 /** Sent when the scroll unlock command completes. */
 export const CompletedUnlockScroll = m('CompletedUnlockScroll');
 /** Sent when the inert-others command completes. */
-export const CompletedSetupInert = m('CompletedSetupInert');
+export const CompletedInertOthers = m('CompletedInertOthers');
 /** Sent when the restore-inert command completes. */
-export const CompletedTeardownInert = m('CompletedTeardownInert');
+export const CompletedRestoreInert = m('CompletedRestoreInert');
 /** Sent when the focus-input command completes. */
 export const CompletedFocusInput = m('CompletedFocusInput');
 /** Sent when the scroll-into-view command completes after keyboard activation. */
@@ -124,8 +124,8 @@ export const Message = S.Union([
     RequestedItemClick,
     CompletedLockScroll,
     CompletedUnlockScroll,
-    CompletedSetupInert,
-    CompletedTeardownInert,
+    CompletedInertOthers,
+    CompletedRestoreInert,
     CompletedFocusInput,
     CompletedScrollIntoView,
     CompletedClickItem,
@@ -137,6 +137,14 @@ export const Message = S.Union([
     UpdatedInputValue,
     PressedToggleButton,
 ]);
+// OUT MESSAGE
+/** Sent when a single-select combobox commits a selection, or when a multi-select combobox toggles an item on. The `value` is the string key; consumers that need a richer domain type should look it up from their own state or, in the multi case, branch on `wasAdded` to distinguish add vs remove. */
+export const Selected = m('Selected', {
+    value: S.String,
+    wasAdded: S.Boolean,
+});
+/** Union of out-messages the combobox component can produce. Single-select comboboxes always emit `wasAdded: true`. Multi-select comboboxes emit `wasAdded: true` when adding to the selection and `wasAdded: false` when toggling off. */
+export const OutMessage = S.Union([Selected]);
 // SELECTORS
 export const inputSelector = (id) => `#${id}-input`;
 export const inputWrapperSelector = (id) => `#${id}-input-wrapper`;
@@ -145,7 +153,7 @@ export const itemSelector = (id, index) => `#${id}-item-${index}`;
 export const itemId = (id, index) => `${id}-item-${index}`;
 // HELPERS
 const constrainedEvo = makeConstrainedEvo();
-/** Resets only shared base fields to their closed state. Does not touch inputValue or selection — those are variant-specific. */
+/** Resets only shared base fields to their closed state. Does not touch inputValue or selection. Those are variant-specific. */
 export const closedBaseModel = (model) => constrainedEvo(model, {
     isOpen: () => false,
     maybeActiveItemIndex: () => Option.none(),
@@ -157,9 +165,9 @@ export const LockScroll = Command.define('LockScroll', CompletedLockScroll)(Dom.
 /** Re-enables page scrolling after the combobox popup closes. */
 export const UnlockScroll = Command.define('UnlockScroll', CompletedUnlockScroll)(Dom.unlockScroll.pipe(Effect.as(CompletedUnlockScroll())));
 /** Marks all elements outside the combobox as inert for modal behavior. */
-export const InertOthers = Command.define('InertOthers', { id: S.String }, CompletedSetupInert)(({ id }) => Dom.inertOthers(id, [inputWrapperSelector(id), itemsSelector(id)]).pipe(Effect.as(CompletedSetupInert())));
+export const InertOthers = Command.define('InertOthers', { id: S.String }, CompletedInertOthers)(({ id }) => Dom.inertOthers(id, [inputWrapperSelector(id), itemsSelector(id)]).pipe(Effect.as(CompletedInertOthers())));
 /** Removes the inert attribute from elements outside the combobox. */
-export const RestoreInert = Command.define('RestoreInert', { id: S.String }, CompletedTeardownInert)(({ id }) => Dom.restoreInert(id).pipe(Effect.as(CompletedTeardownInert())));
+export const RestoreInert = Command.define('RestoreInert', { id: S.String }, CompletedRestoreInert)(({ id }) => Dom.restoreInert(id).pipe(Effect.as(CompletedRestoreInert())));
 /** Moves focus to the combobox input after selection or close. */
 export const FocusInput = Command.define('FocusInput', { id: S.String }, CompletedFocusInput)(({ id }) => Dom.focus(inputSelector(id)).pipe(Effect.ignore, Effect.as(CompletedFocusInput())));
 /** Scrolls the active combobox item into view after keyboard navigation. */
@@ -170,7 +178,7 @@ export const ClickItem = Command.define('ClickItem', { id: S.String, index: S.Nu
 export const DetectMovementOrAnimationEnd = Command.define('DetectMovementOrAnimationEnd', { id: S.String }, GotAnimationMessage)(({ id }) => Effect.raceFirst(Dom.detectElementMovement(inputWrapperSelector(id)).pipe(Effect.as(GotAnimationMessage({ message: AnimationEndedAnimation() }))), Dom.waitForAnimationSettled(itemsSelector(id)).pipe(Effect.as(GotAnimationMessage({ message: AnimationEndedAnimation() })))));
 const delegateToAnimation = (model, animationMessage) => {
     const [nextAnimation, animationCommands, maybeOutMessage] = animationUpdate(model.animation, animationMessage);
-    const mappedCommands = animationCommands.map(Command.mapEffect(Effect.map(message => GotAnimationMessage({ message }))));
+    const mappedCommands = Command.mapMessages(animationCommands, message => GotAnimationMessage({ message }));
     const additionalCommands = Option.match(maybeOutMessage, {
         onNone: () => [],
         onSome: M.type().pipe(M.tagsExhaustive({
@@ -183,12 +191,13 @@ const delegateToAnimation = (model, animationMessage) => {
     return [
         constrainedEvo(model, { animation: () => nextAnimation }),
         [...mappedCommands, ...additionalCommands],
+        Option.none(),
     ];
 };
 /** Creates a combobox update function from variant-specific handlers. Shared logic (open, close, activate, transition) is handled internally; only close, selection, and immediate-activation behavior varies by variant. */
 export const makeUpdate = (handlers) => {
     const withUpdateReturn = M.withReturnType();
-    return (model, message) => {
+    const internalUpdate = (model, message) => {
         const maybeLockScroll = OptionExt.when(model.isModal, LockScroll());
         const maybeUnlockScroll = OptionExt.when(model.isModal, UnlockScroll());
         const maybeInertOthers = OptionExt.when(model.isModal, InertOthers({ id: model.id }));
@@ -203,22 +212,24 @@ export const makeUpdate = (handlers) => {
                         ...Array.getSomes([maybeLockScroll, maybeInertOthers]),
                         ...animationCommands,
                     ],
+                    Option.none(),
                 ];
             }
             return [
                 constrainedEvo(baseModel, { isOpen: () => true }),
                 Array.getSomes([maybeLockScroll, maybeInertOthers]),
+                Option.none(),
             ];
         };
-        const closeCombobox = (baseModel, commands) => {
+        const closeCombobox = (baseModel, commands, maybeOutMessage = Option.none()) => {
             const closed = handlers.handleClose(baseModel);
             if (model.isAnimated) {
                 const [nextModel, animationCommands] = delegateToAnimation(closed, AnimationHid());
-                return [nextModel, [...commands, ...animationCommands]];
+                return [nextModel, [...commands, ...animationCommands], maybeOutMessage];
             }
-            return [closed, commands];
+            return [closed, commands, maybeOutMessage];
         };
-        return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+        return M.value(message).pipe(withUpdateReturn, M.tag('CompletedLockScroll', 'CompletedUnlockScroll', 'CompletedInertOthers', 'CompletedRestoreInert', 'CompletedFocusInput', 'CompletedScrollIntoView', 'CompletedClickItem', 'CompletedAnchorCombobox', 'CompletedAttachComboboxPreventBlur', 'CompletedAttachComboboxSelectOnFocus', 'CompletedPortalComboboxBackdrop', () => [model, [], Option.none()]), M.tagsExhaustive({
             Opened: ({ maybeActiveItemIndex }) => openCombobox(constrainedEvo(model, {
                 maybeActiveItemIndex: () => maybeActiveItemIndex,
                 activationTrigger: () => Option.match(maybeActiveItemIndex, {
@@ -243,12 +254,13 @@ export const makeUpdate = (handlers) => {
                     activationTrigger === 'Keyboard'
                         ? [ScrollIntoView({ id: model.id, index })]
                         : [],
+                    Option.none(),
                 ];
             },
             MovedPointerOverItem: ({ index, screenX, screenY }) => {
                 const isSamePosition = Option.exists(model.maybeLastPointerPosition, position => position.screenX === screenX && position.screenY === screenY);
                 if (isSamePosition) {
-                    return [model, []];
+                    return [model, [], Option.none()];
                 }
                 return [
                     constrainedEvo(model, {
@@ -257,6 +269,7 @@ export const makeUpdate = (handlers) => {
                         maybeLastPointerPosition: () => Option.some({ screenX, screenY }),
                     }),
                     [],
+                    Option.none(),
                 ];
             },
             DeactivatedItem: () => model.activationTrigger === 'Pointer'
@@ -265,23 +278,29 @@ export const makeUpdate = (handlers) => {
                         maybeActiveItemIndex: () => Option.none(),
                     }),
                     [],
+                    Option.none(),
                 ]
-                : [model, []],
+                : [model, [], Option.none()],
             SelectedItem: ({ item, displayText }) => {
-                const [nextModel, commands] = handlers.handleSelectedItem(model, item, displayText, {
+                const [nextModel, commands, maybeOutMessage] = handlers.handleSelectedItem(model, item, displayText, {
                     focusInput,
                     maybeUnlockScroll,
                     maybeRestoreInert,
                 });
                 if (model.isOpen && !nextModel.isOpen && model.isAnimated) {
                     const [transitionedModel, animationCommands] = delegateToAnimation(nextModel, AnimationHid());
-                    return [transitionedModel, [...commands, ...animationCommands]];
+                    return [
+                        transitionedModel,
+                        [...commands, ...animationCommands],
+                        maybeOutMessage,
+                    ];
                 }
-                return [nextModel, commands];
+                return [nextModel, commands, maybeOutMessage];
             },
             RequestedItemClick: ({ index }) => [
                 model,
                 [ClickItem({ id: model.id, index })],
+                Option.none(),
             ],
             UpdatedInputValue: ({ value }) => {
                 if (model.isOpen) {
@@ -292,6 +311,7 @@ export const makeUpdate = (handlers) => {
                             activationTrigger: () => 'Keyboard',
                         }),
                         [],
+                        Option.none(),
                     ];
                 }
                 return openCombobox(constrainedEvo(model, {
@@ -310,22 +330,12 @@ export const makeUpdate = (handlers) => {
                     activationTrigger: () => 'Pointer',
                     maybeLastPointerPosition: () => Option.none(),
                 }));
-                return [nextModel, [focusInput, ...commands]];
+                return [nextModel, [focusInput, ...commands], Option.none()];
             },
             GotAnimationMessage: ({ message: animationMessage }) => delegateToAnimation(model, animationMessage),
-            CompletedLockScroll: () => [model, []],
-            CompletedUnlockScroll: () => [model, []],
-            CompletedSetupInert: () => [model, []],
-            CompletedTeardownInert: () => [model, []],
-            CompletedFocusInput: () => [model, []],
-            CompletedScrollIntoView: () => [model, []],
-            CompletedClickItem: () => [model, []],
-            CompletedAnchorCombobox: () => [model, []],
-            CompletedAttachComboboxPreventBlur: () => [model, []],
-            CompletedAttachComboboxSelectOnFocus: () => [model, []],
-            CompletedPortalComboboxBackdrop: () => [model, []],
         }));
     };
+    return internalUpdate;
 };
 /** The anchor-positioning Mount this Combobox renders when an anchor is
  *  configured. Exposed so Scene tests can call
@@ -391,303 +401,304 @@ export const PortalComboboxBackdrop = Mount.define('PortalComboboxBackdrop', Com
     return CompletedPortalComboboxBackdrop();
 }));
 /** Creates a combobox view function from variant-specific behavior. Shared rendering logic (input, items, transitions, keyboard navigation) is handled internally; only selection display varies by variant. */
-export const makeView = (behavior) => (config) => {
-    const h = html();
-    const { model: { id, isOpen, immediate, animation: { transitionState }, maybeActiveItemIndex, }, toParentMessage, onSelectedItem, items, itemToConfig, itemToValue, itemToDisplayText, isItemDisabled, inputClassName, inputAttributes = [], inputPlaceholder, inputWrapperClassName, inputWrapperAttributes = [], itemsClassName, itemsAttributes = [], itemsScrollClassName, itemsScrollAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], buttonContent, buttonClassName, buttonAttributes = [], formName, isDisabled, isInvalid, openOnFocus, itemGroupKey, groupToHeading, groupClassName, groupAttributes = [], separatorClassName, separatorAttributes = [], anchor, } = config;
-    const dispatchSelectedItem = (item, index) => onSelectedItem
-        ? onSelectedItem(itemToValue(item, index))
-        : toParentMessage(SelectedItem({
-            item: itemToValue(item, index),
-            displayText: itemToDisplayText(item, index),
-        }));
-    const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
-    const isVisible = isOpen || isLeaving;
-    const animationAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
-        h.DataAttribute('closed', ''),
-        h.DataAttribute('enter', ''),
-        h.DataAttribute('transition', ''),
-    ]), M.when('EnterAnimating', () => [
-        h.DataAttribute('enter', ''),
-        h.DataAttribute('transition', ''),
-    ]), M.when('LeaveStart', () => [
-        h.DataAttribute('leave', ''),
-        h.DataAttribute('transition', ''),
-    ]), M.when('LeaveAnimating', () => [
-        h.DataAttribute('closed', ''),
-        h.DataAttribute('leave', ''),
-        h.DataAttribute('transition', ''),
-    ]), M.orElse(() => []));
-    const isDisabledAtIndex = (index) => Predicate.isNotUndefined(isItemDisabled) &&
-        pipe(items, Array.get(index), Option.exists(item => isItemDisabled(item, index)));
-    const firstEnabledIndex = findFirstEnabledIndex(items.length, 0, isDisabledAtIndex)(0, 1);
-    const lastEnabledIndex = findFirstEnabledIndex(items.length, 0, isDisabledAtIndex)(items.length - 1, -1);
-    const resolveActiveIndex = keyToIndex('ArrowDown', 'ArrowUp', items.length, Option.getOrElse(maybeActiveItemIndex, () => -1), isDisabledAtIndex);
-    const resolveImmediateSelection = (targetIndex) => OptionExt.when(immediate, pipe(items, Array.get(targetIndex), Option.match({
-        onNone: () => ({ item: '', displayText: '' }),
-        onSome: targetItem => ({
-            item: itemToValue(targetItem, targetIndex),
-            displayText: itemToDisplayText(targetItem, targetIndex),
-        }),
-    })));
-    const handleInputKeyDown = (key) => M.value(key).pipe(M.when('ArrowDown', () => {
-        if (!isOpen) {
-            return Option.some(toParentMessage(Opened({
-                maybeActiveItemIndex: Option.some(firstEnabledIndex),
-            })));
-        }
-        const targetIndex = resolveActiveIndex('ArrowDown');
-        return Option.some(toParentMessage(ActivatedItem({
-            index: targetIndex,
-            activationTrigger: 'Keyboard',
-            maybeImmediateSelection: resolveImmediateSelection(targetIndex),
-        })));
-    }), M.when('ArrowUp', () => {
-        if (!isOpen) {
-            return Option.some(toParentMessage(Opened({
-                maybeActiveItemIndex: Option.some(lastEnabledIndex),
-            })));
-        }
-        const targetIndex = resolveActiveIndex('ArrowUp');
-        return Option.some(toParentMessage(ActivatedItem({
-            index: targetIndex,
-            activationTrigger: 'Keyboard',
-            maybeImmediateSelection: resolveImmediateSelection(targetIndex),
+export const makeView = (behavior) => {
+    const impl = defineView((model, viewInputs) => {
+        const h = html();
+        const { id, isOpen, immediate, animation: { transitionState }, maybeActiveItemIndex, } = model;
+        const { items, itemToConfig, itemToValue, itemToDisplayText, isItemDisabled, inputClassName, inputAttributes = [], inputPlaceholder, inputWrapperClassName, inputWrapperAttributes = [], itemsClassName, itemsAttributes = [], itemsScrollClassName, itemsScrollAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], buttonContent, buttonClassName, buttonAttributes = [], formName, isDisabled, isInvalid, openOnFocus, itemGroupKey, groupToHeading, groupClassName, groupAttributes = [], separatorClassName, separatorAttributes = [], anchor, } = viewInputs;
+        const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
+        const isVisible = isOpen || isLeaving;
+        const animationAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
+            h.DataAttribute('closed', ''),
+            h.DataAttribute('enter', ''),
+            h.DataAttribute('transition', ''),
+        ]), M.when('EnterAnimating', () => [
+            h.DataAttribute('enter', ''),
+            h.DataAttribute('transition', ''),
+        ]), M.when('LeaveStart', () => [
+            h.DataAttribute('leave', ''),
+            h.DataAttribute('transition', ''),
+        ]), M.when('LeaveAnimating', () => [
+            h.DataAttribute('closed', ''),
+            h.DataAttribute('leave', ''),
+            h.DataAttribute('transition', ''),
+        ]), M.orElse(() => []));
+        const isDisabledAtIndex = (index) => Predicate.isNotUndefined(isItemDisabled) &&
+            pipe(items, Array.get(index), Option.exists(item => isItemDisabled(item, index)));
+        const firstEnabledIndex = findFirstEnabledIndex(items.length, 0, isDisabledAtIndex)(0, 1);
+        const lastEnabledIndex = findFirstEnabledIndex(items.length, 0, isDisabledAtIndex)(items.length - 1, -1);
+        const resolveActiveIndex = keyToIndex('ArrowDown', 'ArrowUp', items.length, Option.getOrElse(maybeActiveItemIndex, () => -1), isDisabledAtIndex);
+        const resolveImmediateSelection = (targetIndex) => OptionExt.when(immediate, pipe(items, Array.get(targetIndex), Option.match({
+            onNone: () => ({ item: '', displayText: '' }),
+            onSome: targetItem => ({
+                item: itemToValue(targetItem, targetIndex),
+                displayText: itemToDisplayText(targetItem, targetIndex),
+            }),
         })));
-    }), M.when('Enter', () => {
-        if (!isOpen) {
-            return Option.none();
-        }
-        return Option.map(maybeActiveItemIndex, index => toParentMessage(RequestedItemClick({ index })));
-    }), M.when('Escape', () => {
-        if (!isOpen) {
-            return Option.none();
-        }
-        return Option.some(toParentMessage(Closed()));
-    }), M.whenOr('Home', 'End', () => {
-        if (!isOpen) {
-            return Option.none();
-        }
-        const targetIndex = resolveActiveIndex(key);
-        return Option.some(toParentMessage(ActivatedItem({
-            index: targetIndex,
-            activationTrigger: 'Keyboard',
-            maybeImmediateSelection: resolveImmediateSelection(targetIndex),
-        })));
-    }), M.orElse(() => Option.none()));
-    const maybeActiveDescendant = Option.match(maybeActiveItemIndex, {
-        onNone: () => [],
-        onSome: index => [h.AriaActiveDescendant(itemId(id, index))],
-    });
-    const resolvedInputAttributes = [
-        h.Id(`${id}-input`),
-        h.Role('combobox'),
-        h.AriaExpanded(isVisible),
-        h.AriaControls(`${id}-items`),
-        h.Attribute('aria-autocomplete', 'list'),
-        h.Attribute('aria-haspopup', 'listbox'),
-        h.Autocomplete('off'),
-        h.Value(config.model.inputValue),
-        ...maybeActiveDescendant,
-        ...(inputPlaceholder ? [h.Placeholder(inputPlaceholder)] : []),
-        ...(isDisabled
-            ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
-            : [
-                h.OnInput(value => toParentMessage(UpdatedInputValue({ value }))),
-                h.OnKeyDownPreventDefault(handleInputKeyDown),
-                h.OnBlur(toParentMessage(BlurredInput())),
-                ...(openOnFocus
+        const handleInputKeyDown = (key) => M.value(key).pipe(M.when('ArrowDown', () => {
+            if (!isOpen) {
+                return Option.some(Opened({
+                    maybeActiveItemIndex: Option.some(firstEnabledIndex),
+                }));
+            }
+            const targetIndex = resolveActiveIndex('ArrowDown');
+            return Option.some(ActivatedItem({
+                index: targetIndex,
+                activationTrigger: 'Keyboard',
+                maybeImmediateSelection: resolveImmediateSelection(targetIndex),
+            }));
+        }), M.when('ArrowUp', () => {
+            if (!isOpen) {
+                return Option.some(Opened({
+                    maybeActiveItemIndex: Option.some(lastEnabledIndex),
+                }));
+            }
+            const targetIndex = resolveActiveIndex('ArrowUp');
+            return Option.some(ActivatedItem({
+                index: targetIndex,
+                activationTrigger: 'Keyboard',
+                maybeImmediateSelection: resolveImmediateSelection(targetIndex),
+            }));
+        }), M.when('Enter', () => {
+            if (!isOpen) {
+                return Option.none();
+            }
+            return Option.map(maybeActiveItemIndex, index => RequestedItemClick({ index }));
+        }), M.when('Escape', () => {
+            if (!isOpen) {
+                return Option.none();
+            }
+            return Option.some(Closed());
+        }), M.whenOr('Home', 'End', () => {
+            if (!isOpen) {
+                return Option.none();
+            }
+            const targetIndex = resolveActiveIndex(key);
+            return Option.some(ActivatedItem({
+                index: targetIndex,
+                activationTrigger: 'Keyboard',
+                maybeImmediateSelection: resolveImmediateSelection(targetIndex),
+            }));
+        }), M.orElse(() => Option.none()));
+        const maybeActiveDescendant = Option.match(maybeActiveItemIndex, {
+            onNone: () => [],
+            onSome: index => [h.AriaActiveDescendant(itemId(id, index))],
+        });
+        const resolvedInputAttributes = [
+            h.Id(`${id}-input`),
+            h.Role('combobox'),
+            h.AriaExpanded(isVisible),
+            h.AriaControls(`${id}-items`),
+            h.Attribute('aria-autocomplete', 'list'),
+            h.Attribute('aria-haspopup', 'listbox'),
+            h.Autocomplete('off'),
+            h.Value(model.inputValue),
+            ...maybeActiveDescendant,
+            ...(inputPlaceholder ? [h.Placeholder(inputPlaceholder)] : []),
+            ...(isDisabled
+                ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
+                : [
+                    h.OnInput(value => UpdatedInputValue({ value })),
+                    h.OnKeyDownPreventDefault(handleInputKeyDown),
+                    h.OnBlur(BlurredInput()),
+                    ...(openOnFocus
+                        ? [h.OnFocus(Opened({ maybeActiveItemIndex: Option.none() }))]
+                        : []),
+                ]),
+            ...(isInvalid
+                ? [h.AriaInvalid(true), h.DataAttribute('invalid', '')]
+                : []),
+            ...(isVisible ? [h.DataAttribute('open', '')] : []),
+            ...(model.selectInputOnFocus
+                ? [h.OnMount(AttachComboboxSelectOnFocus())]
+                : []),
+            ...(inputClassName ? [h.Class(inputClassName)] : []),
+            ...inputAttributes,
+        ];
+        const anchorAttributes = anchor
+            ? [
+                h.Style({
+                    position: 'absolute',
+                    margin: '0',
+                    visibility: 'hidden',
+                }),
+                h.OnMount(AnchorCombobox({
+                    buttonId: `${id}-input-wrapper`,
+                    anchor,
+                })),
+            ]
+            : [h.OnMount(AttachComboboxPreventBlur())];
+        const itemsContainerAttributes = [
+            h.Id(`${id}-items`),
+            h.Role('listbox'),
+            ...(behavior.ariaMultiSelectable ? [h.AriaMultiSelectable(true)] : []),
+            h.AriaLabelledBy(`${id}-input`),
+            h.Tabindex(-1),
+            ...anchorAttributes,
+            ...animationAttributes,
+            ...(itemsClassName ? [h.Class(itemsClassName)] : []),
+            ...itemsAttributes,
+        ];
+        const comboboxItems = Array.map(items, (item, index) => {
+            const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
+            const isDisabledItem = isDisabledAtIndex(index);
+            const isSelectedItem = behavior.isItemSelected(model, itemToValue(item, index));
+            const itemConfig = itemToConfig(item, {
+                isActive: isActiveItem,
+                isDisabled: isDisabledItem,
+                isSelected: isSelectedItem,
+            });
+            const isInteractive = !isDisabledItem && !isLeaving;
+            return h.keyed('div')(itemId(id, index), [
+                h.Id(itemId(id, index)),
+                h.Role('option'),
+                h.AriaSelected(isSelectedItem),
+                ...(isActiveItem ? [h.DataAttribute('active', '')] : []),
+                ...(isSelectedItem ? [h.DataAttribute('selected', '')] : []),
+                ...(isDisabledItem
+                    ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
+                    : []),
+                ...(isInteractive
                     ? [
-                        h.OnFocus(toParentMessage(Opened({ maybeActiveItemIndex: Option.none() }))),
+                        h.OnClick(SelectedItem({
+                            item: itemToValue(item, index),
+                            displayText: itemToDisplayText(item, index),
+                        })),
+                        ...(isActiveItem
+                            ? []
+                            : [
+                                h.OnPointerMove((screenX, screenY, pointerType) => OptionExt.when(pointerType !== 'touch', MovedPointerOverItem({ index, screenX, screenY }))),
+                            ]),
+                        h.OnPointerLeave(pointerType => OptionExt.when(pointerType !== 'touch', DeactivatedItem())),
                     ]
                     : []),
-            ]),
-        ...(isInvalid
-            ? [h.AriaInvalid(true), h.DataAttribute('invalid', '')]
-            : []),
-        ...(isVisible ? [h.DataAttribute('open', '')] : []),
-        ...(config.model.selectInputOnFocus
+                ...(itemConfig.className ? [h.Class(itemConfig.className)] : []),
+            ], [itemConfig.content]);
+        });
+        const renderGroupedItems = () => {
+            if (!itemGroupKey) {
+                return comboboxItems;
+            }
+            const segments = groupContiguous(comboboxItems, (_, index) => Array.get(items, index).pipe(Option.match({
+                onNone: () => '',
+                onSome: item => itemGroupKey(item, index),
+            })));
+            return Array.flatMap(segments, (segment, segmentIndex) => {
+                const maybeHeading = Option.fromNullishOr(groupToHeading && groupToHeading(segment.key));
+                const headingId = `${id}-heading-${segment.key}`;
+                const headingElement = Option.match(maybeHeading, {
+                    onNone: () => [],
+                    onSome: heading => [
+                        h.keyed('div')(headingId, [
+                            h.Id(headingId),
+                            h.Role('presentation'),
+                            ...(heading.className ? [h.Class(heading.className)] : []),
+                        ], [heading.content]),
+                    ],
+                });
+                const groupContent = [...headingElement, ...segment.items];
+                const groupElement = h.keyed('div')(`${id}-group-${segment.key}`, [
+                    h.Role('group'),
+                    ...(Option.isSome(maybeHeading)
+                        ? [h.AriaLabelledBy(headingId)]
+                        : []),
+                    ...(groupClassName ? [h.Class(groupClassName)] : []),
+                    ...groupAttributes,
+                ], groupContent);
+                const separator = segmentIndex > 0 &&
+                    (separatorClassName ||
+                        Array.isReadonlyArrayNonEmpty(separatorAttributes))
+                    ? [
+                        h.keyed('div')(`${id}-separator-${segmentIndex}`, [
+                            h.Role('separator'),
+                            ...(separatorClassName
+                                ? [h.Class(separatorClassName)]
+                                : []),
+                            ...separatorAttributes,
+                        ], []),
+                    ]
+                    : [];
+                return [...separator, groupElement];
+            });
+        };
+        const backdrop = h.keyed('div')(`${id}-backdrop`, [
+            h.OnMount(PortalComboboxBackdrop()),
+            ...(isLeaving ? [] : [h.OnClick(Closed())]),
+            ...(backdropClassName ? [h.Class(backdropClassName)] : []),
+            ...backdropAttributes,
+        ], []);
+        const renderedItems = renderGroupedItems();
+        const scrollableItems = itemsScrollClassName ||
+            Array.isReadonlyArrayNonEmpty(itemsScrollAttributes)
             ? [
-                h.OnMount(Mount.mapMessage(AttachComboboxSelectOnFocus(), toParentMessage)),
+                h.div([
+                    ...(itemsScrollClassName
+                        ? [h.Class(itemsScrollClassName)]
+                        : []),
+                    ...itemsScrollAttributes,
+                ], renderedItems),
             ]
-            : []),
-        ...(inputClassName ? [h.Class(inputClassName)] : []),
-        ...inputAttributes,
-    ];
-    const anchorAttributes = anchor
-        ? [
-            h.Style({ position: 'absolute', margin: '0', visibility: 'hidden' }),
-            h.OnMount(Mount.mapMessage(AnchorCombobox({
-                buttonId: `${id}-input-wrapper`,
-                anchor,
-            }), toParentMessage)),
-        ]
-        : [
-            h.OnMount(Mount.mapMessage(AttachComboboxPreventBlur(), toParentMessage)),
+            : renderedItems;
+        const visibleContent = [
+            backdrop,
+            h.keyed('div')(`${id}-items-container`, itemsContainerAttributes, scrollableItems),
         ];
-    const itemsContainerAttributes = [
-        h.Id(`${id}-items`),
-        h.Role('listbox'),
-        ...(behavior.ariaMultiSelectable ? [h.AriaMultiSelectable(true)] : []),
-        h.AriaLabelledBy(`${id}-input`),
-        h.Tabindex(-1),
-        ...anchorAttributes,
-        ...animationAttributes,
-        ...(itemsClassName ? [h.Class(itemsClassName)] : []),
-        ...itemsAttributes,
-    ];
-    const comboboxItems = Array.map(items, (item, index) => {
-        const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
-        const isDisabledItem = isDisabledAtIndex(index);
-        const isSelectedItem = behavior.isItemSelected(config.model, itemToValue(item, index));
-        const itemConfig = itemToConfig(item, {
-            isActive: isActiveItem,
-            isDisabled: isDisabledItem,
-            isSelected: isSelectedItem,
-        });
-        const isInteractive = !isDisabledItem && !isLeaving;
-        return h.keyed('div')(itemId(id, index), [
-            h.Id(itemId(id, index)),
-            h.Role('option'),
-            h.AriaSelected(isSelectedItem),
-            ...(isActiveItem ? [h.DataAttribute('active', '')] : []),
-            ...(isSelectedItem ? [h.DataAttribute('selected', '')] : []),
-            ...(isDisabledItem
-                ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
-                : []),
-            ...(isInteractive
-                ? [
-                    h.OnClick(dispatchSelectedItem(item, index)),
-                    ...(isActiveItem
-                        ? []
-                        : [
-                            h.OnPointerMove((screenX, screenY, pointerType) => OptionExt.when(pointerType !== 'touch', toParentMessage(MovedPointerOverItem({ index, screenX, screenY })))),
-                        ]),
-                    h.OnPointerLeave(pointerType => OptionExt.when(pointerType !== 'touch', toParentMessage(DeactivatedItem()))),
-                ]
+        const resolvedInputWrapperAttributes = [
+            h.Id(`${id}-input-wrapper`),
+            ...(inputWrapperClassName ? [h.Class(inputWrapperClassName)] : []),
+            ...inputWrapperAttributes,
+        ];
+        const toggleButton = buttonContent
+            ? [
+                h.keyed('button')(`${id}-button`, [
+                    h.Id(`${id}-button`),
+                    h.Type('button'),
+                    h.Tabindex(-1),
+                    h.AriaControls(`${id}-items`),
+                    h.AriaExpanded(isVisible),
+                    h.Attribute('aria-haspopup', 'listbox'),
+                    ...(isDisabled
+                        ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
+                        : [h.OnClick(PressedToggleButton())]),
+                    h.OnMount(AttachComboboxPreventBlur()),
+                    ...(buttonClassName ? [h.Class(buttonClassName)] : []),
+                    ...buttonAttributes,
+                ], [buttonContent]),
+            ]
+            : [];
+        const selectedValues = pipe(items, Array.filterMap((item, index) => {
+            const value = itemToValue(item, index);
+            return Result.fromOption(OptionExt.when(behavior.isItemSelected(model, value), value), () => undefined);
+        }));
+        const hiddenInputs = formName
+            ? Array.match(selectedValues, {
+                onEmpty: () => [h.input([h.Type('hidden'), h.Name(formName)])],
+                onNonEmpty: Array.map(selectedValue => h.input([
+                    h.Type('hidden'),
+                    h.Name(formName),
+                    h.Value(selectedValue),
+                ])),
+            })
+            : [];
+        const wrapperAttributes = [
+            ...(className ? [h.Class(className)] : []),
+            ...attributes,
+            ...(isVisible ? [h.DataAttribute('open', '')] : []),
+            ...(isDisabled ? [h.DataAttribute('disabled', '')] : []),
+            ...(isInvalid ? [h.DataAttribute('invalid', '')] : []),
+        ];
+        return h.div(wrapperAttributes, [
+            h.div(resolvedInputWrapperAttributes, [
+                h.input(resolvedInputAttributes),
+                ...toggleButton,
+            ]),
+            ...(isVisible && Array.isReadonlyArrayNonEmpty(items)
+                ? visibleContent
                 : []),
-            ...(itemConfig.className ? [h.Class(itemConfig.className)] : []),
-        ], [itemConfig.content]);
+            ...hiddenInputs,
+        ]);
     });
-    const renderGroupedItems = () => {
-        if (!itemGroupKey) {
-            return comboboxItems;
-        }
-        const segments = groupContiguous(comboboxItems, (_, index) => Array.get(items, index).pipe(Option.match({
-            onNone: () => '',
-            onSome: item => itemGroupKey(item, index),
-        })));
-        return Array.flatMap(segments, (segment, segmentIndex) => {
-            const maybeHeading = Option.fromNullishOr(groupToHeading && groupToHeading(segment.key));
-            const headingId = `${id}-heading-${segment.key}`;
-            const headingElement = Option.match(maybeHeading, {
-                onNone: () => [],
-                onSome: heading => [
-                    h.keyed('div')(headingId, [
-                        h.Id(headingId),
-                        h.Role('presentation'),
-                        ...(heading.className ? [h.Class(heading.className)] : []),
-                    ], [heading.content]),
-                ],
-            });
-            const groupContent = [...headingElement, ...segment.items];
-            const groupElement = h.keyed('div')(`${id}-group-${segment.key}`, [
-                h.Role('group'),
-                ...(Option.isSome(maybeHeading)
-                    ? [h.AriaLabelledBy(headingId)]
-                    : []),
-                ...(groupClassName ? [h.Class(groupClassName)] : []),
-                ...groupAttributes,
-            ], groupContent);
-            const separator = segmentIndex > 0 &&
-                (separatorClassName ||
-                    Array.isReadonlyArrayNonEmpty(separatorAttributes))
-                ? [
-                    h.keyed('div')(`${id}-separator-${segmentIndex}`, [
-                        h.Role('separator'),
-                        ...(separatorClassName
-                            ? [h.Class(separatorClassName)]
-                            : []),
-                        ...separatorAttributes,
-                    ], []),
-                ]
-                : [];
-            return [...separator, groupElement];
-        });
-    };
-    const backdrop = h.keyed('div')(`${id}-backdrop`, [
-        h.OnMount(Mount.mapMessage(PortalComboboxBackdrop(), toParentMessage)),
-        ...(isLeaving ? [] : [h.OnClick(toParentMessage(Closed()))]),
-        ...(backdropClassName ? [h.Class(backdropClassName)] : []),
-        ...backdropAttributes,
-    ], []);
-    const renderedItems = renderGroupedItems();
-    const scrollableItems = itemsScrollClassName ||
-        Array.isReadonlyArrayNonEmpty(itemsScrollAttributes)
-        ? [
-            h.div([
-                ...(itemsScrollClassName
-                    ? [h.Class(itemsScrollClassName)]
-                    : []),
-                ...itemsScrollAttributes,
-            ], renderedItems),
-        ]
-        : renderedItems;
-    const visibleContent = [
-        backdrop,
-        h.keyed('div')(`${id}-items-container`, itemsContainerAttributes, scrollableItems),
-    ];
-    const resolvedInputWrapperAttributes = [
-        h.Id(`${id}-input-wrapper`),
-        ...(inputWrapperClassName ? [h.Class(inputWrapperClassName)] : []),
-        ...inputWrapperAttributes,
-    ];
-    const toggleButton = buttonContent
-        ? [
-            h.keyed('button')(`${id}-button`, [
-                h.Id(`${id}-button`),
-                h.Type('button'),
-                h.Tabindex(-1),
-                h.AriaControls(`${id}-items`),
-                h.AriaExpanded(isVisible),
-                h.Attribute('aria-haspopup', 'listbox'),
-                ...(isDisabled
-                    ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
-                    : [h.OnClick(toParentMessage(PressedToggleButton()))]),
-                h.OnMount(Mount.mapMessage(AttachComboboxPreventBlur(), toParentMessage)),
-                ...(buttonClassName ? [h.Class(buttonClassName)] : []),
-                ...buttonAttributes,
-            ], [buttonContent]),
-        ]
-        : [];
-    const selectedValues = pipe(items, Array.filterMap((item, index) => {
-        const value = itemToValue(item, index);
-        return Result.fromOption(OptionExt.when(behavior.isItemSelected(config.model, value), value), () => undefined);
-    }));
-    const hiddenInputs = formName
-        ? Array.match(selectedValues, {
-            onEmpty: () => [h.input([h.Type('hidden'), h.Name(formName)])],
-            onNonEmpty: Array.map(selectedValue => h.input([
-                h.Type('hidden'),
-                h.Name(formName),
-                h.Value(selectedValue),
-            ])),
-        })
-        : [];
-    const wrapperAttributes = [
-        ...(className ? [h.Class(className)] : []),
-        ...attributes,
-        ...(isVisible ? [h.DataAttribute('open', '')] : []),
-        ...(isDisabled ? [h.DataAttribute('disabled', '')] : []),
-        ...(isInvalid ? [h.DataAttribute('invalid', '')] : []),
-    ];
-    return h.div(wrapperAttributes, [
-        h.div(resolvedInputWrapperAttributes, [
-            h.input(resolvedInputAttributes),
-            ...toggleButton,
-        ]),
-        ...(isVisible && Array.isReadonlyArrayNonEmpty(items)
-            ? visibleContent
-            : []),
-        ...hiddenInputs,
-    ]);
+    return () => 
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    impl;
 };