foldkit 0.111.1 → 0.112.0

package/dist/ui/combobox/shared.js

@@ -1,707 +0,0 @@
-import { Array, Effect, Match as M, Option, Predicate, Result, Schema as S, 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 → combobox → 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, keyToIndex } from '../keyboard.js';
-export { groupContiguous };
-// MODEL
-/** 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({
-    id: S.String,
-    isOpen: S.Boolean,
-    isAnimated: S.Boolean,
-    isModal: S.Boolean,
-    nullable: S.Boolean,
-    immediate: S.Boolean,
-    selectInputOnFocus: S.Boolean,
-    animation: AnimationModel,
-    maybeActiveItemIndex: S.Option(S.Number),
-    activationTrigger: ActivationTrigger,
-    inputValue: S.String,
-    maybeLastPointerPosition: S.Option(S.Struct({ screenX: S.Number, screenY: S.Number })),
-});
-/** Creates the shared base fields for a combobox model from a config. Each variant spreads this and adds its selection fields. */
-export const baseInit = (config) => ({
-    id: config.id,
-    isOpen: false,
-    isAnimated: config.isAnimated ?? false,
-    isModal: config.isModal ?? false,
-    nullable: config.nullable ?? false,
-    immediate: config.immediate ?? false,
-    selectInputOnFocus: config.selectInputOnFocus ?? false,
-    animation: animationInit({ id: `${config.id}-items` }),
-    maybeActiveItemIndex: Option.none(),
-    activationTrigger: 'Keyboard',
-    inputValue: '',
-    maybeLastPointerPosition: Option.none(),
-});
-// MESSAGE
-/** Sent when the combobox popup opens. Contains an optional initial active item index. */
-export const Opened = m('Opened', {
-    maybeActiveItemIndex: S.Option(S.Number),
-});
-/** Sent when the combobox closes via Escape key or backdrop click. */
-export const Closed = m('Closed');
-/** Sent when the combobox input loses focus. */
-export const BlurredInput = m('BlurredInput');
-/** Sent when an item is highlighted via arrow keys or mouse hover. Includes activation trigger and optional immediate selection info. */
-export const ActivatedItem = m('ActivatedItem', {
-    index: S.Number,
-    activationTrigger: ActivationTrigger,
-    maybeImmediateSelection: S.Option(S.Struct({ item: S.String, displayText: S.String })),
-});
-/** Sent when the mouse leaves an enabled item. */
-export const DeactivatedItem = m('DeactivatedItem');
-/** Sent when an item is selected via Enter or click. Includes display text for restoring input value on close. */
-export const SelectedItem = m('SelectedItem', {
-    item: S.String,
-    displayText: S.String,
-});
-/** Sent when the pointer moves over a combobox item. */
-export const MovedPointerOverItem = m('MovedPointerOverItem', {
-    index: S.Number,
-    screenX: S.Number,
-    screenY: S.Number,
-});
-/** Sent when Enter or Space is pressed on the active item, triggering a programmatic click. */
-export const RequestedItemClick = m('RequestedItemClick', {
-    index: 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-input command completes. */
-export const CompletedFocusInput = m('CompletedFocusInput');
-/** 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 the items panel mounts and Floating UI has positioned it. Update no-ops; surfaces the positioning side effect for DevTools. */
-export const CompletedAnchorCombobox = m('CompletedAnchorCombobox');
-/** Sent when the items panel mounts and the capture-phase pointerdown listener is attached (with or without anchor). Update no-ops; surfaces the listener-attach side effect for DevTools. */
-export const CompletedAttachComboboxPreventBlur = m('CompletedAttachComboboxPreventBlur');
-/** Sent when the input mounts and the focus listener that auto-selects on focus is attached. Update no-ops; surfaces the listener-attach side effect for DevTools. */
-export const CompletedAttachComboboxSelectOnFocus = m('CompletedAttachComboboxSelectOnFocus');
-/** Sent when the combobox backdrop mounts and is portaled to the document body. Update no-ops; surfaces the portal side effect for DevTools. */
-export const CompletedPortalComboboxBackdrop = m('CompletedPortalComboboxBackdrop');
-/** Wraps an Animation submodel message for delegation. */
-export const GotAnimationMessage = m('GotAnimationMessage', {
-    message: AnimationMessage,
-});
-/** Sent when the user types in the input. */
-export const UpdatedInputValue = m('UpdatedInputValue', {
-    value: S.String,
-});
-/** Sent when the optional toggle button is clicked. */
-export const PressedToggleButton = m('PressedToggleButton');
-/** Union of all messages the combobox component can produce. */
-export const Message = S.Union([
-    Opened,
-    Closed,
-    BlurredInput,
-    ActivatedItem,
-    DeactivatedItem,
-    SelectedItem,
-    MovedPointerOverItem,
-    RequestedItemClick,
-    CompletedLockScroll,
-    CompletedUnlockScroll,
-    CompletedInertOthers,
-    CompletedRestoreInert,
-    CompletedFocusInput,
-    CompletedScrollIntoView,
-    CompletedClickItem,
-    CompletedAnchorCombobox,
-    CompletedAttachComboboxPreventBlur,
-    CompletedAttachComboboxSelectOnFocus,
-    CompletedPortalComboboxBackdrop,
-    GotAnimationMessage,
-    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`;
-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();
-/** 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(),
-    activationTrigger: () => 'Keyboard',
-    maybeLastPointerPosition: () => Option.none(),
-});
-/** Prevents page scrolling while the combobox popup is open in modal mode. */
-export const LockScroll = Command.define('LockScroll', CompletedLockScroll)(Dom.lockScroll.pipe(Effect.as(CompletedLockScroll())));
-/** 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 }, 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 }, 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. */
-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 combobox 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())));
-/** Detects whether the combobox input wrapper 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(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 = 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(),
-    ];
-};
-/** 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();
-    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 focusInput = FocusInput({ id: model.id });
-        const openCombobox = (baseModel) => {
-            if (model.isAnimated) {
-                const [nextModel, animationCommands] = delegateToAnimation(baseModel, AnimationShowed());
-                return [
-                    constrainedEvo(nextModel, { isOpen: () => true }),
-                    [
-                        ...Array.getSomes([maybeLockScroll, maybeInertOthers]),
-                        ...animationCommands,
-                    ],
-                    Option.none(),
-                ];
-            }
-            return [
-                constrainedEvo(baseModel, { isOpen: () => true }),
-                Array.getSomes([maybeLockScroll, maybeInertOthers]),
-                Option.none(),
-            ];
-        };
-        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], maybeOutMessage];
-            }
-            return [closed, commands, maybeOutMessage];
-        };
-        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, {
-                    onNone: () => 'Pointer',
-                    onSome: () => 'Keyboard',
-                }),
-                maybeLastPointerPosition: () => Option.none(),
-            })),
-            Closed: () => closeCombobox(model, [focusInput]),
-            BlurredInput: () => closeCombobox(model, []),
-            ActivatedItem: ({ index, activationTrigger, maybeImmediateSelection, }) => {
-                const highlightedModel = constrainedEvo(model, {
-                    maybeActiveItemIndex: () => Option.some(index),
-                    activationTrigger: () => activationTrigger,
-                });
-                const nextModel = Option.match(maybeImmediateSelection, {
-                    onNone: () => highlightedModel,
-                    onSome: ({ item, displayText }) => handlers.handleImmediateActivation(highlightedModel, item, displayText),
-                });
-                return [
-                    nextModel,
-                    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, 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],
-                        maybeOutMessage,
-                    ];
-                }
-                return [nextModel, commands, maybeOutMessage];
-            },
-            RequestedItemClick: ({ index }) => [
-                model,
-                [ClickItem({ id: model.id, index })],
-                Option.none(),
-            ],
-            UpdatedInputValue: ({ value }) => {
-                if (model.isOpen) {
-                    return [
-                        constrainedEvo(model, {
-                            inputValue: () => value,
-                            maybeActiveItemIndex: () => Option.some(0),
-                            activationTrigger: () => 'Keyboard',
-                        }),
-                        [],
-                        Option.none(),
-                    ];
-                }
-                return openCombobox(constrainedEvo(model, {
-                    inputValue: () => value,
-                    maybeActiveItemIndex: () => Option.some(0),
-                    activationTrigger: () => 'Keyboard',
-                    maybeLastPointerPosition: () => Option.none(),
-                }));
-            },
-            PressedToggleButton: () => {
-                if (model.isOpen) {
-                    return closeCombobox(model, [focusInput]);
-                }
-                const [nextModel, commands] = openCombobox(constrainedEvo(model, {
-                    maybeActiveItemIndex: () => Option.none(),
-                    activationTrigger: () => 'Pointer',
-                    maybeLastPointerPosition: () => Option.none(),
-                }));
-                return [nextModel, [focusInput, ...commands], Option.none()];
-            },
-            GotAnimationMessage: ({ message: animationMessage }) => delegateToAnimation(model, animationMessage),
-        }));
-    };
-    return internalUpdate;
-};
-/** The anchor-positioning Mount this Combobox renders on its items panel.
- *  The panel is always anchored to the input wrapper 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. The Mount also installs the `pointerdown`-cancelling
- *  capture listener that prevents input blur on item presses. Exposed so
- *  Scene tests can call
- *  `Scene.Mount.resolve(AnchorCombobox, CompletedAnchorCombobox())`. */
-export const AnchorCombobox = Mount.define('AnchorCombobox', { buttonId: S.String, anchor: AnchorConfig }, CompletedAnchorCombobox)(({ buttonId, anchor }) => element => Effect.gen(function* () {
-    yield* Effect.acquireRelease(Effect.sync(() => {
-        const preventBlur = (event) => {
-            event.preventDefault();
-        };
-        element.addEventListener('pointerdown', preventBlur, {
-            capture: true,
-        });
-        const teardownAnchor = anchorSetup({
-            buttonId,
-            anchor,
-            interceptTab: false,
-        })(element);
-        return () => {
-            element.removeEventListener('pointerdown', preventBlur, {
-                capture: true,
-            });
-            teardownAnchor();
-        };
-    }), cleanup => Effect.sync(cleanup));
-    return CompletedAnchorCombobox();
-}));
-/** The Mount this Combobox renders to install a `pointerdown`-cancelling
- *  capture listener that prevents blur on item presses. Exposed so Scene
- *  tests can call
- *  `Scene.Mount.resolve(AttachComboboxPreventBlur, CompletedAttachComboboxPreventBlur())`. */
-export const AttachComboboxPreventBlur = Mount.define('AttachComboboxPreventBlur', CompletedAttachComboboxPreventBlur)(element => Effect.gen(function* () {
-    yield* Effect.acquireRelease(Effect.sync(() => {
-        const handler = (event) => {
-            event.preventDefault();
-        };
-        element.addEventListener('pointerdown', handler, { capture: true });
-        return handler;
-    }), handler => Effect.sync(() => element.removeEventListener('pointerdown', handler, {
-        capture: true,
-    })));
-    return CompletedAttachComboboxPreventBlur();
-}));
-/** The Mount this Combobox renders to install the input's select-on-focus
- *  behavior. Exposed so Scene tests can call
- *  `Scene.Mount.resolve(AttachComboboxSelectOnFocus, CompletedAttachComboboxSelectOnFocus())`. */
-export const AttachComboboxSelectOnFocus = Mount.define('AttachComboboxSelectOnFocus', CompletedAttachComboboxSelectOnFocus)(element => Effect.gen(function* () {
-    yield* Effect.acquireRelease(Effect.sync(() => {
-        const handler = () => {
-            if (element instanceof HTMLInputElement) {
-                element.select();
-            }
-        };
-        element.addEventListener('focus', handler);
-        return handler;
-    }), handler => Effect.sync(() => element.removeEventListener('focus', handler)));
-    return CompletedAttachComboboxSelectOnFocus();
-}));
-/** The backdrop-portaling Mount this Combobox renders. Exposed so Scene tests can
- *  call `Scene.Mount.resolve(PortalComboboxBackdrop, CompletedPortalComboboxBackdrop())` to
- *  acknowledge the mount produced by the rendered backdrop. */
-export const PortalComboboxBackdrop = Mount.define('PortalComboboxBackdrop', CompletedPortalComboboxBackdrop)(element => Effect.gen(function* () {
-    yield* Effect.acquireRelease(Effect.sync(() => portalToBody(element)), cleanup => Effect.sync(cleanup));
-    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) => {
-    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),
-            }),
-        })));
-        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 = [
-            h.Style({
-                position: 'absolute',
-                margin: '0',
-                visibility: 'hidden',
-            }),
-            h.OnMount(AnchorCombobox({
-                buttonId: `${id}-input-wrapper`,
-                anchor,
-            })),
-        ];
-        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.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())),
-                    ]
-                    : []),
-                ...(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.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(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
-                : []),
-            ...hiddenInputs,
-        ]);
-    });
-    return () => 
-    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-    impl;
-};