@jungherz-de/notionkit-elements 1.18.0 → 1.19.0

package/dist/components/nk-sheet.js

@@ -1,5 +1,6 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-C4tbSNND.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-D55JGjRA.js';
+import { o as openLayer, c as closeLayer } from './shared/layers-D9YYYA5g.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sheet id="more" title="More">
@@ -53,8 +54,10 @@ class NkSheet extends NkElement {
       this._returnFocus = deepActiveElement();
       lockScroll();
       this._undoInert = inertOutside(this);
+      openLayer(this, () => this.close());
       requestAnimationFrame(() => (firstFocusable(this) || this._box).focus({ preventScroll: true }));
     } else {
+      closeLayer(this);
       unlockScroll();
       this._undoInert?.(); this._undoInert = null;
       const back = this._returnFocus;
@@ -65,15 +68,12 @@ class NkSheet extends NkElement {
 
   setupEvents() {
     this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
-    this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); } };
     this._backdrop.addEventListener('click', this._onBackdrop);
-    document.addEventListener('keydown', this._onKey);
   }
 
   teardownEvents() {
     this._backdrop?.removeEventListener('click', this._onBackdrop);
-    document.removeEventListener('keydown', this._onKey);
-    if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
+    if (this._wasOpen) { closeLayer(this); unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
   }
 
   onAttributeChanged(name, oldValue, value) {

package/dist/components/nk-sidebar.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
+import { d as deepActiveElement } from './shared/focus-D55JGjRA.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sidebar slot="sidebar">

package/dist/components/nk-toast.js

@@ -1,12 +1,22 @@
 import { NkElement } from './base.js';
+import { d as deepActiveElement, c as containsDeep } from './shared/focus-D55JGjRA.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-toast id="toast"></nk-toast>   …   toast.show('Saved');
-// → <div class="nk-toast show">✓ Saved</div>
+// toast.show('Moved to trash', { action: { label: 'Undo', value: 'undo' } });
+// → <div class="nk-toast show">✓ Moved to trash<button class="t-action">Undo</button><button class="t-close">×</button></div>
 // One node, bottom-centred, auto-hides after `duration` ms (default 2200).
 // Above a tab bar at the bottom of the screen it rises 12px over the bar:
 // notionkit.css does that for class markup with :has(), which cannot see
 // into shadow roots, so the element measures the bar when it opens.
+// An action (1.19.0) – from show() or a <button slot="action"> – makes it
+// Notion's "Moved to trash · Undo": a button, and an × that closes. Such a
+// toast stays until one of them is used, unless show() names a duration,
+// and waits while the pointer or the focus is on it. The action fires
+// nk-action { action, value, label } and, unless cancelled, closes it;
+// Escape closes it while the focus is inside.
+const CLOSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>';
+
 class NkToast extends NkElement {
   static get observedAttributes() { return ['open', 'duration', 'icon']; }
 
@@ -14,19 +24,37 @@ class NkToast extends NkElement {
     this._box = this.createElement('div', ['nk-toast'], { role: 'status', 'aria-live': 'polite' });
     this._icon = document.createElement('span');
     this._msg = document.createElement('span');
-    this._box.append(this._icon, this._msg, document.createElement('slot'));
+    this._action = this.createElement('button', ['t-action'], { type: 'button' });
+    this._actionSlot = this.createElement('slot', [], { name: 'action' });
+    this._close = this.createElement('button', ['t-close'], { type: 'button' });
+    this._close.innerHTML = CLOSE_ICON;
+    this._box.append(this._icon, this._msg, document.createElement('slot'), this._actionSlot);
     this._wrapper.appendChild(this._box);
     this._sync();
   }
 
   _sync() {
-    if (this.getBoolAttr('open')) this._lift();
-    this._box.classList.toggle('show', this.getBoolAttr('open'));
+    const open = this.getBoolAttr('open');
+    if (open) this._lift();
+    this._box.classList.toggle('show', open);
     const icon = this.getAttribute('icon') ?? '✓';
     this._icon.textContent = icon;
     this._icon.style.display = icon ? '' : 'none';
+    // An empty message takes no place – with slotted text it added a second gap.
+    this._msg.style.display = this._msg.textContent ? '' : 'none';
+    // The action from show() and the × sit in the tree only when there is an
+    // action; a closed toast keeps them for its fade, out of the tab order.
+    const own = this._act, slotted = this._slotted();
+    if (own) { this._action.textContent = own.label; if (!this._action.isConnected) this._actionSlot.before(this._action); }
+    else this._action.remove();
+    if (own || slotted) { if (!this._close.isConnected) this._box.appendChild(this._close); }
+    else this._close.remove();
+    this._close.setAttribute('aria-label', this.str('close'));
+    for (const b of [this._action, this._close]) open ? b.removeAttribute('tabindex') : b.setAttribute('tabindex', '-1');
   }
 
+  _slotted() { return this._actionSlot?.assignedElements()[0] ?? null; }
+
   // A bar counts when it is rendered and ends near the bottom of the viewport –
   // the app's own bar, fixed, sticky or floating. A tab bar shown as a preview
   // somewhere in a page does not lift the toast.
@@ -41,16 +69,83 @@ class NkToast extends NkElement {
     this._box.style.bottom = rect ? `${Math.round(innerHeight - rect.top + 12)}px` : '';
   }
 
-  /** Shows `message` (or the slotted content when omitted) and hides it again after `duration`. */
-  show(message, { duration } = {}) {
+  /**
+   * Shows `message` (or the slotted content when omitted) and hides it again
+   * after `duration` ms – the attribute's, else 2200; with an `action`
+   * ({ label, value }) it stays until the action or the × is used.
+   */
+  show(message, { duration, action } = {}) {
     if (message !== undefined) this._msg.textContent = message;
+    this._shown = (this._shown ?? 0) + 1;
+    this._act = action ? { label: String(action.label ?? action.value ?? ''), value: action.value ?? action.label } : null;
+    const attr = this.getAttribute('duration'), set = attr !== null && attr.trim() !== '' && Number.isFinite(Number(attr));
+    // Number(null) is 0: without the attribute a toast used to stay for good.
+    this._ms = duration ?? (this._act || this._slotted() ? 0 : set ? Number(attr) : 2200);
+    if (this.getBoolAttr('open')) this._sync(); else this.setBoolAttr('open', true);
+    this._arm();
+  }
+
+  close() {
     clearTimeout(this._timer);
-    this.setBoolAttr('open', true);
-    const ms = duration ?? Number(this.getAttribute('duration')) ?? 2200;
-    if (ms > 0) this._timer = setTimeout(() => this.close(), ms || 2200);
+    // The focus leaves with the toast, back to where it came from.
+    const active = deepActiveElement();
+    if (active && containsDeep(this, active)) {
+      this._from?.isConnected && this._from.focus({ preventScroll: true });
+      if (containsDeep(this, deepActiveElement())) active.blur();
+    }
+    this._from = null;
+    this.setBoolAttr('open', false);
   }
 
-  close() { clearTimeout(this._timer); this.setBoolAttr('open', false); }
+  _arm() {
+    clearTimeout(this._timer);
+    if (this._ms > 0 && !this._held && this.getBoolAttr('open')) this._timer = setTimeout(() => this.close(), this._ms);
+  }
+
+  _take(act) {
+    if (!act) return;
+    // A handler that shows the next message – "Restored" – keeps it open.
+    const shown = this._shown;
+    if (this.emit('nk-action', { action: act.value, value: act.value, label: act.label }) && this._shown === shown) this.close();
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const path = e.composedPath();
+      if (path.includes(this._close)) { this.close(); return; }
+      if (path.includes(this._action)) { this._take(this._act); return; }
+      const slotted = this._slotted();
+      if (slotted && path.includes(slotted)) this._take({ value: slotted.value || slotted.getAttribute('value') || slotted.textContent.trim(), label: slotted.textContent.trim() });
+    };
+    // While the pointer or the focus is on it, a toast with a duration waits.
+    this._onHold = (e) => {
+      if (e.type === 'focusin' && !this._from) this._from = e.relatedTarget ?? null;
+      this._held = true; clearTimeout(this._timer);
+    };
+    this._onRelease = (e) => {
+      if (e.relatedTarget && containsDeep(this, e.relatedTarget)) return;
+      this._held = false; this._arm();
+    };
+    this._onKey = (e) => { if (e.key === 'Escape') { e.stopPropagation(); this.close(); } };
+    this._onSlot = () => this._sync();
+    this._box.addEventListener('click', this._onClick);
+    this._box.addEventListener('pointerover', this._onHold);
+    this._box.addEventListener('pointerout', this._onRelease);
+    this._box.addEventListener('focusin', this._onHold);
+    this._box.addEventListener('focusout', this._onRelease);
+    this._box.addEventListener('keydown', this._onKey);
+    this._actionSlot.addEventListener('slotchange', this._onSlot);
+  }
+
+  teardownEvents() {
+    this._box?.removeEventListener('click', this._onClick);
+    this._box?.removeEventListener('pointerover', this._onHold);
+    this._box?.removeEventListener('pointerout', this._onRelease);
+    this._box?.removeEventListener('focusin', this._onHold);
+    this._box?.removeEventListener('focusout', this._onRelease);
+    this._box?.removeEventListener('keydown', this._onKey);
+    this._actionSlot?.removeEventListener('slotchange', this._onSlot);
+  }
 
   onAttributeChanged(name) {
     this._sync();
@@ -62,7 +157,8 @@ class NkToast extends NkElement {
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
   get message() { return this._msg?.textContent ?? ''; }
-  set message(v) { if (this._msg) this._msg.textContent = v; }
+  set message(v) { if (this._msg) { this._msg.textContent = v; this._sync(); } }
+  onStringsChanged() { if (this._box) this._sync(); }
 }
 
 customElements.define('nk-toast', NkToast);

package/dist/components/nk-tooltip.js

@@ -1,6 +1,6 @@
 import { NkElement } from './base.js';
 import { a as placeNear } from './shared/floating-DOK73b_D.js';
-import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
+import { d as deepActiveElement } from './shared/focus-D55JGjRA.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-tooltip></nk-tooltip>                    one for the page: every [data-tooltip]

package/dist/components/shared/{focus-C4tbSNND.js → focus-D55JGjRA.js}

@@ -44,6 +44,12 @@ function deepActiveElement() {
   return el;
 }
 
+/** Whether `node` lies inside `root`, across shadow roots – Node.contains() stops at them. */
+function containsDeep(root, node) {
+  for (let n = node; n; n = n.parentNode ?? n.host) if (n === root) return true;
+  return false;
+}
+
 /** The first tabbable element inside a light-DOM subtree, looking into shadow roots. */
 function firstFocusable(root) {
   const SEL = 'a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"], [contenteditable="plaintext-only"]';
@@ -57,4 +63,4 @@ function firstFocusable(root) {
   return walk(root);
 }
 
-export { deepActiveElement as d, firstFocusable as f, inertOutside as i, lockScroll as l, unlockScroll as u };
+export { containsDeep as c, deepActiveElement as d, firstFocusable as f, inertOutside as i, lockScroll as l, unlockScroll as u };

package/dist/components/shared/layers-D9YYYA5g.js

@@ -0,0 +1,35 @@
+// Escape closes the layer that opened last (NotionKit Elements 1.19.0). The
+// overlays – modal, sheet, dialog, side peek, palette, popover, a floating
+// menu or date picker – join this stack while they are open, and one
+// listener on the document, in the capture phase, hands Escape to the top
+// of it only. Each used to listen for itself: a date picker opened from a
+// dialog and the dialog both listened on the document in the same phase,
+// where stopPropagation() does not part them, so one Escape closed both.
+const stack = [];
+let listening = false;
+
+function onKey(e) {
+  if (e.key !== 'Escape') return;
+  // Escape with the focus in a toast is the toast's, not the dialog's below.
+  if (e.composedPath().some(n => n.localName === 'nk-toast')) return;
+  for (let i = stack.length - 1; i >= 0; i--) if (!stack[i].el.isConnected) stack.splice(i, 1);
+  const top = stack.at(-1);
+  if (!top) return;
+  e.stopPropagation();
+  top.close();
+}
+
+/** `el` is open on top of the others; Escape calls `close` until closeLayer(el). */
+function openLayer(el, close) {
+  closeLayer(el);
+  stack.push({ el, close });
+  if (!listening && typeof document !== 'undefined') { document.addEventListener('keydown', onKey, true); listening = true; }
+}
+
+/** `el` is closed or gone. */
+function closeLayer(el) {
+  const i = stack.findIndex(layer => layer.el === el);
+  if (i >= 0) stack.splice(i, 1);
+}
+
+export { closeLayer as c, openLayer as o };