@t007/dialog 0.0.31 → 0.0.33

package/dist/index.css

@@ -152,6 +152,7 @@ body:has(> .t007-dialog) {
 }
 .t007-dialog-backdrop {
   z-index: 2147483646;
+  pointer-events: none;
 }
 .t007-dialog[open]::backdrop,
 .t007-dialog.t007-dialog-scoped[open] + .t007-dialog-backdrop {

package/dist/index.d.ts

@@ -1,8 +1,7 @@
-import "@t007/utils";
-import type { FieldOptions } from "@t007/input";
+import { FieldOptions } from '@t007/input';
 
 /** Shared options for alert, confirm, and prompt dialogs. */
-export interface DialogOptions {
+interface DialogOptions {
   /** Unique identifier for the dialog for programmatic dismissal. Auto-generated by default. */
   id?: string;
   /** Text for the confirmation button. @default  "OK". */
@@ -23,31 +22,31 @@ export interface DialogOptions {
  * @param id Optional unique identifier of the dialog to check.
  * @return `true` if the specified dialog (or any dialog when no id is provided) is active, otherwise `false`.
  */
-export function isActive(id?: string): boolean;
+declare function isActive(id?: string): boolean;
 /** Show an alert dialog and resolve when the user confirms.
  * @param message Message shown in the dialog body.
  * @param options Optional dialog configuration.
  * @returns Promise that resolves to the user choice.
  */
-export function alert(message: string, options?: DialogOptions): Promise<boolean>;
+declare function alert(message: string, options?: DialogOptions): Promise<boolean>;
 /** Show a confirm dialog and resolve with the user choice.
  * @param question Question shown in the dialog body.
  * @param options Optional dialog configuration.
  * @returns Promise that resolves to true when confirmed.
  */
-export function confirm(question: string, options?: DialogOptions): Promise<boolean>;
+declare function confirm(question: string, options?: DialogOptions): Promise<boolean>;
 /** Show a prompt dialog and resolve with the entered value.
  * @param question Question shown in the dialog body.
  * @param defaultValue Initial value for the prompt input.
  * @param options Optional dialog configuration.
  * @returns Promise that resolves to the entered string or null.
  */
-export function prompt(question: string, defaultValue?: string, options?: DialogOptions & FieldOptions): Promise<string | null>;
+declare function prompt(question: string, defaultValue?: string, options?: DialogOptions & FieldOptions): Promise<string | null>;
 /** Dismiss a dialog by id or all dialogs when no id is provided.
  * @param id Optional unique identifier of the dialog to dismiss. If not provided, all dialogs will be dismissed.
  * @param response Optional value to resolve the dialog's promise with. If not provided, defaults to `true` for confirm and alert dialogs, and `null` for prompt dialogs.
  */
-export function dismiss(id?: string, response?: any): void;
+declare function dismiss(id?: string, response?: any): void;
 
 interface Dialog {
   isActive(id?: string): boolean;
@@ -74,3 +73,5 @@ declare global {
     Prompt?: T007Namespace["prompt"];
   }
 }
+
+export { type DialogOptions, alert, confirm, dismiss, isActive, prompt };

package/dist/index.global.js

@@ -5,7 +5,7 @@
     return Math.min(Math.max(val, min), max);
   }
 
-  // ../../../sia-reactor/dist/chunk-243U74PP.js
+  // ../../../sia-reactor/dist/chunk-ORK3EGB6.js
   function onAllMethods(owner, callback, skipOwn = true, nested = false) {
     let proto = owner;
     while (proto && proto !== Object.prototype) {
@@ -25,16 +25,22 @@
   function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
     return assignEl(el, props, dataset, styles);
   }
-  function assignEl(el, props, dataset, styles) {
+  function assignEl(el, props, dataset, styles, nodiff = true) {
     if (!el) return null;
     if (props) {
-      for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
+      for (const k of Object.keys(props)) if (props[k] !== void 0) {
+        if (nodiff || el[k] !== props[k]) el[k] = props[k];
+      }
     }
     if (dataset) {
-      for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
+      for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) {
+        if (nodiff || el.dataset[k] !== dataset[k]) el.dataset[k] = String(dataset[k]);
+      }
     }
     if (styles) {
-      for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+      for (const k of Object.keys(styles)) if (styles[k] !== void 0) {
+        if (nodiff || el.style[k] !== styles[k]) el.style[k] = styles[k];
+      }
     }
     return el;
   }
@@ -43,35 +49,19 @@
     return !activeEl ? null : activeEl.shadowRoot ? getActiveEl(activeEl.shadowRoot) : activeEl;
   }
 
-  // ../../../sia-reactor/dist/chunk-2ZYYYSZ4.js
+  // ../../../sia-reactor/dist/chunk-WYSENFHG.js
   var RTR_BATCH = "undefined" !== typeof window ? ("undefined" !== typeof queueMicrotask ? queueMicrotask : setTimeout).bind(window) : "undefined" !== typeof process && process.nextTick ? process.nextTick : setTimeout;
   var RTR_LOG = console.log.bind(console, "[S.I.A Reactor]");
   var NIL = Object.freeze({});
   var NOOP = () => {
   };
-  var CTX = {
-    /** Flag indicating whether the application is running in development mode. */
-    isDevEnv: "undefined" !== typeof process ? process.env.NODE_ENV !== "production" : true,
-    /** Flag indicating whether an operation is bypassing checks so reactors can allow all writes. */
-    usingForce: false,
-    /** Active `Autotracker` instance, override for automatic dependency collection on `Reactor` traps. */
-    autotracker: null,
-    /** Extensible meta context for payloads and cross-cutting concerns. */
-    meta: null,
-    /** Default configuration for new `Reactor` instances and also fallback for utils that need and are called without these options. */
-    defaults: {
-      crossRealms: false,
-      smartCloning: false,
-      eventBubbling: true,
-      eventCapturing: "auto",
-      lineageTracing: false,
-      preserveContext: false,
-      equalityFunction: Object.is,
-      batchingFunction: RTR_BATCH
-    }
-  };
+  var isDevEnv = false;
+  try {
+    isDevEnv = process.env.NODE_ENV !== "production";
+  } catch (e) {
+  }
 
-  // ../utils/dist/chunk-HGUYOV3P.js
+  // ../utils/dist/chunk-ZOFWWRKV.js
   var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
   var isInteractive = (target) => target instanceof HTMLElement && target.matches(INTERACTIVE_SELECTOR);
   var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
@@ -91,7 +81,7 @@
             console.warn(`Retrying ${type} load for "${src}" (${attempts - remaining + 1})...`);
           } else {
             delete win.t007._resourceCache[src];
-            reject(new Error(`${capitalize(type)} load failed for "${src}" after ${attempts - 1} attempts`));
+            reject(new Error(`${capitalize(type)} load failed for "${src}"`));
           }
         };
         const url = retryKey && remaining < attempts ? `${src}${src.includes("?") ? "&" : "?"}_${retryKey}=${Date.now()}` : src;
@@ -143,33 +133,33 @@
     window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`;
   }
 
-  // ../utils/dist/chunk-ZRCBB5P4.js
+  // ../utils/dist/chunk-DSDFIB5F.js
   function initOutsideClick(el, { enabled = false, onOutside = NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowBounds = false, allowInputs = false, root = window, scoped = true, capture = true } = NIL) {
-    const stacks = t007._outsiders_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
+    const stack = t007._outsiders_stack ??= [], existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
     if (!enabled || existing) return existing ? existing : void 0;
     scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-    const stack = stacks.get(root) ?? [], onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
+    const onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
       if (stack.at(-1) !== el || (allowBounds ? p.clientX >= rect.left && p.clientX <= rect.right && p.clientY >= rect.top && p.clientY <= rect.bottom : el.contains(t))) return false;
       return (!scoped ? true : root.contains(t)) && onOutside(e);
     }, handleClick = ((e) => outOnClick && !(allowInputs && isInteractive(e.target)) && onScopedOut(e, e.target)), handleEscape = ((e) => outOnEscape && e.key === "Escape" && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && stack.at(-1) === el && onOutside(e)), handleFocusOut = (e) => outOnFocusOut && !el.contains(e.relatedTarget) && onScopedOut(e, e.relatedTarget);
     root.addEventListener("mousedown", handleClick, capture), root.addEventListener("touchstart", handleClick, { passive: true, capture });
     root.addEventListener("keydown", handleEscape, capture);
     el.addEventListener("focusout", handleFocusOut, capture);
-    if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
     const destroy = () => {
       root.removeEventListener("mousedown", handleClick, capture), root.removeEventListener("touchstart", handleClick, capture);
       root.removeEventListener("keydown", handleEscape, capture);
       el.removeEventListener("focusout", handleFocusOut, capture);
       t007._outsiders.delete(el), stack.splice(stack.indexOf(el), 1);
     };
-    return t007._outsiders.set(el, destroy), destroy;
+    return !stack.includes(el) && stack.push(el), t007._outsiders.set(el, destroy), destroy;
   }
   var removeOutsideClick = (el) => t007._outsiders?.get(el)?.();
   function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = NIL) {
-    const stacks = t007._ftrappers_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
+    const stack = t007._ftrappers_stack ??= [], existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
     if (!enabled || existing) return existing ? existing : void 0;
     scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-    const stack = stacks.get(root) ?? [], focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = createEl("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = createEl("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), edgeFocus = (pre = false, rt = root) => {
+    let recovering = false;
+    const focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = createEl("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = createEl("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => !recovering && (recovering = true, els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), recovering = false), edgeFocus = (pre = false, rt = root) => {
       if (!scoped) return resetFocus(pre ? -1 : 0);
       if (rt.hasAttribute("tabindex")) return rt.focus();
       const items = getFocusable();
@@ -179,24 +169,24 @@
       while (p !== ceil && (!all.length || (pre ? rt.contains(all[0]) : rt.contains(all.at(-1))))) all = getFocusable(p = p.parentElement || ceil);
       for (let target, len = all.length, i = all.indexOf(items[pre ? 0 : items.length - 1]) + (pre ? -1 : 1); pre ? i >= 0 : i < len; pre ? i-- : i++) if (!rt.contains(target = all[i])) return target.focus();
       (pre ? first : last).blur();
-    }, handleFocusIn = () => {
+    }, handleFocusIn = (e) => {
       if (document.querySelector("dialog:modal") && !el.matches("dialog:modal")) return;
-      stack.at(-1) === el && getActiveEl(el.ownerDocument) !== root && !el.contains(getActiveEl(el.ownerDocument)) && resetFocus();
+      stack.at(-1) === el && getActiveEl(el.ownerDocument) !== root && !el.contains(getActiveEl(el.ownerDocument)) && !e.composedPath().includes(el) && resetFocus();
     }, handleInitialBlur = () => initial.classList.remove(ringClassName);
     first.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus(true) : resetFocus(), capture), el.prepend(first);
     last.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus() : resetFocus(-1), capture), el.append(last);
     root.addEventListener("focusin", handleFocusIn, capture);
     if (initial || !el.contains(focused)) !initial ? setTimeout(resetFocus) : setTimeout(() => (initial.classList.add(ringClassName), initial.focus(), initial.addEventListener("blur", handleInitialBlur, capture)));
-    if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
     const destroy = () => {
       focused?.isConnected && focused.focus(), first.remove(), last.remove();
       root.removeEventListener("focusin", handleFocusIn, capture);
       initial?.removeEventListener("blur", handleInitialBlur, capture);
       t007._ftrappers.delete(el), stack.splice(stack.indexOf(el), 1);
     };
-    return t007._ftrappers.set(el, destroy), destroy;
+    const handle = { destroy, sync: () => (el.prepend(first), el.append(last)) };
+    return !stack.includes(el) && stack.push(el), t007._ftrappers.set(el, handle), handle;
   }
-  var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.();
+  var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.destroy();
   var getTargetIndex = ({ key, currIndex, length, gridX, gridY, vGridY, loop, ctrlKey = false, rtl }) => {
     const rowStart = currIndex - currIndex % gridX, rowEnd = Math.min(rowStart + gridX - 1, length - 1), colStart = currIndex % gridX, colEnd = Math.min(colStart + gridX * (gridY - 1), length - 1), canX = gridX > 1, canY = gridY > 1, horizontalMove = rtl ? { ArrowRight: canX ? -1 : 0, ArrowLeft: canX ? 1 : 0 } : { ArrowRight: canX ? 1 : 0, ArrowLeft: canX ? -1 : 0 }, move = { ...horizontalMove, ArrowDown: canY ? gridX : 0, ArrowUp: canY ? -gridX : 0, Home: ctrlKey ? 0 : rowStart, End: ctrlKey ? length - 1 : rowEnd, PageDown: (vGridY - 1) * gridX, PageUp: -(vGridY - 1) * gridX }[key] ?? 0;
     let targetIndex = key === "Home" || key === "End" ? move : currIndex + move;
@@ -245,7 +235,7 @@
   var DEFAULT_CONFIG = {
     enabled: null,
     selector: "[data-arrow-item]",
-    focusOnHover: true,
+    focusOnHover: false,
     loop: true,
     virtual: false,
     typeahead: false,
@@ -269,7 +259,7 @@
     if (!config.enabled || existing) return existing ? existing : void 0;
     const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut, rovingTab } = { ...DEFAULT_CONFIG, ...config };
     let gridX = grid.x || 1, gridY = grid.y || 1, vGridY = grid.vY || 1, activeIndex = -1, buffer = "", timeout = null, items = [];
-    const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.hasAttribute("disabled") || el.hasAttribute("aria-disabled"), getItems = () => items = Array.from(container.querySelectorAll(selector));
+    const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.matches('[disabled],[aria-disabled="true"],[inert],:disabled'), getItems = () => items = Array.from(container.querySelectorAll(selector));
     const getAbleIndex = (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
       if (shouldSnub() || !items.length) return null;
       let index = targetIndex;
@@ -344,34 +334,41 @@
       if (idx !== -1) goToIndex(idx);
     };
     for (const el of items) el.addEventListener("mouseenter", handleHover);
-    const mutationObserver = new MutationObserver(() => {
+    const sync = () => {
       const oldEl = items[activeIndex];
+      for (const el of items) el.removeEventListener("mouseenter", handleHover);
       getItems();
+      for (const el of items) el.addEventListener("mouseenter", handleHover);
+      calcGrid();
       const newEl = items[activeIndex];
       updateDOM();
       if (oldEl && newEl && oldEl === newEl) return;
-      resetActiveIndex();
-      updateDOM();
-    });
+      resetActiveIndex(), updateDOM();
+    };
+    const mutationObserver = new MutationObserver(sync);
     mutationObserver.observe(container, { childList: true, subtree: true });
     const setGrid = (g) => {
       if (g.x !== void 0) gridX = g.x;
       if (g.y !== void 0) gridY = g.y;
       if (g.vY !== void 0) vGridY = g.vY;
     };
-    const calcGrid = () => setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+    let ancestor = null;
+    const resizeObserver = new ResizeObserver(() => calcGrid());
+    const calcGrid = () => {
+      setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+      const next = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
+      if (next && next !== ancestor) ancestor && resizeObserver.unobserve(ancestor), ancestor = next, resizeObserver.observe(ancestor);
+    };
     setGrid(grid), calcGrid();
-    const ancestor = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
-    const resizeObserver = new ResizeObserver(calcGrid);
-    if (ancestor) resizeObserver.observe(ancestor);
     const destroy = () => {
       for (const el of interactiveEls) el?.removeEventListener("keydown", simulateKey);
       container.removeEventListener("focusout", handleFocusOut);
       for (const el of items) el.removeEventListener("mouseenter", handleHover);
       mutationObserver.disconnect(), resizeObserver.disconnect();
       if (timeout) clearTimeout(timeout);
+      t007._arrownavs.delete(container);
     };
-    const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, destroy };
+    const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, sync, destroy };
     return t007._arrownavs.set(container, handle), handle;
   }
   var removeArrowNavigation = (container) => t007._arrownavs?.get(container)?.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t007/dialog",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "description": "A lightweight, pure JS dialog system.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "accessible"
   ],
   "dependencies": {
-    "@t007/utils": "^0.0.34"
+    "@t007/utils": "^0.0.36"
   },
   "devDependencies": {
     "esbuild-sass-plugin": "^3.7.0"