foldkit 0.101.0 → 0.102.0

package/dist/ui/listbox/shared.js

@@ -2,7 +2,7 @@ import { Array, Effect, Equal, Match as M, Option, Predicate, Schema as S, Strin
 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';
@@ -17,9 +17,9 @@ import { findFirstEnabledIndex, isPrintableKey, keyToIndex, } from '../keyboard.
 import { resolveTypeaheadMatch } from '../typeahead.js';
 export { resolveTypeaheadMatch };
 // 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 for the listbox orientation — whether items flow vertically or horizontally. */
+/** Schema for the listbox orientation: whether items flow vertically or horizontally. */
 export const Orientation = S.Literals(['Vertical', 'Horizontal']);
 /** 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({
@@ -52,7 +52,7 @@ export const baseInit = (config) => ({
     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. */
+/** 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', {
     maybeActiveItemIndex: S.Option(S.Number),
 });
@@ -91,9 +91,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-button command completes after closing. */
 export const CompletedFocusButton = m('CompletedFocusButton');
 /** Sent when the focus-items command completes after opening. */
@@ -133,8 +133,8 @@ export const Message = S.Union([
     ClearedSearch,
     CompletedLockScroll,
     CompletedUnlockScroll,
-    CompletedSetupInert,
-    CompletedTeardownInert,
+    CompletedInertOthers,
+    CompletedRestoreInert,
     CompletedFocusButton,
     CompletedFocusItems,
     CompletedScrollIntoView,
@@ -146,6 +146,14 @@ export const Message = S.Union([
     GotAnimationMessage,
     PressedPointerOnButton,
 ]);
+// OUT MESSAGE
+/** Sent when a single-select listbox commits a selection, or when a multi-select listbox toggles an item. 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. */
+export const Selected = m('Selected', {
+    value: S.String,
+    wasAdded: S.Boolean,
+});
+/** Union of out-messages the listbox component can produce. Single-select listboxes always emit `wasAdded: true`. Multi-select listboxes emit `wasAdded: true` when adding to the selection and `wasAdded: false` when toggling off. */
+export const OutMessage = S.Union([Selected]);
 // CONSTANTS
 export const SEARCH_DEBOUNCE_MILLISECONDS = 350;
 export const LEFT_MOUSE_BUTTON = 0;
@@ -169,9 +177,9 @@ export const LockScroll = Command.define('LockScroll', CompletedLockScroll)(Dom.
 /** Re-enables page scrolling after the listbox closes. */
 export const UnlockScroll = Command.define('UnlockScroll', CompletedUnlockScroll)(Dom.unlockScroll.pipe(Effect.as(CompletedUnlockScroll())));
 /** Marks all elements outside the listbox as inert for modal behavior. */
-export const InertOthers = Command.define('InertOthers', { id: S.String }, CompletedSetupInert)(({ id }) => Dom.inertOthers(id, [buttonSelector(id), itemsSelector(id)]).pipe(Effect.as(CompletedSetupInert())));
+export const InertOthers = Command.define('InertOthers', { id: S.String }, CompletedInertOthers)(({ id }) => Dom.inertOthers(id, [buttonSelector(id), itemsSelector(id)]).pipe(Effect.as(CompletedInertOthers())));
 /** Removes the inert attribute from elements outside the listbox. */
-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 back to the listbox button after closing. */
 export const FocusButton = Command.define('FocusButton', { id: S.String }, CompletedFocusButton)(({ id }) => Dom.focus(buttonSelector(id)).pipe(Effect.ignore, Effect.as(CompletedFocusButton())));
 /** Moves focus to the listbox items container after opening. */
@@ -188,7 +196,7 @@ export const makeUpdate = (handleSelectedItem) => {
     const withUpdateReturn = M.withReturnType();
     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({
@@ -201,6 +209,7 @@ export const makeUpdate = (handleSelectedItem) => {
         return [
             constrainedEvo(model, { animation: () => nextAnimation }),
             [...mappedCommands, ...additionalCommands],
+            Option.none(),
         ];
     };
     const openListbox = (baseModel, openCommands) => {
@@ -209,19 +218,24 @@ export const makeUpdate = (handleSelectedItem) => {
             return [
                 constrainedEvo(nextModel, { isOpen: () => true }),
                 [...openCommands, ...animationCommands],
+                Option.none(),
             ];
         }
-        return [constrainedEvo(baseModel, { isOpen: () => true }), openCommands];
+        return [
+            constrainedEvo(baseModel, { isOpen: () => true }),
+            openCommands,
+            Option.none(),
+        ];
     };
-    const closeListbox = (baseModel, commands) => {
+    const closeListbox = (baseModel, commands, maybeOutMessage = Option.none()) => {
         const closed = closedModel(baseModel);
         if (baseModel.isAnimated) {
             const [nextModel, animationCommands] = delegateToAnimation(closed, AnimationHid());
-            return [nextModel, [...commands, ...animationCommands]];
+            return [nextModel, [...commands, ...animationCommands], maybeOutMessage];
         }
-        return [closed, commands];
+        return [closed, commands, maybeOutMessage];
     };
-    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 }));
@@ -240,7 +254,7 @@ export const makeUpdate = (handleSelectedItem) => {
             maybeUnlockScroll,
             maybeRestoreInert,
         ]);
-        return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+        return M.value(message).pipe(withUpdateReturn, M.tag('CompletedLockScroll', 'CompletedUnlockScroll', 'CompletedInertOthers', 'CompletedRestoreInert', 'CompletedFocusButton', 'CompletedFocusItems', 'CompletedScrollIntoView', 'CompletedClickItem', 'SuppressedSpaceScroll', 'CompletedAnchorListbox', 'CompletedPortalListboxBackdrop', () => [model, [], Option.none()]), M.tagsExhaustive({
             Opened: ({ maybeActiveItemIndex }) => openListbox(constrainedEvo(model, {
                 maybeActiveItemIndex: () => maybeActiveItemIndex,
                 activationTrigger: () => Option.match(maybeActiveItemIndex, {
@@ -254,7 +268,7 @@ export const makeUpdate = (handleSelectedItem) => {
             Closed: () => closeListbox(model, closeWithFocusCommands),
             BlurredItems: () => {
                 if (Option.exists(model.maybeLastButtonPointerType, Equal.equals('mouse'))) {
-                    return [model, []];
+                    return [model, [], Option.none()];
                 }
                 return closeListbox(model, closeWithoutFocusCommands);
             },
@@ -266,11 +280,12 @@ export const makeUpdate = (handleSelectedItem) => {
                 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, {
@@ -279,6 +294,7 @@ export const makeUpdate = (handleSelectedItem) => {
                         maybeLastPointerPosition: () => Option.some({ screenX, screenY }),
                     }),
                     [],
+                    Option.none(),
                 ];
             },
             DeactivatedItem: () => model.activationTrigger === 'Pointer'
@@ -287,15 +303,17 @@ export const makeUpdate = (handleSelectedItem) => {
                         maybeActiveItemIndex: () => Option.none(),
                     }),
                     [],
+                    Option.none(),
                 ]
-                : [model, []],
+                : [model, [], Option.none()],
             SelectedItem: ({ item }) => handleSelectedItem(model, item, {
-                closeWithFocus: closeModel => closeListbox(closeModel, closeWithFocusCommands),
-                closeWithoutFocus: closeModel => closeListbox(closeModel, closeWithoutFocusCommands),
+                closeWithFocus: (closeModel, maybeOutMessage = Option.none()) => closeListbox(closeModel, closeWithFocusCommands, maybeOutMessage),
+                closeWithoutFocus: (closeModel, maybeOutMessage = Option.none()) => closeListbox(closeModel, closeWithoutFocusCommands, maybeOutMessage),
             }),
             RequestedItemClick: ({ index }) => [
                 model,
                 [ClickItem({ id: model.id, index })],
+                Option.none(),
             ],
             Searched: ({ key, maybeTargetIndex }) => {
                 const nextSearchQuery = model.searchQuery + key;
@@ -307,13 +325,18 @@ export const makeUpdate = (handleSelectedItem) => {
                         maybeActiveItemIndex: () => Option.orElse(maybeTargetIndex, () => model.maybeActiveItemIndex),
                     }),
                     [DelayClearSearch({ version: nextSearchVersion })],
+                    Option.none(),
                 ];
             },
             ClearedSearch: ({ version }) => {
                 if (version !== model.searchVersion) {
-                    return [model, []];
+                    return [model, [], Option.none()];
                 }
-                return [constrainedEvo(model, { searchQuery: () => '' }), []];
+                return [
+                    constrainedEvo(model, { searchQuery: () => '' }),
+                    [],
+                    Option.none(),
+                ];
             },
             GotAnimationMessage: ({ message: animationMessage }) => delegateToAnimation(model, animationMessage),
             PressedPointerOnButton: ({ pointerType, button }) => {
@@ -321,7 +344,7 @@ export const makeUpdate = (handleSelectedItem) => {
                     maybeLastButtonPointerType: () => Option.some(pointerType),
                 });
                 if (pointerType !== 'mouse' || button !== LEFT_MOUSE_BUTTON) {
-                    return [withPointerType, []];
+                    return [withPointerType, [], Option.none()];
                 }
                 if (model.isOpen) {
                     const [closed, commands] = closeListbox(withPointerType, closeWithFocusCommands);
@@ -330,6 +353,7 @@ export const makeUpdate = (handleSelectedItem) => {
                             maybeLastButtonPointerType: () => Option.some(pointerType),
                         }),
                         commands,
+                        Option.none(),
                     ];
                 }
                 return openListbox(constrainedEvo(withPointerType, {
@@ -340,25 +364,16 @@ export const makeUpdate = (handleSelectedItem) => {
                     maybeLastPointerPosition: () => Option.none(),
                 }), openCommands);
             },
-            CompletedLockScroll: () => [model, []],
-            CompletedUnlockScroll: () => [model, []],
-            CompletedSetupInert: () => [model, []],
-            CompletedTeardownInert: () => [model, []],
-            CompletedFocusButton: () => [model, []],
-            CompletedFocusItems: () => [model, []],
-            CompletedScrollIntoView: () => [model, []],
-            CompletedClickItem: () => [model, []],
             IgnoredMouseClick: () => [
                 constrainedEvo(model, {
                     maybeLastButtonPointerType: () => Option.none(),
                 }),
                 [],
+                Option.none(),
             ],
-            SuppressedSpaceScroll: () => [model, []],
-            CompletedAnchorListbox: () => [model, []],
-            CompletedPortalListboxBackdrop: () => [model, []],
         }));
     };
+    return internalUpdate;
 };
 /** The anchor-positioning Mount this Listbox renders when an anchor is
  *  configured. Exposed so Scene tests can call
@@ -374,272 +389,280 @@ export const PortalListboxBackdrop = Mount.define('PortalListboxBackdrop', Compl
     yield* Effect.acquireRelease(Effect.sync(() => portalToBody(element)), cleanup => Effect.sync(cleanup));
     return CompletedPortalListboxBackdrop();
 }));
-export const makeView = (behavior) => (config) => {
-    const h = html();
-    const { model: { id, isOpen, orientation, animation: { transitionState }, maybeActiveItemIndex, searchQuery, maybeLastButtonPointerType, }, toParentMessage, onSelectedItem, 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, } = config;
-    const itemToValue = config.itemToValue ?? (item => String(item));
-    const itemToSearchText = config.itemToSearchText ?? (item => itemToValue(item));
-    const dispatchSelectedItem = (value) => onSelectedItem
-        ? onSelectedItem(value)
-        : toParentMessage(SelectedItem({ item: value }));
-    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 isItemDisabledByIndex = (index) => Predicate.isNotUndefined(isItemDisabled) &&
-        pipe(items, Array.get(index), Option.exists(item => isItemDisabled(item, index)));
-    const isButtonEffectivelyDisabled = isDisabled || isButtonDisabled;
-    const nextKey = orientation === 'Horizontal' ? 'ArrowRight' : 'ArrowDown';
-    const previousKey = orientation === 'Horizontal' ? 'ArrowLeft' : 'ArrowUp';
-    const navigationKeys = [
-        nextKey,
-        previousKey,
-        'Home',
-        'End',
-        'PageUp',
-        'PageDown',
-    ];
-    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 = behavior.selectedItemIndex(config.model, items, itemToValue);
-    const handleButtonKeyDown = (key) => {
-        if (isOpen) {
-            return handleItemsKeyDown(key);
-        }
-        return M.value(key).pipe(M.whenOr('Enter', ' ', 'ArrowDown', () => Option.some(toParentMessage(Opened({
-            maybeActiveItemIndex: Option.orElse(selectedItemIndex, () => Option.some(firstEnabledIndex)),
-        })))), M.when('ArrowUp', () => Option.some(toParentMessage(Opened({
-            maybeActiveItemIndex: Option.orElse(selectedItemIndex, () => Option.some(lastEnabledIndex)),
-        })))), M.orElse(() => Option.none()));
-    };
-    const handleButtonPointerDown = (pointerType, button) => Option.some(toParentMessage(PressedPointerOnButton({
-        pointerType,
-        button,
-    })));
-    const handleButtonClick = () => {
-        const isMouse = Option.exists(maybeLastButtonPointerType, type => type === 'mouse');
-        if (isMouse) {
-            return toParentMessage(IgnoredMouseClick());
-        }
-        else if (isOpen) {
-            return toParentMessage(Closed());
-        }
-        else {
-            return toParentMessage(Opened({ maybeActiveItemIndex: Option.none() }));
-        }
-    };
-    const handleSpaceKeyUp = (key) => OptionExt.when(key === ' ', toParentMessage(SuppressedSpaceScroll()));
-    const resolveActiveIndex = (key) => Option.match(maybeActiveItemIndex, {
-        onNone: () => M.value(key).pipe(M.whenOr(previousKey, 'End', 'PageDown', () => lastEnabledIndex), M.orElse(() => firstEnabledIndex)),
-        onSome: activeIndex => keyToIndex(nextKey, previousKey, items.length, activeIndex, isItemDisabledByIndex)(key),
-    });
-    const searchForKey = (key) => {
-        const nextQuery = searchQuery + key;
-        const maybeTargetIndex = resolveTypeaheadMatch(items, nextQuery, maybeActiveItemIndex, isItemDisabledByIndex, itemToSearchText, Str.isNonEmpty(searchQuery));
-        return Option.some(toParentMessage(Searched({ key, maybeTargetIndex })));
-    };
-    const handleItemsKeyDown = (key) => M.value(key).pipe(M.when('Escape', () => Option.some(toParentMessage(Closed()))), M.when('Enter', () => Option.map(maybeActiveItemIndex, index => toParentMessage(RequestedItemClick({ index })))), M.when(' ', () => Str.isNonEmpty(searchQuery)
-        ? searchForKey(' ')
-        : Option.map(maybeActiveItemIndex, index => toParentMessage(RequestedItemClick({ index })))), M.when(isNavigationKey, () => Option.some(toParentMessage(ActivatedItem({
-        index: resolveActiveIndex(key),
-        activationTrigger: 'Keyboard',
-    })))), M.when(isPrintableKey, () => searchForKey(key)), M.orElse(() => Option.none()));
-    const resolvedButtonAttributes = [
-        h.Id(`${id}-button`),
-        h.Type('button'),
-        h.AriaHasPopup('listbox'),
-        h.AriaExpanded(isVisible),
-        h.AriaControls(`${id}-items`),
-        ...(isButtonEffectivelyDisabled
-            ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
-            : [
-                h.OnPointerDown(handleButtonPointerDown),
-                h.OnKeyDownPreventDefault(handleButtonKeyDown),
-                h.OnKeyUpPreventDefault(handleSpaceKeyUp),
-                h.OnClick(handleButtonClick()),
-            ]),
-        ...(isVisible
-            ? [
-                h.DataAttribute('open', ''),
-                h.Style({ position: 'relative', zIndex: '1' }),
-            ]
-            : []),
-        ...(isInvalid ? [h.DataAttribute('invalid', '')] : []),
-        ...(buttonClassName ? [h.Class(buttonClassName)] : []),
-        ...buttonAttributes,
-    ];
-    const maybeActiveDescendant = Option.match(maybeActiveItemIndex, {
-        onNone: () => [],
-        onSome: index => [h.AriaActiveDescendant(itemId(id, index))],
-    });
-    const anchorAttributes = anchor
-        ? [
-            h.Style({ position: 'absolute', margin: '0', visibility: 'hidden' }),
-            h.OnMount(Mount.mapMessage(AnchorListbox({ buttonId: `${id}-button`, anchor }), toParentMessage)),
-        ]
-        : [];
-    const itemsContainerAttributes = [
-        h.Id(`${id}-items`),
-        h.Role('listbox'),
-        h.AriaOrientation(Str.toLowerCase(orientation)),
-        ...(behavior.ariaMultiSelectable ? [h.AriaMultiSelectable(true)] : []),
-        h.AriaLabelledBy(`${id}-button`),
-        ...maybeActiveDescendant,
-        h.Tabindex(0),
-        ...anchorAttributes,
-        ...animationAttributes,
-        ...(isLeaving
-            ? []
-            : [
-                h.OnKeyDownPreventDefault(handleItemsKeyDown),
-                h.OnKeyUpPreventDefault(handleSpaceKeyUp),
-                h.OnBlur(toParentMessage(BlurredItems())),
-            ]),
-        ...(itemsClassName ? [h.Class(itemsClassName)] : []),
-        ...itemsAttributes,
-    ];
-    const listboxItems = Array.map(items, (item, index) => {
-        const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
-        const isDisabledItem = isItemDisabledByIndex(index);
-        const isSelectedItem = behavior.isItemSelected(config.model, itemToValue(item));
-        const itemConfig = itemToConfig(item, {
-            isActive: isActiveItem,
-            isDisabled: isDisabledItem,
-            isSelected: isSelectedItem,
+export const makeView = (behavior) => {
+    const impl = defineView((model, viewInputs) => {
+        const h = html();
+        const { id, isOpen, orientation, animation: { transitionState }, maybeActiveItemIndex, searchQuery, maybeLastButtonPointerType, } = model;
+        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, } = viewInputs;
+        const itemToValue = viewInputs.itemToValue ?? ((item) => String(item));
+        const itemToSearchText = viewInputs.itemToSearchText ?? ((item) => itemToValue(item));
+        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 isItemDisabledByIndex = (index) => Predicate.isNotUndefined(isItemDisabled) &&
+            pipe(items, Array.get(index), Option.exists(item => isItemDisabled(item, index)));
+        const isButtonEffectivelyDisabled = isDisabled || isButtonDisabled;
+        const nextKey = orientation === 'Horizontal' ? 'ArrowRight' : 'ArrowDown';
+        const previousKey = orientation === 'Horizontal' ? 'ArrowLeft' : 'ArrowUp';
+        const navigationKeys = [
+            nextKey,
+            previousKey,
+            'Home',
+            'End',
+            'PageUp',
+            'PageDown',
+        ];
+        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 = behavior.selectedItemIndex(model, items, itemToValue);
+        const handleButtonKeyDown = (key) => {
+            if (isOpen) {
+                return handleItemsKeyDown(key);
+            }
+            return M.value(key).pipe(M.whenOr('Enter', ' ', 'ArrowDown', () => Option.some(Opened({
+                maybeActiveItemIndex: Option.orElse(selectedItemIndex, () => Option.some(firstEnabledIndex)),
+            }))), M.when('ArrowUp', () => Option.some(Opened({
+                maybeActiveItemIndex: Option.orElse(selectedItemIndex, () => Option.some(lastEnabledIndex)),
+            }))), M.orElse(() => Option.none()));
+        };
+        const handleButtonPointerDown = (pointerType, button) => Option.some(PressedPointerOnButton({ pointerType, button }));
+        const handleButtonClick = () => {
+            const isMouse = Option.exists(maybeLastButtonPointerType, type => type === 'mouse');
+            if (isMouse) {
+                return IgnoredMouseClick();
+            }
+            else if (isOpen) {
+                return Closed();
+            }
+            else {
+                return Opened({ maybeActiveItemIndex: Option.none() });
+            }
+        };
+        const handleSpaceKeyUp = (key) => OptionExt.when(key === ' ', SuppressedSpaceScroll());
+        const resolveActiveIndex = (key) => Option.match(maybeActiveItemIndex, {
+            onNone: () => M.value(key).pipe(M.whenOr(previousKey, 'End', 'PageDown', () => lastEnabledIndex), M.orElse(() => firstEnabledIndex)),
+            onSome: activeIndex => keyToIndex(nextKey, previousKey, items.length, activeIndex, isItemDisabledByIndex)(key),
         });
-        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
+        const searchForKey = (key) => {
+            const nextQuery = searchQuery + key;
+            const maybeTargetIndex = resolveTypeaheadMatch(items, nextQuery, maybeActiveItemIndex, isItemDisabledByIndex, itemToSearchText, Str.isNonEmpty(searchQuery));
+            return Option.some(Searched({ key, maybeTargetIndex }));
+        };
+        const handleItemsKeyDown = (key) => M.value(key).pipe(M.when('Escape', () => Option.some(Closed())), M.when('Enter', () => Option.map(maybeActiveItemIndex, index => RequestedItemClick({ index }))), M.when(' ', () => Str.isNonEmpty(searchQuery)
+            ? searchForKey(' ')
+            : Option.map(maybeActiveItemIndex, index => RequestedItemClick({ index }))), M.when(isNavigationKey, () => Option.some(ActivatedItem({
+            index: resolveActiveIndex(key),
+            activationTrigger: 'Keyboard',
+        }))), M.when(isPrintableKey, () => searchForKey(key)), M.orElse(() => Option.none()));
+        const resolvedButtonAttributes = [
+            h.Id(`${id}-button`),
+            h.Type('button'),
+            h.AriaHasPopup('listbox'),
+            h.AriaExpanded(isVisible),
+            h.AriaControls(`${id}-items`),
+            ...(isButtonEffectivelyDisabled
                 ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
-                : []),
-            ...(isInteractive
+                : [
+                    h.OnPointerDown(handleButtonPointerDown),
+                    h.OnKeyDownPreventDefault(handleButtonKeyDown),
+                    h.OnKeyUpPreventDefault(handleSpaceKeyUp),
+                    h.OnClick(handleButtonClick()),
+                ]),
+            ...(isVisible
                 ? [
-                    h.OnClick(dispatchSelectedItem(itemToValue(item))),
-                    ...(isActiveItem
-                        ? []
-                        : [
-                            h.OnPointerMove((screenX, screenY, pointerType) => OptionExt.when(pointerType !== 'touch', toParentMessage(MovedPointerOverItem({ index, screenX, screenY })))),
-                        ]),
-                    h.OnPointerLeave(pointerType => OptionExt.when(pointerType !== 'touch', toParentMessage(DeactivatedItem()))),
+                    h.DataAttribute('open', ''),
+                    h.Style({ position: 'relative', zIndex: '1' }),
                 ]
                 : []),
-            ...(itemConfig.className ? [h.Class(itemConfig.className)] : []),
-        ], [itemConfig.content]);
-    });
-    const renderGroupedItems = () => {
-        if (!itemGroupKey) {
-            return listboxItems;
-        }
-        const segments = groupContiguous(listboxItems, (_, 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?.(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]),
-                ],
+            ...(isInvalid ? [h.DataAttribute('invalid', '')] : []),
+            ...(buttonClassName ? [h.Class(buttonClassName)] : []),
+            ...buttonAttributes,
+        ];
+        const maybeActiveDescendant = Option.match(maybeActiveItemIndex, {
+            onNone: () => [],
+            onSome: index => [h.AriaActiveDescendant(itemId(id, index))],
+        });
+        const anchorAttributes = anchor
+            ? [
+                h.Style({
+                    position: 'absolute',
+                    margin: '0',
+                    visibility: 'hidden',
+                }),
+                h.OnMount(AnchorListbox({ buttonId: `${id}-button`, anchor })),
+            ]
+            : [];
+        const itemsContainerAttributes = [
+            h.Id(`${id}-items`),
+            h.Role('listbox'),
+            h.AriaOrientation(Str.toLowerCase(orientation)),
+            ...(behavior.ariaMultiSelectable ? [h.AriaMultiSelectable(true)] : []),
+            h.AriaLabelledBy(`${id}-button`),
+            ...maybeActiveDescendant,
+            h.Tabindex(0),
+            ...anchorAttributes,
+            ...animationAttributes,
+            ...(isLeaving
+                ? []
+                : [
+                    h.OnKeyDownPreventDefault(handleItemsKeyDown),
+                    h.OnKeyUpPreventDefault(handleSpaceKeyUp),
+                    h.OnBlur(BlurredItems()),
+                ]),
+            ...(itemsClassName ? [h.Class(itemsClassName)] : []),
+            ...itemsAttributes,
+        ];
+        const listboxItems = Array.map(items, (item, index) => {
+            const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
+            const isDisabledItem = isItemDisabledByIndex(index);
+            const isSelectedItem = behavior.isItemSelected(model, itemToValue(item));
+            const itemConfig = itemToConfig(item, {
+                isActive: isActiveItem,
+                isDisabled: isDisabledItem,
+                isSelected: isSelectedItem,
             });
-            const groupContent = [...headingElement, ...segment.items];
-            const groupElement = h.keyed('div')(`${id}-group-${segment.key}`, [
-                h.Role('group'),
-                ...(Option.isSome(maybeHeading)
-                    ? [h.AriaLabelledBy(headingId)]
+            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', '')]
                     : []),
-                ...(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(PortalListboxBackdrop(), 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)]
+                ...(isInteractive
+                    ? [
+                        h.OnClick(SelectedItem({ item: itemToValue(item) })),
+                        ...(isActiveItem
+                            ? []
+                            : [
+                                h.OnPointerMove((screenX, screenY, pointerType) => OptionExt.when(pointerType !== 'touch', MovedPointerOverItem({
+                                    index,
+                                    screenX,
+                                    screenY,
+                                }))),
+                            ]),
+                        h.OnPointerLeave(pointerType => OptionExt.when(pointerType !== 'touch', DeactivatedItem())),
+                    ]
                     : []),
-                ...itemsScrollAttributes,
-            ], renderedItems),
-        ]
-        : renderedItems;
-    const visibleContent = [
-        backdrop,
-        h.keyed('div')(`${id}-items-container`, itemsContainerAttributes, scrollableItems),
-    ];
-    const formAttribute = form ? [h.Attribute('form', form)] : [];
-    const selectedValues = pipe(items, Array.filter(item => behavior.isItemSelected(config.model, itemToValue(item))), Array.map(itemToValue));
-    const hiddenInputs = name
-        ? Array.match(selectedValues, {
-            onEmpty: () => [
-                h.input([h.Type('hidden'), h.Name(name), ...formAttribute]),
-            ],
-            onNonEmpty: Array.map(selectedValue => h.input([
-                h.Type('hidden'),
-                h.Name(name),
-                h.Value(selectedValue),
-                ...formAttribute,
-            ])),
-        })
-        : [];
-    const wrapperAttributes = [
-        ...(className ? [h.Class(className)] : []),
-        ...attributes,
-        ...(isVisible ? [h.DataAttribute('open', '')] : []),
-        ...(isDisabled ? [h.DataAttribute('disabled', '')] : []),
-        ...(isInvalid ? [h.DataAttribute('invalid', '')] : []),
-    ];
-    return h.div(wrapperAttributes, [
-        h.keyed('button')(`${id}-button`, resolvedButtonAttributes, [
-            buttonContent,
-        ]),
-        ...hiddenInputs,
-        ...(isVisible ? visibleContent : []),
-    ]);
+                ...(itemConfig.className ? [h.Class(itemConfig.className)] : []),
+            ], [itemConfig.content]);
+        });
+        const renderGroupedItems = () => {
+            if (!itemGroupKey) {
+                return listboxItems;
+            }
+            const segments = groupContiguous(listboxItems, (_, 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?.(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(PortalListboxBackdrop()),
+            ...(isLeaving ? [] : [h.OnClick(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 formAttribute = form ? [h.Attribute('form', form)] : [];
+        const selectedValues = pipe(items, Array.filter(item => behavior.isItemSelected(model, itemToValue(item))), Array.map(itemToValue));
+        const hiddenInputs = name
+            ? Array.match(selectedValues, {
+                onEmpty: () => [
+                    h.input([h.Type('hidden'), h.Name(name), ...formAttribute]),
+                ],
+                onNonEmpty: Array.map(selectedValue => h.input([
+                    h.Type('hidden'),
+                    h.Name(name),
+                    h.Value(selectedValue),
+                    ...formAttribute,
+                ])),
+            })
+            : [];
+        const wrapperAttributes = [
+            ...(className ? [h.Class(className)] : []),
+            ...attributes,
+            ...(isVisible ? [h.DataAttribute('open', '')] : []),
+            ...(isDisabled ? [h.DataAttribute('disabled', '')] : []),
+            ...(isInvalid ? [h.DataAttribute('invalid', '')] : []),
+        ];
+        return h.div(wrapperAttributes, [
+            h.keyed('button')(`${id}-button`, resolvedButtonAttributes, [
+                buttonContent,
+            ]),
+            ...hiddenInputs,
+            ...(isVisible ? visibleContent : []),
+        ]);
+    });
+    return () => 
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    impl;
 };