foldkit 0.56.0 → 0.57.0

package/dist/ui/listbox/shared.d.ts

@@ -17,7 +17,11 @@ export declare const BaseModel: S.Struct<{
     isAnimated: typeof S.Boolean;
     isModal: typeof S.Boolean;
     orientation: S.Literal<["Vertical", "Horizontal"]>;
-    transitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+    transition: S.Struct<{
+        id: typeof S.String;
+        isShowing: typeof S.Boolean;
+        transitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+    }>;
     maybeActiveItemIndex: S.OptionFromSelf<typeof S.Number>;
     activationTrigger: S.Literal<["Pointer", "Keyboard"]>;
     searchQuery: typeof S.String;
@@ -96,12 +100,10 @@ export declare const CompletedClickItem: import("../../schema").CallableTaggedSt
 export declare const IgnoredMouseClick: import("../../schema").CallableTaggedStruct<"IgnoredMouseClick", {}>;
 /** Sent when a Space key-up is captured to prevent page scrolling. */
 export declare const SuppressedSpaceScroll: import("../../schema").CallableTaggedStruct<"SuppressedSpaceScroll", {}>;
-/** Sent internally when a double-rAF completes, advancing the transition to its animating phase. */
-export declare const AdvancedTransitionFrame: import("../../schema").CallableTaggedStruct<"AdvancedTransitionFrame", {}>;
-/** Sent internally when all CSS transitions on the listbox items container have completed. */
-export declare const EndedTransition: import("../../schema").CallableTaggedStruct<"EndedTransition", {}>;
-/** Sent internally when the listbox button moves in the viewport during a leave transition, cancelling the animation. */
-export declare const DetectedButtonMovement: import("../../schema").CallableTaggedStruct<"DetectedButtonMovement", {}>;
+/** Wraps a Transition submodel message for delegation. */
+export declare const GotTransitionMessage: import("../../schema").CallableTaggedStruct<"GotTransitionMessage", {
+    message: S.Union<[import("../../schema").CallableTaggedStruct<"Showed", {}>, import("../../schema").CallableTaggedStruct<"Hidden", {}>, import("../../schema").CallableTaggedStruct<"AdvancedTransitionFrame", {}>, import("../../schema").CallableTaggedStruct<"EndedTransition", {}>]>;
+}>;
 /** Sent when the user presses a pointer device on the listbox button. Records pointer type for click handling. */
 export declare const PressedPointerOnButton: import("../../schema").CallableTaggedStruct<"PressedPointerOnButton", {
     pointerType: typeof S.String;
@@ -129,9 +131,7 @@ export declare const Message: S.Union<[
     typeof CompletedClickItem,
     typeof IgnoredMouseClick,
     typeof SuppressedSpaceScroll,
-    typeof AdvancedTransitionFrame,
-    typeof EndedTransition,
-    typeof DetectedButtonMovement,
+    typeof GotTransitionMessage,
     typeof PressedPointerOnButton
 ]>;
 export type Opened = typeof Opened.Type;
@@ -146,9 +146,6 @@ export type Searched = typeof Searched.Type;
 export type ClearedSearch = typeof ClearedSearch.Type;
 export type IgnoredMouseClick = typeof IgnoredMouseClick.Type;
 export type SuppressedSpaceScroll = typeof SuppressedSpaceScroll.Type;
-export type AdvancedTransitionFrame = typeof AdvancedTransitionFrame.Type;
-export type EndedTransition = typeof EndedTransition.Type;
-export type DetectedButtonMovement = typeof DetectedButtonMovement.Type;
 export type PressedPointerOnButton = typeof PressedPointerOnButton.Type;
 export type Message = typeof Message.Type;
 export declare const SEARCH_DEBOUNCE_MILLISECONDS = 350;
@@ -158,15 +155,9 @@ export declare const itemsSelector: (id: string) => string;
 export declare const itemSelector: (id: string, index: number) => string;
 export declare const itemId: (id: string, index: number) => string;
 export declare const closedModel: <Model extends BaseModel>(model: Model) => Model;
-type SelectedItemContext = Readonly<{
-    focusButton: Command.Command<Message>;
-    maybeNextFrame: Option.Option<Command.Command<Message>>;
-    maybeUnlockScroll: Option.Option<Command.Command<Message>>;
-    maybeRestoreInert: Option.Option<Command.Command<Message>>;
-}>;
-/** Advances the listbox's enter/leave transition by waiting a double-rAF. */
-export declare const RequestFrame: Command.CommandDefinition<"RequestFrame", {
-    readonly _tag: "AdvancedTransitionFrame";
+type SelectedItemContext<Model extends BaseModel> = Readonly<{
+    closeWithFocus: (model: Model) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
+    closeWithoutFocus: (model: Model) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
 }>;
 /** Prevents page scrolling while the listbox is open in modal mode. */
 export declare const LockScroll: Command.CommandDefinition<"LockScroll", {
@@ -205,17 +196,20 @@ export declare const DelayClearSearch: Command.CommandDefinition<"DelayClearSear
     readonly _tag: "ClearedSearch";
     readonly version: number;
 }>;
-/** Waits for all CSS transitions on the listbox items container to complete. */
-export declare const WaitForTransitions: Command.CommandDefinition<"WaitForTransitions", {
-    readonly _tag: "EndedTransition";
-}>;
-/** Detects whether the listbox button moved or the leave transition ended — whichever comes first. */
+/** Detects whether the listbox button moved or the leave transition ended — whichever comes first. Both outcomes signal the Transition submodel that leave is complete. */
 export declare const DetectMovementOrTransitionEnd: Command.CommandDefinition<"DetectMovementOrTransitionEnd", {
-    readonly _tag: "EndedTransition";
-} | {
-    readonly _tag: "DetectedButtonMovement";
+    readonly _tag: "GotTransitionMessage";
+    readonly message: {
+        readonly _tag: "Showed";
+    } | {
+        readonly _tag: "Hidden";
+    } | {
+        readonly _tag: "AdvancedTransitionFrame";
+    } | {
+        readonly _tag: "EndedTransition";
+    };
 }>;
-export declare const makeUpdate: <Model extends BaseModel>(handleSelectedItem: (model: Model, item: string, context: SelectedItemContext) => [Model, ReadonlyArray<Command.Command<Message>>]) => (model: Model, message: Message) => readonly [Model, readonly Readonly<{
+export declare const makeUpdate: <Model extends BaseModel>(handleSelectedItem: (model: Model, item: string, context: SelectedItemContext<Model>) => [Model, ReadonlyArray<Command.Command<Message>>]) => (model: Model, message: Message) => readonly [Model, readonly Readonly<{
     name: string;
     effect: Effect.Effect<{
         readonly _tag: "Opened";
@@ -269,11 +263,16 @@ export declare const makeUpdate: <Model extends BaseModel>(handleSelectedItem: (
     } | {
         readonly _tag: "SuppressedSpaceScroll";
     } | {
-        readonly _tag: "AdvancedTransitionFrame";
-    } | {
-        readonly _tag: "EndedTransition";
-    } | {
-        readonly _tag: "DetectedButtonMovement";
+        readonly _tag: "GotTransitionMessage";
+        readonly message: {
+            readonly _tag: "Showed";
+        } | {
+            readonly _tag: "Hidden";
+        } | {
+            readonly _tag: "AdvancedTransitionFrame";
+        } | {
+            readonly _tag: "EndedTransition";
+        };
     } | {
         readonly _tag: "PressedPointerOnButton";
         readonly button: number;

package/dist/ui/listbox/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/shared.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/shared.ts"],"names":[],"mappings":"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"}

package/dist/ui/listbox/shared.js

@@ -1,4 +1,4 @@
-import { Array, Effect, Match as M, Option, Predicate, Schema as S, String as Str, pipe, } from 'effect';
+import { Array, Effect, Equal, Match as M, Option, Predicate, Schema as S, String as Str, pipe, } from 'effect';
 import * as Command from '../../command';
 import { OptionExt } from '../../effectExtensions';
 import { html } from '../../html';
@@ -8,7 +8,11 @@ import * as Task from '../../task';
 import { anchorHooks } from '../anchor';
 import { groupContiguous } from '../group';
 import { findFirstEnabledIndex, isPrintableKey, keyToIndex } from '../keyboard';
-import { TransitionState } from '../transition';
+// NOTE: Transition imports are split across schema + update to avoid a circular
+// dependency: transition → html → runtime → devtools → listbox → transition.
+// The barrel (../transition) imports from html, which starts the cycle.
+import { EndedTransition as TransitionEndedTransition, Hidden as TransitionHidden, Message as TransitionMessage, Model as TransitionModel, Showed as TransitionShowed, init as transitionInit, } from '../transition/schema';
+import { update as transitionUpdate } from '../transition/update';
 import { resolveTypeaheadMatch } from '../typeahead';
 export { resolveTypeaheadMatch };
 // MODEL
@@ -23,7 +27,7 @@ export const BaseModel = S.Struct({
     isAnimated: S.Boolean,
     isModal: S.Boolean,
     orientation: Orientation,
-    transitionState: TransitionState,
+    transition: TransitionModel,
     maybeActiveItemIndex: S.OptionFromSelf(S.Number),
     activationTrigger: ActivationTrigger,
     searchQuery: S.String,
@@ -38,7 +42,7 @@ export const baseInit = (config) => ({
     isAnimated: config.isAnimated ?? false,
     isModal: config.isModal ?? false,
     orientation: config.orientation ?? 'Vertical',
-    transitionState: 'Idle',
+    transition: transitionInit({ id: `${config.id}-listbox` }),
     maybeActiveItemIndex: Option.none(),
     activationTrigger: 'Keyboard',
     searchQuery: '',
@@ -101,19 +105,17 @@ export const CompletedClickItem = m('CompletedClickItem');
 export const IgnoredMouseClick = m('IgnoredMouseClick');
 /** Sent when a Space key-up is captured to prevent page scrolling. */
 export const SuppressedSpaceScroll = m('SuppressedSpaceScroll');
-/** 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 listbox items container have completed. */
-export const EndedTransition = m('EndedTransition');
-/** Sent internally when the listbox button moves in the viewport during a leave transition, cancelling the animation. */
-export const DetectedButtonMovement = m('DetectedButtonMovement');
+/** Wraps a Transition submodel message for delegation. */
+export const GotTransitionMessage = m('GotTransitionMessage', {
+    message: TransitionMessage,
+});
 /** 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, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, CompletedFocusButton, CompletedFocusItems, CompletedScrollIntoView, CompletedClickItem, IgnoredMouseClick, SuppressedSpaceScroll, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, PressedPointerOnButton);
+export const Message = S.Union(Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, CompletedFocusButton, CompletedFocusItems, CompletedScrollIntoView, CompletedClickItem, IgnoredMouseClick, SuppressedSpaceScroll, GotTransitionMessage, PressedPointerOnButton);
 // CONSTANTS
 export const SEARCH_DEBOUNCE_MILLISECONDS = 350;
 export const LEFT_MOUSE_BUTTON = 0;
@@ -126,15 +128,12 @@ export const itemId = (id, index) => `${id}-item-${index}`;
 const constrainedEvo = makeConstrainedEvo();
 export const closedModel = (model) => constrainedEvo(model, {
     isOpen: () => false,
-    transitionState: () => model.isAnimated ? 'LeaveStart' : 'Idle',
     maybeActiveItemIndex: () => Option.none(),
     searchQuery: () => '',
     searchVersion: () => 0,
     maybeLastPointerPosition: () => Option.none(),
     maybeLastButtonPointerType: () => Option.none(),
 });
-/** Advances the listbox's enter/leave transition by waiting a double-rAF. */
-export const RequestFrame = Command.define('RequestFrame', AdvancedTransitionFrame);
 /** Prevents page scrolling while the listbox is open in modal mode. */
 export const LockScroll = Command.define('LockScroll', CompletedLockScroll);
 /** Re-enables page scrolling after the listbox closes. */
@@ -153,14 +152,50 @@ export const ScrollIntoView = Command.define('ScrollIntoView', CompletedScrollIn
 export const ClickItem = Command.define('ClickItem', CompletedClickItem);
 /** Waits for the typeahead search debounce period before clearing the query. */
 export const DelayClearSearch = Command.define('DelayClearSearch', ClearedSearch);
-/** Waits for all CSS transitions on the listbox items container to complete. */
-export const WaitForTransitions = Command.define('WaitForTransitions', EndedTransition);
-/** Detects whether the listbox button moved or the leave transition ended — whichever comes first. */
-export const DetectMovementOrTransitionEnd = Command.define('DetectMovementOrTransitionEnd', DetectedButtonMovement, EndedTransition);
+/** Detects whether the listbox button moved or the leave transition ended — whichever comes first. Both outcomes signal the Transition submodel that leave is complete. */
+export const DetectMovementOrTransitionEnd = Command.define('DetectMovementOrTransitionEnd', GotTransitionMessage);
 export const makeUpdate = (handleSelectedItem) => {
     const withUpdateReturn = M.withReturnType();
+    const delegateToTransition = (model, transitionMessage) => {
+        const [nextTransition, transitionCommands, maybeOutMessage] = transitionUpdate(model.transition, transitionMessage);
+        const mappedCommands = transitionCommands.map(Command.mapEffect(Effect.map(message => GotTransitionMessage({ message }))));
+        const additionalCommands = Option.match(maybeOutMessage, {
+            onNone: () => [],
+            onSome: M.type().pipe(M.tagsExhaustive({
+                StartedLeaveAnimating: () => [
+                    DetectMovementOrTransitionEnd(Effect.raceFirst(Task.detectElementMovement(buttonSelector(model.id)).pipe(Effect.as(GotTransitionMessage({
+                        message: TransitionEndedTransition(),
+                    }))), Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(GotTransitionMessage({
+                        message: TransitionEndedTransition(),
+                    }))))),
+                ],
+                TransitionedOut: () => [],
+            })),
+        });
+        return [
+            constrainedEvo(model, { transition: () => nextTransition }),
+            [...mappedCommands, ...additionalCommands],
+        ];
+    };
+    const openListbox = (baseModel, openCommands) => {
+        if (baseModel.isAnimated) {
+            const [nextModel, transitionCommands] = delegateToTransition(baseModel, TransitionShowed());
+            return [
+                constrainedEvo(nextModel, { isOpen: () => true }),
+                [...openCommands, ...transitionCommands],
+            ];
+        }
+        return [constrainedEvo(baseModel, { isOpen: () => true }), openCommands];
+    };
+    const closeListbox = (baseModel, commands) => {
+        const closed = closedModel(baseModel);
+        if (baseModel.isAnimated) {
+            const [nextModel, transitionCommands] = delegateToTransition(closed, TransitionHidden());
+            return [nextModel, [...commands, ...transitionCommands]];
+        }
+        return [closed, commands];
+    };
     return (model, message) => {
-        const maybeNextFrame = OptionExt.when(model.isAnimated, RequestFrame(Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame()))));
         const maybeLockScroll = OptionExt.when(model.isModal, LockScroll(Task.lockScroll.pipe(Effect.as(CompletedLockScroll()))));
         const maybeUnlockScroll = OptionExt.when(model.isModal, UnlockScroll(Task.unlockScroll.pipe(Effect.as(CompletedUnlockScroll()))));
         const maybeInertOthers = OptionExt.when(model.isModal, InertOthers(Task.inertOthers(model.id, [
@@ -169,45 +204,37 @@ export const makeUpdate = (handleSelectedItem) => {
         ]).pipe(Effect.as(CompletedSetupInert()))));
         const maybeRestoreInert = OptionExt.when(model.isModal, RestoreInert(Task.restoreInert(model.id).pipe(Effect.as(CompletedTeardownInert()))));
         const focusButton = FocusButton(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedFocusButton())));
+        const focusItems = FocusItems(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedFocusItems())));
+        const openCommands = [
+            focusItems,
+            ...Array.getSomes([maybeLockScroll, maybeInertOthers]),
+        ];
+        const closeWithFocusCommands = [
+            focusButton,
+            ...Array.getSomes([maybeUnlockScroll, maybeRestoreInert]),
+        ];
+        const closeWithoutFocusCommands = Array.getSomes([
+            maybeUnlockScroll,
+            maybeRestoreInert,
+        ]);
         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',
-                    }),
-                    searchQuery: () => '',
-                    searchVersion: () => 0,
-                    maybeLastPointerPosition: () => Option.none(),
-                });
-                return [
-                    nextModel,
-                    pipe(Array.getSomes([
-                        maybeNextFrame,
-                        maybeLockScroll,
-                        maybeInertOthers,
-                    ]), Array.prepend(FocusItems(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedFocusItems()))))),
-                ];
+            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),
+            ClosedByTab: () => {
+                if (Option.exists(model.maybeLastButtonPointerType, Equal.equals('mouse'))) {
+                    return [model, []];
+                }
+                return closeListbox(model, closeWithoutFocusCommands);
             },
-            Closed: () => [
-                closedModel(model),
-                pipe(Array.getSomes([
-                    maybeNextFrame,
-                    maybeUnlockScroll,
-                    maybeRestoreInert,
-                ]), Array.prepend(focusButton)),
-            ],
-            ClosedByTab: () => [
-                closedModel(model),
-                Array.getSomes([
-                    maybeNextFrame,
-                    maybeUnlockScroll,
-                    maybeRestoreInert,
-                ]),
-            ],
             ActivatedItem: ({ index, activationTrigger }) => [
                 constrainedEvo(model, {
                     maybeActiveItemIndex: () => Option.some(index),
@@ -242,10 +269,8 @@ export const makeUpdate = (handleSelectedItem) => {
                 ]
                 : [model, []],
             SelectedItem: ({ item }) => handleSelectedItem(model, item, {
-                focusButton,
-                maybeNextFrame,
-                maybeUnlockScroll,
-                maybeRestoreInert,
+                closeWithFocus: closeModel => closeListbox(closeModel, closeWithFocusCommands),
+                closeWithoutFocus: closeModel => closeListbox(closeModel, closeWithoutFocusCommands),
             }),
             RequestedItemClick: ({ index }) => [
                 model,
@@ -273,29 +298,7 @@ export const makeUpdate = (handleSelectedItem) => {
                 }
                 return [constrainedEvo(model, { searchQuery: () => '' }), []];
             },
-            AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
-                constrainedEvo(model, {
-                    transitionState: () => 'EnterAnimating',
-                }),
-                [
-                    WaitForTransitions(Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition()))),
-                ],
-            ]), M.when('LeaveStart', () => [
-                constrainedEvo(model, {
-                    transitionState: () => 'LeaveAnimating',
-                }),
-                [
-                    DetectMovementOrTransitionEnd(Effect.raceFirst(Task.detectElementMovement(buttonSelector(model.id)).pipe(Effect.as(DetectedButtonMovement())), 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, []])),
-            DetectedButtonMovement: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('LeaveAnimating', () => [
-                constrainedEvo(model, { transitionState: () => 'Idle' }),
-                [],
-            ]), M.orElse(() => [model, []])),
+            GotTransitionMessage: ({ message: transitionMessage }) => delegateToTransition(model, transitionMessage),
             PressedPointerOnButton: ({ pointerType, button }) => {
                 const withPointerType = constrainedEvo(model, {
                     maybeLastButtonPointerType: () => Option.some(pointerType),
@@ -304,32 +307,21 @@ export const makeUpdate = (handleSelectedItem) => {
                     return [withPointerType, []];
                 }
                 if (model.isOpen) {
+                    const [closed, commands] = closeListbox(withPointerType, closeWithFocusCommands);
                     return [
-                        closedModel(withPointerType),
-                        pipe(Array.getSomes([
-                            maybeNextFrame,
-                            maybeUnlockScroll,
-                            maybeRestoreInert,
-                        ]), Array.prepend(focusButton)),
+                        constrainedEvo(closed, {
+                            maybeLastButtonPointerType: () => Option.some(pointerType),
+                        }),
+                        commands,
                     ];
                 }
-                const nextModel = constrainedEvo(withPointerType, {
-                    isOpen: () => true,
-                    transitionState: () => model.isAnimated ? 'EnterStart' : 'Idle',
+                return openListbox(constrainedEvo(withPointerType, {
                     maybeActiveItemIndex: () => Option.none(),
                     activationTrigger: () => 'Pointer',
                     searchQuery: () => '',
                     searchVersion: () => 0,
                     maybeLastPointerPosition: () => Option.none(),
-                });
-                return [
-                    nextModel,
-                    pipe(Array.getSomes([
-                        maybeNextFrame,
-                        maybeLockScroll,
-                        maybeInertOthers,
-                    ]), Array.prepend(FocusItems(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedFocusItems()))))),
-                ];
+                }), openCommands);
             },
             CompletedLockScroll: () => [model, []],
             CompletedUnlockScroll: () => [model, []],
@@ -339,14 +331,19 @@ export const makeUpdate = (handleSelectedItem) => {
             CompletedFocusItems: () => [model, []],
             CompletedScrollIntoView: () => [model, []],
             CompletedClickItem: () => [model, []],
-            IgnoredMouseClick: () => [model, []],
+            IgnoredMouseClick: () => [
+                constrainedEvo(model, {
+                    maybeLastButtonPointerType: () => Option.none(),
+                }),
+                [],
+            ],
             SuppressedSpaceScroll: () => [model, []],
         }));
     };
 };
 export const makeView = (behavior) => (config) => {
     const { div, input, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaHasPopup, AriaLabelledBy, AriaMultiSelectable, AriaOrientation, AriaSelected, Attribute, Class, DataAttribute, Id, Name, OnBlur, OnClick, OnDestroy, OnInsert, OnKeyDownPreventDefault, OnKeyUpPreventDefault, OnPointerDown, OnPointerLeave, OnPointerMove, Role, Style, Tabindex, Type, Value, keyed, } = html();
-    const { model: { id, isOpen, orientation, transitionState, maybeActiveItemIndex, searchQuery, maybeLastButtonPointerType, }, toParentMessage, onSelectedItem, items, itemToConfig, isItemDisabled, isButtonDisabled, buttonContent, buttonClassName, buttonAttributes = [], itemsClassName, itemsAttributes = [], itemsScrollClassName, itemsScrollAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], itemGroupKey, groupToHeading, groupClassName, groupAttributes = [], separatorClassName, separatorAttributes = [], anchor, name, form, isDisabled, isInvalid, } = config;
+    const { model: { id, isOpen, orientation, transition: { transitionState }, maybeActiveItemIndex, searchQuery, maybeLastButtonPointerType, }, toParentMessage, onSelectedItem, items, itemToConfig, isItemDisabled, isButtonDisabled, buttonContent, buttonClassName, buttonAttributes = [], itemsClassName, itemsAttributes = [], itemsScrollClassName, itemsScrollAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], itemGroupKey, groupToHeading, groupClassName, groupAttributes = [], separatorClassName, separatorAttributes = [], anchor, name, form, isDisabled, isInvalid, } = config;
     const itemToValue = config.itemToValue ?? (item => String(item));
     const itemToSearchText = config.itemToSearchText ?? (item => itemToValue(item));
     const dispatchSelectedItem = (value) => onSelectedItem
@@ -442,7 +439,12 @@ export const makeView = (behavior) => (config) => {
                 OnKeyUpPreventDefault(handleSpaceKeyUp),
                 OnClick(handleButtonClick()),
             ]),
-        ...(isVisible ? [DataAttribute('open', '')] : []),
+        ...(isVisible
+            ? [
+                DataAttribute('open', ''),
+                Style({ position: 'relative', zIndex: '1' }),
+            ]
+            : []),
         ...(isInvalid ? [DataAttribute('invalid', '')] : []),
         ...(buttonClassName ? [Class(buttonClassName)] : []),
         ...buttonAttributes,

package/dist/ui/listbox/single.d.ts

@@ -9,7 +9,11 @@ export declare const Model: S.extend<S.Struct<{
     isAnimated: typeof S.Boolean;
     isModal: typeof S.Boolean;
     orientation: S.Literal<["Vertical", "Horizontal"]>;
-    transitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+    transition: S.Struct<{
+        id: typeof S.String;
+        isShowing: typeof S.Boolean;
+        transitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+    }>;
     maybeActiveItemIndex: S.OptionFromSelf<typeof S.Number>;
     activationTrigger: S.Literal<["Pointer", "Keyboard"]>;
     searchQuery: typeof S.String;
@@ -36,7 +40,11 @@ export declare const update: (model: {
     readonly isAnimated: boolean;
     readonly isModal: boolean;
     readonly orientation: "Vertical" | "Horizontal";
-    readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
+    readonly transition: {
+        readonly id: string;
+        readonly isShowing: boolean;
+        readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
+    };
     readonly maybeActiveItemIndex: Option.Option<number>;
     readonly activationTrigger: "Pointer" | "Keyboard";
     readonly searchQuery: string;
@@ -54,7 +62,11 @@ export declare const update: (model: {
     readonly isAnimated: boolean;
     readonly isModal: boolean;
     readonly orientation: "Vertical" | "Horizontal";
-    readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
+    readonly transition: {
+        readonly id: string;
+        readonly isShowing: boolean;
+        readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
+    };
     readonly maybeActiveItemIndex: Option.Option<number>;
     readonly activationTrigger: "Pointer" | "Keyboard";
     readonly searchQuery: string;
@@ -120,11 +132,16 @@ export declare const update: (model: {
     } | {
         readonly _tag: "SuppressedSpaceScroll";
     } | {
-        readonly _tag: "AdvancedTransitionFrame";
-    } | {
-        readonly _tag: "EndedTransition";
-    } | {
-        readonly _tag: "DetectedButtonMovement";
+        readonly _tag: "GotTransitionMessage";
+        readonly message: {
+            readonly _tag: "Showed";
+        } | {
+            readonly _tag: "Hidden";
+        } | {
+            readonly _tag: "AdvancedTransitionFrame";
+        } | {
+            readonly _tag: "EndedTransition";
+        };
     } | {
         readonly _tag: "PressedPointerOnButton";
         readonly button: number;
@@ -144,7 +161,11 @@ export declare const view: <Message, Item>(config: Readonly<{
         readonly isAnimated: boolean;
         readonly isModal: boolean;
         readonly orientation: "Vertical" | "Horizontal";
-        readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
+        readonly transition: {
+            readonly id: string;
+            readonly isShowing: boolean;
+            readonly transitionState: "Idle" | "EnterStart" | "EnterAnimating" | "LeaveStart" | "LeaveAnimating";
+        };
         readonly maybeActiveItemIndex: Option.Option<number>;
         readonly activationTrigger: "Pointer" | "Keyboard";
         readonly searchQuery: string;

package/dist/ui/listbox/single.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"single.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/single.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,IAAI,CAAC,EAAQ,MAAM,QAAQ,CAAA;AAEzD,OAAO,KAAK,KAAK,OAAO,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,YAAY,CAAA;AAElD,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EACnB,KAAK,OAAO,EACZ,YAAY,EAKb,MAAM,UAAU,CAAA;AAIjB,mJAAmJ;AACnJ,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;GAEjB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,6RAA6R;AAC7R,MAAM,MAAM,UAAU,GAAG,cAAc,GACrC,QAAQ,CAAC;IACP,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAC,CAAA;AAEJ,6HAA6H;AAC7H,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAIF,qIAAqI;AACrI,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAYjB,CAAA;AAEF;gGACgG;AAChG,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,EACZ,MAAM,MAAM,KACX,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CACpB,CAAA;AAIvC,uEAAuE;AACvE,MAAM,MAAM,UAAU,CAAC,OAAO,EAAE,IAAI,IAAI,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;AAE5E,2JAA2J;AAC3J,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAWf,CAAA;AAEF;mFACmF;AACnF,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,IAAI,EAChC,cAAc,IAAI,CAChB,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EACzB,OAAO,GAAG,iBAAiB,GAAG,gBAAgB,CAC/C,KACA,CAAC,CACF,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,iBAAiB,CAAC,KACrE,IAAI,CAoBR,CAAA"}
+{"version":3,"file":"single.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/single.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEnD,OAAO,KAAK,KAAK,OAAO,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,YAAY,CAAA;AAElD,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EACnB,KAAK,OAAO,EACZ,YAAY,EAIb,MAAM,UAAU,CAAA;AAIjB,mJAAmJ;AACnJ,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;GAEjB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,6RAA6R;AAC7R,MAAM,MAAM,UAAU,GAAG,cAAc,GACrC,QAAQ,CAAC;IACP,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAC,CAAA;AAEJ,6HAA6H;AAC7H,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAIF,qIAAqI;AACrI,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAMjB,CAAA;AAEF;gGACgG;AAChG,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,EACZ,MAAM,MAAM,KACX,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CACpB,CAAA;AAIvC,uEAAuE;AACvE,MAAM,MAAM,UAAU,CAAC,OAAO,EAAE,IAAI,IAAI,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;AAE5E,2JAA2J;AAC3J,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAWf,CAAA;AAEF;mFACmF;AACnF,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,IAAI,EAChC,cAAc,IAAI,CAChB,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EACzB,OAAO,GAAG,iBAAiB,GAAG,gBAAgB,CAC/C,KACA,CAAC,CACF,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,iBAAiB,CAAC,KACrE,IAAI,CAoBR,CAAA"}

package/dist/ui/listbox/single.js

@@ -1,7 +1,7 @@
-import { Array, Option, Schema as S, pipe } from 'effect';
+import { Array, Option, Schema as S } from 'effect';
 import { createLazy } from '../../html';
 import { evo } from '../../struct';
-import { BaseModel, SelectedItem, baseInit, closedModel, makeUpdate, makeView, } from './shared';
+import { BaseModel, SelectedItem, baseInit, makeUpdate, makeView, } from './shared';
 // MODEL
 /** Schema for the listbox component's state, tracking open/closed status, active item, selected item, activation trigger, and typeahead search. */
 export const Model = BaseModel.pipe(S.extend(S.Struct({ maybeSelectedItem: S.OptionFromSelf(S.String) })));
@@ -12,16 +12,13 @@ export const init = (config) => ({
 });
 // UPDATE
 /** Processes a listbox message and returns the next model and commands. Closes the listbox on selection (single-select behavior). */
-export const update = makeUpdate((model, item, context) => [
-    evo(closedModel(model), {
-        maybeSelectedItem: () => Option.some(item),
-    }),
-    pipe(Array.getSomes([
-        context.maybeNextFrame,
-        context.maybeUnlockScroll,
-        context.maybeRestoreInert,
-    ]), Array.prepend(context.focusButton)),
-]);
+export const update = makeUpdate((model, item, context) => {
+    const [closedModelResult, commands] = context.closeWithFocus(model);
+    return [
+        evo(closedModelResult, { maybeSelectedItem: () => Option.some(item) }),
+        commands,
+    ];
+});
 /** Programmatically selects an item in the single-select listbox, closing the listbox and returning
  *  focus commands. Use this in domain-event handlers when the listbox uses `onSelectedItem`. */
 export const selectItem = (model, item) => update(model, SelectedItem({ item }));