foldkit 0.33.6 → 0.34.0

package/dist/ui/menu/index.js

@@ -1,7 +1,6 @@
 import { Array, Effect, Match as M, Option, Predicate, Schema as S, String as Str, pipe, } from 'effect';
 import { OptionExt } from '../../effectExtensions';
-import { html } from '../../html';
-import { createLazy } from '../../html/lazy';
+import { createLazy, html } from '../../html';
 import { m } from '../../message';
 import { evo } from '../../struct';
 import * as Task from '../../task';
@@ -68,8 +67,28 @@ export const MovedPointerOverItem = m('MovedPointerOverItem', {
     screenX: S.Number,
     screenY: S.Number,
 });
-/** Placeholder message used when no action is needed. */
-export const NoOp = m('NoOp');
+/** Sent when the focus-items command completes after opening the menu. */
+export const CompletedItemsFocus = m('CompletedItemsFocus');
+/** Sent when the focus-button command completes after closing or selecting. */
+export const CompletedButtonFocus = m('CompletedButtonFocus');
+/** Sent when the scroll lock command completes. */
+export const CompletedScrollLock = m('CompletedScrollLock');
+/** Sent when the scroll unlock command completes. */
+export const CompletedScrollUnlock = m('CompletedScrollUnlock');
+/** Sent when the inert-others command completes. */
+export const CompletedInertSetup = m('CompletedInertSetup');
+/** Sent when the restore-inert command completes. */
+export const CompletedInertTeardown = m('CompletedInertTeardown');
+/** Sent when the scroll-into-view command completes after keyboard activation. */
+export const CompletedScrollIntoView = m('CompletedScrollIntoView');
+/** Sent when the programmatic click command completes. */
+export const CompletedItemClick = m('CompletedItemClick');
+/** Sent when the advance-focus command completes. */
+export const CompletedFocusAdvance = m('CompletedFocusAdvance');
+/** Sent when a mouse click on the button is ignored because pointer-down already handled the toggle. */
+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 menu items container have completed. */
@@ -91,7 +110,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, DetectedButtonMovement, PressedPointerOnButton, ReleasedPointerOnItems);
+export const Message = S.Union(Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, CompletedItemsFocus, CompletedButtonFocus, CompletedScrollLock, CompletedScrollUnlock, CompletedInertSetup, CompletedInertTeardown, CompletedScrollIntoView, CompletedItemClick, CompletedFocusAdvance, IgnoredMouseClick, SuppressedSpaceScroll, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, PressedPointerOnButton, ReleasedPointerOnItems);
 // INIT
 const SEARCH_DEBOUNCE_MILLISECONDS = 350;
 const LEFT_MOUSE_BUTTON = 0;
@@ -131,13 +150,13 @@ const withUpdateReturn = M.withReturnType();
 /** Processes a menu message and returns the next model and commands. */
 export const update = (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 maybeLockScroll = OptionExt.when(model.isModal, Task.lockScroll.pipe(Effect.as(CompletedScrollLock())));
+    const maybeUnlockScroll = OptionExt.when(model.isModal, Task.unlockScroll.pipe(Effect.as(CompletedScrollUnlock())));
     const maybeInertOthers = OptionExt.when(model.isModal, Task.inertOthers(model.id, [
         buttonSelector(model.id),
         itemsSelector(model.id),
-    ]).pipe(Effect.as(NoOp())));
-    const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(NoOp())));
+    ]).pipe(Effect.as(CompletedInertSetup())));
+    const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(CompletedInertTeardown())));
     return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
         Opened: ({ maybeActiveItemIndex }) => {
             const nextModel = evo(model, {
@@ -154,7 +173,7 @@ export const update = (model, message) => {
             });
             return [
                 nextModel,
-                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), 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(CompletedItemsFocus())))),
             ];
         },
         Closed: () => [
@@ -163,7 +182,7 @@ export const update = (model, message) => {
                 maybeNextFrame,
                 maybeUnlockScroll,
                 maybeRestoreInert,
-            ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+            ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedButtonFocus())))),
         ],
         ClosedByTab: () => [
             closedModel(model),
@@ -176,7 +195,7 @@ export const update = (model, message) => {
             }),
             activationTrigger === 'Keyboard'
                 ? [
-                    Task.scrollIntoView(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
+                    Task.scrollIntoView(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(CompletedScrollIntoView())),
                 ]
                 : [],
         ],
@@ -203,12 +222,12 @@ export const update = (model, message) => {
                 maybeNextFrame,
                 maybeUnlockScroll,
                 maybeRestoreInert,
-            ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+            ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedButtonFocus())))),
         ],
         RequestedItemClick: ({ index }) => [
             model,
             [
-                Task.clickElement(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
+                Task.clickElement(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(CompletedItemClick())),
             ],
         ],
         Searched: ({ key, maybeTargetIndex }) => {
@@ -264,7 +283,7 @@ export const update = (model, message) => {
                         maybeNextFrame,
                         maybeUnlockScroll,
                         maybeRestoreInert,
-                    ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+                    ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedButtonFocus())))),
                 ];
             }
             const nextModel = evo(withPointerType, {
@@ -279,7 +298,7 @@ export const update = (model, message) => {
             });
             return [
                 nextModel,
-                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), 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(CompletedItemsFocus())))),
             ];
         },
         ReleasedPointerOnItems: ({ screenX, screenY, timeStamp }) => {
@@ -299,11 +318,21 @@ export const update = (model, message) => {
             return [
                 model,
                 [
-                    Task.clickElement(itemSelector(model.id, model.maybeActiveItemIndex.value)).pipe(Effect.ignore, Effect.as(NoOp())),
+                    Task.clickElement(itemSelector(model.id, model.maybeActiveItemIndex.value)).pipe(Effect.ignore, Effect.as(CompletedItemClick())),
                 ],
             ];
         },
-        NoOp: () => [model, []],
+        CompletedItemsFocus: () => [model, []],
+        CompletedButtonFocus: () => [model, []],
+        CompletedScrollLock: () => [model, []],
+        CompletedScrollUnlock: () => [model, []],
+        CompletedInertSetup: () => [model, []],
+        CompletedInertTeardown: () => [model, []],
+        CompletedScrollIntoView: () => [model, []],
+        CompletedItemClick: () => [model, []],
+        CompletedFocusAdvance: () => [model, []],
+        IgnoredMouseClick: () => [model, []],
+        SuppressedSpaceScroll: () => [model, []],
     }));
 };
 export { groupContiguous, resolveTypeaheadMatch };
@@ -311,7 +340,7 @@ const itemId = (id, index) => `${id}-item-${index}`;
 /** 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, 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, itemsScrollClassName, backdropClassName, className, itemGroupKey, groupToHeading, groupClassName, separatorClassName, anchor, } = config;
+    const { model: { id, isOpen, transitionState, maybeActiveItemIndex, searchQuery, maybeLastButtonPointerType, }, toMessage, items, itemToConfig, isItemDisabled, itemToSearchText = (item) => item, isButtonDisabled, buttonContent, buttonClassName, buttonAttributes = [], itemsClassName, itemsAttributes = [], itemsScrollClassName, itemsScrollAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], itemGroupKey, groupToHeading, groupClassName, groupAttributes = [], separatorClassName, separatorAttributes = [], anchor, } = config;
     const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
     const isVisible = isOpen || isLeaving;
     const transitionAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
@@ -348,7 +377,7 @@ export const view = (config) => {
     const handleButtonClick = () => {
         const isMouse = Option.exists(maybeLastButtonPointerType, type => type === 'mouse');
         if (isMouse) {
-            return toMessage(NoOp());
+            return toMessage(IgnoredMouseClick());
         }
         else if (isOpen) {
             return toMessage(Closed());
@@ -357,7 +386,7 @@ export const view = (config) => {
             return toMessage(Opened({ maybeActiveItemIndex: Option.none() }));
         }
     };
-    const handleSpaceKeyUp = (key) => OptionExt.when(key === ' ', toMessage(NoOp()));
+    const handleSpaceKeyUp = (key) => OptionExt.when(key === ' ', toMessage(SuppressedSpaceScroll()));
     const resolveActiveIndex = keyToIndex('ArrowDown', 'ArrowUp', items.length, Option.getOrElse(maybeActiveItemIndex, () => 0), isDisabled);
     const searchForKey = (key) => {
         const nextQuery = searchQuery + key;
@@ -371,10 +400,9 @@ export const view = (config) => {
         activationTrigger: 'Keyboard',
     })))), M.when(isPrintableKey, () => searchForKey(key)), M.orElse(() => Option.none()));
     const handleItemsPointerUp = (screenX, screenY, pointerType, timeStamp) => OptionExt.when(pointerType === 'mouse', toMessage(ReleasedPointerOnItems({ screenX, screenY, timeStamp })));
-    const buttonAttributes = [
+    const resolvedButtonAttributes = [
         Id(`${id}-button`),
         Type('button'),
-        Class(buttonClassName),
         AriaHasPopup('menu'),
         AriaExpanded(isVisible),
         AriaControls(`${id}-items`),
@@ -387,6 +415,8 @@ export const view = (config) => {
                 OnClick(handleButtonClick()),
             ]),
         ...(isVisible ? [DataAttribute('open', '')] : []),
+        ...(buttonClassName ? [Class(buttonClassName)] : []),
+        ...buttonAttributes,
     ];
     const maybeActiveDescendant = Option.match(maybeActiveItemIndex, {
         onNone: () => [],
@@ -408,7 +438,6 @@ export const view = (config) => {
         AriaLabelledBy(`${id}-button`),
         ...maybeActiveDescendant,
         Tabindex(0),
-        Class(itemsClassName),
         ...anchorAttributes,
         ...transitionAttributes,
         ...(isLeaving
@@ -419,6 +448,8 @@ export const view = (config) => {
                 OnPointerUp(handleItemsPointerUp),
                 OnBlur(toMessage(ClosedByTab())),
             ]),
+        ...(itemsClassName ? [Class(itemsClassName)] : []),
+        ...itemsAttributes,
     ];
     const menuItems = Array.map(items, (item, index) => {
         const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
@@ -431,7 +462,6 @@ export const view = (config) => {
         return keyed('div')(itemId(id, index), [
             Id(itemId(id, index)),
             Role('menuitem'),
-            Class(itemConfig.className),
             ...(isActiveItem ? [DataAttribute('active', '')] : []),
             ...(isDisabledItem
                 ? [AriaDisabled(true), DataAttribute('disabled', '')]
@@ -447,6 +477,7 @@ export const view = (config) => {
                     OnPointerLeave(pointerType => OptionExt.when(pointerType !== 'touch', toMessage(DeactivatedItem()))),
                 ]
                 : []),
+            ...(itemConfig.className ? [Class(itemConfig.className)] : []),
         ], [itemConfig.content]);
     });
     const renderGroupedItems = () => {
@@ -463,7 +494,11 @@ export const view = (config) => {
             const headingElement = Option.match(maybeHeading, {
                 onNone: () => [],
                 onSome: heading => [
-                    keyed('div')(headingId, [Id(headingId), Role('presentation'), Class(heading.className)], [heading.content]),
+                    keyed('div')(headingId, [
+                        Id(headingId),
+                        Role('presentation'),
+                        ...(heading.className ? [Class(heading.className)] : []),
+                    ], [heading.content]),
                 ],
             });
             const groupContent = [...headingElement, ...segment.items];
@@ -471,22 +506,35 @@ export const view = (config) => {
                 Role('group'),
                 ...(Option.isSome(maybeHeading) ? [AriaLabelledBy(headingId)] : []),
                 ...(groupClassName ? [Class(groupClassName)] : []),
+                ...groupAttributes,
             ], groupContent);
-            const separator = segmentIndex > 0 && separatorClassName
+            const separator = segmentIndex > 0 &&
+                (separatorClassName ||
+                    Array.isNonEmptyReadonlyArray(separatorAttributes))
                 ? [
-                    keyed('div')(`${id}-separator-${segmentIndex}`, [Role('separator'), Class(separatorClassName)], []),
+                    keyed('div')(`${id}-separator-${segmentIndex}`, [
+                        Role('separator'),
+                        ...(separatorClassName ? [Class(separatorClassName)] : []),
+                        ...separatorAttributes,
+                    ], []),
                 ]
                 : [];
             return [...separator, groupElement];
         });
     };
     const backdrop = keyed('div')(`${id}-backdrop`, [
-        Class(backdropClassName),
         ...(isLeaving ? [] : [OnClick(toMessage(Closed()))]),
+        ...(backdropClassName ? [Class(backdropClassName)] : []),
+        ...backdropAttributes,
     ], []);
     const renderedItems = renderGroupedItems();
-    const scrollableItems = itemsScrollClassName
-        ? [div([Class(itemsScrollClassName)], renderedItems)]
+    const scrollableItems = itemsScrollClassName || Array.isNonEmptyReadonlyArray(itemsScrollAttributes)
+        ? [
+            div([
+                ...(itemsScrollClassName ? [Class(itemsScrollClassName)] : []),
+                ...itemsScrollAttributes,
+            ], renderedItems),
+        ]
         : renderedItems;
     const visibleContent = [
         backdrop,
@@ -494,10 +542,11 @@ export const view = (config) => {
     ];
     const wrapperAttributes = [
         ...(className ? [Class(className)] : []),
+        ...attributes,
         ...(isVisible ? [DataAttribute('open', '')] : []),
     ];
     return div(wrapperAttributes, [
-        keyed('button')(`${id}-button`, buttonAttributes, [buttonContent]),
+        keyed('button')(`${id}-button`, resolvedButtonAttributes, [buttonContent]),
         ...(isVisible ? visibleContent : []),
     ]);
 };

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

@@ -1,5 +1,5 @@
 export { init, update, view, lazy, Model, Message } from './index';
 export { TransitionState } from '../transition';
-export type { ActivationTrigger, Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, PressedPointerOnButton, ReleasedPointerOnItems, NoOp, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, InitConfig, ViewConfig, ItemConfig, GroupHeading, } from './index';
+export type { ActivationTrigger, Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, PressedPointerOnButton, ReleasedPointerOnItems, IgnoredMouseClick, SuppressedSpaceScroll, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, 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,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,sBAAsB,EACtB,IAAI,EACJ,uBAAuB,EACvB,eAAe,EACf,sBAAsB,EACtB,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,GACb,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,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,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,uBAAuB,EACvB,eAAe,EACf,sBAAsB,EACtB,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,GACb,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}

package/dist/ui/popover/index.d.ts

@@ -1,6 +1,6 @@
 import { Schema as S } from 'effect';
 import type { Command } from '../../command';
-import { type Html } from '../../html';
+import { type Attribute, type Html } from '../../html';
 import type { AnchorConfig } from '../anchor';
 /** Schema for the popover component's state, tracking open/closed status and transition animation. */
 export declare const Model: S.Struct<{
@@ -23,8 +23,22 @@ export declare const PressedPointerOnButton: import("../../schema").CallableTagg
     pointerType: typeof S.String;
     button: typeof S.Number;
 }>;
-/** Placeholder message used when no action is needed. */
-export declare const NoOp: import("../../schema").CallableTaggedStruct<"NoOp", {}>;
+/** Sent when the focus-panel command completes after opening the popover. */
+export declare const CompletedPanelFocus: import("../../schema").CallableTaggedStruct<"CompletedPanelFocus", {}>;
+/** Sent when the focus-button command completes after closing. */
+export declare const CompletedButtonFocus: import("../../schema").CallableTaggedStruct<"CompletedButtonFocus", {}>;
+/** Sent when the scroll lock command completes. */
+export declare const CompletedScrollLock: import("../../schema").CallableTaggedStruct<"CompletedScrollLock", {}>;
+/** Sent when the scroll unlock command completes. */
+export declare const CompletedScrollUnlock: import("../../schema").CallableTaggedStruct<"CompletedScrollUnlock", {}>;
+/** Sent when the inert-others command completes. */
+export declare const CompletedInertSetup: import("../../schema").CallableTaggedStruct<"CompletedInertSetup", {}>;
+/** Sent when the restore-inert command completes. */
+export declare const CompletedInertTeardown: import("../../schema").CallableTaggedStruct<"CompletedInertTeardown", {}>;
+/** Sent when a mouse click on the button is ignored because pointer-down already handled the toggle. */
+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 popover panel have completed. */
@@ -35,15 +49,13 @@ export declare const DetectedButtonMovement: import("../../schema").CallableTagg
 export declare const Message: S.Union<[import("../../schema").CallableTaggedStruct<"Opened", {}>, import("../../schema").CallableTaggedStruct<"Closed", {}>, import("../../schema").CallableTaggedStruct<"ClosedByTab", {}>, import("../../schema").CallableTaggedStruct<"PressedPointerOnButton", {
     pointerType: typeof S.String;
     button: typeof S.Number;
-}>, import("../../schema").CallableTaggedStruct<"NoOp", {}>, import("../../schema").CallableTaggedStruct<"AdvancedTransitionFrame", {}>, import("../../schema").CallableTaggedStruct<"EndedTransition", {}>, import("../../schema").CallableTaggedStruct<"DetectedButtonMovement", {}>]>;
+}>, import("../../schema").CallableTaggedStruct<"CompletedPanelFocus", {}>, import("../../schema").CallableTaggedStruct<"CompletedButtonFocus", {}>, import("../../schema").CallableTaggedStruct<"CompletedScrollLock", {}>, import("../../schema").CallableTaggedStruct<"CompletedScrollUnlock", {}>, import("../../schema").CallableTaggedStruct<"CompletedInertSetup", {}>, import("../../schema").CallableTaggedStruct<"CompletedInertTeardown", {}>, import("../../schema").CallableTaggedStruct<"IgnoredMouseClick", {}>, import("../../schema").CallableTaggedStruct<"SuppressedSpaceScroll", {}>, import("../../schema").CallableTaggedStruct<"AdvancedTransitionFrame", {}>, import("../../schema").CallableTaggedStruct<"EndedTransition", {}>, import("../../schema").CallableTaggedStruct<"DetectedButtonMovement", {}>]>;
 export type Opened = typeof Opened.Type;
 export type Closed = typeof Closed.Type;
 export type ClosedByTab = typeof ClosedByTab.Type;
 export type PressedPointerOnButton = typeof PressedPointerOnButton.Type;
-export type NoOp = typeof NoOp.Type;
-export type AdvancedTransitionFrame = typeof AdvancedTransitionFrame.Type;
-export type EndedTransition = typeof EndedTransition.Type;
-export type DetectedButtonMovement = typeof DetectedButtonMovement.Type;
+export type IgnoredMouseClick = typeof IgnoredMouseClick.Type;
+export type SuppressedSpaceScroll = typeof SuppressedSpaceScroll.Type;
 export type Message = typeof Message.Type;
 /** Configuration for creating a popover model with `init`. `isAnimated` enables CSS transition coordination (default `false`). `isModal` locks page scroll and inerts other elements when open (default `false`). */
 export type InitConfig = Readonly<{
@@ -59,15 +71,19 @@ export declare const update: (model: Model, message: Message) => UpdateReturn;
 /** Configuration for rendering a popover with `view`. */
 export type ViewConfig<Message> = Readonly<{
     model: Model;
-    toMessage: (message: Opened | Closed | ClosedByTab | PressedPointerOnButton | NoOp) => Message;
+    toMessage: (message: Opened | Closed | ClosedByTab | PressedPointerOnButton | IgnoredMouseClick | SuppressedSpaceScroll) => Message;
     anchor: AnchorConfig;
     buttonContent: Html;
-    buttonClassName: string;
+    buttonClassName?: string;
+    buttonAttributes?: ReadonlyArray<Attribute<Message>>;
     panelContent: Html;
-    panelClassName: string;
-    backdropClassName: string;
+    panelClassName?: string;
+    panelAttributes?: ReadonlyArray<Attribute<Message>>;
+    backdropClassName?: string;
+    backdropAttributes?: ReadonlyArray<Attribute<Message>>;
     isDisabled?: boolean;
     className?: string;
+    attributes?: ReadonlyArray<Attribute<Message>>;
 }>;
 /** Renders a headless popover with a trigger button and a floating panel. Uses the disclosure ARIA pattern (aria-expanded + aria-controls) with no role on the panel. */
 export declare const view: <Message>(config: ViewConfig<Message>) => Html;

package/dist/ui/popover/index.d.ts.map

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

package/dist/ui/popover/index.js

@@ -1,7 +1,6 @@
 import { Array, Effect, Match as M, Option, Schema as S, pipe } from 'effect';
 import { OptionExt } from '../../effectExtensions';
-import { html } from '../../html';
-import { createLazy } from '../../html/lazy';
+import { createLazy, html } from '../../html';
 import { m } from '../../message';
 import { evo } from '../../struct';
 import * as Task from '../../task';
@@ -29,8 +28,22 @@ export const PressedPointerOnButton = m('PressedPointerOnButton', {
     pointerType: S.String,
     button: S.Number,
 });
-/** Placeholder message used when no action is needed. */
-export const NoOp = m('NoOp');
+/** Sent when the focus-panel command completes after opening the popover. */
+export const CompletedPanelFocus = m('CompletedPanelFocus');
+/** Sent when the focus-button command completes after closing. */
+export const CompletedButtonFocus = m('CompletedButtonFocus');
+/** Sent when the scroll lock command completes. */
+export const CompletedScrollLock = m('CompletedScrollLock');
+/** Sent when the scroll unlock command completes. */
+export const CompletedScrollUnlock = m('CompletedScrollUnlock');
+/** Sent when the inert-others command completes. */
+export const CompletedInertSetup = m('CompletedInertSetup');
+/** Sent when the restore-inert command completes. */
+export const CompletedInertTeardown = m('CompletedInertTeardown');
+/** Sent when a mouse click on the button is ignored because pointer-down already handled the toggle. */
+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 popover panel have completed. */
@@ -38,7 +51,7 @@ export const EndedTransition = m('EndedTransition');
 /** Sent internally when the popover button moves in the viewport during a leave transition, cancelling the animation. */
 export const DetectedButtonMovement = m('DetectedButtonMovement');
 /** Union of all messages the popover component can produce. */
-export const Message = S.Union(Opened, Closed, ClosedByTab, PressedPointerOnButton, NoOp, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement);
+export const Message = S.Union(Opened, Closed, ClosedByTab, PressedPointerOnButton, CompletedPanelFocus, CompletedButtonFocus, CompletedScrollLock, CompletedScrollUnlock, CompletedInertSetup, CompletedInertTeardown, IgnoredMouseClick, SuppressedSpaceScroll, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement);
 // INIT
 const LEFT_MOUSE_BUTTON = 0;
 /** Creates an initial popover model from a config. Defaults to closed. */
@@ -62,13 +75,13 @@ const withUpdateReturn = M.withReturnType();
 /** Processes a popover message and returns the next model and commands. */
 export const update = (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 maybeLockScroll = OptionExt.when(model.isModal, Task.lockScroll.pipe(Effect.as(CompletedScrollLock())));
+    const maybeUnlockScroll = OptionExt.when(model.isModal, Task.unlockScroll.pipe(Effect.as(CompletedScrollUnlock())));
     const maybeInertOthers = OptionExt.when(model.isModal, Task.inertOthers(model.id, [
         buttonSelector(model.id),
         panelSelector(model.id),
-    ]).pipe(Effect.as(NoOp())));
-    const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(NoOp())));
+    ]).pipe(Effect.as(CompletedInertSetup())));
+    const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(CompletedInertTeardown())));
     return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
         Opened: () => {
             const nextModel = evo(model, {
@@ -77,7 +90,7 @@ export const update = (model, message) => {
             });
             return [
                 nextModel,
-                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), Array.prepend(Task.focus(panelSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), Array.prepend(Task.focus(panelSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedPanelFocus())))),
             ];
         },
         Closed: () => [
@@ -86,7 +99,7 @@ export const update = (model, message) => {
                 maybeNextFrame,
                 maybeUnlockScroll,
                 maybeRestoreInert,
-            ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+            ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedButtonFocus())))),
         ],
         ClosedByTab: () => [
             closedModel(model),
@@ -106,7 +119,7 @@ export const update = (model, message) => {
                         maybeNextFrame,
                         maybeUnlockScroll,
                         maybeRestoreInert,
-                    ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+                    ]), Array.prepend(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedButtonFocus())))),
                 ];
             }
             const nextModel = evo(withPointerType, {
@@ -115,7 +128,7 @@ export const update = (model, message) => {
             });
             return [
                 nextModel,
-                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), Array.prepend(Task.focus(panelSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), Array.prepend(Task.focus(panelSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedPanelFocus())))),
             ];
         },
         AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
@@ -137,13 +150,20 @@ export const update = (model, message) => {
             evo(model, { transitionState: () => 'Idle' }),
             [],
         ]), M.orElse(() => [model, []])),
-        NoOp: () => [model, []],
+        CompletedPanelFocus: () => [model, []],
+        CompletedButtonFocus: () => [model, []],
+        CompletedScrollLock: () => [model, []],
+        CompletedScrollUnlock: () => [model, []],
+        CompletedInertSetup: () => [model, []],
+        CompletedInertTeardown: () => [model, []],
+        IgnoredMouseClick: () => [model, []],
+        SuppressedSpaceScroll: () => [model, []],
     }));
 };
 /** Renders a headless popover with a trigger button and a floating panel. Uses the disclosure ARIA pattern (aria-expanded + aria-controls) with no role on the panel. */
 export const view = (config) => {
     const { div, AriaControls, AriaDisabled, AriaExpanded, Class, DataAttribute, Id, OnBlur, OnClick, OnDestroy, OnInsert, OnKeyDownPreventDefault, OnKeyUpPreventDefault, OnPointerDown, Style, Tabindex, Type, keyed, } = html();
-    const { model: { id, isOpen, transitionState, maybeLastButtonPointerType }, toMessage, anchor, buttonContent, buttonClassName, panelContent, panelClassName, backdropClassName, isDisabled, className, } = config;
+    const { model: { id, isOpen, transitionState, maybeLastButtonPointerType }, toMessage, anchor, buttonContent, buttonClassName, buttonAttributes = [], panelContent, panelClassName, panelAttributes = [], backdropClassName, backdropAttributes = [], isDisabled, className, attributes = [], } = config;
     const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
     const isVisible = isOpen || isLeaving;
     const transitionAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
@@ -169,7 +189,7 @@ export const view = (config) => {
     const handleButtonClick = () => {
         const isMouse = Option.exists(maybeLastButtonPointerType, type => type === 'mouse');
         if (isMouse) {
-            return toMessage(NoOp());
+            return toMessage(IgnoredMouseClick());
         }
         else if (isOpen) {
             return toMessage(Closed());
@@ -178,12 +198,11 @@ export const view = (config) => {
             return toMessage(Opened());
         }
     };
-    const handleSpaceKeyUp = (key) => OptionExt.when(key === ' ', toMessage(NoOp()));
+    const handleSpaceKeyUp = (key) => OptionExt.when(key === ' ', toMessage(SuppressedSpaceScroll()));
     const handlePanelKeyDown = (key) => M.value(key).pipe(M.when('Escape', () => Option.some(toMessage(Closed()))), M.orElse(() => Option.none()));
-    const buttonAttributes = [
+    const resolvedButtonAttributes = [
         Id(`${id}-button`),
         Type('button'),
-        Class(buttonClassName),
         AriaExpanded(isVisible),
         AriaControls(`${id}-panel`),
         ...(isDisabled
@@ -195,6 +214,8 @@ export const view = (config) => {
                 OnClick(handleButtonClick()),
             ]),
         ...(isVisible ? [DataAttribute('open', '')] : []),
+        ...(buttonClassName ? [Class(buttonClassName)] : []),
+        ...buttonAttributes,
     ];
     const hooks = anchorHooks({
         buttonId: `${id}-button`,
@@ -206,10 +227,9 @@ export const view = (config) => {
         OnInsert(hooks.onInsert),
         OnDestroy(hooks.onDestroy),
     ];
-    const panelAttributes = [
+    const resolvedPanelAttributes = [
         Id(`${id}-panel`),
         Tabindex(0),
-        Class(panelClassName),
         ...anchorAttributes,
         ...transitionAttributes,
         ...(isLeaving
@@ -218,21 +238,27 @@ export const view = (config) => {
                 OnKeyDownPreventDefault(handlePanelKeyDown),
                 OnBlur(toMessage(ClosedByTab())),
             ]),
+        ...(panelClassName ? [Class(panelClassName)] : []),
+        ...panelAttributes,
     ];
     const backdrop = keyed('div')(`${id}-backdrop`, [
-        Class(backdropClassName),
         ...(isLeaving ? [] : [OnClick(toMessage(Closed()))]),
+        ...(backdropClassName ? [Class(backdropClassName)] : []),
+        ...backdropAttributes,
     ], []);
     const visibleContent = [
         backdrop,
-        keyed('div')(`${id}-panel-container`, panelAttributes, [panelContent]),
+        keyed('div')(`${id}-panel-container`, resolvedPanelAttributes, [
+            panelContent,
+        ]),
     ];
     const wrapperAttributes = [
         ...(className ? [Class(className)] : []),
+        ...attributes,
         ...(isVisible ? [DataAttribute('open', '')] : []),
     ];
     return div(wrapperAttributes, [
-        keyed('button')(`${id}-button`, buttonAttributes, [buttonContent]),
+        keyed('button')(`${id}-button`, resolvedButtonAttributes, [buttonContent]),
         ...(isVisible ? visibleContent : []),
     ]);
 };

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

@@ -1,5 +1,5 @@
 export { init, update, view, lazy, Model, Message } from './index';
 export { TransitionState } from '../transition';
-export type { Opened, Closed, ClosedByTab, PressedPointerOnButton, NoOp, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, InitConfig, ViewConfig, } from './index';
+export type { Opened, Closed, ClosedByTab, PressedPointerOnButton, IgnoredMouseClick, SuppressedSpaceScroll, InitConfig, ViewConfig, } from './index';
 export type { AnchorConfig } from '../anchor';
 //# sourceMappingURL=public.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/popover/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,YAAY,EACV,MAAM,EACN,MAAM,EACN,WAAW,EACX,sBAAsB,EACtB,IAAI,EACJ,uBAAuB,EACvB,eAAe,EACf,sBAAsB,EACtB,UAAU,EACV,UAAU,GACX,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/popover/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,YAAY,EACV,MAAM,EACN,MAAM,EACN,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,UAAU,EACV,UAAU,GACX,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}