@t007/dialog 0.0.27 → 0.0.28

package/dist/index.global.js

@@ -124,17 +124,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-LBDWVTYF.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 +167,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 +364,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 +395,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 +412,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 +426,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.28",
   "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.31"
   },
   "devDependencies": {
     "esbuild-sass-plugin": "^3.7.0"