tosijs-ui 1.5.13 → 1.5.16

package/dist/data-table.d.ts

@@ -35,6 +35,7 @@ export declare class TosiTable extends WebComponent {
             overflow: string;
             height: string;
             overscrollBehavior: string;
+            alignContent: string;
         };
         ':host .th, :host .td': {
             overflow: string;
@@ -129,6 +130,9 @@ export declare class TosiTable extends WebComponent {
     private selectBinding;
     maxVisibleRows: number;
     private _grid;
+    private pinnedItemToCells;
+    private pinnedCellToItem;
+    private resolvePinnedItem;
     get value(): TableData;
     set value(data: TableData);
     private rowData;

package/dist/data-table.js

@@ -96,8 +96,17 @@ test('table renders with data', () => {
   expect(table.array.length).toBeGreaterThan(0)
 })
 
-test('row selection via data model', () => {
-  const items = table.array
+test('row selection: data model + aria-selected on every cell (incl. custom dataCell)', async () => {
+  // Wait for listBinding to stamp DOM cells for the visible window
+  const items = table.visibleRows
+  await new Promise(resolve => {
+    const check = () => {
+      if (table.getCells(items[0]) && table.getCells(items[1])) return resolve()
+      setTimeout(check, 100)
+    }
+    check()
+  })
+
   table.deSelect()
   table.selectRow(items[0])
   table.selectRow(items[1])
@@ -107,11 +116,27 @@ test('row selection via data model', () => {
   expect(items[1][table.selectedKey]).toBe(true)
   expect(table.selectedRows.length).toBe(2)
 
-  // Deselect and verify data model
+  // DOM: every cell of a selected row has aria-selected, including the
+  // custom-rendered `name` column (regression test for custom cells being
+  // skipped by selectBinding).
+  const cells0 = table.getCells(items[0])
+  const cells1 = table.getCells(items[1])
+  expect(cells0.length).toBe(table.visibleColumns.length)
+  expect(cells1.length).toBe(table.visibleColumns.length)
+  for (const c of cells0) expect(c.hasAttribute('aria-selected')).toBe(true)
+  for (const c of cells1) expect(c.hasAttribute('aria-selected')).toBe(true)
+  // The `name` column (index 1) uses a dataCell input — confirm the custom
+  // element is the actual cell and that it carries aria-selected.
+  expect(cells0[1].tagName).toBe('INPUT')
+  expect(cells0[1].hasAttribute('aria-selected')).toBe(true)
+
+  // Deselect and verify both data model and DOM clear
   table.deSelect()
   expect(table.selectedRows.length).toBe(0)
   expect(items[0][table.selectedKey]).not.toBe(true)
   expect(items[1][table.selectedKey]).not.toBe(true)
+  for (const c of cells0) expect(c.hasAttribute('aria-selected')).toBe(false)
+  for (const c of cells1) expect(c.hasAttribute('aria-selected')).toBe(false)
 })
 
 test('getCells and getItem', async () => {
@@ -291,6 +316,54 @@ preview.append(table)
   font-variant-numeric: tabular-nums;
 }
 ```
+```test
+const tables = document.querySelectorAll('tosi-table')
+const table = tables[tables.length - 1]
+await new Promise(resolve => {
+  const check = () => {
+    if (table.querySelector('.pinned-bottom')) return resolve()
+    setTimeout(check, 100)
+  }
+  check()
+})
+
+test('pinned row honours dataCell, rowRendered, getCells, getItem, selection', () => {
+  const totals = table.array[table.array.length - 1]
+  const pinnedCells = Array.from(table.querySelectorAll('.pinned-bottom'))
+
+  // Sanity: number of pinned cells equals number of visible columns
+  expect(pinnedCells.length).toBe(table.visibleColumns.length)
+
+  // dataCell honoured: numeric columns kept their `num-cell` class, and the
+  // _actions column rendered its <button>
+  const numCells = pinnedCells.filter(c => c.classList.contains('num-cell'))
+  expect(numCells.length).toBeGreaterThan(0)
+  expect(pinnedCells.some(c => c.tagName === 'BUTTON')).toBe(true)
+
+  // rowRendered fired: totals row is negative on average, so all cells of
+  // this row should carry `row-negative`
+  const total = Object.keys(totals)
+    .filter(k => typeof totals[k] === 'number')
+    .reduce((s, k) => s + totals[k], 0)
+  if (total < 0) {
+    expect(pinnedCells.every(c => c.classList.contains('row-negative'))).toBe(true)
+  }
+
+  // getCells / getItem round-trip works for pinned items
+  const cellsForTotals = table.getCells(totals)
+  expect(cellsForTotals?.length).toBe(table.visibleColumns.length)
+  expect(table.getItem(cellsForTotals[0])).toBe(totals)
+
+  // Selection on a pinned row applies aria-selected to every cell
+  table.multiple = true
+  table.deSelect()
+  table.selectRow(totals)
+  expect(cellsForTotals.every(c => c.hasAttribute('aria-selected'))).toBe(true)
+
+  table.deSelect()
+  expect(cellsForTotals.some(c => c.hasAttribute('aria-selected'))).toBe(false)
+})
+```
 
 ## Selection
 
@@ -466,6 +539,7 @@ export class TosiTable extends WebComponent {
             overflow: 'auto',
             height: '100%',
             overscrollBehavior: 'none',
+            alignContent: 'start',
         },
         ':host .th, :host .td': {
             overflow: 'hidden',
@@ -566,6 +640,14 @@ export class TosiTable extends WebComponent {
     };
     maxVisibleRows = 10000;
     _grid = null;
+    // Pinned rows live outside the listBinding's virtual window, so we keep a
+    // side-table for getCells, getItem, and click-to-select to traverse.
+    pinnedItemToCells = new Map();
+    pinnedCellToItem = new WeakMap();
+    resolvePinnedItem(target) {
+        const cell = target.closest('.pinned-top, .pinned-bottom');
+        return cell ? this.pinnedCellToItem.get(cell) : undefined;
+    }
     get value() {
         return {
             array: this.array,
@@ -756,29 +838,54 @@ export class TosiTable extends WebComponent {
         Object.assign(cell.style, style);
     }
     buildPinnedCells(rows, cols, stickyInfo, pin, rowHeight, startRowIndex) {
-        const cells = [];
+        const allCells = [];
+        const selectBindingFn = this.selectBinding;
+        const { rowRendered } = this;
         for (let r = 0; r < rows.length; r++) {
             const rowItem = rows[r];
             const offset = pin === 'top'
                 ? (r + 1) * rowHeight + 'px'
                 : (rows.length - 1 - r) * rowHeight + 'px';
+            const rowCells = [];
             for (let c = 0; c < cols.length; c++) {
                 const col = cols[c];
                 const si = stickyInfo[c];
-                cells.push(span({
-                    class: this.cellClasses(`td pinned-${pin}`, si),
-                    role: 'gridcell',
-                    tabindex: -1,
-                    ariaRowindex: String(startRowIndex + r + 1),
-                    ariaColindex: String(c + 1),
-                    style: this.cellStyle(col, si, {
-                        position: 'sticky',
-                        [pin]: offset,
-                    }),
-                }, String(rowItem[col.prop] ?? '')));
+                const style = this.cellStyle(col, si, {
+                    position: 'sticky',
+                    [pin]: offset,
+                });
+                let cell;
+                if (col.dataCell !== undefined) {
+                    cell = col.dataCell(col);
+                    this.applyPinnedToCustomCell(cell, c, si, style);
+                    cell.classList.add(`pinned-${pin}`);
+                    cell.setAttribute('aria-rowindex', String(startRowIndex + r + 1));
+                }
+                else {
+                    cell = span({
+                        class: this.cellClasses(`td pinned-${pin}`, si),
+                        role: 'gridcell',
+                        tabindex: -1,
+                        ariaRowindex: String(startRowIndex + r + 1),
+                        ariaColindex: String(c + 1),
+                        style,
+                    }, String(rowItem[col.prop] ?? ''));
+                }
+                // Track cell → item so click-to-select and updateSelectionVisuals
+                // can resolve pinned cells (which aren't in the listBinding).
+                this.pinnedCellToItem.set(cell, rowItem);
+                // Apply any pre-existing selection state.
+                selectBindingFn(cell, rowItem);
+                rowCells.push(cell);
+                allCells.push(cell);
+            }
+            // Track cells per item so getCells works for pinned rows
+            this.pinnedItemToCells.set(tosiValue(rowItem), rowCells);
+            if (rowRendered) {
+                rowRendered(rowItem, rowCells);
             }
         }
-        return cells;
+        return allCells;
     }
     getColumn(event) {
         if (!this._grid)
@@ -865,7 +972,7 @@ export class TosiTable extends WebComponent {
         if (!this._grid)
             return;
         for (const elt of Array.from(this._grid.children)) {
-            const item = getListItem(elt);
+            const item = getListItem(elt) ?? this.pinnedCellToItem.get(elt);
             if (item != null) {
                 this.selectBinding(elt, item);
             }
@@ -881,7 +988,7 @@ export class TosiTable extends WebComponent {
         if (!(target instanceof HTMLElement)) {
             return;
         }
-        const pickedItem = getListItem(target);
+        const pickedItem = getListItem(target) ?? this.resolvePinnedItem(target);
         if (pickedItem == null) {
             return;
         }
@@ -1251,16 +1358,20 @@ export class TosiTable extends WebComponent {
     getCells(itemOrCell) {
         if (!this._grid)
             return undefined;
+        const item = itemOrCell instanceof Element ? this.getItem(itemOrCell) : itemOrCell;
+        if (item == null)
+            return undefined;
+        const key = tosiValue(item);
+        const pinned = this.pinnedItemToCells.get(key);
+        if (pinned)
+            return pinned;
         const binding = getListBinding(this._grid);
         if (!binding)
             return undefined;
-        const item = itemOrCell instanceof Element ? getListItem(itemOrCell) : itemOrCell;
-        if (item == null)
-            return undefined;
-        return binding.itemToElement.get(tosiValue(item));
+        return binding.itemToElement.get(key);
     }
     getItem(cell) {
-        return getListItem(cell);
+        return getListItem(cell) ?? this.resolvePinnedItem(cell);
     }
     draggedColumn;
     dropColumn = (event) => {
@@ -1280,6 +1391,7 @@ export class TosiTable extends WebComponent {
     render() {
         super.render();
         this.textContent = '';
+        this.pinnedItemToCells.clear();
         // Prepare data
         const pinnedTopData = this.pinnedTop > 0 ? this._array.slice(0, this.pinnedTop) : [];
         const pinnedBottomData = this.pinnedBottom > 0 ? this._array.slice(-this.pinnedBottom) : [];
@@ -1377,7 +1489,16 @@ export class TosiTable extends WebComponent {
                 const customCell = col.dataCell(col);
                 this.applyPinnedToCustomCell(customCell, colIndex, si, style);
                 if (rowRenderedBinding && colIndex === lastCol) {
-                    bind(customCell, item, { toDOM: rowRenderedBinding });
+                    bind(customCell, item, {
+                        toDOM(cell) {
+                            if (selectEnabled)
+                                selectBindingFn(cell, getListItem(cell));
+                            rowRenderedBinding(cell);
+                        },
+                    });
+                }
+                else if (selectEnabled) {
+                    bind(customCell, item, { toDOM: selectBindingFn });
                 }
                 return customCell;
             }

package/dist/icon-data.js

@@ -87,7 +87,7 @@ export default {
     gitPullRequest: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><circle cx=\"18\" cy=\"18\" r=\"3\"></circle><circle cx=\"6\" cy=\"6\" r=\"3\"></circle><path d=\"M13 6h3a2 2 0 0 1 2 2v7\"></path><line x1=\"6\" y1=\"9\" x2=\"6\" y2=\"21\"></line></svg>",
     minimize: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3\"></path></svg>",
     minusSquare: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"></line></svg>",
-    settings: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3\"></circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.6.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.6.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.6.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.6.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path></svg>",
+    settings: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><g><path style=\"\" d=\"M4.78,6.75 C6.02,7.26,7.26,6.02,6.75,4.78 C6.75,4.78,6.24,3.57,6.24,3.57 C5.93,2.8,6.29,1.92,7.06,1.6 C7.06,1.6,8.14,1.15,8.14,1.15 C8.91,0.83,9.79,1.2,10.11,1.96 C10.11,1.96,10.61,3.18,10.61,3.18 C11.12,4.42,12.88,4.42,13.39,3.18 C13.39,3.18,13.89,1.97,13.89,1.97 C14.21,1.2,15.09,0.83,15.86,1.15 C15.86,1.15,16.94,1.6,16.94,1.6 C17.71,1.92,18.08,2.8,17.76,3.57 C17.76,3.57,17.15,5.03,17.15,5.03 C16.64,6.27,17.88,7.51,19.12,7 C19.12,7,20.51,6.42,20.51,6.42 C21.28,6.1,22.16,6.47,22.47,7.23 C22.47,7.23,22.92,8.32,22.92,8.32 C23.24,9.09,22.88,9.96,22.11,10.28 C22.11,10.28,21.07,10.71,21.07,10.71 C19.83,11.23,19.83,12.98,21.07,13.49 C21.07,13.49,22.04,13.89,22.04,13.89 C22.8,14.21,23.17,15.09,22.85,15.86 C22.85,15.86,22.4,16.94,22.4,16.94 C22.08,17.71,21.2,18.07,20.43,17.76 C20.43,17.76,19.22,17.25,19.22,17.25 C17.98,16.74,16.74,17.98,17.25,19.22 C17.25,19.22,17.76,20.43,17.76,20.43 C18.07,21.2,17.71,22.08,16.94,22.4 C16.94,22.4,15.86,22.85,15.86,22.85 C15.09,23.17,14.21,22.8,13.89,22.04 C13.89,22.04,13.39,20.82,13.39,20.82 C12.88,19.58,11.12,19.58,10.61,20.82 C10.61,20.82,10.11,22.04,10.11,22.04 C9.79,22.8,8.91,23.17,8.14,22.85 C8.14,22.85,7.06,22.4,7.06,22.4 C6.29,22.08,5.93,21.2,6.24,20.44 C6.24,20.44,6.64,19.47,6.64,19.47 C7.16,18.23,5.92,16.99,4.68,17.5 C4.68,17.5,3.64,17.93,3.64,17.93 C2.87,18.25,1.99,17.89,1.67,17.12 C1.67,17.12,1.22,16.04,1.22,16.04 C0.91,15.27,1.27,14.39,2.04,14.07 C2.04,14.07,3.43,13.49,3.43,13.49 C4.67,12.98,4.67,11.23,3.43,10.71 C3.43,10.71,1.96,10.11,1.96,10.11 C1.2,9.79,0.83,8.91,1.15,8.14 C1.15,8.14,1.6,7.06,1.6,7.06 C1.92,6.29,2.8,5.93,3.57,6.24 C3.57,6.24,4.78,6.75,4.78,6.75 z M14.31,11.04 C14.84,12.32,14.23,13.78,12.96,14.31 C11.68,14.84,10.22,14.23,9.69,12.96 C9.16,11.68,9.77,10.22,11.04,9.69 C12.32,9.16,13.78,9.77,14.31,11.04 z\"/></g></svg> ",
     cloudSnow: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25\"></path><line x1=\"8\" y1=\"16\" x2=\"8.01\" y2=\"16\"></line><line x1=\"8\" y1=\"20\" x2=\"8.01\" y2=\"20\"></line><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"></line><line x1=\"12\" y1=\"22\" x2=\"12.01\" y2=\"22\"></line><line x1=\"16\" y1=\"16\" x2=\"16.01\" y2=\"16\"></line><line x1=\"16\" y1=\"20\" x2=\"16.01\" y2=\"20\"></line></svg>",
     type: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><polyline points=\"4 7 4 4 20 4 20 7\"></polyline><line x1=\"9\" y1=\"20\" x2=\"15\" y2=\"20\"></line><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"20\"></line></svg>",
     archive: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><polyline points=\"21 8 21 21 3 21 3 8\"></polyline><rect x=\"1\" y=\"3\" width=\"22\" height=\"5\"></rect><line x1=\"10\" y1=\"12\" x2=\"14\" y2=\"12\"></line></svg>",

package/dist/icons.js

@@ -490,7 +490,6 @@ a single SVG. `svg2DataUrl()` will render only the base icon and log a
 console error. Simple suffix transforms and plain icons work normally
 with `svg2DataUrl`.
 
-
 ## Missing Icons
 
 If you ask for an icon that isn't defined, the `icons` proxy will print a warning to console
@@ -757,7 +756,7 @@ function parseStyleSuffixes(name) {
             if (rule.prefix instanceof RegExp) {
                 return rule.prefix.test(baseName);
             }
-            return baseName.startsWith(rule.prefix) && baseName.length > rule.prefix.length;
+            return (baseName.startsWith(rule.prefix) && baseName.length > rule.prefix.length);
         });
         if (!matchesRule)
             return null;