@foldkit/ui 0.112.0

package/dist/listbox/multi.d.ts

@@ -0,0 +1,189 @@
+import { Option, Schema as S } from 'effect';
+import type * as Command from 'foldkit/command';
+import type { Reflect, View as SubmodelView } from 'foldkit/submodel';
+import { type BaseInitConfig, type BaseViewInputs, type Message, type OutMessage } from './shared.js';
+/** Schema for the multi-select listbox component's state, tracking open/closed status, active item, selected items, activation trigger, and typeahead search. */
+export declare const Model: S.Struct<{
+    readonly selectedItems: S.$Array<S.String>;
+    readonly id: S.String;
+    readonly isOpen: S.Boolean;
+    readonly isAnimated: S.Boolean;
+    readonly isModal: S.Boolean;
+    readonly orientation: S.Literals<readonly ["Vertical", "Horizontal"]>;
+    readonly animation: S.Struct<{
+        readonly id: S.String;
+        readonly isShowing: S.Boolean;
+        readonly transitionState: S.Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+    }>;
+    readonly maybeActiveItemIndex: S.Option<S.Number>;
+    readonly activationTrigger: S.Literals<readonly ["Pointer", "Keyboard"]>;
+    readonly searchQuery: S.String;
+    readonly searchVersion: S.Number;
+    readonly maybeLastPointerPosition: S.Option<S.Struct<{
+        readonly screenX: S.Number;
+        readonly screenY: S.Number;
+    }>>;
+    readonly maybeLastButtonPointerType: S.Option<S.String>;
+}>;
+export type Model = typeof Model.Type;
+/** Configuration for creating a multi-select listbox model with `init`. `isAnimated` enables CSS transition coordination (default `false`). `isModal` locks page scroll and inerts other elements when open (default `false`). `selectedItems` sets the initial selection (default `[]`). */
+export type InitConfig = BaseInitConfig & Readonly<{
+    selectedItems?: ReadonlyArray<string>;
+}>;
+/** Creates an initial multi-select listbox model from a config. Defaults to closed with no active item and no selection. */
+export declare const init: (config: InitConfig) => Model;
+/** Processes a listbox message and returns the next model, commands, and optional OutMessage. Stays open on selection and toggles item membership (multi-select behavior); emits a `Selected({ value, wasAdded })` OutMessage indicating whether the value was added or removed. */
+export declare const update: (model: {
+    readonly selectedItems: readonly string[];
+    readonly id: string;
+    readonly isOpen: boolean;
+    readonly isAnimated: boolean;
+    readonly isModal: boolean;
+    readonly orientation: "Horizontal" | "Vertical";
+    readonly animation: {
+        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;
+    readonly searchVersion: number;
+    readonly maybeLastPointerPosition: Option.Option<{
+        readonly screenX: number;
+        readonly screenY: number;
+    }>;
+    readonly maybeLastButtonPointerType: Option.Option<string>;
+}, message: Message) => readonly [{
+    readonly selectedItems: readonly string[];
+    readonly id: string;
+    readonly isOpen: boolean;
+    readonly isAnimated: boolean;
+    readonly isModal: boolean;
+    readonly orientation: "Horizontal" | "Vertical";
+    readonly animation: {
+        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;
+    readonly searchVersion: number;
+    readonly maybeLastPointerPosition: Option.Option<{
+        readonly screenX: number;
+        readonly screenY: number;
+    }>;
+    readonly maybeLastButtonPointerType: Option.Option<string>;
+}, readonly Readonly<{
+    name: string;
+    args?: Record<string, unknown>;
+    effect: import("effect/Effect").Effect<{
+        readonly _tag: "CompletedFocusButton";
+    } | {
+        readonly _tag: "CompletedLockScroll";
+    } | {
+        readonly _tag: "CompletedUnlockScroll";
+    } | {
+        readonly _tag: "CompletedInertOthers";
+    } | {
+        readonly _tag: "CompletedRestoreInert";
+    } | {
+        readonly _tag: "IgnoredMouseClick";
+    } | {
+        readonly _tag: "SuppressedSpaceScroll";
+    } | {
+        readonly _tag: "Closed";
+    } | {
+        readonly _tag: "DeactivatedItem";
+    } | {
+        readonly _tag: "CompletedScrollIntoView";
+    } | {
+        readonly _tag: "CompletedClickItem";
+    } | {
+        readonly _tag: "Opened";
+        readonly maybeActiveItemIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "BlurredItems";
+    } | {
+        readonly _tag: "ActivatedItem";
+        readonly index: number;
+        readonly activationTrigger: "Pointer" | "Keyboard";
+    } | {
+        readonly _tag: "SelectedItem";
+        readonly item: string;
+    } | {
+        readonly _tag: "RequestedItemClick";
+        readonly index: number;
+    } | {
+        readonly _tag: "Searched";
+        readonly key: string;
+        readonly maybeTargetIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "ClearedSearch";
+        readonly version: number;
+    } | {
+        readonly _tag: "MovedPointerOverItem";
+        readonly index: number;
+        readonly screenX: number;
+        readonly screenY: number;
+    } | {
+        readonly _tag: "CompletedFocusItems";
+    } | {
+        readonly _tag: "CompletedAnchorListbox";
+    } | {
+        readonly _tag: "CompletedPortalListboxBackdrop";
+    } | {
+        readonly _tag: "GotAnimationMessage";
+        readonly message: {
+            readonly _tag: "Showed";
+        } | {
+            readonly _tag: "Hid";
+        } | {
+            readonly _tag: "AdvancedAnimationFrame";
+        } | {
+            readonly _tag: "EndedAnimation";
+        };
+    } | {
+        readonly _tag: "PressedPointerOnButton";
+        readonly pointerType: string;
+        readonly button: number;
+    }, never, never>;
+}>[], Option.Option<Readonly<{
+    readonly _tag: "Selected";
+    readonly value: string;
+    readonly wasAdded: boolean;
+}>>];
+type UpdateReturn = ReturnType<typeof update>;
+/** Programmatically opens the listbox, updating the model and returning
+ *  focus and modal commands. Use this in domain-event handlers to open the listbox. */
+export declare const open: (model: Model) => UpdateReturn;
+/** Programmatically closes the listbox, updating the model and returning
+ *  focus and modal commands. Use this in domain-event handlers to close the listbox. */
+export declare const close: (model: Model) => UpdateReturn;
+/** Programmatically toggles an item in the multi-select listbox. Emits `Selected({ value, wasAdded })`. */
+export declare const selectItem: (model: Model, item: string) => UpdateReturn;
+/** Reflects an externally-sourced selection set onto the model without
+ *  emitting an OutMessage or running selection side effects. Use this to
+ *  mirror external truth (URL parameters, restored storage, a server push)
+ *  onto the listbox's selected items. Contrast with `selectItem`, which
+ *  toggles a single item as a user *choice* and emits `Selected`. Returns
+ *  the model directly because it produces no commands and no OutMessage. */
+export declare const reflectSelectedItems: Reflect<Model, ReadonlyArray<string>>;
+/** Per-render view inputs passed to the view via `h.submodel`'s `viewInputs` field. */
+export type ViewInputs<Item, Value extends string = string> = BaseViewInputs<Item, Value>;
+/** Pairs the multi-select listbox's `view` and `update` (and programmatic
+ *  helpers) behind a single Item-typed entry point. Same shape as
+ *  `Listbox.create`. Two type params support object-typed items via
+ *  `itemToValue`: `Value` defaults to `Item` when `Item extends string`,
+ *  else `string`. */
+export declare const create: <Item = string, Value extends string = Item extends string ? Item : string>() => Readonly<{
+    view: SubmodelView<Model, Message, BaseViewInputs<Item, Value>>;
+    update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
+    selectItem: (model: Model, item: Value) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
+    open: (model: Model) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
+    close: (model: Model) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
+    reflectSelectedItems: Reflect<Model, ReadonlyArray<Value>>;
+}>;
+export {};
+//# sourceMappingURL=multi.d.ts.map

package/dist/listbox/multi.d.ts.map

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

package/dist/listbox/multi.js

@@ -0,0 +1,65 @@
+import { Array, Function, Option, Schema as S, pipe } from 'effect';
+import { evo } from 'foldkit/struct';
+import { BaseModel, Closed, Opened, SelectedItem, Selected as SharedSelected, baseInit, makeUpdate, makeView, } from './shared.js';
+// MODEL
+/** Schema for the multi-select listbox component's state, tracking open/closed status, active item, selected items, activation trigger, and typeahead search. */
+export const Model = S.Struct({
+    ...BaseModel.fields,
+    selectedItems: S.Array(S.String),
+});
+/** Creates an initial multi-select listbox model from a config. Defaults to closed with no active item and no selection. */
+export const init = (config) => ({
+    ...baseInit(config),
+    selectedItems: config.selectedItems ?? [],
+});
+// UPDATE
+/** Processes a listbox message and returns the next model, commands, and optional OutMessage. Stays open on selection and toggles item membership (multi-select behavior); emits a `Selected({ value, wasAdded })` OutMessage indicating whether the value was added or removed. */
+export const update = makeUpdate((model, item) => {
+    const wasAdded = !Array.contains(model.selectedItems, item);
+    const nextSelectedItems = wasAdded
+        ? Array.append(model.selectedItems, item)
+        : Array.filter(model.selectedItems, selected => selected !== item);
+    return [
+        evo(model, { selectedItems: () => nextSelectedItems }),
+        [],
+        Option.some(SharedSelected({ value: item, wasAdded })),
+    ];
+});
+/** Programmatically opens the listbox, updating the model and returning
+ *  focus and modal commands. Use this in domain-event handlers to open the listbox. */
+export const open = (model) => update(model, Opened({ maybeActiveItemIndex: Option.none() }));
+/** Programmatically closes the listbox, updating the model and returning
+ *  focus and modal commands. Use this in domain-event handlers to close the listbox. */
+export const close = (model) => update(model, Closed());
+/** Programmatically toggles an item in the multi-select listbox. Emits `Selected({ value, wasAdded })`. */
+export const selectItem = (model, item) => update(model, SelectedItem({ item }));
+/** Reflects an externally-sourced selection set onto the model without
+ *  emitting an OutMessage or running selection side effects. Use this to
+ *  mirror external truth (URL parameters, restored storage, a server push)
+ *  onto the listbox's selected items. Contrast with `selectItem`, which
+ *  toggles a single item as a user *choice* and emits `Selected`. Returns
+ *  the model directly because it produces no commands and no OutMessage. */
+export const reflectSelectedItems = Function.dual(2, (model, items) => evo(model, { selectedItems: () => items }));
+const internalView = makeView({
+    isItemSelected: (model, itemValue) => Array.contains(model.selectedItems, itemValue),
+    selectedItemIndex: (model, items, itemToValue) => pipe(model.selectedItems, Array.head, Option.flatMap(selectedItem => Array.findFirstIndex(items, item => itemToValue(item) === selectedItem))),
+    ariaMultiSelectable: true,
+});
+/** Pairs the multi-select listbox's `view` and `update` (and programmatic
+ *  helpers) behind a single Item-typed entry point. Same shape as
+ *  `Listbox.create`. Two type params support object-typed items via
+ *  `itemToValue`: `Value` defaults to `Item` when `Item extends string`,
+ *  else `string`. */
+export const create = () => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const typedUpdate = update;
+    return {
+        view: internalView(),
+        update: typedUpdate,
+        selectItem: (model, item) => typedUpdate(model, SelectedItem({ item })),
+        open: model => typedUpdate(model, Opened({ maybeActiveItemIndex: Option.none() })),
+        close: model => typedUpdate(model, Closed()),
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        reflectSelectedItems: reflectSelectedItems,
+    };
+};

package/dist/listbox/multiPublic.d.ts

@@ -0,0 +1,3 @@
+export { init, create, Model } from './multi.js';
+export type { InitConfig, ViewInputs } from './multi.js';
+//# sourceMappingURL=multiPublic.d.ts.map

package/dist/listbox/multiPublic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiPublic.d.ts","sourceRoot":"","sources":["../../src/listbox/multiPublic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAChD,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA"}

package/dist/listbox/multiPublic.js

@@ -0,0 +1 @@
+export { init, create, Model } from './multi.js';

package/dist/listbox/public.d.ts

@@ -0,0 +1,7 @@
+export { init, create, Model } from './single.js';
+export { Message, OutMessage, Selected, Orientation, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedInertOthers, CompletedRestoreInert, CompletedFocusButton, CompletedFocusItems, CompletedScrollIntoView, CompletedClickItem, CompletedAnchorListbox, CompletedPortalListboxBackdrop, AnchorListbox, PortalListboxBackdrop, ClearedSearch, GotAnimationMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusButton, FocusItems, ScrollIntoView, ClickItem, DelayClearSearch, DetectMovementOrAnimationEnd, } from './shared.js';
+export type { ActivationTrigger, Opened, Closed, BlurredItems, ActivatedItem, DeactivatedItem, MovedPointerOverItem, RequestedItemClick, Searched, PressedPointerOnButton, IgnoredMouseClick, SuppressedSpaceScroll, ItemConfig, GroupHeading, } from './shared.js';
+export type { InitConfig, ViewInputs } from './single.js';
+export type { AnchorConfig } from '../anchor.js';
+export * as Multi from './multiPublic.js';
+//# sourceMappingURL=public.d.ts.map

package/dist/listbox/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/listbox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEjD,OAAO,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,sBAAsB,EACtB,8BAA8B,EAC9B,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AAEpB,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,YAAY,EACZ,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,UAAU,EACV,YAAY,GACb,MAAM,aAAa,CAAA;AAEpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAEzD,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAA"}

package/dist/listbox/public.js

@@ -0,0 +1,3 @@
+export { init, create, Model } from './single.js';
+export { Message, OutMessage, Selected, Orientation, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedInertOthers, CompletedRestoreInert, CompletedFocusButton, CompletedFocusItems, CompletedScrollIntoView, CompletedClickItem, CompletedAnchorListbox, CompletedPortalListboxBackdrop, AnchorListbox, PortalListboxBackdrop, ClearedSearch, GotAnimationMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusButton, FocusItems, ScrollIntoView, ClickItem, DelayClearSearch, DetectMovementOrAnimationEnd, } from './shared.js';
+export * as Multi from './multiPublic.js';