tosijs-ui 1.5.19 → 1.5.22

package/dist/data-table.d.ts

@@ -75,7 +75,7 @@ export declare class TosiTable extends WebComponent {
             zIndex: string;
             background: string;
         };
-        ':host .tr[aria-selected="true"] .td': {
+        ':host .tr[aria-selected] .td': {
             background: string;
         };
         ':host .td:focus, :host .th:focus': {

package/dist/data-table.js

@@ -120,7 +120,8 @@ test('row selection: data model + aria-selected on row (incl. custom dataCell)',
   expect(table.selectedRows.length).toBe(2)
 
   // DOM: aria-selected lives on the row element. CSS targets
-  // .tr[aria-selected="true"] .td to highlight cells.
+  // .tr[aria-selected] .td to highlight cells. The attribute is set via
+  // toggleAttribute, so its value is "" (presence-only) — match accordingly.
   const cells0 = table.getCells(items[0])
   const cells1 = table.getCells(items[1])
   expect(cells0.length).toBe(table.visibleColumns.length)
@@ -615,7 +616,7 @@ export class TosiTable extends WebComponent {
             zIndex: '3',
             background: varDefault.tosiTableHeaderBg(varDefault.tosiTableBg('var(--tosi-bg, #fff)')),
         },
-        ':host .tr[aria-selected="true"] .td': {
+        ':host .tr[aria-selected] .td': {
             background: varDefault.tosiTableSelectedBg('var(--tosi-accent, #007AFF22)'),
         },
         ':host .td:focus, :host .th:focus': {
@@ -1090,8 +1091,13 @@ export class TosiTable extends WebComponent {
     // its own non-virtualised listBinding so each pinned row goes through the
     // same dataCell / rowRendered / `^.prop` pipeline as the virtual rows. The
     // wrapper has no box of its own, so its stamped rows are layout children of
-    // .scroll-area and share its single sticky context.
-    buildPinnedBody(rowsProxy, cols, stickyInfo, region, part) {
+    // .scroll-area and share its single sticky context. Returns null when the
+    // region is empty so render() can drop it from the DOM.
+    buildPinnedBody(rowsProxy, cols, stickyInfo, region) {
+        const data = tosiValue(rowsProxy);
+        if (!data || data.length === 0)
+            return null;
+        const part = region === 'pinned-top' ? 'pinnedTopRows' : 'pinnedBottomRows';
         const rowClass = this.rowClasses(region);
         const binding = rowsProxy.listBinding((_elements, item) => this.buildRow(item, cols, stickyInfo, rowClass), {});
         return div({
@@ -1641,25 +1647,18 @@ export class TosiTable extends WebComponent {
         // so their stamped rows participate in .scroll-area's layout directly,
         // sharing one sticky context with the visible rows and the header.
         this._head = this.buildHeader(cols, stickyInfo);
-        this._tbodyTop =
-            pinnedTopData.length > 0
-                ? this.buildPinnedBody(this.rowData.pinnedTopData, cols, stickyInfo, 'pinned-top', 'pinnedTopRows')
-                : null;
-        this._tbodyBottom =
-            pinnedBottomData.length > 0
-                ? this.buildPinnedBody(this.rowData.pinnedBottomData, cols, stickyInfo, 'pinned-bottom', 'pinnedBottomRows')
-                : null;
+        this._tbodyTop = this.buildPinnedBody(this.rowData.pinnedTopData, cols, stickyInfo, 'pinned-top');
+        this._tbodyBottom = this.buildPinnedBody(this.rowData.pinnedBottomData, cols, stickyInfo, 'pinned-bottom');
         // The visible-rows listBinding is bound directly to .scroll-area so
         // virtualisation observes the same scroll container that sticky cells
         // stick against.
         const visibleBinding = this.rowData.visible.listBinding((_elements, item) => this.buildRow(item, cols, stickyInfo), this.rowHeight > 0 ? { virtual: { height: this.rowHeight } } : {});
-        const scrollAreaChildren = [this._head];
-        if (this._tbodyTop)
-            scrollAreaChildren.push(this._tbodyTop);
-        scrollAreaChildren.push(...visibleBinding);
-        if (this._tbodyBottom)
-            scrollAreaChildren.push(this._tbodyBottom);
-        this._scrollArea = div({ class: 'scroll-area', part: 'visibleRows' }, ...scrollAreaChildren);
+        this._scrollArea = div({ class: 'scroll-area', part: 'visibleRows' }, ...[
+            this._head,
+            this._tbodyTop,
+            ...visibleBinding,
+            this._tbodyBottom,
+        ].filter(Boolean));
         this._scrollArea.addEventListener('scrollend', this.onScrollEnd);
         this.append(this._scrollArea);
         this.observePinnedRowMutations();