kerfjs 4.2.0 → 4.3.0

package/dist/overlay.js

@@ -1,4 +1,4 @@
-import { mount } from './chunk-LKWAKC2X.js';
+import { mount } from './chunk-SRWQKB33.js';
 import { delegate } from './chunk-KEZTD6H4.js';
 import './chunk-QIP723L4.js';
 import './chunk-YHH7OUFA.js';
@@ -37,197 +37,7 @@ function autoReposition(el, anchor, options = {}) {
   };
 }
 
-// src/overlay-toast.ts
-var TOAST_SET = /* @__PURE__ */ Symbol("kerf.toasts");
-function toastRegion(container) {
-  if (container !== void 0) return container;
-  const existing = document.querySelector(".kerf-toasts");
-  if (existing !== null) return existing;
-  const region = document.createElement("div");
-  region.className = "kerf-toasts";
-  region.setAttribute("aria-live", "polite");
-  document.body.appendChild(region);
-  return region;
-}
-function toast(content, options = {}) {
-  const {
-    container,
-    className = "kerf-toast",
-    duration = 4e3,
-    role = "status",
-    mode = "stack",
-    collapse = "fade",
-    variant,
-    enterClass,
-    exitClass,
-    exitDuration = 0
-  } = options;
-  const region = toastRegion(container);
-  const active = region[TOAST_SET] ??= /* @__PURE__ */ new Set();
-  if (mode === "replace") {
-    for (const d of [...active]) {
-      if (collapse === "instant") d.removeNow();
-      else d();
-    }
-  }
-  const el = document.createElement("div");
-  el.className = className;
-  if (variant !== void 0) el.classList.add(`${className}--${variant}`);
-  el.setAttribute("role", role);
-  region.appendChild(el);
-  const disposeMount = mount(el, typeof content === "function" ? content : () => content);
-  const state = { dismissed: false, removed: false, timer: void 0, exitTimer: void 0 };
-  if (enterClass !== void 0) {
-    globalThis.requestAnimationFrame(() => {
-      if (!state.dismissed) el.classList.add(enterClass);
-    });
-  }
-  const remove = () => {
-    if (state.removed) return;
-    state.removed = true;
-    state.dismissed = true;
-    if (state.exitTimer !== void 0) clearTimeout(state.exitTimer);
-    disposeMount();
-    el.remove();
-    active.delete(dismiss);
-  };
-  const removeNow = () => {
-    if (state.timer !== void 0) clearTimeout(state.timer);
-    remove();
-  };
-  const fadeOut = () => {
-    if (state.dismissed) return;
-    state.dismissed = true;
-    if (state.timer !== void 0) clearTimeout(state.timer);
-    if (enterClass !== void 0) el.classList.remove(enterClass);
-    if (exitClass !== void 0) el.classList.add(exitClass);
-    if (exitClass !== void 0 || exitDuration > 0) {
-      state.exitTimer = setTimeout(remove, exitDuration);
-    } else {
-      remove();
-    }
-  };
-  function dismiss(options2) {
-    if (options2?.instant === true) removeNow();
-    else fadeOut();
-  }
-  dismiss.removeNow = removeNow;
-  active.add(dismiss);
-  if (duration > 0) state.timer = setTimeout(fadeOut, duration);
-  return { el, dismiss };
-}
-
-// src/overlay.ts
-var FOCUSABLE = 'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
-function focusable(root) {
-  return Array.from(root.querySelectorAll(FOCUSABLE)).filter(
-    (el) => !el.hasAttribute("hidden")
-  );
-}
-function overlay(content, options = {}) {
-  const {
-    container = document.body,
-    className = "kerf-overlay",
-    dismiss = ["escape", "backdrop"],
-    initialFocus = true,
-    trap = true,
-    role = "dialog",
-    onDismiss,
-    outsideIgnore
-  } = options;
-  const triggers = dismiss === false ? [] : Array.isArray(dismiss) ? dismiss : [dismiss];
-  const restoreTo = document.activeElement;
-  const wrapper = document.createElement("div");
-  wrapper.className = className;
-  if (trap) {
-    wrapper.setAttribute("role", role);
-    wrapper.setAttribute("aria-modal", "true");
-  }
-  container.appendChild(wrapper);
-  const disposeMount = mount(wrapper, typeof content === "function" ? content : () => content);
-  const removers = [];
-  const resultBox = {};
-  const result = new Promise((resolve) => {
-    resultBox.resolve = resolve;
-  });
-  const state = { closed: false };
-  function close(value) {
-    if (state.closed) return;
-    state.closed = true;
-    for (const remove of removers) remove();
-    disposeMount();
-    wrapper.remove();
-    if (restoreTo instanceof HTMLElement && restoreTo.isConnected) restoreTo.focus();
-    resultBox.resolve?.(value);
-  }
-  function userDismiss() {
-    onDismiss?.();
-    close();
-  }
-  const wantEscape = triggers.includes("escape");
-  if (wantEscape || trap) {
-    const onKeydown = (event) => {
-      if (wantEscape && event.key === "Escape") {
-        event.stopPropagation();
-        userDismiss();
-        return;
-      }
-      if (trap && event.key === "Tab") {
-        const items = focusable(wrapper);
-        if (items.length === 0) {
-          event.preventDefault();
-          return;
-        }
-        const first = items[0];
-        const last = items[items.length - 1];
-        const active = document.activeElement;
-        const outside = !wrapper.contains(active);
-        if (event.shiftKey && (active === first || outside)) {
-          event.preventDefault();
-          last.focus();
-        } else if (!event.shiftKey && (active === last || outside)) {
-          event.preventDefault();
-          first.focus();
-        }
-      }
-    };
-    document.addEventListener("keydown", onKeydown, true);
-    removers.push(() => document.removeEventListener("keydown", onKeydown, true));
-  }
-  if (triggers.includes("backdrop")) {
-    const onClick = (event) => {
-      if (event.target === wrapper) userDismiss();
-    };
-    wrapper.addEventListener("click", onClick);
-    removers.push(() => wrapper.removeEventListener("click", onClick));
-  }
-  if (triggers.includes("outside")) {
-    const ignore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? outsideIgnore : [outsideIgnore];
-    const onDocClick = (event) => {
-      const target = event.target;
-      if (target === null) return;
-      if (wrapper.contains(target)) return;
-      if (ignore.some((el) => el === target || el.contains(target))) return;
-      userDismiss();
-    };
-    document.addEventListener("click", onDocClick, true);
-    removers.push(() => document.removeEventListener("click", onDocClick, true));
-  }
-  if (initialFocus !== false) {
-    if (typeof initialFocus === "string") {
-      wrapper.querySelector(initialFocus)?.focus();
-    } else {
-      const first = focusable(wrapper)[0];
-      if (first !== void 0) {
-        first.focus();
-      } else {
-        wrapper.tabIndex = -1;
-        wrapper.focus();
-      }
-    }
-  }
-  return { el: wrapper, close, result };
-}
+// src/overlay-dialogs.ts
 function confirm(message, options = {}) {
   const {
     container,
@@ -236,6 +46,7 @@ function confirm(message, options = {}) {
     okText = "OK",
     cancelText = "Cancel",
     danger = false,
+    native = false,
     render
   } = options;
   const body = render !== void 0 ? render({ message, ok: { "data-confirm": "ok" }, cancel: { "data-confirm": "cancel" } }) : jsx("div", {
@@ -262,7 +73,8 @@ function confirm(message, options = {}) {
     className: danger ? `${className} kerf-confirm--danger` : className,
     dismiss: ["escape", "backdrop"],
     initialFocus: '[data-confirm="ok"]',
-    trap: true
+    trap: true,
+    native
   });
   delegate(handle.el, "click", "[data-confirm]", (_event, el) => {
     handle.close(el.getAttribute("data-confirm") === "ok");
@@ -280,6 +92,7 @@ function prompt(message, options = {}) {
     okText = "OK",
     cancelText = "Cancel",
     validate,
+    native = false,
     render
   } = options;
   const inputAttrs = {
@@ -320,7 +133,8 @@ function prompt(message, options = {}) {
     className,
     dismiss: ["escape", "backdrop"],
     initialFocus: "[data-prompt-input]",
-    trap: true
+    trap: true,
+    native
   });
   const input = handle.el.querySelector("[data-prompt-input]");
   const errorEl = handle.el.querySelector("[data-prompt-error]");
@@ -351,7 +165,15 @@ function prompt(message, options = {}) {
   return handle.result.then((value) => typeof value === "string" ? value : null);
 }
 function form(fields, options = {}) {
-  const { container, className = "kerf-overlay", title, okText = "OK", cancelText = "Cancel", render } = options;
+  const {
+    container,
+    className = "kerf-overlay",
+    title,
+    okText = "OK",
+    cancelText = "Cancel",
+    native = false,
+    render
+  } = options;
   const fieldAttrs = (field) => ({
     "data-field": field.name,
     name: field.name,
@@ -401,7 +223,8 @@ function form(fields, options = {}) {
     className,
     dismiss: ["escape", "backdrop"],
     initialFocus: "[data-field]",
-    trap: true
+    trap: true,
+    native
   });
   const byAttr = (attr, name) => Array.from(handle.el.querySelectorAll(`[${attr}]`)).find(
     (el) => el.getAttribute(attr) === name
@@ -453,7 +276,7 @@ function form(fields, options = {}) {
   );
 }
 function choice(message, actions, options = {}) {
-  const { container, className = "kerf-overlay", title, defaultValue, render } = options;
+  const { container, className = "kerf-overlay", title, defaultValue, native = false, render } = options;
   const hasDefault = "defaultValue" in options;
   const actionAttrs = actions.map((_, i) => ({ "data-choice": String(i) }));
   const body = render !== void 0 ? render({ message, actions: actionAttrs }) : jsx("div", {
@@ -483,7 +306,8 @@ function choice(message, actions, options = {}) {
     className,
     dismiss: ["escape", "backdrop"],
     initialFocus: "[data-choice]",
-    trap: true
+    trap: true,
+    native
   });
   delegate(handle.el, "click", "[data-choice]", (_event, el) => {
     resolveChoice(actions[Number(el.getAttribute("data-choice"))].value);
@@ -501,6 +325,229 @@ function choice(message, actions, options = {}) {
   void handle.result.then(() => resolveChoice(null));
   return result;
 }
+
+// src/overlay-toast.ts
+var TOAST_SET = /* @__PURE__ */ Symbol("kerf.toasts");
+function toastRegion(container) {
+  if (container !== void 0) return container;
+  const existing = document.querySelector(".kerf-toasts");
+  if (existing !== null) return existing;
+  const region = document.createElement("div");
+  region.className = "kerf-toasts";
+  region.setAttribute("aria-live", "polite");
+  document.body.appendChild(region);
+  return region;
+}
+function toast(content, options = {}) {
+  const {
+    container,
+    className = "kerf-toast",
+    duration = 4e3,
+    role = "status",
+    mode = "stack",
+    collapse = "fade",
+    variant,
+    enterClass,
+    exitClass,
+    exitDuration = 0
+  } = options;
+  const region = toastRegion(container);
+  const active = region[TOAST_SET] ??= /* @__PURE__ */ new Set();
+  if (mode === "replace") {
+    for (const d of [...active]) {
+      if (collapse === "instant") d.removeNow();
+      else d();
+    }
+  }
+  const el = document.createElement("div");
+  el.className = className;
+  if (variant !== void 0) el.classList.add(`${className}--${variant}`);
+  el.setAttribute("role", role);
+  region.appendChild(el);
+  const disposeMount = mount(el, typeof content === "function" ? content : () => content);
+  const state = { dismissed: false, removed: false, timer: void 0, exitTimer: void 0 };
+  if (enterClass !== void 0) {
+    globalThis.requestAnimationFrame(() => {
+      if (!state.dismissed) el.classList.add(enterClass);
+    });
+  }
+  const remove = () => {
+    if (state.removed) return;
+    state.removed = true;
+    state.dismissed = true;
+    if (state.exitTimer !== void 0) clearTimeout(state.exitTimer);
+    disposeMount();
+    el.remove();
+    active.delete(dismiss);
+  };
+  const removeNow = () => {
+    if (state.timer !== void 0) clearTimeout(state.timer);
+    remove();
+  };
+  const fadeOut = () => {
+    if (state.dismissed) return;
+    state.dismissed = true;
+    if (state.timer !== void 0) clearTimeout(state.timer);
+    if (enterClass !== void 0) el.classList.remove(enterClass);
+    if (exitClass !== void 0) el.classList.add(exitClass);
+    if (exitClass !== void 0 || exitDuration > 0) {
+      state.exitTimer = setTimeout(remove, exitDuration);
+    } else {
+      remove();
+    }
+  };
+  function dismiss(options2) {
+    if (options2?.instant === true) removeNow();
+    else fadeOut();
+  }
+  dismiss.removeNow = removeNow;
+  active.add(dismiss);
+  if (duration > 0) state.timer = setTimeout(fadeOut, duration);
+  return { el, dismiss };
+}
+
+// src/overlay.ts
+var FOCUSABLE = 'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
+function focusable(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE)).filter(
+    (el) => !el.hasAttribute("hidden")
+  );
+}
+function supportsDialog() {
+  return typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+}
+function supportsPopover() {
+  return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.showPopover === "function";
+}
+function overlay(content, options = {}) {
+  const {
+    container = document.body,
+    className = "kerf-overlay",
+    dismiss = ["escape", "backdrop"],
+    initialFocus = true,
+    trap = true,
+    role = "dialog",
+    onDismiss,
+    outsideIgnore,
+    native = false
+  } = options;
+  const triggers = dismiss === false ? [] : Array.isArray(dismiss) ? dismiss : [dismiss];
+  const restoreTo = document.activeElement;
+  const useDialog = native && trap && supportsDialog();
+  const usePopover = native && !trap && supportsPopover();
+  const wrapper = useDialog ? document.createElement("dialog") : document.createElement("div");
+  wrapper.className = className;
+  if (usePopover) wrapper.setAttribute("popover", "manual");
+  if (trap && !useDialog) {
+    wrapper.setAttribute("role", role);
+    wrapper.setAttribute("aria-modal", "true");
+  }
+  container.appendChild(wrapper);
+  const disposeMount = mount(wrapper, typeof content === "function" ? content : () => content);
+  let nativeOpened = false;
+  if (useDialog) {
+    wrapper.showModal();
+    nativeOpened = true;
+  } else if (usePopover) {
+    wrapper.showPopover();
+    wrapper.style.inset = "auto";
+    nativeOpened = true;
+  }
+  const removers = [];
+  const resultBox = {};
+  const result = new Promise((resolve) => {
+    resultBox.resolve = resolve;
+  });
+  const state = { closed: false };
+  function close(value) {
+    if (state.closed) return;
+    state.closed = true;
+    for (const remove of removers) remove();
+    disposeMount();
+    if (nativeOpened) {
+      nativeOpened = false;
+      if (useDialog) wrapper.close();
+      else wrapper.hidePopover();
+    }
+    wrapper.remove();
+    if (restoreTo instanceof HTMLElement && restoreTo.isConnected) restoreTo.focus();
+    resultBox.resolve?.(value);
+  }
+  function userDismiss() {
+    onDismiss?.();
+    close();
+  }
+  const wantEscape = triggers.includes("escape");
+  if (useDialog) {
+    const onCancel = (event) => {
+      event.preventDefault();
+      if (wantEscape) userDismiss();
+    };
+    wrapper.addEventListener("cancel", onCancel);
+    removers.push(() => wrapper.removeEventListener("cancel", onCancel));
+  } else if (wantEscape || trap) {
+    const onKeydown = (event) => {
+      if (wantEscape && event.key === "Escape") {
+        event.stopPropagation();
+        userDismiss();
+        return;
+      }
+      if (trap && event.key === "Tab") {
+        const items = focusable(wrapper);
+        if (items.length === 0) {
+          event.preventDefault();
+          return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        const outside = !wrapper.contains(active);
+        if (event.shiftKey && (active === first || outside)) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && (active === last || outside)) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeydown, true);
+    removers.push(() => document.removeEventListener("keydown", onKeydown, true));
+  }
+  if (triggers.includes("backdrop")) {
+    const onClick = (event) => {
+      if (event.target === wrapper) userDismiss();
+    };
+    wrapper.addEventListener("click", onClick);
+    removers.push(() => wrapper.removeEventListener("click", onClick));
+  }
+  if (triggers.includes("outside")) {
+    const ignore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? outsideIgnore : [outsideIgnore];
+    const onDocClick = (event) => {
+      const target = event.target;
+      if (target === null) return;
+      if (wrapper.contains(target)) return;
+      if (ignore.some((el) => el === target || el.contains(target))) return;
+      userDismiss();
+    };
+    document.addEventListener("click", onDocClick, true);
+    removers.push(() => document.removeEventListener("click", onDocClick, true));
+  }
+  if (initialFocus !== false) {
+    if (typeof initialFocus === "string") {
+      wrapper.querySelector(initialFocus)?.focus();
+    } else {
+      const first = focusable(wrapper)[0];
+      if (first !== void 0) {
+        first.focus();
+      } else {
+        wrapper.tabIndex = -1;
+        wrapper.focus();
+      }
+    }
+  }
+  return { el: wrapper, close, result };
+}
 function popover(anchor, content, options = {}) {
   const {
     container,
@@ -511,7 +558,8 @@ function popover(anchor, content, options = {}) {
     dismiss = ["outside"],
     initialFocus = false,
     outsideIgnore,
-    onDismiss
+    onDismiss,
+    native = false
   } = options;
   const extraIgnore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? [...outsideIgnore] : [outsideIgnore];
   const handle = overlay(content, {
@@ -521,7 +569,8 @@ function popover(anchor, content, options = {}) {
     trap: false,
     initialFocus,
     onDismiss,
-    outsideIgnore: [anchor, ...extraIgnore]
+    outsideIgnore: [anchor, ...extraIgnore],
+    native
   });
   const stopReposition = autoReposition(handle.el, anchor, { placement, align, gap });
   void handle.result.then(stopReposition);
@@ -536,13 +585,14 @@ function tooltip(anchor, content, options = {}) {
     role = "tooltip",
     placement = "top",
     align = "start",
-    gap = 4
+    gap = 4,
+    native = false
   } = options;
   const body = typeof content === "function" ? content : typeof content === "string" ? jsx("span", { class: `${className}__text`, children: content }) : content;
   const timers = {};
   let current;
   function show() {
-    const handle = overlay(body, { container, className, dismiss: false, trap: false, initialFocus: false });
+    const handle = overlay(body, { container, className, dismiss: false, trap: false, initialFocus: false, native });
     handle.el.setAttribute("role", role);
     const stop = autoReposition(handle.el, anchor, { placement, align, gap });
     current = { handle, stop };