foldkit 0.18.0 → 0.20.0

package/dist/ui/menu/index.js

@@ -1,162 +1,320 @@
-import { Array, Match as M, Option, Schema as S, String as Str, pipe, } from 'effect';
+import { Array, Effect, Match as M, Option, Schema as S, String as Str, pipe, } from 'effect';
+import { OptionExt } from '../../effectExtensions';
 import { html } from '../../html';
-import { ts } from '../../schema';
+import { m } from '../../message';
 import { evo } from '../../struct';
 import * as Task from '../../task';
 import { findFirstEnabledIndex, keyToIndex, wrapIndex } from '../keyboard';
 // MODEL
 /** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
 export const ActivationTrigger = S.Literal('Pointer', 'Keyboard');
+/** Schema for the transition animation state, tracking enter/leave phases for CSS transition coordination. */
+export const TransitionState = S.Literal('Idle', 'EnterStart', 'EnterAnimating', 'LeaveStart', 'LeaveAnimating');
+const PointerOrigin = S.Struct({
+    screenX: S.Number,
+    screenY: S.Number,
+    timeStamp: S.Number,
+});
 /** Schema for the menu component's state, tracking open/closed status, active item, activation trigger, and typeahead search. */
 export const Model = S.Struct({
     id: S.String,
     isOpen: S.Boolean,
+    isAnimated: S.Boolean,
+    isModal: S.Boolean,
+    transitionState: TransitionState,
     maybeActiveItemIndex: S.OptionFromSelf(S.Number),
     activationTrigger: ActivationTrigger,
     searchQuery: S.String,
     searchVersion: S.Number,
     maybeLastPointerPosition: S.OptionFromSelf(S.Struct({ screenX: S.Number, screenY: S.Number })),
+    maybeLastButtonPointerType: S.OptionFromSelf(S.String),
+    maybePointerOrigin: S.OptionFromSelf(PointerOrigin),
 });
 // MESSAGE
 /** Sent when the menu opens via button click or keyboard. Contains an optional initial active item index — None for pointer, Some for keyboard. */
-export const Opened = ts('Opened', {
+export const Opened = m('Opened', {
     maybeActiveItemIndex: S.OptionFromSelf(S.Number),
 });
 /** Sent when the menu closes via Escape key or backdrop click. */
-export const Closed = ts('Closed');
+export const Closed = m('Closed');
 /** Sent when focus leaves the menu items container via Tab key. */
-export const ClosedByTab = ts('ClosedByTab');
+export const ClosedByTab = m('ClosedByTab');
 /** Sent when an item is highlighted via arrow keys or mouse hover. Includes activation trigger. */
-export const ItemActivated = ts('ItemActivated', {
+export const ActivatedItem = m('ActivatedItem', {
     index: S.Number,
     activationTrigger: ActivationTrigger,
 });
 /** Sent when the mouse leaves an enabled item. */
-export const ItemDeactivated = ts('ItemDeactivated');
+export const DeactivatedItem = m('DeactivatedItem');
 /** Sent when an item is selected via Enter, Space, or click. */
-export const ItemSelected = ts('ItemSelected', { index: S.Number });
+export const SelectedItem = m('SelectedItem', { index: S.Number });
+/** Sent when Enter or Space is pressed on the active item, triggering a programmatic click on the DOM element. */
+export const RequestedItemClick = m('RequestedItemClick', {
+    index: S.Number,
+});
 /** Sent when a printable character is typed for typeahead search. */
-export const Searched = ts('Searched', {
+export const Searched = m('Searched', {
     key: S.String,
     maybeTargetIndex: S.OptionFromSelf(S.Number),
 });
 /** Sent after the search debounce period to clear the accumulated query. */
-export const SearchCleared = ts('SearchCleared', { version: S.Number });
+export const ClearedSearch = m('ClearedSearch', { version: S.Number });
 /** Sent when the pointer moves over a menu item, carrying screen coordinates for tracked-pointer comparison. */
-export const PointerMovedOverItem = ts('PointerMovedOverItem', {
+export const MovedPointerOverItem = m('MovedPointerOverItem', {
     index: S.Number,
     screenX: S.Number,
     screenY: S.Number,
 });
 /** Placeholder message used when no action is needed. */
-export const NoOp = ts('NoOp');
+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 menu items container have completed. */
+export const EndedTransition = m('EndedTransition');
+/** Sent when the user presses a pointer device on the menu button. Records pointer type and toggles for mouse. */
+export const PressedPointerOnButton = m('PressedPointerOnButton', {
+    pointerType: S.String,
+    button: S.Number,
+    screenX: S.Number,
+    screenY: S.Number,
+    timeStamp: S.Number,
+});
+/** Sent when the user releases a pointer on the items container, enabling drag-to-select for mouse. */
+export const ReleasedPointerOnItems = m('ReleasedPointerOnItems', {
+    screenX: S.Number,
+    screenY: S.Number,
+    timeStamp: S.Number,
+});
 /** Union of all messages the menu component can produce. */
-export const Message = S.Union(Opened, Closed, ClosedByTab, ItemActivated, ItemDeactivated, ItemSelected, PointerMovedOverItem, Searched, SearchCleared, NoOp);
+export const Message = S.Union(Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, NoOp, AdvancedTransitionFrame, EndedTransition, PressedPointerOnButton, ReleasedPointerOnItems);
 // INIT
 const SEARCH_DEBOUNCE_MILLISECONDS = 350;
+const POINTER_HOLD_THRESHOLD_MILLISECONDS = 200;
+const POINTER_MOVEMENT_THRESHOLD_PIXELS = 5;
 /** Creates an initial menu model from a config. Defaults to closed with no active item. */
 export const init = (config) => ({
     id: config.id,
     isOpen: false,
+    isAnimated: config.isAnimated ?? false,
+    isModal: config.isModal ?? true,
+    transitionState: 'Idle',
     maybeActiveItemIndex: Option.none(),
     activationTrigger: 'Keyboard',
     searchQuery: '',
     searchVersion: 0,
     maybeLastPointerPosition: Option.none(),
+    maybeLastButtonPointerType: Option.none(),
+    maybePointerOrigin: Option.none(),
 });
 // UPDATE
 const closedModel = (model) => evo(model, {
     isOpen: () => false,
+    transitionState: () => (model.isAnimated ? 'LeaveStart' : 'Idle'),
     maybeActiveItemIndex: () => Option.none(),
     activationTrigger: () => 'Keyboard',
     searchQuery: () => '',
     searchVersion: () => 0,
     maybeLastPointerPosition: () => Option.none(),
+    maybeLastButtonPointerType: () => Option.none(),
+    maybePointerOrigin: () => Option.none(),
 });
 const buttonSelector = (id) => `#${id}-button`;
 const itemsSelector = (id) => `#${id}-items`;
 const itemSelector = (id, index) => `#${id}-item-${index}`;
 /** Processes a menu message and returns the next model and commands. */
-export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
-    Opened: ({ maybeActiveItemIndex }) => [
-        evo(model, {
-            isOpen: () => true,
-            maybeActiveItemIndex: () => maybeActiveItemIndex,
-            activationTrigger: () => Option.match(maybeActiveItemIndex, {
-                onNone: () => 'Pointer',
-                onSome: () => 'Keyboard',
-            }),
-            searchQuery: () => '',
-            searchVersion: () => 0,
-            maybeLastPointerPosition: () => Option.none(),
-        }),
-        [Task.focus(itemsSelector(model.id), () => NoOp())],
-    ],
-    Closed: () => [
-        closedModel(model),
-        [Task.focus(buttonSelector(model.id), () => NoOp())],
-    ],
-    ClosedByTab: () => [closedModel(model), []],
-    ItemActivated: ({ index, activationTrigger }) => [
-        evo(model, {
-            maybeActiveItemIndex: () => Option.some(index),
-            activationTrigger: () => activationTrigger,
-        }),
-        activationTrigger === 'Keyboard'
-            ? [Task.scrollIntoView(itemSelector(model.id, index), () => NoOp())]
-            : [],
-    ],
-    PointerMovedOverItem: ({ index, screenX, screenY }) => {
-        const isSamePosition = Option.exists(model.maybeLastPointerPosition, (position) => position.screenX === screenX && position.screenY === screenY);
-        if (isSamePosition) {
-            return [model, []];
-        }
-        return [
+export const update = (model, message) => {
+    const maybeNextFrameCommand = OptionExt.when(model.isAnimated, Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame())));
+    const maybeLockScrollCommand = OptionExt.when(model.isModal, Task.lockScroll.pipe(Effect.as(NoOp())));
+    const maybeUnlockScrollCommand = OptionExt.when(model.isModal, Task.unlockScroll.pipe(Effect.as(NoOp())));
+    const maybeInertOthersCommand = OptionExt.when(model.isModal, Task.inertOthers(model.id, [
+        buttonSelector(model.id),
+        itemsSelector(model.id),
+    ]).pipe(Effect.as(NoOp())));
+    const maybeRestoreInertCommand = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(NoOp())));
+    return M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
+        Opened: ({ maybeActiveItemIndex }) => {
+            const nextModel = evo(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([
+                    maybeNextFrameCommand,
+                    maybeLockScrollCommand,
+                    maybeInertOthersCommand,
+                ]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+            ];
+        },
+        Closed: () => [
+            closedModel(model),
+            pipe(Array.getSomes([
+                maybeNextFrameCommand,
+                maybeUnlockScrollCommand,
+                maybeRestoreInertCommand,
+            ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+        ],
+        ClosedByTab: () => [
+            closedModel(model),
+            Array.getSomes([
+                maybeNextFrameCommand,
+                maybeUnlockScrollCommand,
+                maybeRestoreInertCommand,
+            ]),
+        ],
+        ActivatedItem: ({ index, activationTrigger }) => [
             evo(model, {
                 maybeActiveItemIndex: () => Option.some(index),
-                activationTrigger: () => 'Pointer',
-                maybeLastPointerPosition: () => Option.some({ screenX, screenY }),
-            }),
-            [],
-        ];
-    },
-    ItemDeactivated: () => model.activationTrigger === 'Pointer'
-        ? [evo(model, { maybeActiveItemIndex: () => Option.none() }), []]
-        : [model, []],
-    ItemSelected: () => [
-        closedModel(model),
-        [Task.focus(buttonSelector(model.id), () => NoOp())],
-    ],
-    Searched: ({ key, maybeTargetIndex }) => {
-        const nextSearchQuery = model.searchQuery + key;
-        const nextSearchVersion = model.searchVersion + 1;
-        return [
-            evo(model, {
-                searchQuery: () => nextSearchQuery,
-                searchVersion: () => nextSearchVersion,
-                maybeActiveItemIndex: () => Option.orElse(maybeTargetIndex, () => model.maybeActiveItemIndex),
+                activationTrigger: () => activationTrigger,
             }),
+            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 [
+                evo(model, {
+                    maybeActiveItemIndex: () => Option.some(index),
+                    activationTrigger: () => 'Pointer',
+                    maybeLastPointerPosition: () => Option.some({ screenX, screenY }),
+                }),
+                [],
+            ];
+        },
+        DeactivatedItem: () => model.activationTrigger === 'Pointer'
+            ? [evo(model, { maybeActiveItemIndex: () => Option.none() }), []]
+            : [model, []],
+        SelectedItem: () => [
+            closedModel(model),
+            pipe(Array.getSomes([
+                maybeNextFrameCommand,
+                maybeUnlockScrollCommand,
+                maybeRestoreInertCommand,
+            ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+        ],
+        RequestedItemClick: ({ index }) => [
+            model,
             [
-                Task.delay(SEARCH_DEBOUNCE_MILLISECONDS, () => SearchCleared({ version: nextSearchVersion })),
+                Task.clickElement(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
             ],
-        ];
-    },
-    SearchCleared: ({ version }) => {
-        if (version !== model.searchVersion) {
-            return [model, []];
-        }
-        return [evo(model, { searchQuery: () => '' }), []];
-    },
-    NoOp: () => [model, []],
-}));
+        ],
+        Searched: ({ key, maybeTargetIndex }) => {
+            const nextSearchQuery = model.searchQuery + key;
+            const nextSearchVersion = model.searchVersion + 1;
+            return [
+                evo(model, {
+                    searchQuery: () => nextSearchQuery,
+                    searchVersion: () => nextSearchVersion,
+                    maybeActiveItemIndex: () => Option.orElse(maybeTargetIndex, () => model.maybeActiveItemIndex),
+                }),
+                [
+                    Task.delay(SEARCH_DEBOUNCE_MILLISECONDS).pipe(Effect.as(ClearedSearch({ version: nextSearchVersion }))),
+                ],
+            ];
+        },
+        ClearedSearch: ({ version }) => {
+            if (version !== model.searchVersion) {
+                return [model, []];
+            }
+            return [evo(model, { searchQuery: () => '' }), []];
+        },
+        AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(M.withReturnType(), M.when('EnterStart', () => [
+            evo(model, { transitionState: () => 'EnterAnimating' }),
+            [
+                Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition())),
+            ],
+        ]), M.when('LeaveStart', () => [
+            evo(model, { transitionState: () => 'LeaveAnimating' }),
+            [
+                Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition())),
+            ],
+        ]), M.orElse(() => [model, []])),
+        EndedTransition: () => M.value(model.transitionState).pipe(M.withReturnType(), M.whenOr('EnterAnimating', 'LeaveAnimating', () => [
+            evo(model, { transitionState: () => 'Idle' }),
+            [],
+        ]), M.orElse(() => [model, []])),
+        PressedPointerOnButton: ({ pointerType, button, screenX, screenY, timeStamp, }) => {
+            const withPointerType = evo(model, {
+                maybeLastButtonPointerType: () => Option.some(pointerType),
+            });
+            if (pointerType !== 'mouse' || button !== 0) {
+                return [withPointerType, []];
+            }
+            if (model.isOpen) {
+                return [
+                    closedModel(withPointerType),
+                    pipe(Array.getSomes([
+                        maybeNextFrameCommand,
+                        maybeUnlockScrollCommand,
+                        maybeRestoreInertCommand,
+                    ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+                ];
+            }
+            const nextModel = evo(withPointerType, {
+                isOpen: () => true,
+                transitionState: () => (model.isAnimated ? 'EnterStart' : 'Idle'),
+                maybeActiveItemIndex: () => Option.none(),
+                activationTrigger: () => 'Pointer',
+                searchQuery: () => '',
+                searchVersion: () => 0,
+                maybeLastPointerPosition: () => Option.none(),
+                maybePointerOrigin: () => Option.some({ screenX, screenY, timeStamp }),
+            });
+            return [
+                nextModel,
+                pipe(Array.getSomes([
+                    maybeNextFrameCommand,
+                    maybeLockScrollCommand,
+                    maybeInertOthersCommand,
+                ]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+            ];
+        },
+        ReleasedPointerOnItems: ({ screenX, screenY, timeStamp }) => {
+            const hasNoOrigin = Option.isNone(model.maybePointerOrigin);
+            const hasNoActiveItem = Option.isNone(model.maybeActiveItemIndex);
+            const isMovementBelowThreshold = Option.exists(model.maybePointerOrigin, origin => Math.abs(screenX - origin.screenX) <
+                POINTER_MOVEMENT_THRESHOLD_PIXELS &&
+                Math.abs(screenY - origin.screenY) <
+                    POINTER_MOVEMENT_THRESHOLD_PIXELS);
+            const isHoldTimeBelowThreshold = Option.exists(model.maybePointerOrigin, origin => timeStamp - origin.timeStamp < POINTER_HOLD_THRESHOLD_MILLISECONDS);
+            if (hasNoOrigin ||
+                isMovementBelowThreshold ||
+                isHoldTimeBelowThreshold ||
+                hasNoActiveItem) {
+                return [model, []];
+            }
+            return [
+                model,
+                [
+                    Task.clickElement(itemSelector(model.id, model.maybeActiveItemIndex.value)).pipe(Effect.ignore, Effect.as(NoOp())),
+                ],
+            ];
+        },
+        NoOp: () => [model, []],
+    }));
+};
 export const groupContiguous = (items, toKey) => {
     const tagged = Array.map(items, (item, index) => ({
         key: toKey(item, index),
         item,
     }));
-    return Array.chop(tagged, (nonEmpty) => {
+    return Array.chop(tagged, nonEmpty => {
         const key = Array.headNonEmpty(nonEmpty).key;
-        const [matching, rest] = Array.span(nonEmpty, (tagged) => tagged.key === key);
+        const [matching, rest] = Array.span(nonEmpty, tagged => tagged.key === key);
         return [{ key, items: Array.map(matching, ({ item }) => item) }, rest];
     });
 };
@@ -167,18 +325,35 @@ export const resolveTypeaheadMatch = (items, query, maybeActiveItemIndex, isDisa
     const offset = isRefinement ? 0 : 1;
     const startIndex = Option.match(maybeActiveItemIndex, {
         onNone: () => 0,
-        onSome: (index) => index + offset,
+        onSome: index => index + offset,
     });
     const isEnabledMatch = (index) => !isDisabled(index) &&
-        pipe(items, Array.get(index), Option.exists((item) => pipe(itemToSearchText(item, index), Str.toLowerCase, Str.startsWith(lowerQuery))));
-    return pipe(items.length, Array.makeBy((step) => wrapIndex(startIndex + step, items.length)), Array.findFirst(isEnabledMatch));
+        pipe(items, Array.get(index), Option.exists(item => pipe(itemToSearchText(item, index), Str.toLowerCase, Str.startsWith(lowerQuery))));
+    return pipe(items.length, Array.makeBy(step => wrapIndex(startIndex + step, items.length)), Array.findFirst(isEnabledMatch));
 };
 /** Renders a headless menu with typeahead search, keyboard navigation, and aria-activedescendant focus management. */
 export const view = (config) => {
-    const { div, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaHasPopup, AriaLabelledBy, Class, DataAttribute, Id, OnBlur, OnClick, OnKeyDownPreventDefault, OnMouseLeave, OnPointerMove, Role, Tabindex, Type, keyed, } = html();
-    const { model: { id, isOpen, maybeActiveItemIndex, searchQuery }, toMessage, items, itemToConfig, isItemDisabled, itemToSearchText = (item) => item, isButtonDisabled, buttonContent, buttonClassName, itemsClassName, backdropClassName, className, itemGroupKey, groupToHeading, groupClassName, separatorClassName, } = config;
+    const { div, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaHasPopup, AriaLabelledBy, Class, DataAttribute, Id, OnBlur, OnClick, OnKeyDownPreventDefault, OnKeyUpPreventDefault, OnPointerDown, OnPointerLeave, OnPointerMove, OnPointerUp, Role, Tabindex, Type, keyed, } = html();
+    const { model: { id, isOpen, transitionState, maybeActiveItemIndex, searchQuery, maybeLastButtonPointerType, }, toMessage, items, itemToConfig, isItemDisabled, itemToSearchText = (item) => item, isButtonDisabled, buttonContent, buttonClassName, itemsClassName, backdropClassName, className, itemGroupKey, groupToHeading, groupClassName, separatorClassName, } = 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 isDisabled = (index) => !!isItemDisabled &&
-        pipe(items, Array.get(index), Option.exists((item) => isItemDisabled(item, index)));
+        pipe(items, Array.get(index), Option.exists(item => isItemDisabled(item, index)));
     const firstEnabledIndex = findFirstEnabledIndex(items.length, 0, isDisabled)(0, 1);
     const lastEnabledIndex = findFirstEnabledIndex(items.length, 0, isDisabled)(items.length - 1, -1);
     const handleButtonKeyDown = (key) => M.value(key).pipe(M.whenOr('Enter', ' ', 'ArrowDown', () => Option.some(toMessage(Opened({
@@ -186,36 +361,59 @@ export const view = (config) => {
     })))), M.when('ArrowUp', () => Option.some(toMessage(Opened({
         maybeActiveItemIndex: Option.some(lastEnabledIndex),
     })))), M.orElse(() => Option.none()));
-    const handleButtonClick = () => isOpen
-        ? toMessage(Closed())
-        : toMessage(Opened({ maybeActiveItemIndex: Option.none() }));
+    const handleButtonPointerDown = (pointerType, button, screenX, screenY, timeStamp) => Option.some(toMessage(PressedPointerOnButton({
+        pointerType,
+        button,
+        screenX,
+        screenY,
+        timeStamp,
+    })));
+    const handleButtonClick = () => {
+        const isMouse = Option.exists(maybeLastButtonPointerType, type => type === 'mouse');
+        if (isMouse) {
+            return toMessage(NoOp());
+        }
+        else if (isOpen) {
+            return toMessage(Closed());
+        }
+        else {
+            return toMessage(Opened({ maybeActiveItemIndex: Option.none() }));
+        }
+    };
+    const handleSpaceKeyUp = (key) => OptionExt.when(key === ' ', toMessage(NoOp()));
     const resolveActiveIndex = keyToIndex('ArrowDown', 'ArrowUp', items.length, Option.getOrElse(maybeActiveItemIndex, () => 0), isDisabled);
-    const handleItemsKeyDown = (key) => M.value(key).pipe(M.when('Escape', () => Option.some(toMessage(Closed()))), M.whenOr('Enter', ' ', () => Option.map(maybeActiveItemIndex, (index) => toMessage(ItemSelected({ index })))), M.whenOr('ArrowDown', 'ArrowUp', 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(toMessage(ItemActivated({
-        index: resolveActiveIndex(key),
-        activationTrigger: 'Keyboard',
-    })))), M.when((key) => key.length === 1, () => {
+    const searchForKey = (key) => {
         const nextQuery = searchQuery + key;
         const maybeTargetIndex = resolveTypeaheadMatch(items, nextQuery, maybeActiveItemIndex, isDisabled, itemToSearchText, Str.isNonEmpty(searchQuery));
         return Option.some(toMessage(Searched({ key, maybeTargetIndex })));
-    }), M.orElse(() => Option.none()));
+    };
+    const handleItemsKeyDown = (key) => M.value(key).pipe(M.when('Escape', () => Option.some(toMessage(Closed()))), M.when('Enter', () => Option.map(maybeActiveItemIndex, index => toMessage(RequestedItemClick({ index })))), M.when(' ', () => Str.isNonEmpty(searchQuery)
+        ? searchForKey(' ')
+        : Option.map(maybeActiveItemIndex, index => toMessage(RequestedItemClick({ index })))), M.whenOr('ArrowDown', 'ArrowUp', 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(toMessage(ActivatedItem({
+        index: resolveActiveIndex(key),
+        activationTrigger: 'Keyboard',
+    })))), M.when(key => key.length === 1, () => searchForKey(key)), M.orElse(() => Option.none()));
+    const handleItemsPointerUp = (screenX, screenY, pointerType, timeStamp) => OptionExt.when(pointerType === 'mouse', toMessage(ReleasedPointerOnItems({ screenX, screenY, timeStamp })));
     const buttonAttributes = [
         Id(`${id}-button`),
         Type('button'),
         Class(buttonClassName),
         AriaHasPopup('menu'),
-        AriaExpanded(isOpen),
+        AriaExpanded(isVisible),
         AriaControls(`${id}-items`),
         ...(isButtonDisabled
             ? [AriaDisabled(true), DataAttribute('disabled', '')]
             : [
+                OnPointerDown(handleButtonPointerDown),
                 OnKeyDownPreventDefault(handleButtonKeyDown),
+                OnKeyUpPreventDefault(handleSpaceKeyUp),
                 OnClick(handleButtonClick()),
             ]),
-        ...(isOpen ? [DataAttribute('open', '')] : []),
+        ...(isVisible ? [DataAttribute('open', '')] : []),
     ];
     const maybeActiveDescendant = Option.match(maybeActiveItemIndex, {
         onNone: () => [],
-        onSome: (index) => [AriaActiveDescendant(itemId(id, index))],
+        onSome: index => [AriaActiveDescendant(itemId(id, index))],
     });
     const itemsContainerAttributes = [
         Id(`${id}-items`),
@@ -224,16 +422,24 @@ export const view = (config) => {
         ...maybeActiveDescendant,
         Tabindex(0),
         Class(itemsClassName),
-        OnKeyDownPreventDefault(handleItemsKeyDown),
-        OnBlur(toMessage(ClosedByTab())),
+        ...transitionAttributes,
+        ...(isLeaving
+            ? []
+            : [
+                OnKeyDownPreventDefault(handleItemsKeyDown),
+                OnKeyUpPreventDefault(handleSpaceKeyUp),
+                OnPointerUp(handleItemsPointerUp),
+                OnBlur(toMessage(ClosedByTab())),
+            ]),
     ];
     const menuItems = Array.map(items, (item, index) => {
-        const isActiveItem = Option.exists(maybeActiveItemIndex, (activeIndex) => activeIndex === index);
+        const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
         const isDisabledItem = isDisabled(index);
         const itemConfig = itemToConfig(item, {
             isActive: isActiveItem,
             isDisabled: isDisabledItem,
         });
+        const isInteractive = !isDisabledItem && !isLeaving;
         return keyed('div')(itemId(id, index), [
             Id(itemId(id, index)),
             Role('menuitem'),
@@ -242,11 +448,14 @@ export const view = (config) => {
             ...(isActiveItem ? [DataAttribute('active', '')] : []),
             ...(isDisabledItem
                 ? [AriaDisabled(true), DataAttribute('disabled', '')]
-                : [
-                    OnClick(toMessage(ItemSelected({ index }))),
-                    OnPointerMove((screenX, screenY) => toMessage(PointerMovedOverItem({ index, screenX, screenY }))),
-                    OnMouseLeave(toMessage(ItemDeactivated())),
-                ]),
+                : []),
+            ...(isInteractive
+                ? [
+                    OnClick(toMessage(SelectedItem({ 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 = () => {
@@ -255,14 +464,14 @@ export const view = (config) => {
         }
         const segments = groupContiguous(menuItems, (_, index) => Array.get(items, index).pipe(Option.match({
             onNone: () => '',
-            onSome: (item) => itemGroupKey(item, index),
+            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) => [
+                onSome: heading => [
                     keyed('div')(headingId, [Id(headingId), Role('presentation'), Class(heading.className)], [heading.content]),
                 ],
             });
@@ -280,18 +489,21 @@ export const view = (config) => {
             return [...separator, groupElement];
         });
     };
-    const backdrop = keyed('div')(`${id}-backdrop`, [Class(backdropClassName), OnClick(toMessage(Closed()))], []);
+    const backdrop = keyed('div')(`${id}-backdrop`, [
+        Class(backdropClassName),
+        ...(isLeaving ? [] : [OnClick(toMessage(Closed()))]),
+    ], []);
     const renderedItems = renderGroupedItems();
-    const openContent = [
+    const visibleContent = [
         backdrop,
         keyed('div')(`${id}-items-container`, itemsContainerAttributes, renderedItems),
     ];
     const wrapperAttributes = [
         ...(className ? [Class(className)] : []),
-        ...(isOpen ? [DataAttribute('open', '')] : []),
+        ...(isVisible ? [DataAttribute('open', '')] : []),
     ];
     return div(wrapperAttributes, [
         keyed('button')(`${id}-button`, buttonAttributes, [buttonContent]),
-        ...(isOpen ? openContent : []),
+        ...(isVisible ? visibleContent : []),
     ]);
 };

package/dist/ui/menu/public.d.ts

@@ -1,3 +1,3 @@
-export { init, update, view, Model, Message } from './index';
-export type { ActivationTrigger, Opened, Closed, ClosedByTab, ItemActivated, ItemDeactivated, ItemSelected, PointerMovedOverItem, Searched, SearchCleared, NoOp, InitConfig, ViewConfig, ItemConfig, GroupHeading, } from './index';
+export { init, update, view, Model, Message, TransitionState } from './index';
+export type { ActivationTrigger, Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, Searched, ClearedSearch, NoOp, AdvancedTransitionFrame, EndedTransition, InitConfig, ViewConfig, ItemConfig, GroupHeading, } from './index';
 //# sourceMappingURL=public.d.ts.map

package/dist/ui/menu/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAE5D,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,GACb,MAAM,SAAS,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE7E,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,uBAAuB,EACvB,eAAe,EACf,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,GACb,MAAM,SAAS,CAAA"}

package/dist/ui/menu/public.js

@@ -1 +1 @@
-export { init, update, view, Model, Message } from './index';
+export { init, update, view, Model, Message, TransitionState } from './index';