foldkit 0.36.1 → 0.36.3

package/dist/task/dom.d.ts

@@ -2,7 +2,6 @@ import { Effect } from 'effect';
 import { ElementNotFound } from './error';
 /**
  * Focuses an element matching the given selector.
- * Uses requestAnimationFrame to ensure the DOM is updated before attempting to focus.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
@@ -16,19 +15,22 @@ export declare const focus: (selector: string) => Effect.Effect<void, ElementNot
  * and Escape key handling. Uses `show()` instead of `showModal()` so that
  * DevTools (and any other high-z-index overlay) remains interactive — the
  * Dialog component provides its own backdrop, scroll locking, and transitions.
- * Uses requestAnimationFrame to ensure the DOM is updated before attempting to show.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLDialogElement`.
  *
+ * Pass `focusSelector` to focus an element inside the dialog when it opens.
+ *
  * @example
  * ```typescript
  * Task.showModal('#my-dialog').pipe(Effect.ignore, Effect.as(CompletedDialogShow()))
+ * Task.showModal('#my-dialog', { focusSelector: '#search-input' }).pipe(Effect.ignore, Effect.as(CompletedDialogShow()))
  * ```
  */
-export declare const showModal: (selector: string) => Effect.Effect<void, ElementNotFound>;
+export declare const showModal: (selector: string, options?: Readonly<{
+    focusSelector?: string;
+}>) => Effect.Effect<void, ElementNotFound>;
 /**
  * Closes a dialog element using `.close()`.
  * Cleans up the keyboard handlers installed by `showModal`.
- * Uses requestAnimationFrame to ensure the DOM is updated before attempting to close.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLDialogElement`.
  *
  * @example
@@ -39,7 +41,6 @@ export declare const showModal: (selector: string) => Effect.Effect<void, Elemen
 export declare const closeModal: (selector: string) => Effect.Effect<void, ElementNotFound>;
 /**
  * Programmatically clicks an element matching the given selector.
- * Uses requestAnimationFrame to ensure the DOM is updated before attempting to click.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
@@ -50,7 +51,6 @@ export declare const closeModal: (selector: string) => Effect.Effect<void, Eleme
 export declare const clickElement: (selector: string) => Effect.Effect<void, ElementNotFound>;
 /**
  * Scrolls an element into view by selector using `{ block: 'nearest' }`.
- * Uses requestAnimationFrame to ensure the DOM is updated before attempting to scroll.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
@@ -63,7 +63,6 @@ export declare const scrollIntoView: (selector: string) => Effect.Effect<void, E
 export type FocusDirection = 'Next' | 'Previous';
 /**
  * Focuses the next or previous focusable element in the document relative to the element matching the given selector.
- * Uses requestAnimationFrame to ensure the DOM is updated before querying focus order.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example

package/dist/task/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/task/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAMP,MAAM,QAAQ,CAAA;AAEf,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAmBzC;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,GAAI,UAAU,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAWxE,CAAA;AAEJ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS,GACpB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CA0ClC,CAAA;AAuBJ;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GACrB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAiBlC,CAAA;AAEJ;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAWlC,CAAA;AAEJ;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAYlC,CAAA;AAEJ,0EAA0E;AAC1E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,EAChB,WAAW,cAAc,KACxB,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAuClC,CAAA"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/task/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAMP,MAAM,QAAQ,CAAA;AAEf,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAmBzC;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK,GAAI,UAAU,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAQxE,CAAA;AAEJ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,GACpB,UAAU,MAAM,EAChB,UAAU,QAAQ,CAAC;IAAE,aAAa,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,KAC7C,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAgDlC,CAAA;AAuBJ;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GACrB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAclC,CAAA;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAQlC,CAAA;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAQlC,CAAA;AAEJ,0EAA0E;AAC1E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,EAChB,WAAW,cAAc,KACxB,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAqClC,CAAA"}

package/dist/task/dom.js

@@ -13,7 +13,6 @@ const FOCUSABLE_SELECTOR = Array.join([
 ], ', ');
 /**
  * Focuses an element matching the given selector.
- * Uses requestAnimationFrame to ensure the DOM is updated before attempting to focus.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
@@ -21,62 +20,62 @@ const FOCUSABLE_SELECTOR = Array.join([
  * Task.focus('#email-input').pipe(Effect.ignore, Effect.as(CompletedInputFocus()))
  * ```
  */
-export const focus = (selector) => Effect.async(resume => {
-    requestAnimationFrame(() => {
-        const element = document.querySelector(selector);
-        if (element instanceof HTMLElement) {
-            element.focus();
-            resume(Effect.void);
-        }
-        else {
-            resume(Effect.fail(new ElementNotFound({ selector })));
-        }
-    });
+export const focus = (selector) => Effect.suspend(() => {
+    const element = document.querySelector(selector);
+    if (element instanceof HTMLElement) {
+        element.focus();
+        return Effect.void;
+    }
+    return Effect.fail(new ElementNotFound({ selector }));
 });
 /**
  * Opens a dialog element using `show()` with high z-index, focus trapping,
  * and Escape key handling. Uses `show()` instead of `showModal()` so that
  * DevTools (and any other high-z-index overlay) remains interactive — the
  * Dialog component provides its own backdrop, scroll locking, and transitions.
- * Uses requestAnimationFrame to ensure the DOM is updated before attempting to show.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLDialogElement`.
  *
+ * Pass `focusSelector` to focus an element inside the dialog when it opens.
+ *
  * @example
  * ```typescript
  * Task.showModal('#my-dialog').pipe(Effect.ignore, Effect.as(CompletedDialogShow()))
+ * Task.showModal('#my-dialog', { focusSelector: '#search-input' }).pipe(Effect.ignore, Effect.as(CompletedDialogShow()))
  * ```
  */
-export const showModal = (selector) => Effect.async(resume => {
-    requestAnimationFrame(() => {
-        const element = document.querySelector(selector);
-        if (element instanceof HTMLDialogElement) {
-            element.style.position = 'fixed';
-            element.style.inset = '0';
-            openDialogCount++;
-            element.style.zIndex = String(BASE_DIALOG_Z_INDEX + openDialogCount);
-            element.show();
-            const handleKeydown = (event) => {
-                if (!element.open) {
-                    return;
-                }
-                M.value(event.key).pipe(M.when('Escape', () => {
-                    if (event.defaultPrevented) {
-                        return;
-                    }
-                    event.preventDefault();
-                    element.dispatchEvent(new Event('cancel', { cancelable: true }));
-                }), M.when('Tab', () => {
-                    trapFocusWithinDialog(event, element);
-                }), M.orElse(Function.constVoid));
-            };
-            document.addEventListener('keydown', handleKeydown);
-            dialogCleanups.set(element, () => document.removeEventListener('keydown', handleKeydown));
-            resume(Effect.void);
+export const showModal = (selector, options) => Effect.suspend(() => {
+    const element = document.querySelector(selector);
+    if (!(element instanceof HTMLDialogElement)) {
+        return Effect.fail(new ElementNotFound({ selector }));
+    }
+    element.style.position = 'fixed';
+    element.style.inset = '0';
+    openDialogCount++;
+    element.style.zIndex = String(BASE_DIALOG_Z_INDEX + openDialogCount);
+    element.show();
+    const handleKeydown = (event) => {
+        if (!element.open) {
+            return;
         }
-        else {
-            resume(Effect.fail(new ElementNotFound({ selector })));
+        M.value(event.key).pipe(M.when('Escape', () => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            event.preventDefault();
+            element.dispatchEvent(new Event('cancel', { cancelable: true }));
+        }), M.when('Tab', () => {
+            trapFocusWithinDialog(event, element);
+        }), M.orElse(Function.constVoid));
+    };
+    document.addEventListener('keydown', handleKeydown);
+    dialogCleanups.set(element, () => document.removeEventListener('keydown', handleKeydown));
+    if (options?.focusSelector) {
+        const focusTarget = element.querySelector(options.focusSelector);
+        if (focusTarget instanceof HTMLElement) {
+            focusTarget.focus();
         }
-    });
+    }
+    return Effect.void;
 });
 const trapFocusWithinDialog = (event, dialog) => {
     const focusable = Array.fromIterable(dialog.querySelectorAll(FOCUSABLE_SELECTOR));
@@ -96,7 +95,6 @@ const trapFocusWithinDialog = (event, dialog) => {
 /**
  * Closes a dialog element using `.close()`.
  * Cleans up the keyboard handlers installed by `showModal`.
- * Uses requestAnimationFrame to ensure the DOM is updated before attempting to close.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLDialogElement`.
  *
  * @example
@@ -104,27 +102,22 @@ const trapFocusWithinDialog = (event, dialog) => {
  * Task.closeModal('#my-dialog').pipe(Effect.ignore, Effect.as(CompletedDialogClose()))
  * ```
  */
-export const closeModal = (selector) => Effect.async(resume => {
-    requestAnimationFrame(() => {
-        const element = document.querySelector(selector);
-        if (element instanceof HTMLDialogElement) {
-            element.close();
-            openDialogCount = Math.max(0, openDialogCount - 1);
-            const cleanup = dialogCleanups.get(element);
-            if (cleanup) {
-                cleanup();
-                dialogCleanups.delete(element);
-            }
-            resume(Effect.void);
+export const closeModal = (selector) => Effect.suspend(() => {
+    const element = document.querySelector(selector);
+    if (element instanceof HTMLDialogElement) {
+        element.close();
+        openDialogCount = Math.max(0, openDialogCount - 1);
+        const cleanup = dialogCleanups.get(element);
+        if (cleanup) {
+            cleanup();
+            dialogCleanups.delete(element);
         }
-        else {
-            resume(Effect.fail(new ElementNotFound({ selector })));
-        }
-    });
+        return Effect.void;
+    }
+    return Effect.fail(new ElementNotFound({ selector }));
 });
 /**
  * Programmatically clicks an element matching the given selector.
- * Uses requestAnimationFrame to ensure the DOM is updated before attempting to click.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
@@ -132,21 +125,16 @@ export const closeModal = (selector) => Effect.async(resume => {
  * Task.clickElement('#menu-item-2').pipe(Effect.ignore, Effect.as(CompletedItemClick()))
  * ```
  */
-export const clickElement = (selector) => Effect.async(resume => {
-    requestAnimationFrame(() => {
-        const element = document.querySelector(selector);
-        if (element instanceof HTMLElement) {
-            element.click();
-            resume(Effect.void);
-        }
-        else {
-            resume(Effect.fail(new ElementNotFound({ selector })));
-        }
-    });
+export const clickElement = (selector) => Effect.suspend(() => {
+    const element = document.querySelector(selector);
+    if (element instanceof HTMLElement) {
+        element.click();
+        return Effect.void;
+    }
+    return Effect.fail(new ElementNotFound({ selector }));
 });
 /**
  * Scrolls an element into view by selector using `{ block: 'nearest' }`.
- * Uses requestAnimationFrame to ensure the DOM is updated before attempting to scroll.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
@@ -154,21 +142,16 @@ export const clickElement = (selector) => Effect.async(resume => {
  * Task.scrollIntoView('#active-item').pipe(Effect.ignore, Effect.as(CompletedScrollIntoView()))
  * ```
  */
-export const scrollIntoView = (selector) => Effect.async(resume => {
-    requestAnimationFrame(() => {
-        const element = document.querySelector(selector);
-        if (element instanceof HTMLElement) {
-            element.scrollIntoView({ block: 'nearest' });
-            resume(Effect.void);
-        }
-        else {
-            resume(Effect.fail(new ElementNotFound({ selector })));
-        }
-    });
+export const scrollIntoView = (selector) => Effect.suspend(() => {
+    const element = document.querySelector(selector);
+    if (element instanceof HTMLElement) {
+        element.scrollIntoView({ block: 'nearest' });
+        return Effect.void;
+    }
+    return Effect.fail(new ElementNotFound({ selector }));
 });
 /**
  * Focuses the next or previous focusable element in the document relative to the element matching the given selector.
- * Uses requestAnimationFrame to ensure the DOM is updated before querying focus order.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLElement`.
  *
  * @example
@@ -176,22 +159,20 @@ export const scrollIntoView = (selector) => Effect.async(resume => {
  * Task.advanceFocus('#menu-button', 'Next').pipe(Effect.ignore, Effect.as(CompletedFocusAdvance()))
  * ```
  */
-export const advanceFocus = (selector, direction) => Effect.async(resume => {
-    requestAnimationFrame(() => {
-        const reference = document.querySelector(selector);
-        if (!(reference instanceof HTMLElement)) {
-            return resume(Effect.fail(new ElementNotFound({ selector })));
-        }
-        const focusableElements = Array.fromIterable(document.querySelectorAll(FOCUSABLE_SELECTOR));
-        const referenceElementIndex = Array.findFirstIndex(focusableElements, Equal.equals(reference));
-        if (Option.isNone(referenceElementIndex)) {
-            return resume(Effect.fail(new ElementNotFound({ selector })));
-        }
-        const offsetReferenceElementIndex = M.value(direction).pipe(M.when('Next', () => Number.increment), M.when('Previous', () => Number.decrement), M.exhaustive)(referenceElementIndex.value);
-        const nextElement = Array.get(focusableElements, offsetReferenceElementIndex);
-        if (Option.isSome(nextElement)) {
-            nextElement.value.focus();
-        }
-        resume(Effect.void);
-    });
+export const advanceFocus = (selector, direction) => Effect.suspend(() => {
+    const reference = document.querySelector(selector);
+    if (!(reference instanceof HTMLElement)) {
+        return Effect.fail(new ElementNotFound({ selector }));
+    }
+    const focusableElements = Array.fromIterable(document.querySelectorAll(FOCUSABLE_SELECTOR));
+    const referenceElementIndex = Array.findFirstIndex(focusableElements, Equal.equals(reference));
+    if (Option.isNone(referenceElementIndex)) {
+        return Effect.fail(new ElementNotFound({ selector }));
+    }
+    const offsetReferenceElementIndex = M.value(direction).pipe(M.when('Next', () => Number.increment), M.when('Previous', () => Number.decrement), M.exhaustive)(referenceElementIndex.value);
+    const nextElement = Array.get(focusableElements, offsetReferenceElementIndex);
+    if (Option.isSome(nextElement)) {
+        nextElement.value.focus();
+    }
+    return Effect.void;
 });

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

@@ -7,6 +7,7 @@ export declare const Model: S.Struct<{
     isOpen: typeof S.Boolean;
     isAnimated: typeof S.Boolean;
     transitionState: S.Literal<["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+    maybeFocusSelector: S.OptionFromSelf<typeof S.String>;
 }>;
 export type Model = typeof Model.Type;
 /** Sent when the dialog should open. Triggers the showModal command. */
@@ -40,6 +41,7 @@ export type InitConfig = Readonly<{
     id: string;
     isOpen?: boolean;
     isAnimated?: boolean;
+    focusSelector?: string;
 }>;
 /** Creates an initial dialog model from a config. Defaults to closed and non-animated. */
 export declare const init: (config: InitConfig) => Model;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEvE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAoB,MAAM,YAAY,CAAA;AAQxE,oIAAoI;AACpI,eAAO,MAAM,KAAK;;;;;EAKhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,wEAAwE;AACxE,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,wHAAwH;AACxH,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,6EAA6E;AAC7E,eAAO,MAAM,mBAAmB,wEAA2B,CAAA;AAC3D,iFAAiF;AACjF,eAAO,MAAM,oBAAoB,yEAA4B,CAAA;AAC7D,oGAAoG;AACpG,eAAO,MAAM,uBAAuB,4EAA+B,CAAA;AACnE,mFAAmF;AACnF,eAAO,MAAM,eAAe,oEAAuB,CAAA;AAEnD,8DAA8D;AAC9D,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,KAAK,CAC3B;IACE,OAAO,MAAM;IACb,OAAO,MAAM;IACb,OAAO,mBAAmB;IAC1B,OAAO,oBAAoB;IAC3B,OAAO,uBAAuB;IAC9B,OAAO,eAAe;CACvB,CAQF,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,mBAAmB,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAA;AACjE,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC,IAAI,CAAA;AAEnE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,iIAAiI;AACjI,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC,CAAA;AAEF,0FAA0F;AAC1F,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAKxC,CAAA;AAOF,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAG5D,0EAA0E;AAC1E,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,EAAE,SAAS,OAAO,KAAG,YAyGvD,CAAA;AAID,iGAAiG;AACjG,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,MAA6B,CAAA;AAEpE,wGAAwG;AACxG,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,MAAmC,CAAA;AAEhF,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,CACT,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,oBAAoB,KACzD,OAAO,CAAA;IACZ,YAAY,EAAE,IAAI,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACnD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;CAC/C,CAAC,CAAA;AAEF,sGAAsG;AACtG,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IA+F3D,CAAA;AAED;6EAC6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,EAC1B,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,KAC7D,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,CAgBtE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEvE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAoB,MAAM,YAAY,CAAA;AAQxE,oIAAoI;AACpI,eAAO,MAAM,KAAK;;;;;;EAMhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,wEAAwE;AACxE,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,wHAAwH;AACxH,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,6EAA6E;AAC7E,eAAO,MAAM,mBAAmB,wEAA2B,CAAA;AAC3D,iFAAiF;AACjF,eAAO,MAAM,oBAAoB,yEAA4B,CAAA;AAC7D,oGAAoG;AACpG,eAAO,MAAM,uBAAuB,4EAA+B,CAAA;AACnE,mFAAmF;AACnF,eAAO,MAAM,eAAe,oEAAuB,CAAA;AAEnD,8DAA8D;AAC9D,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,KAAK,CAC3B;IACE,OAAO,MAAM;IACb,OAAO,MAAM;IACb,OAAO,mBAAmB;IAC1B,OAAO,oBAAoB;IAC3B,OAAO,uBAAuB;IAC9B,OAAO,eAAe;CACvB,CAQF,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,mBAAmB,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAA;AACjE,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC,IAAI,CAAA;AAEnE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,iIAAiI;AACjI,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC,CAAA;AAEF,0FAA0F;AAC1F,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAMxC,CAAA;AAOF,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAG5D,0EAA0E;AAC1E,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,EAAE,SAAS,OAAO,KAAG,YAgHvD,CAAA;AAID,iGAAiG;AACjG,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,MAA6B,CAAA;AAEpE,wGAAwG;AACxG,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,MAAmC,CAAA;AAEhF,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,CACT,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,oBAAoB,KACzD,OAAO,CAAA;IACZ,YAAY,EAAE,IAAI,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACnD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;CAC/C,CAAC,CAAA;AAEF,sGAAsG;AACtG,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IAiG3D,CAAA;AAED;6EAC6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,EAC1B,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,KAC7D,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,CAgBtE,CAAA"}

package/dist/ui/dialog/index.js

@@ -12,6 +12,7 @@ export const Model = S.Struct({
     isOpen: S.Boolean,
     isAnimated: S.Boolean,
     transitionState: TransitionState,
+    maybeFocusSelector: S.OptionFromSelf(S.String),
 });
 // MESSAGE
 /** Sent when the dialog should open. Triggers the showModal command. */
@@ -34,6 +35,7 @@ export const init = (config) => ({
     isOpen: config.isOpen ?? false,
     isAnimated: config.isAnimated ?? false,
     transitionState: 'Idle',
+    maybeFocusSelector: Option.fromNullable(config.focusSelector),
 });
 // UPDATE
 const dialogSelector = (id) => `#${id}`;
@@ -44,7 +46,11 @@ export const update = (model, message) => {
     const maybeNextFrame = OptionExt.when(model.isAnimated, Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame())));
     return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
         Opened: () => {
-            const maybeShow = Option.liftPredicate(Task.lockScroll.pipe(Effect.andThen(() => Task.showModal(dialogSelector(model.id))), Effect.ignore, Effect.as(CompletedDialogShow())), () => !model.isOpen);
+            const focusOptions = Option.match(model.maybeFocusSelector, {
+                onNone: () => undefined,
+                onSome: focusSelector => ({ focusSelector }),
+            });
+            const maybeShow = Option.liftPredicate(Task.lockScroll.pipe(Effect.andThen(() => Task.showModal(dialogSelector(model.id), focusOptions)), Effect.ignore, Effect.as(CompletedDialogShow())), () => !model.isOpen);
             return [
                 evo(model, {
                     isOpen: () => true,
@@ -127,7 +133,8 @@ export const view = (config) => {
         AriaDescribedBy(`${id}-description`),
         OnCancel(toMessage(Closed())),
         Style({
-            overflow: 'hidden',
+            width: '100%',
+            height: '100%',
             maxWidth: '100%',
             maxHeight: '100%',
             padding: '0',
@@ -139,6 +146,7 @@ export const view = (config) => {
         ...attributes,
     ];
     const backdrop = keyed('div')(`${id}-backdrop`, [
+        Style({ minHeight: '100vh' }),
         ...transitionAttributes,
         ...(isLeaving ? [] : [OnClick(toMessage(Closed()))]),
         ...(backdropClassName ? [Class(backdropClassName)] : []),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.36.1",
+  "version": "0.36.3",
   "description": "A frontend framework for TypeScript, built on Effect, using The Elm Architecture",
   "type": "module",
   "main": "./dist/index.js",