@jungherz-de/notionkit-elements 1.20.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "Vanilla JavaScript Web Components wrapping the NotionKit CSS foundation – <nk-*> custom elements with Shadow DOM, automatic theme sync and native form participation.",
   "license": "MIT",
   "author": "Jungherz GmbH <info@jungherz.com> (https://www.jungherz.com)",
@@ -63,10 +63,10 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.20.0"
+    "@jungherz-de/notionkit": ">=1.21.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.20.0",
+    "@jungherz-de/notionkit": "^1.21.0",
     "@playwright/test": "^1.50.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",

package/src/components/data/nk-table-view.js

@@ -13,6 +13,15 @@ import { renderPropertyCell, compareBy } from '../../util/property-cell.js';
 // type 'actions' (NotionKit 1.12.0) sets buttons in each row; a click on one
 // fires nk-action { action, row, id, anchor } instead of selecting the row,
 // and its header sorts nothing.
+//
+// A checkbox column with `selectAll: true` (1.21.0) is a selection column:
+// its header holds a checkbox instead of a name – empty, a dash for some
+// rows, a check for all – and sorts nothing (th.select-all, NotionKit
+// 1.21.0). A click or Space sets the column for every row the view has –
+// a dash selects all, as Notion does –, renders again and fires one
+// nk-change { key, value, all: true, rows }, so an app that keeps its own
+// selection follows with one update. What "all" means beyond these rows –
+// more pages, a filter on the server – stays with the app.
 class NkTableView extends NkElement {
   static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'new-row', 'new-row-label', 'sortable', 'sort-key', 'sort-dir', 'wrap']; }
 
@@ -42,6 +51,7 @@ class NkTableView extends NkElement {
     this._table.classList.toggle('wrap', this.getBoolAttr('wrap'));
     const tr = document.createElement('tr');
     for (const col of this._columns) {
+      if (col.type === 'checkbox' && col.selectAll) { tr.appendChild(this._selectAllHeader(col)); continue; }
       const actions = col.type === 'actions';
       const th = this.createElement('th', actions ? ['actions'] : [], actions ? { scope: 'col' } : { 'data-key': col.key, scope: 'col' });
       if (col.icon) { const i = this.createElement('span', ['th-icon']); i.textContent = col.icon; th.appendChild(i); }
@@ -65,6 +75,40 @@ class NkTableView extends NkElement {
     }
     this._newRow.textContent = this.getAttribute('new-row-label') || this.str('newPage');
     this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
+    this._syncSelectAll();
+  }
+
+  /** The header of a selection column: the cells' own checkbox, named "Select all". */
+  _selectAllHeader(col) {
+    const th = this.createElement('th', ['select-all'], { scope: 'col' });
+    const label = this.createElement('label', ['nk-check']);
+    label.appendChild(this.createElement('input', [], { type: 'checkbox', 'aria-label': this.str('selectAll'), 'data-select-all': col.key }));
+    th.appendChild(label);
+    if (col.width) th.style.width = col.width;
+    return th;
+  }
+
+  /** Every header box shows its column: checked for all rows, a dash for some, empty for none – and nothing to choose without rows. */
+  _syncSelectAll() {
+    for (const input of this._thead?.querySelectorAll('input[data-select-all]') ?? []) {
+      const key = input.dataset.selectAll, on = this._rows.filter(r => r[key]).length;
+      input.checked = on > 0 && on === this._rows.length;
+      input.indeterminate = on > 0 && on < this._rows.length;
+      input.disabled = !this._rows.length;
+    }
+  }
+
+  /** A click or Space on a header box: the column for every row, one event. */
+  _selectAll(input) {
+    const key = input.dataset.selectAll;
+    // A dash selects all, as Notion does; only a full column clears.
+    const value = !(this._rows.length && this._rows.every(r => r[key]));
+    for (const row of this._rows) row[key] = value;
+    const focused = this._shadow.activeElement === input;
+    this._render();
+    // Space should leave the focus where it was – on the new header box.
+    if (focused) [...this._thead.querySelectorAll('input[data-select-all]')].find(i => i.dataset.selectAll === key)?.focus();
+    this.emit('nk-change', { key, value, all: true, rows: this._rows });
   }
 
   setupEvents() {
@@ -95,8 +139,10 @@ class NkTableView extends NkElement {
     this._onChange = (e) => {
       const input = e.target;
       if (input.type !== 'checkbox') return;
+      if (input.dataset.selectAll != null) { this._selectAll(input); return; }
       const row = this._rowById(input.dataset.rowId);
       if (row) row[input.dataset.key] = input.checked;
+      this._syncSelectAll();
       this.emit('nk-change', { row, key: input.dataset.key, value: input.checked });
     };
     this._onKey = (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target === this._newRow) { e.preventDefault(); this.emit('nk-action', { action: 'new-row' }); } };

package/src/components/overlays/nk-tooltip.js

@@ -23,6 +23,17 @@ import { deepActiveElement } from '../../util/focus.js';
 // [data-tooltip], a press or Escape. A line break in the text is kept.
 // While it shows, the target's aria-describedby names it (in the same
 // document or shadow root).
+//
+// Following the pointer and the focus inside a shadow root (1.20.1):
+// pointerover, focusin and focusout carry a relatedTarget, and when target
+// and relatedTarget share a shadow tree the DOM standard ends the event path
+// at its host – the document never hears of a move from one [data-tooltip]
+// to the next in the same root. So the pointer is also read from
+// pointermove, which has no relatedTarget, and acted on only when the
+// element under it changes; and a key that moved the focus – Tab, the arrow
+// keys of a group – is caught on keyup, comparing the focused element with
+// the one before the key went down. A move by script alone inside one
+// shadow root stays unseen.
 const hostSheet = new CSSStyleSheet();
 hostSheet.replaceSync(`:host { display: block; position: fixed; top: 0; left: 0; z-index: 130; pointer-events: none; }`);
 let count = 0;
@@ -100,14 +111,50 @@ class NkTooltip extends NkElement {
     this.show(el, own ? null : el.getAttribute('data-tooltip'), own ? this.getAttribute('shortcut') : el.getAttribute('data-tooltip-key'));
   }
 
+  /**
+   * The pointer is over `el` now (null: no [data-tooltip]). pointerover acts
+   * on every boundary it crosses, as it always has; pointermove – the only
+   * one that reaches the document from inside a shadow root – only when the
+   * element under the pointer changed, so a hand resting on the page leaves
+   * a tooltip the keyboard or show(rect) opened alone.
+   */
+  _pointer(e, move) {
+    const el = e.pointerType === 'touch' ? null : this._targetOf(e);
+    if (move && el === this._hover) return;
+    this._hover = el;
+    if (el === this._target) return;
+    this.hide();
+    if (!el) return;
+    this._target = el;
+    this._timer = setTimeout(() => this._showFor(el), this._delay);
+  }
+
   setupEvents() {
-    this._onOver = (e) => {
-      const el = e.pointerType === 'touch' ? null : this._targetOf(e);
-      if (el === this._target) return;
+    this._onOver = (e) => this._pointer(e, false);
+    this._onMove = (e) => this._pointer(e, true);
+    // The pointer left the window (no relatedTarget): a tooltip – shown or
+    // still waiting – for what it was on goes with it. One the keyboard or
+    // show(rect) opened is not the pointer's and stays.
+    this._onOut = (e) => {
+      if (e.relatedTarget || e.pointerType === 'touch') return;
+      if (this._target && this._target === this._hover) this.hide();
+      this._hover = null;
+    };
+    // Capture, before an element's own keydown moves the focus (a roving tab
+    // stop does); not for a held key's repeats, so keyup compares with where
+    // the focus was before the key went down.
+    this._onKeyDown = (e) => { if (!e.repeat) this._focusBefore = deepActiveElement(); };
+    this._onKeyUp = (e) => {
+      const active = deepActiveElement();
+      if (active === this._focusBefore) return;
+      this._focusBefore = active;
+      // keyup goes to the focused element, so its path is the focus's path.
+      const el = this._targetOf(e);
+      if (el && el === this._target) return;   // focusin got there first
       this.hide();
-      if (!el) return;
+      if (!el || !active?.matches(':focus-visible')) return;
       this._target = el;
-      this._timer = setTimeout(() => this._showFor(el), this._delay);
+      this._showFor(el);
     };
     this._onFocus = (e) => {
       const el = this._targetOf(e);
@@ -119,7 +166,11 @@ class NkTooltip extends NkElement {
     this._onHide = () => this.hide();
     this._onKey = (e) => { if (e.key === 'Escape' && this.open) this.hide(); };
     document.addEventListener('pointerover', this._onOver);
+    document.addEventListener('pointermove', this._onMove, { capture: true, passive: true });
+    document.addEventListener('pointerout', this._onOut);
     document.addEventListener('focusin', this._onFocus);
+    document.addEventListener('keydown', this._onKeyDown, true);
+    document.addEventListener('keyup', this._onKeyUp, true);
     document.addEventListener('focusout', this._onHide);
     document.addEventListener('pointerdown', this._onHide, true);
     document.addEventListener('scroll', this._onHide, true);
@@ -130,13 +181,18 @@ class NkTooltip extends NkElement {
 
   teardownEvents() {
     document.removeEventListener('pointerover', this._onOver);
+    document.removeEventListener('pointermove', this._onMove, { capture: true });
+    document.removeEventListener('pointerout', this._onOut);
     document.removeEventListener('focusin', this._onFocus);
+    document.removeEventListener('keydown', this._onKeyDown, true);
+    document.removeEventListener('keyup', this._onKeyUp, true);
     document.removeEventListener('focusout', this._onHide);
     document.removeEventListener('pointerdown', this._onHide, true);
     document.removeEventListener('scroll', this._onHide, true);
     document.removeEventListener('wheel', this._onHide, { capture: true });
     document.removeEventListener('keydown', this._onKey);
     this.hide();
+    this._hover = this._focusBefore = null;
   }
 
   onAttributeChanged(name) { if (name === 'shortcut' && !this._text.data) this._fill(null); if (name === 'for') this.hide(); }

package/src/util/strings.js

@@ -19,7 +19,7 @@ const BUILT_IN = {
     appearance: 'Appearance: {mode} – click: {next}', themeAuto: 'automatic (follows the system)', themeLight: 'light', themeDark: 'dark',
     message: 'Message', breadcrumb: 'Breadcrumb', commandPalette: 'Command palette', comment: 'Comment',
     searchEmoji: 'Search emoji', settings: 'Settings', title: 'Title', changeIcon: 'Change icon',
-    add: 'Add', more: 'More',
+    add: 'Add', more: 'More', selectAll: 'Select all',
   },
   de: {
     copy: 'Kopieren', copied: 'Kopiert', show: 'Zeigen', hide: 'Verbergen',
@@ -34,7 +34,7 @@ const BUILT_IN = {
     appearance: 'Darstellung: {mode} – Klick: {next}', themeAuto: 'automatisch (wie das System)', themeLight: 'hell', themeDark: 'dunkel',
     message: 'Nachricht', breadcrumb: 'Pfad', commandPalette: 'Befehlspalette', comment: 'Kommentar',
     searchEmoji: 'Emoji suchen', settings: 'Einstellungen', title: 'Titel', changeIcon: 'Symbol ändern',
-    add: 'Hinzufügen', more: 'Mehr',
+    add: 'Hinzufügen', more: 'Mehr', selectAll: 'Alle auswählen',
   },
 };
 const custom = {};