foldkit 0.111.1 → 0.112.0

package/dist/ui/listbox/shared.js

@@ -1,669 +0,0 @@
-import { Array, Effect, Equal, Match as M, Option, Predicate, Schema as S, String as Str, pipe, } from 'effect';
-import * as Command from '../../command/index.js';
-import * as Dom from '../../dom/index.js';
-import { OptionExt } from '../../effectExtensions/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';
-import { AnchorConfig, anchorSetup, portalToBody } from '../anchor.js';
-// NOTE: Animation imports are split across schema + update to avoid a circular
-// dependency: animation → html → runtime → devtools → listbox → animation.
-// The barrel (../animation) imports from html, which starts the cycle.
-import { EndedAnimation as AnimationEndedAnimation, Hid as AnimationHid, Message as AnimationMessage, Model as AnimationModel, Showed as AnimationShowed, init as animationInit, } from '../animation/schema.js';
-import { update as animationUpdate } from '../animation/update.js';
-import { groupContiguous } from '../group.js';
-import { findFirstEnabledIndex, isPrintableKey, keyToIndex, } from '../keyboard.js';
-import { resolveTypeaheadMatch } from '../typeahead.js';
-export { resolveTypeaheadMatch };
-// MODEL
-/** 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. */
-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({
-    id: S.String,
-    isOpen: S.Boolean,
-    isAnimated: S.Boolean,
-    isModal: S.Boolean,
-    orientation: Orientation,
-    animation: AnimationModel,
-    maybeActiveItemIndex: S.Option(S.Number),
-    activationTrigger: ActivationTrigger,
-    searchQuery: S.String,
-    searchVersion: S.Number,
-    maybeLastPointerPosition: S.Option(S.Struct({ screenX: S.Number, screenY: S.Number })),
-    maybeLastButtonPointerType: S.Option(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',
-    animation: animationInit({ id: `${config.id}-listbox` }),
-    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', {
-    maybeActiveItemIndex: S.Option(S.Number),
-});
-/** Sent when the listbox closes via Escape key or backdrop click. */
-export const Closed = m('Closed');
-/** Sent when the listbox items container loses focus. */
-export const BlurredItems = m('BlurredItems');
-/** Sent when an item is highlighted via arrow keys or mouse hover. Includes activation trigger. */
-export const ActivatedItem = m('ActivatedItem', {
-    index: S.Number,
-    activationTrigger: ActivationTrigger,
-});
-/** Sent when the mouse leaves an enabled item. */
-export const DeactivatedItem = m('DeactivatedItem');
-/** Sent when an item is selected via Enter, Space, or click. Contains the item's string value. */
-export const SelectedItem = m('SelectedItem', { item: S.String });
-/** Sent when Enter or Space is pressed on the active item, triggering a programmatic click on the DOM element. */
-export const RequestedItemClick = m('RequestedItemClick', {
-    index: S.Number,
-});
-/** Sent when a printable character is typed for typeahead search. */
-export const Searched = m('Searched', {
-    key: S.String,
-    maybeTargetIndex: S.Option(S.Number),
-});
-/** Sent after the search debounce period to clear the accumulated query. */
-export const ClearedSearch = m('ClearedSearch', { version: S.Number });
-/** Sent when the pointer moves over a listbox item, carrying screen coordinates for tracked-pointer comparison. */
-export const MovedPointerOverItem = m('MovedPointerOverItem', {
-    index: S.Number,
-    screenX: S.Number,
-    screenY: S.Number,
-});
-/** Sent when the scroll lock command completes. */
-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 CompletedInertOthers = m('CompletedInertOthers');
-/** Sent when the restore-inert command completes. */
-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. */
-export const CompletedFocusItems = m('CompletedFocusItems');
-/** Sent when the scroll-into-view command completes after keyboard activation. */
-export const CompletedScrollIntoView = m('CompletedScrollIntoView');
-/** Sent when the programmatic item click command completes. */
-export const CompletedClickItem = m('CompletedClickItem');
-/** Sent when a mouse click on the button is ignored because pointer-down already handled the toggle. */
-export const IgnoredMouseClick = m('IgnoredMouseClick');
-/** Sent when a Space key-up is captured to prevent page scrolling. */
-export const SuppressedSpaceScroll = m('SuppressedSpaceScroll');
-/** Sent when the listbox items panel mounts and Floating UI has positioned it. Update no-ops; surfaces the positioning side effect for DevTools. */
-export const CompletedAnchorListbox = m('CompletedAnchorListbox');
-/** Sent when the listbox backdrop mounts and is portaled to the document body. Update no-ops; surfaces the portal side effect for DevTools. */
-export const CompletedPortalListboxBackdrop = m('CompletedPortalListboxBackdrop');
-/** Wraps an Animation submodel message for delegation. */
-export const GotAnimationMessage = m('GotAnimationMessage', {
-    message: AnimationMessage,
-});
-/** Sent when the user presses a pointer device on the listbox button. Records pointer type for click handling. */
-export const PressedPointerOnButton = m('PressedPointerOnButton', {
-    pointerType: S.String,
-    button: S.Number,
-});
-/** Union of all messages the listbox component can produce. */
-export const Message = S.Union([
-    Opened,
-    Closed,
-    BlurredItems,
-    ActivatedItem,
-    DeactivatedItem,
-    SelectedItem,
-    MovedPointerOverItem,
-    RequestedItemClick,
-    Searched,
-    ClearedSearch,
-    CompletedLockScroll,
-    CompletedUnlockScroll,
-    CompletedInertOthers,
-    CompletedRestoreInert,
-    CompletedFocusButton,
-    CompletedFocusItems,
-    CompletedScrollIntoView,
-    CompletedClickItem,
-    IgnoredMouseClick,
-    SuppressedSpaceScroll,
-    CompletedAnchorListbox,
-    CompletedPortalListboxBackdrop,
-    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;
-// 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,
-    maybeActiveItemIndex: () => Option.none(),
-    searchQuery: () => '',
-    searchVersion: () => 0,
-    maybeLastPointerPosition: () => Option.none(),
-    maybeLastButtonPointerType: () => Option.none(),
-});
-/** Prevents page scrolling while the listbox is open in modal mode. */
-export const LockScroll = Command.define('LockScroll', CompletedLockScroll)(Dom.lockScroll.pipe(Effect.as(CompletedLockScroll())));
-/** 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 }, 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 }, 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. */
-export const FocusItems = Command.define('FocusItems', { id: S.String }, CompletedFocusItems)(({ id }) => Dom.focus(itemsSelector(id)).pipe(Effect.ignore, Effect.as(CompletedFocusItems())));
-/** Scrolls the active listbox item into view after keyboard navigation. */
-export const ScrollIntoView = Command.define('ScrollIntoView', { id: S.String, index: S.Number }, CompletedScrollIntoView)(({ id, index }) => Dom.scrollIntoView(itemSelector(id, index)).pipe(Effect.ignore, Effect.as(CompletedScrollIntoView())));
-/** Programmatically clicks the active listbox item's DOM element. */
-export const ClickItem = Command.define('ClickItem', { id: S.String, index: S.Number }, CompletedClickItem)(({ id, index }) => Dom.clickElement(itemSelector(id, index)).pipe(Effect.ignore, Effect.as(CompletedClickItem())));
-/** Waits for the typeahead search debounce period before clearing the query. */
-export const DelayClearSearch = Command.define('DelayClearSearch', { version: S.Number }, ClearedSearch)(({ version }) => Effect.sleep(SEARCH_DEBOUNCE_MILLISECONDS).pipe(Effect.as(ClearedSearch({ version }))));
-/** Detects whether the listbox button moved or the leave animation ended. Whichever comes first; both outcomes signal the Animation submodel that leave is complete. */
-export const DetectMovementOrAnimationEnd = Command.define('DetectMovementOrAnimationEnd', { id: S.String }, GotAnimationMessage)(({ id }) => Effect.raceFirst(Dom.detectElementMovement(buttonSelector(id)).pipe(Effect.as(GotAnimationMessage({ message: AnimationEndedAnimation() }))), Dom.waitForAnimationSettled(itemsSelector(id)).pipe(Effect.as(GotAnimationMessage({ message: AnimationEndedAnimation() })))));
-export const makeUpdate = (handleSelectedItem) => {
-    const withUpdateReturn = M.withReturnType();
-    const delegateToAnimation = (model, animationMessage) => {
-        const [nextAnimation, animationCommands, maybeOutMessage] = animationUpdate(model.animation, animationMessage);
-        const mappedCommands = Command.mapMessages(animationCommands, message => GotAnimationMessage({ message }));
-        const additionalCommands = Option.match(maybeOutMessage, {
-            onNone: () => [],
-            onSome: M.type().pipe(M.tagsExhaustive({
-                StartedLeaveAnimating: () => [
-                    DetectMovementOrAnimationEnd({ id: model.id }),
-                ],
-                TransitionedOut: () => [],
-            })),
-        });
-        return [
-            constrainedEvo(model, { animation: () => nextAnimation }),
-            [...mappedCommands, ...additionalCommands],
-            Option.none(),
-        ];
-    };
-    const openListbox = (baseModel, openCommands) => {
-        if (baseModel.isAnimated) {
-            const [nextModel, animationCommands] = delegateToAnimation(baseModel, AnimationShowed());
-            return [
-                constrainedEvo(nextModel, { isOpen: () => true }),
-                [...openCommands, ...animationCommands],
-                Option.none(),
-            ];
-        }
-        return [
-            constrainedEvo(baseModel, { isOpen: () => true }),
-            openCommands,
-            Option.none(),
-        ];
-    };
-    const closeListbox = (baseModel, commands, maybeOutMessage = Option.none()) => {
-        const closed = closedModel(baseModel);
-        if (baseModel.isAnimated) {
-            const [nextModel, animationCommands] = delegateToAnimation(closed, AnimationHid());
-            return [nextModel, [...commands, ...animationCommands], maybeOutMessage];
-        }
-        return [closed, commands, maybeOutMessage];
-    };
-    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 }));
-        const maybeRestoreInert = OptionExt.when(model.isModal, RestoreInert({ id: model.id }));
-        const focusButton = FocusButton({ id: model.id });
-        const focusItems = FocusItems({ id: model.id });
-        const openCommands = [
-            ...Array.getSomes([maybeLockScroll, maybeInertOthers]),
-            focusItems,
-        ];
-        const closeWithFocusCommands = [
-            focusButton,
-            ...Array.getSomes([maybeUnlockScroll, maybeRestoreInert]),
-        ];
-        const closeWithoutFocusCommands = Array.getSomes([
-            maybeUnlockScroll,
-            maybeRestoreInert,
-        ]);
-        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, {
-                    onNone: () => 'Pointer',
-                    onSome: () => 'Keyboard',
-                }),
-                searchQuery: () => '',
-                searchVersion: () => 0,
-                maybeLastPointerPosition: () => Option.none(),
-            }), openCommands),
-            Closed: () => closeListbox(model, closeWithFocusCommands),
-            BlurredItems: () => {
-                if (Option.exists(model.maybeLastButtonPointerType, Equal.equals('mouse'))) {
-                    return [model, [], Option.none()];
-                }
-                return closeListbox(model, closeWithoutFocusCommands);
-            },
-            ActivatedItem: ({ index, activationTrigger }) => [
-                constrainedEvo(model, {
-                    maybeActiveItemIndex: () => Option.some(index),
-                    activationTrigger: () => activationTrigger,
-                }),
-                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, [], Option.none()];
-                }
-                return [
-                    constrainedEvo(model, {
-                        maybeActiveItemIndex: () => Option.some(index),
-                        activationTrigger: () => 'Pointer',
-                        maybeLastPointerPosition: () => Option.some({ screenX, screenY }),
-                    }),
-                    [],
-                    Option.none(),
-                ];
-            },
-            DeactivatedItem: () => model.activationTrigger === 'Pointer'
-                ? [
-                    constrainedEvo(model, {
-                        maybeActiveItemIndex: () => Option.none(),
-                    }),
-                    [],
-                    Option.none(),
-                ]
-                : [model, [], Option.none()],
-            SelectedItem: ({ item }) => handleSelectedItem(model, item, {
-                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;
-                const nextSearchVersion = model.searchVersion + 1;
-                return [
-                    constrainedEvo(model, {
-                        searchQuery: () => nextSearchQuery,
-                        searchVersion: () => nextSearchVersion,
-                        maybeActiveItemIndex: () => Option.orElse(maybeTargetIndex, () => model.maybeActiveItemIndex),
-                    }),
-                    [DelayClearSearch({ version: nextSearchVersion })],
-                    Option.none(),
-                ];
-            },
-            ClearedSearch: ({ version }) => {
-                if (version !== model.searchVersion) {
-                    return [model, [], Option.none()];
-                }
-                return [
-                    constrainedEvo(model, { searchQuery: () => '' }),
-                    [],
-                    Option.none(),
-                ];
-            },
-            GotAnimationMessage: ({ message: animationMessage }) => delegateToAnimation(model, animationMessage),
-            PressedPointerOnButton: ({ pointerType, button }) => {
-                const withPointerType = constrainedEvo(model, {
-                    maybeLastButtonPointerType: () => Option.some(pointerType),
-                });
-                if (pointerType !== 'mouse' || button !== LEFT_MOUSE_BUTTON) {
-                    return [withPointerType, [], Option.none()];
-                }
-                if (model.isOpen) {
-                    const [closed, commands] = closeListbox(withPointerType, closeWithFocusCommands);
-                    return [
-                        constrainedEvo(closed, {
-                            maybeLastButtonPointerType: () => Option.some(pointerType),
-                        }),
-                        commands,
-                        Option.none(),
-                    ];
-                }
-                return openListbox(constrainedEvo(withPointerType, {
-                    maybeActiveItemIndex: () => Option.none(),
-                    activationTrigger: () => 'Pointer',
-                    searchQuery: () => '',
-                    searchVersion: () => 0,
-                    maybeLastPointerPosition: () => Option.none(),
-                }), openCommands);
-            },
-            IgnoredMouseClick: () => [
-                constrainedEvo(model, {
-                    maybeLastButtonPointerType: () => Option.none(),
-                }),
-                [],
-                Option.none(),
-            ],
-        }));
-    };
-    return internalUpdate;
-};
-/** The anchor-positioning Mount this Listbox renders on its items panel.
- *  The panel is always anchored to the button via Floating UI and portaled
- *  to the document body (opt out of portaling with `anchor.portal: false`),
- *  so it escapes ancestor stacking contexts and overflow clipping. Exposed
- *  so Scene tests can call
- *  `Scene.Mount.resolve(AnchorListbox, CompletedAnchorListbox())`. */
-export const AnchorListbox = Mount.define('AnchorListbox', { buttonId: S.String, anchor: AnchorConfig }, CompletedAnchorListbox)(({ buttonId, anchor }) => element => Effect.gen(function* () {
-    yield* Effect.acquireRelease(Effect.sync(() => anchorSetup({ buttonId, anchor })(element)), cleanup => Effect.sync(cleanup));
-    return CompletedAnchorListbox();
-}));
-/** The backdrop-portaling Mount this Listbox renders. Exposed so Scene tests can
- *  call `Scene.Mount.resolve(PortalListboxBackdrop, CompletedPortalListboxBackdrop())` to
- *  acknowledge the mount produced by the rendered backdrop. */
-export const PortalListboxBackdrop = Mount.define('PortalListboxBackdrop', CompletedPortalListboxBackdrop)(element => Effect.gen(function* () {
-    yield* Effect.acquireRelease(Effect.sync(() => portalToBody(element)), cleanup => Effect.sync(cleanup));
-    return CompletedPortalListboxBackdrop();
-}));
-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 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', '')]
-                : [
-                    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 = [
-            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 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(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())),
-                    ]
-                    : []),
-                ...(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;
-};