@t007/dialog 0.0.27 → 0.0.29

package/dist/index.css

@@ -83,10 +83,11 @@
   cursor: pointer;
   filter: brightness(1.15);
 }
-:is(html, body):has(.t007-dialog) {
+html:has(> body > .t007-dialog),
+body:has(> .t007-dialog) {
   overflow: hidden;
 }
-body:has(.t007-dialog) {
+body:has(> .t007-dialog) {
   overflow-y: visible;
 }
 *:where(:has(> .t007-dialog.t007-dialog-scoped)) {

package/dist/index.global.js

@@ -44,7 +44,7 @@
     });
   }
 
-  // ../../../sia-reactor/dist/chunk-EZ4VRGYI.js
+  // ../../../sia-reactor/dist/chunk-4PLMBUCP.js
   var CTX = {
     /** Flag indicating whether the application is running in development mode. */
     isDevEnv: "undefined" !== typeof process ? process.env.NODE_ENV !== "production" : true,
@@ -59,7 +59,7 @@
   var NOOP = () => {
   };
 
-  // ../utils/dist/chunk-Y5YJMRXD.js
+  // ../utils/dist/chunk-4O76EZJ4.js
   var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable='true'],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");
@@ -105,15 +105,18 @@
   function parseCSSTime(time) {
     return time?.endsWith?.("ms") ? parseFloat(time) : parseFloat(time) * 1e3;
   }
-  function isSameURL(src1, src2) {
-    if (!isStr(src1) || !isStr(src2) || !src1 || !src2) return false;
+  function cleanURL(url) {
     try {
-      const u1 = new URL(src1, window.location.href), u2 = new URL(src2, window.location.href);
-      return decodeURIComponent(u1.origin + u1.pathname) === decodeURIComponent(u2.origin + u2.pathname);
+      const u = new URL(url, window.location.href);
+      return decodeURIComponent(u.origin + u.pathname);
     } catch {
-      return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
+      return url.replace(/\\/g, "/").split("?")[0].trim();
     }
   }
+  function isSameURL(url1, url2) {
+    if (!isStr(url1) || !isStr(url2) || !url1 || !url2) return false;
+    return cleanURL(url1) === cleanURL(url2);
+  }
   if ("undefined" !== typeof window) {
     (window.t007 ??= {}).VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
     window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
@@ -124,17 +127,18 @@
     window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`;
   }
 
-  // ../utils/dist/chunk-YDARUYLO.js
-  function initOutsideClick(el, { enabled = false, onOutsideClick = NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowInputs = false, root = window, scoped = true, capture = true } = NIL) {
+  // ../utils/dist/chunk-QJ72EQCJ.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);
     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 = el.getBoundingClientRect()) => {
-      if (stack.at(-1) !== el || p.clientX >= rect.left && p.clientX <= rect.right && p.clientY >= rect.top && p.clientY <= rect.bottom) return false;
-      return (!scoped ? true : root.contains(t)) && onOutsideClick(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 && onOutsideClick(e)), handleFocusOut = (e) => outOnFocusOut && !el.contains(e.relatedTarget) && onScopedOut(e, e.relatedTarget);
+    const stack = stacks.get(root) ?? [], 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);
+    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);
@@ -166,7 +170,7 @@
     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 (!el.querySelector(":focus")) !initial ? setTimeout(resetFocus) : setTimeout(() => (initial.classList.add(ringClassName), initial.focus(), initial.addEventListener("blur", handleInitialBlur, 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();
@@ -363,10 +367,10 @@
       this.resolve = resolve;
       t007.dialogs.set(this.id = id ?? uid("t007_dialog_"), this);
       this.rootElement = root?.isConnected ? root : document.body, this.rootScoped = this.rootElement !== document.body, this.scoped = this.rootScoped && scoped;
-      this.rootElement.append(this.dialog = createEl("dialog", { closedBy: by || (this.rootScoped ? "none" : "any"), className: `t007-dialog${this.rootScoped ? " t007-dialog-scoped" : ""}`, id: this.id }), this.rootScoped ? this.backdrop = createEl("div", { className: "t007-dialog-backdrop", id: `${this.id}_backdrop` }) : null);
+      this.rootElement.append(this.dialog = createEl("dialog", { closedBy: by || (this.rootScoped ? "none" : "any"), className: `t007-dialog${this.rootScoped ? " t007-dialog-scoped" : ""}`, id: this.id }), this.rootScoped ? this.backdrop = createEl("div", { className: "t007-dialog-backdrop", id: `${this.id}_backdrop` }) : "");
       this.dialog.addEventListener("cancel", this.cancel);
       initArrowNavigation(this.dialog, { enabled: true, rovingTab: false });
-      this.rootScoped && !by && initOutsideClick(this.dialog, { enabled: true, onOutsideClick: this.cancel, root: this.rootElement, scoped: this.scoped });
+      this.rootScoped && !by && initOutsideClick(this.dialog, { enabled: true, onOutside: this.cancel, root: this.rootElement, scoped: this.scoped });
     }
     show() {
       this.dialog[this.rootScoped ? "show" : "showModal"]();
@@ -394,7 +398,7 @@
         <div class="t007-dialog-question">${message}</div>
       </div>
       <div class="t007-dialog-bottom-section">
-        <button type="button" data-autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
+        <button type="button" autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
       </div>
     `;
       this.dialog.querySelector(".t007-dialog-confirm-button").addEventListener("click", this.confirm);
@@ -411,7 +415,7 @@
         <div class="t007-dialog-question">${question}</div>
       </div>
       <div class="t007-dialog-bottom-section">
-        <button type="button" data-autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
+        <button type="button" autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
         <button type="button" data-arrow-item class="t007-dialog-cancel-button">${options.cancelText || "Cancel"}</button>
       </div>
     `;
@@ -425,7 +429,7 @@
       super(resolve, options), this.render(question, defaultValue, options);
     }
     async render(question, defaultValue, options) {
-      options = { ...options, value: defaultValue };
+      options = { autofocus: true, ...options, value: defaultValue };
       await loadResource(window.T007_INPUT_JS_SRC, "script");
       this.dialog.innerHTML = `
       <form class="t007-input-form" ${t007.field ? "novalidate" : ""}>

package/dist/index.js

@@ -7,10 +7,10 @@ var T007_Dialog = class {
     this.resolve = resolve;
     t007.dialogs.set(this.id = id ?? uid("t007_dialog_"), this);
     this.rootElement = root?.isConnected ? root : document.body, this.rootScoped = this.rootElement !== document.body, this.scoped = this.rootScoped && scoped;
-    this.rootElement.append(this.dialog = createEl("dialog", { closedBy: by || (this.rootScoped ? "none" : "any"), className: `t007-dialog${this.rootScoped ? " t007-dialog-scoped" : ""}`, id: this.id }), this.rootScoped ? this.backdrop = createEl("div", { className: "t007-dialog-backdrop", id: `${this.id}_backdrop` }) : null);
+    this.rootElement.append(this.dialog = createEl("dialog", { closedBy: by || (this.rootScoped ? "none" : "any"), className: `t007-dialog${this.rootScoped ? " t007-dialog-scoped" : ""}`, id: this.id }), this.rootScoped ? this.backdrop = createEl("div", { className: "t007-dialog-backdrop", id: `${this.id}_backdrop` }) : "");
     this.dialog.addEventListener("cancel", this.cancel);
     initArrowNavigation(this.dialog, { enabled: true, rovingTab: false });
-    this.rootScoped && !by && initOutsideClick(this.dialog, { enabled: true, onOutsideClick: this.cancel, root: this.rootElement, scoped: this.scoped });
+    this.rootScoped && !by && initOutsideClick(this.dialog, { enabled: true, onOutside: this.cancel, root: this.rootElement, scoped: this.scoped });
   }
   show() {
     this.dialog[this.rootScoped ? "show" : "showModal"]();
@@ -38,7 +38,7 @@ var T007_Alert_Dialog = class extends T007_Dialog {
         <div class="t007-dialog-question">${message}</div>
       </div>
       <div class="t007-dialog-bottom-section">
-        <button type="button" data-autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
+        <button type="button" autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
       </div>
     `;
     this.dialog.querySelector(".t007-dialog-confirm-button").addEventListener("click", this.confirm);
@@ -55,7 +55,7 @@ var T007_Confirm_Dialog = class extends T007_Dialog {
         <div class="t007-dialog-question">${question}</div>
       </div>
       <div class="t007-dialog-bottom-section">
-        <button type="button" data-autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
+        <button type="button" autofocus data-arrow-item class="t007-dialog-confirm-button">${options.confirmText || "OK"}</button>
         <button type="button" data-arrow-item class="t007-dialog-cancel-button">${options.cancelText || "Cancel"}</button>
       </div>
     `;
@@ -69,7 +69,7 @@ var T007_Prompt_Dialog = class extends T007_Dialog {
     super(resolve, options), this.render(question, defaultValue, options);
   }
   async render(question, defaultValue, options) {
-    options = { ...options, value: defaultValue };
+    options = { autofocus: true, ...options, value: defaultValue };
     await loadResource(window.T007_INPUT_JS_SRC, "script");
     this.dialog.innerHTML = `
       <form class="t007-input-form" ${t007.field ? "novalidate" : ""}>

package/package.json

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