@fusion.dev/helix-headless 0.149.1 → 0.151.0

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -91,6 +91,12 @@ export interface VirtualListRange {
  * the last item says "Loading more" (`loading-label`, or your own content in
  * the `loading` slot). `scrollToIndex` takes a reader to an item.
  *
+ * **An empty list.** Set `empty-label`, or put your own content in the `empty`
+ * slot, for a row shown when there are no items and none are loading, such as
+ * "No messages yet" and a link to write one. Without either, an empty list
+ * shows nothing, since a list whose items have not arrived yet has not said
+ * it has none.
+ *
  * **Row height.** Rows are placed by `estimate` until they are drawn. Then the
  * list reads the drawn rows' height once and places every row by it, so a
  * wrong estimate still reaches the last item. Set `measured` for rows of
@@ -112,6 +118,7 @@ export interface VirtualListRange {
  * @documentation https://fusion.dev/helix/components/virtual-list
  *
  * @slot - The `<template>` that defines one row. The list writes the rows it renders beside it, and this slot shows them between the two spacers.
+ * @slot empty - Content for the row shown when there are no items and none are loading. Falls back to `empty-label`.
  * @slot loading - Content for the row after the last item while `loading` is set. Falls back to `loading-label`.
  *
  * @event {Event} change - Fired once a press or a key has changed which items are selected, in a list with `selection-mode`.
@@ -121,6 +128,7 @@ export interface VirtualListRange {
  *
  * @csspart after - The space that stands in for the rows below the rendered ones.
  * @csspart before - The space that stands in for the rows above the rendered ones.
+ * @csspart empty - The row shown when there are no items and none are loading, where `empty-label` or the `empty` slot gives it content.
  * @csspart loading - The row after the last item while `loading` is set.
  * @csspart viewport - The scrolling box. On this tier, it needs only a block size.
  */
@@ -136,6 +144,11 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * time, with Left and Right moving along a line.
      */
     columns: number;
+    /**
+     * The text of the row shown when there are no items and none are loading,
+     * where the `empty` slot is empty. Empty, the default, shows no row.
+     */
+    emptyLabel: string;
     /**
      * The height of one row, in pixels, used to find the row at a scroll offset.
      *
@@ -376,7 +389,16 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * first when it is not drawn.
      */
     private focusIndex;
-    /** The row kept for focus is let go once focus has left it. */
+    /**
+     * The row kept for focus is let go once focus has left it.
+     *
+     * **A task later, and not at once.** Between `focusout` and `focusin` the
+     * page's focus is on `<body>`, and Chromium runs microtasks there when a key
+     * moves focus. An update asked for here ran in that gap: Tab from a kept row
+     * to its own link found no row holding focus, removed the row, and the link
+     * went with it, leaving focus on `<body>`. A move to a control inside this
+     * list asks for its own update in `handleFocusIn`, so it needs nothing here.
+     */
     private readonly handleFocusOut;
     /** A row that takes focus, by a press or by Tab, takes the tab stop with it. */
     private readonly handleFocusIn;

package/dist/virtual-list/root/virtual-list-root.js

@@ -15,6 +15,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     constructor() {
         super(...arguments);
         this.columns = 1;
+        this.emptyLabel = '';
         this.estimate = 32;
         this.for = '';
         this.keyField = '';
@@ -103,8 +104,14 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             }
             this.press(at, event.shiftKey && this.selectionMode === 'multiple');
         };
-        this.handleFocusOut = () => {
-            this.requestUpdate();
+        this.handleFocusOut = (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && this.contains(next)) {
+                return;
+            }
+            setTimeout(() => {
+                this.requestUpdate();
+            }, 0);
         };
         this.handleFocusIn = (event) => {
             let node = event.target;
@@ -433,6 +440,10 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         const kept = this.hasUpdated ? this.keptIndex() : undefined;
         const { after, before } = this.virtualize.spacers(kept === undefined ? undefined : Math.floor(kept / this.across));
         const across = this.across;
+        const empty = this.readFor !== undefined &&
+            !this.loading &&
+            this.data.length === 0 &&
+            (this.emptyLabel !== '' || this.querySelector(':scope > [slot="empty"]') !== null);
         return html `<div
       data-scroller
       part="viewport"
@@ -457,12 +468,20 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
               <slot name="loading">${this.loadingLabel}</slot>
             </div>`
             : nothing}
+      ${empty
+            ? html `<div part="empty" role=${this.selectionMode ? 'option' : 'listitem'}>
+              <slot name="empty">${this.emptyLabel}</slot>
+            </div>`
+            : nothing}
     </div>`;
     }
 };
 __decorate([
     property({ type: Number })
 ], HelixHeadlessVirtualList.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: 'empty-label' })
+], HelixHeadlessVirtualList.prototype, "emptyLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessVirtualList.prototype, "estimate", void 0);