foldkit 0.26.0 → 0.27.0

package/dist/ui/combobox/shared.js

@@ -0,0 +1,560 @@
+import { Array, Effect, Match as M, Option, Predicate, Schema as S, pipe, } from 'effect';
+import { OptionExt } from '../../effectExtensions';
+import { html } from '../../html';
+import { m } from '../../message';
+import { makeConstrainedEvo } from '../../struct';
+import * as Task from '../../task';
+import { anchorHooks } from '../anchor';
+import { groupContiguous } from '../group';
+import { findFirstEnabledIndex, keyToIndex } from '../keyboard';
+import { TransitionState } from '../transition';
+export { groupContiguous };
+// MODEL
+/** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
+export const ActivationTrigger = S.Literal('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,
+    transitionState: TransitionState,
+    maybeActiveItemIndex: S.OptionFromSelf(S.Number),
+    activationTrigger: ActivationTrigger,
+    inputValue: S.String,
+    maybeLastPointerPosition: S.OptionFromSelf(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,
+    transitionState: 'Idle',
+    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.OptionFromSelf(S.Number),
+});
+/** Sent when the combobox closes via Escape key or backdrop click. */
+export const Closed = m('Closed');
+/** Sent when focus leaves the input via Tab key or blur. */
+export const ClosedByTab = m('ClosedByTab');
+/** 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.OptionFromSelf(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,
+});
+/** Placeholder message used when no action is needed. */
+export const NoOp = m('NoOp');
+/** Sent internally when a double-rAF completes, advancing the transition to its animating phase. */
+export const AdvancedTransitionFrame = m('AdvancedTransitionFrame');
+/** Sent internally when all CSS transitions on the items container have completed. */
+export const EndedTransition = m('EndedTransition');
+/** Sent internally when the input wrapper moves in the viewport during a leave transition, cancelling the animation. */
+export const DetectedInputMovement = m('DetectedInputMovement');
+/** 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, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, NoOp, AdvancedTransitionFrame, EndedTransition, DetectedInputMovement, UpdatedInputValue, PressedToggleButton);
+// 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,
+    transitionState: () => model.isAnimated ? 'LeaveStart' : 'Idle',
+    maybeActiveItemIndex: () => Option.none(),
+    activationTrigger: () => 'Keyboard',
+    maybeLastPointerPosition: () => Option.none(),
+});
+/** Creates a combobox update function from variant-specific handlers. Shared logic (open, close, activate, transition) is handled internally; only close, selection, and immediate-activation behavior varies by variant. */
+export const makeUpdate = (handlers) => {
+    const withUpdateReturn = M.withReturnType();
+    return (model, message) => {
+        const maybeNextFrame = OptionExt.when(model.isAnimated, Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame())));
+        const maybeLockScroll = OptionExt.when(model.isModal, Task.lockScroll.pipe(Effect.as(NoOp())));
+        const maybeUnlockScroll = OptionExt.when(model.isModal, Task.unlockScroll.pipe(Effect.as(NoOp())));
+        const maybeInertOthers = OptionExt.when(model.isModal, Task.inertOthers(model.id, [
+            inputWrapperSelector(model.id),
+            itemsSelector(model.id),
+        ]).pipe(Effect.as(NoOp())));
+        const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(NoOp())));
+        const focusInput = Task.focus(inputSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp()));
+        return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+            Opened: ({ maybeActiveItemIndex }) => {
+                const nextModel = constrainedEvo(model, {
+                    isOpen: () => true,
+                    transitionState: () => model.isAnimated ? 'EnterStart' : 'Idle',
+                    maybeActiveItemIndex: () => maybeActiveItemIndex,
+                    activationTrigger: () => Option.match(maybeActiveItemIndex, {
+                        onNone: () => 'Pointer',
+                        onSome: () => 'Keyboard',
+                    }),
+                    maybeLastPointerPosition: () => Option.none(),
+                });
+                return [
+                    nextModel,
+                    Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]),
+                ];
+            },
+            Closed: () => [
+                handlers.handleClose(model),
+                pipe(Array.getSomes([
+                    maybeNextFrame,
+                    maybeUnlockScroll,
+                    maybeRestoreInert,
+                ]), Array.prepend(focusInput)),
+            ],
+            ClosedByTab: () => [
+                handlers.handleClose(model),
+                Array.getSomes([
+                    maybeNextFrame,
+                    maybeUnlockScroll,
+                    maybeRestoreInert,
+                ]),
+            ],
+            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'
+                        ? [
+                            Task.scrollIntoView(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
+                        ]
+                        : [],
+                ];
+            },
+            MovedPointerOverItem: ({ index, screenX, screenY }) => {
+                const isSamePosition = Option.exists(model.maybeLastPointerPosition, position => position.screenX === screenX && position.screenY === screenY);
+                if (isSamePosition) {
+                    return [model, []];
+                }
+                return [
+                    constrainedEvo(model, {
+                        maybeActiveItemIndex: () => Option.some(index),
+                        activationTrigger: () => 'Pointer',
+                        maybeLastPointerPosition: () => Option.some({ screenX, screenY }),
+                    }),
+                    [],
+                ];
+            },
+            DeactivatedItem: () => model.activationTrigger === 'Pointer'
+                ? [
+                    constrainedEvo(model, {
+                        maybeActiveItemIndex: () => Option.none(),
+                    }),
+                    [],
+                ]
+                : [model, []],
+            SelectedItem: ({ item, displayText }) => handlers.handleSelectedItem(model, item, displayText, {
+                focusInput,
+                maybeNextFrame,
+                maybeUnlockScroll,
+                maybeRestoreInert,
+            }),
+            RequestedItemClick: ({ index }) => [
+                model,
+                [
+                    Task.clickElement(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
+                ],
+            ],
+            UpdatedInputValue: ({ value }) => {
+                if (model.isOpen) {
+                    return [
+                        constrainedEvo(model, {
+                            inputValue: () => value,
+                            maybeActiveItemIndex: () => Option.some(0),
+                            activationTrigger: () => 'Keyboard',
+                        }),
+                        [],
+                    ];
+                }
+                const nextModel = constrainedEvo(model, {
+                    isOpen: () => true,
+                    transitionState: () => model.isAnimated ? 'EnterStart' : 'Idle',
+                    inputValue: () => value,
+                    maybeActiveItemIndex: () => Option.some(0),
+                    activationTrigger: () => 'Keyboard',
+                    maybeLastPointerPosition: () => Option.none(),
+                });
+                return [
+                    nextModel,
+                    Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]),
+                ];
+            },
+            PressedToggleButton: () => {
+                if (model.isOpen) {
+                    return [
+                        handlers.handleClose(model),
+                        pipe(Array.getSomes([
+                            maybeNextFrame,
+                            maybeUnlockScroll,
+                            maybeRestoreInert,
+                        ]), Array.prepend(focusInput)),
+                    ];
+                }
+                const nextModel = constrainedEvo(model, {
+                    isOpen: () => true,
+                    transitionState: () => model.isAnimated ? 'EnterStart' : 'Idle',
+                    maybeActiveItemIndex: () => Option.none(),
+                    activationTrigger: () => 'Pointer',
+                    maybeLastPointerPosition: () => Option.none(),
+                });
+                return [
+                    nextModel,
+                    pipe(Array.getSomes([
+                        maybeNextFrame,
+                        maybeLockScroll,
+                        maybeInertOthers,
+                    ]), Array.prepend(focusInput)),
+                ];
+            },
+            AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
+                constrainedEvo(model, {
+                    transitionState: () => 'EnterAnimating',
+                }),
+                [
+                    Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition())),
+                ],
+            ]), M.when('LeaveStart', () => [
+                constrainedEvo(model, {
+                    transitionState: () => 'LeaveAnimating',
+                }),
+                [
+                    Effect.raceFirst(Task.detectElementMovement(inputWrapperSelector(model.id)).pipe(Effect.as(DetectedInputMovement())), Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition()))),
+                ],
+            ]), M.orElse(() => [model, []])),
+            EndedTransition: () => M.value(model.transitionState).pipe(withUpdateReturn, M.whenOr('EnterAnimating', 'LeaveAnimating', () => [
+                constrainedEvo(model, {
+                    transitionState: () => 'Idle',
+                }),
+                [],
+            ]), M.orElse(() => [model, []])),
+            DetectedInputMovement: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('LeaveAnimating', () => [
+                constrainedEvo(model, {
+                    transitionState: () => 'Idle',
+                }),
+                [],
+            ]), M.orElse(() => [model, []])),
+            NoOp: () => [model, []],
+        }));
+    };
+};
+/** Creates a combobox view function from variant-specific behavior. Shared rendering logic (input, items, transitions, keyboard navigation) is handled internally; only selection display varies by variant. */
+export const makeView = (behavior) => (config) => {
+    const { div, input, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaInvalid, AriaLabelledBy, AriaMultiSelectable, AriaSelected, Attribute, Autocomplete, Class, DataAttribute, Id, Name, OnBlur, OnClick, OnDestroy, OnFocus, OnInput, OnInsert, OnKeyDownPreventDefault, OnPointerLeave, OnPointerMove, Role, Style, Tabindex, Type, Value, keyed, } = html();
+    const { model: { id, isOpen, immediate, transitionState, maybeActiveItemIndex }, toMessage, items, itemToConfig, itemToValue, itemToDisplayText, isItemDisabled, inputClassName, inputPlaceholder, itemsClassName, itemsScrollClassName, backdropClassName, className, inputWrapperClassName, buttonContent, buttonClassName, formName, isDisabled, isInvalid, openOnFocus, itemGroupKey, groupToHeading, groupClassName, separatorClassName, anchor, } = config;
+    const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
+    const isVisible = isOpen || isLeaving;
+    const transitionAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
+        DataAttribute('closed', ''),
+        DataAttribute('enter', ''),
+        DataAttribute('transition', ''),
+    ]), M.when('EnterAnimating', () => [
+        DataAttribute('enter', ''),
+        DataAttribute('transition', ''),
+    ]), M.when('LeaveStart', () => [
+        DataAttribute('leave', ''),
+        DataAttribute('transition', ''),
+    ]), M.when('LeaveAnimating', () => [
+        DataAttribute('closed', ''),
+        DataAttribute('leave', ''),
+        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(toMessage(Opened({
+                maybeActiveItemIndex: Option.some(firstEnabledIndex),
+            })));
+        }
+        const targetIndex = resolveActiveIndex('ArrowDown');
+        return Option.some(toMessage(ActivatedItem({
+            index: targetIndex,
+            activationTrigger: 'Keyboard',
+            maybeImmediateSelection: resolveImmediateSelection(targetIndex),
+        })));
+    }), M.when('ArrowUp', () => {
+        if (!isOpen) {
+            return Option.some(toMessage(Opened({
+                maybeActiveItemIndex: Option.some(lastEnabledIndex),
+            })));
+        }
+        const targetIndex = resolveActiveIndex('ArrowUp');
+        return Option.some(toMessage(ActivatedItem({
+            index: targetIndex,
+            activationTrigger: 'Keyboard',
+            maybeImmediateSelection: resolveImmediateSelection(targetIndex),
+        })));
+    }), M.when('Enter', () => {
+        if (!isOpen) {
+            return Option.none();
+        }
+        return Option.map(maybeActiveItemIndex, index => toMessage(RequestedItemClick({ index })));
+    }), M.when('Escape', () => {
+        if (!isOpen) {
+            return Option.none();
+        }
+        return Option.some(toMessage(Closed()));
+    }), M.whenOr('Home', 'End', () => {
+        if (!isOpen) {
+            return Option.none();
+        }
+        const targetIndex = resolveActiveIndex(key);
+        return Option.some(toMessage(ActivatedItem({
+            index: targetIndex,
+            activationTrigger: 'Keyboard',
+            maybeImmediateSelection: resolveImmediateSelection(targetIndex),
+        })));
+    }), M.orElse(() => Option.none()));
+    const preventBlurOnPointerDown = (element) => {
+        element.addEventListener('pointerdown', (event) => {
+            event.preventDefault();
+        }, { capture: true });
+    };
+    const maybeActiveDescendant = Option.match(maybeActiveItemIndex, {
+        onNone: () => [],
+        onSome: index => [AriaActiveDescendant(itemId(id, index))],
+    });
+    const inputAttributes = [
+        Id(`${id}-input`),
+        Role('combobox'),
+        Class(inputClassName),
+        AriaExpanded(isVisible),
+        AriaControls(`${id}-items`),
+        Attribute('aria-autocomplete', 'list'),
+        Attribute('aria-haspopup', 'listbox'),
+        Autocomplete('off'),
+        Value(config.model.inputValue),
+        ...maybeActiveDescendant,
+        ...(inputPlaceholder ? [Attribute('placeholder', inputPlaceholder)] : []),
+        ...(isDisabled
+            ? [AriaDisabled(true), DataAttribute('disabled', '')]
+            : [
+                OnInput(value => toMessage(UpdatedInputValue({ value }))),
+                OnKeyDownPreventDefault(handleInputKeyDown),
+                OnBlur(toMessage(ClosedByTab())),
+                ...(openOnFocus
+                    ? [
+                        OnFocus(toMessage(Opened({ maybeActiveItemIndex: Option.none() }))),
+                    ]
+                    : []),
+            ]),
+        ...(isInvalid ? [AriaInvalid(true), DataAttribute('invalid', '')] : []),
+        ...(isVisible ? [DataAttribute('open', '')] : []),
+        ...(config.model.selectInputOnFocus
+            ? [
+                OnInsert((element) => {
+                    element.addEventListener('focus', () => {
+                        if (element instanceof HTMLInputElement) {
+                            element.select();
+                        }
+                    });
+                }),
+            ]
+            : []),
+    ];
+    const hooks = anchor
+        ? anchorHooks({
+            buttonId: `${id}-input-wrapper`,
+            anchor,
+            interceptTab: false,
+        })
+        : undefined;
+    const anchorAttributes = hooks
+        ? [
+            Style({ position: 'absolute', margin: '0', visibility: 'hidden' }),
+            OnInsert((element) => {
+                preventBlurOnPointerDown(element);
+                hooks.onInsert(element);
+            }),
+            OnDestroy(hooks.onDestroy),
+        ]
+        : [OnInsert(preventBlurOnPointerDown)];
+    const itemsContainerAttributes = [
+        Id(`${id}-items`),
+        Role('listbox'),
+        ...(behavior.ariaMultiSelectable ? [AriaMultiSelectable(true)] : []),
+        AriaLabelledBy(`${id}-input`),
+        Tabindex(-1),
+        Class(itemsClassName),
+        ...anchorAttributes,
+        ...transitionAttributes,
+    ];
+    const comboboxItems = Array.map(items, (item, index) => {
+        const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
+        const isDisabledItem = isDisabledAtIndex(index);
+        const isSelectedItem = behavior.isItemSelected(config.model, itemToValue(item, index));
+        const itemConfig = itemToConfig(item, {
+            isActive: isActiveItem,
+            isDisabled: isDisabledItem,
+            isSelected: isSelectedItem,
+        });
+        const isInteractive = !isDisabledItem && !isLeaving;
+        return keyed('div')(itemId(id, index), [
+            Id(itemId(id, index)),
+            Role('option'),
+            AriaSelected(isSelectedItem),
+            Class(itemConfig.className),
+            ...(isActiveItem ? [DataAttribute('active', '')] : []),
+            ...(isSelectedItem ? [DataAttribute('selected', '')] : []),
+            ...(isDisabledItem
+                ? [AriaDisabled(true), DataAttribute('disabled', '')]
+                : []),
+            ...(isInteractive
+                ? [
+                    OnClick(toMessage(SelectedItem({
+                        item: itemToValue(item, index),
+                        displayText: itemToDisplayText(item, index),
+                    }))),
+                    OnPointerMove((screenX, screenY, pointerType) => OptionExt.when(pointerType !== 'touch', toMessage(MovedPointerOverItem({ index, screenX, screenY })))),
+                    OnPointerLeave(pointerType => OptionExt.when(pointerType !== 'touch', toMessage(DeactivatedItem()))),
+                ]
+                : []),
+        ], [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.fromNullable(groupToHeading && groupToHeading(segment.key));
+            const headingId = `${id}-heading-${segment.key}`;
+            const headingElement = Option.match(maybeHeading, {
+                onNone: () => [],
+                onSome: heading => [
+                    keyed('div')(headingId, [Id(headingId), Role('presentation'), Class(heading.className)], [heading.content]),
+                ],
+            });
+            const groupContent = [...headingElement, ...segment.items];
+            const groupElement = keyed('div')(`${id}-group-${segment.key}`, [
+                Role('group'),
+                ...(Option.isSome(maybeHeading) ? [AriaLabelledBy(headingId)] : []),
+                ...(groupClassName ? [Class(groupClassName)] : []),
+            ], groupContent);
+            const separator = segmentIndex > 0 && separatorClassName
+                ? [
+                    keyed('div')(`${id}-separator-${segmentIndex}`, [Role('separator'), Class(separatorClassName)], []),
+                ]
+                : [];
+            return [...separator, groupElement];
+        });
+    };
+    const backdrop = keyed('div')(`${id}-backdrop`, [
+        Class(backdropClassName),
+        ...(isLeaving ? [] : [OnClick(toMessage(Closed()))]),
+    ], []);
+    const renderedItems = renderGroupedItems();
+    const scrollableItems = itemsScrollClassName
+        ? [div([Class(itemsScrollClassName)], renderedItems)]
+        : renderedItems;
+    const visibleContent = [
+        backdrop,
+        keyed('div')(`${id}-items-container`, itemsContainerAttributes, scrollableItems),
+    ];
+    const inputWrapperAttributes = [
+        Id(`${id}-input-wrapper`),
+        ...(inputWrapperClassName ? [Class(inputWrapperClassName)] : []),
+    ];
+    const toggleButton = buttonContent && buttonClassName
+        ? [
+            keyed('button')(`${id}-button`, [
+                Id(`${id}-button`),
+                Type('button'),
+                Class(buttonClassName),
+                Tabindex(-1),
+                AriaControls(`${id}-items`),
+                AriaExpanded(isVisible),
+                Attribute('aria-haspopup', 'listbox'),
+                ...(isDisabled
+                    ? [AriaDisabled(true), DataAttribute('disabled', '')]
+                    : [OnClick(toMessage(PressedToggleButton()))]),
+                OnInsert(preventBlurOnPointerDown),
+            ], [buttonContent]),
+        ]
+        : [];
+    const selectedValues = pipe(items, Array.filterMap((item, index) => {
+        const value = itemToValue(item, index);
+        return OptionExt.when(behavior.isItemSelected(config.model, value), value);
+    }));
+    const hiddenInputs = formName
+        ? Array.match(selectedValues, {
+            onEmpty: () => [input([Type('hidden'), Name(formName)])],
+            onNonEmpty: Array.map(selectedValue => input([Type('hidden'), Name(formName), Value(selectedValue)])),
+        })
+        : [];
+    const wrapperAttributes = [
+        ...(className ? [Class(className)] : []),
+        ...(isVisible ? [DataAttribute('open', '')] : []),
+        ...(isDisabled ? [DataAttribute('disabled', '')] : []),
+        ...(isInvalid ? [DataAttribute('invalid', '')] : []),
+    ];
+    return div(wrapperAttributes, [
+        div(inputWrapperAttributes, [input(inputAttributes), ...toggleButton]),
+        ...(isVisible && Array.isNonEmptyReadonlyArray(items)
+            ? visibleContent
+            : []),
+        ...hiddenInputs,
+    ]);
+};