foldkit 0.20.0 → 0.22.0

package/dist/ui/menu/index.js

@@ -5,6 +5,7 @@ import { m } from '../../message';
 import { evo } from '../../struct';
 import * as Task from '../../task';
 import { findFirstEnabledIndex, keyToIndex, wrapIndex } from '../keyboard';
+import { anchorHooks } from './anchor';
 // MODEL
 /** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
 export const ActivationTrigger = S.Literal('Pointer', 'Keyboard');
@@ -37,7 +38,7 @@ export const Opened = m('Opened', {
 });
 /** Sent when the menu closes via Escape key or backdrop click. */
 export const Closed = m('Closed');
-/** Sent when focus leaves the menu items container via Tab key. */
+/** Sent when focus leaves the menu items container 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. */
 export const ActivatedItem = m('ActivatedItem', {
@@ -71,6 +72,8 @@ export const NoOp = m('NoOp');
 export const AdvancedTransitionFrame = m('AdvancedTransitionFrame');
 /** Sent internally when all CSS transitions on the menu items container have completed. */
 export const EndedTransition = m('EndedTransition');
+/** Sent internally when the menu button moves in the viewport during a leave transition, cancelling the animation. */
+export const DetectedButtonMovement = m('DetectedButtonMovement');
 /** 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,
@@ -86,7 +89,7 @@ export const ReleasedPointerOnItems = m('ReleasedPointerOnItems', {
     timeStamp: S.Number,
 });
 /** Union of all messages the menu component can produce. */
-export const Message = S.Union(Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, NoOp, AdvancedTransitionFrame, EndedTransition, PressedPointerOnButton, ReleasedPointerOnItems);
+export const Message = S.Union(Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, NoOp, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, PressedPointerOnButton, ReleasedPointerOnItems);
 // INIT
 const SEARCH_DEBOUNCE_MILLISECONDS = 350;
 const POINTER_HOLD_THRESHOLD_MILLISECONDS = 200;
@@ -96,7 +99,7 @@ export const init = (config) => ({
     id: config.id,
     isOpen: false,
     isAnimated: config.isAnimated ?? false,
-    isModal: config.isModal ?? true,
+    isModal: config.isModal ?? false,
     transitionState: 'Idle',
     maybeActiveItemIndex: Option.none(),
     activationTrigger: 'Keyboard',
@@ -121,17 +124,18 @@ const closedModel = (model) => evo(model, {
 const buttonSelector = (id) => `#${id}-button`;
 const itemsSelector = (id) => `#${id}-items`;
 const itemSelector = (id, index) => `#${id}-item-${index}`;
+const withUpdateReturn = M.withReturnType();
 /** Processes a menu message and returns the next model and commands. */
 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, [
+    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, [
         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({
+    const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(NoOp())));
+    return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
         Opened: ({ maybeActiveItemIndex }) => {
             const nextModel = evo(model, {
                 isOpen: () => true,
@@ -147,28 +151,20 @@ export const update = (model, message) => {
             });
             return [
                 nextModel,
-                pipe(Array.getSomes([
-                    maybeNextFrameCommand,
-                    maybeLockScrollCommand,
-                    maybeInertOthersCommand,
-                ]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
             ];
         },
         Closed: () => [
             closedModel(model),
             pipe(Array.getSomes([
-                maybeNextFrameCommand,
-                maybeUnlockScrollCommand,
-                maybeRestoreInertCommand,
+                maybeNextFrame,
+                maybeUnlockScroll,
+                maybeRestoreInert,
             ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
         ],
         ClosedByTab: () => [
             closedModel(model),
-            Array.getSomes([
-                maybeNextFrameCommand,
-                maybeUnlockScrollCommand,
-                maybeRestoreInertCommand,
-            ]),
+            Array.getSomes([maybeNextFrame, maybeUnlockScroll, maybeRestoreInert]),
         ],
         ActivatedItem: ({ index, activationTrigger }) => [
             evo(model, {
@@ -201,9 +197,9 @@ export const update = (model, message) => {
         SelectedItem: () => [
             closedModel(model),
             pipe(Array.getSomes([
-                maybeNextFrameCommand,
-                maybeUnlockScrollCommand,
-                maybeRestoreInertCommand,
+                maybeNextFrame,
+                maybeUnlockScroll,
+                maybeRestoreInert,
             ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
         ],
         RequestedItemClick: ({ index }) => [
@@ -232,7 +228,7 @@ export const update = (model, message) => {
             }
             return [evo(model, { searchQuery: () => '' }), []];
         },
-        AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(M.withReturnType(), M.when('EnterStart', () => [
+        AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
             evo(model, { transitionState: () => 'EnterAnimating' }),
             [
                 Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition())),
@@ -240,10 +236,14 @@ export const update = (model, message) => {
         ]), M.when('LeaveStart', () => [
             evo(model, { transitionState: () => 'LeaveAnimating' }),
             [
-                Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition())),
+                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(M.withReturnType(), M.whenOr('EnterAnimating', 'LeaveAnimating', () => [
+        EndedTransition: () => M.value(model.transitionState).pipe(withUpdateReturn, M.whenOr('EnterAnimating', 'LeaveAnimating', () => [
+            evo(model, { transitionState: () => 'Idle' }),
+            [],
+        ]), M.orElse(() => [model, []])),
+        DetectedButtonMovement: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('LeaveAnimating', () => [
             evo(model, { transitionState: () => 'Idle' }),
             [],
         ]), M.orElse(() => [model, []])),
@@ -258,9 +258,9 @@ export const update = (model, message) => {
                 return [
                     closedModel(withPointerType),
                     pipe(Array.getSomes([
-                        maybeNextFrameCommand,
-                        maybeUnlockScrollCommand,
-                        maybeRestoreInertCommand,
+                        maybeNextFrame,
+                        maybeUnlockScroll,
+                        maybeRestoreInert,
                     ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
                 ];
             }
@@ -276,11 +276,7 @@ export const update = (model, message) => {
             });
             return [
                 nextModel,
-                pipe(Array.getSomes([
-                    maybeNextFrameCommand,
-                    maybeLockScrollCommand,
-                    maybeInertOthersCommand,
-                ]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
             ];
         },
         ReleasedPointerOnItems: ({ screenX, screenY, timeStamp }) => {
@@ -333,8 +329,8 @@ export const resolveTypeaheadMatch = (items, query, maybeActiveItemIndex, isDisa
 };
 /** 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, 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 { div, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaHasPopup, AriaLabelledBy, Class, DataAttribute, Id, OnBlur, OnClick, OnDestroy, OnInsert, OnKeyDownPreventDefault, OnKeyUpPreventDefault, OnPointerDown, OnPointerLeave, OnPointerMove, OnPointerUp, Role, Style, 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, anchor, } = config;
     const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
     const isVisible = isOpen || isLeaving;
     const transitionAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
@@ -415,6 +411,16 @@ export const view = (config) => {
         onNone: () => [],
         onSome: index => [AriaActiveDescendant(itemId(id, index))],
     });
+    const hooks = anchor
+        ? anchorHooks({ buttonId: `${id}-button`, anchor })
+        : undefined;
+    const anchorAttributes = hooks
+        ? [
+            Style({ position: 'absolute', margin: '0', visibility: 'hidden' }),
+            OnInsert(hooks.onInsert),
+            OnDestroy(hooks.onDestroy),
+        ]
+        : [];
     const itemsContainerAttributes = [
         Id(`${id}-items`),
         Role('menu'),
@@ -422,6 +428,7 @@ export const view = (config) => {
         ...maybeActiveDescendant,
         Tabindex(0),
         Class(itemsClassName),
+        ...anchorAttributes,
         ...transitionAttributes,
         ...(isLeaving
             ? []

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

@@ -1,3 +1,4 @@
 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';
+export type { AnchorConfig } from './anchor';
 //# 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,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"}
+{"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;AAEhB,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Elm-inspired UI framework powered by Effect",
   "type": "module",
   "main": "./dist/index.js",
@@ -106,6 +106,7 @@
     "directory": "packages/foldkit"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.7.5",
     "snabbdom": "^3.6.3"
   },
   "publishConfig": {