@svgrid/grid 1.2.1 → 1.2.4

package/dist/SvGrid.controller.svelte.js

@@ -109,6 +109,36 @@ function getMaxDomScrollHeight() {
     }
     return detectedMaxDomHeight;
 }
+/**
+ * Observe an element's size, but run the callback on the next animation frame
+ * and coalesce bursts into a single call. This is what keeps the benign but
+ * noisy "ResizeObserver loop completed with undelivered notifications" warning
+ * out of the console: the browser emits it when an observer callback
+ * synchronously mutates layout in a way that would require another notification
+ * within the same delivery cycle - which our callbacks do (they bump reactive
+ * versions / remeasure, driving a re-layout of the observed element). Deferring
+ * the work to the next frame lets the current delivery finish cleanly, so the
+ * loop never spans a single cycle. This is especially visible when swapping the
+ * whole grid (e.g. switching demos), which remounts everything at once.
+ * Returns a disconnect function suitable for an $effect cleanup.
+ */
+function observeSizeRaf(el, cb) {
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+        if (frame)
+            return;
+        frame = requestAnimationFrame(() => {
+            frame = 0;
+            cb();
+        });
+    });
+    observer.observe(el);
+    return () => {
+        if (frame)
+            cancelAnimationFrame(frame);
+        observer.disconnect();
+    };
+}
 export function createSvGridController(props) {
     // Resolved capability gates. Capabilities are OFF by default - a bare
     // grid is a plain read-only table, and each power feature is opted into
@@ -770,6 +800,17 @@ export function createSvGridController(props) {
         const start = pageIndex * pageSize;
         return rows.slice(start, start + pageSize);
     });
+    // When a filter reduces the dataset, the stored pageIndex can point beyond
+    // the last valid page. Reset to page 0 so the grid never shows a blank body.
+    $effect(() => {
+        if (!paginationEnabled)
+            return;
+        const { pageIndex, pageSize } = paginationState;
+        const pageCount = Math.ceil(allRowsBeforePagination.length / pageSize);
+        if (pageCount > 0 && pageIndex >= pageCount) {
+            grid.setPagination({ pageIndex: 0, pageSize });
+        }
+    });
     const rowSelectionState = $derived.by(() => {
         gridStateVersion;
         return grid.getState().rowSelection ?? {};
@@ -1045,15 +1086,46 @@ export function createSvGridController(props) {
         return columnVirtualizer.getTotalSize();
     });
     const renderedColumnItems = $derived.by(() => {
-        if (columnVirtualizationEnabled)
-            return virtualColumns;
-        let start = 0;
-        return allColumns.map((column, index) => {
-            const size = getColumnWidth(column.id);
-            const item = { index, key: index, size, start, end: start + size };
-            start += size;
-            return item;
-        });
+        if (!columnVirtualizationEnabled) {
+            let start = 0;
+            return allColumns.map((column, index) => {
+                const size = getColumnWidth(column.id);
+                const item = { index, key: index, size, start, end: start + size };
+                start += size;
+                return item;
+            });
+        }
+        // Pinned columns are position:sticky, so they only stay pinned while their
+        // cell is in the DOM. Plain column virtualization drops them once they leave
+        // the scroll window, and the pinned column vanishes. Because allColumns is
+        // ordered [pinnedLeft, unpinned, pinnedRight], we keep the rendered window
+        // CONTIGUOUS from the pinned-left prefix (index 0) through the pinned-right
+        // suffix (last index) whenever those exist. The pinned cells are then always
+        // rendered - the existing single-spacer layout positions everything, so no
+        // markup changes are needed. (Cost: with a pinned side, the columns between
+        // that edge and the window are also rendered; negligible for typical grids,
+        // and correctness beats shaving a few off-screen cells.)
+        const window = virtualColumns;
+        const hasLeft = columnPinning.left.length > 0;
+        const hasRight = columnPinning.right.length > 0;
+        if ((!hasLeft && !hasRight) || window.length === 0)
+            return window;
+        const firstIdx = window[0].index;
+        const lastIdx = window[window.length - 1].index;
+        const startIndex = hasLeft ? 0 : firstIdx;
+        const endIndex = hasRight ? allColumns.length - 1 : lastIdx;
+        if (startIndex === firstIdx && endIndex === lastIdx)
+            return window;
+        const items = [];
+        let offset = 0;
+        for (let i = 0; i < startIndex; i += 1)
+            offset += getColumnWidth(allColumns[i].id);
+        for (let i = startIndex; i <= endIndex; i += 1) {
+            const size = getColumnWidth(allColumns[i].id);
+            items.push({ index: i, key: i, size, start: offset, end: offset + size });
+            offset += size;
+        }
+        return items;
     });
     const renderedColumns = $derived.by(() => renderedColumnItems
         .map((item) => ({ item, column: allColumns[item.index] }))
@@ -1137,11 +1209,9 @@ export function createSvGridController(props) {
         if (!theadEl)
             return;
         headerHeight = theadEl.offsetHeight;
-        const observer = new ResizeObserver(() => {
+        return observeSizeRaf(theadEl, () => {
             headerHeight = theadEl?.offsetHeight ?? 0;
         });
-        observer.observe(theadEl);
-        return () => observer.disconnect();
     });
     // Bump scrollVersion when the table's layout size changes so scrollbar
     // visibility (and the thumb math that depends on scroll metrics) updates
@@ -1149,11 +1219,9 @@ export function createSvGridController(props) {
     $effect(() => {
         if (!gridRootEl)
             return;
-        const observer = new ResizeObserver(() => {
+        return observeSizeRaf(gridRootEl, () => {
             scrollVersion += 1;
         });
-        observer.observe(gridRootEl);
-        return () => observer.disconnect();
     });
     $effect(() => {
         if (!allRows.length || !allColumns.length)
@@ -1270,13 +1338,11 @@ export function createSvGridController(props) {
     $effect(() => {
         if (!scrollContainer)
             return;
-        const observer = new ResizeObserver(() => {
+        return observeSizeRaf(scrollContainer, () => {
             viewportVersion += 1;
             if (!hasMeasured)
                 hasMeasured = true;
         });
-        observer.observe(scrollContainer);
-        return () => observer.disconnect();
     });
     $effect(() => {
         // Reading columnWidths here registers it as a reactive dependency so

package/dist/SvGrid.css

@@ -336,6 +336,21 @@
   background: var(--sg-bg, #fff);
   color: var(--sg-fg, #0f172a);
   user-select: none;
+  /* Grid lines ship with the grid so it looks complete out of the box - no
+     host stylesheet required. Only right + bottom per cell (border-spacing is
+     0), so adjacent cells share a single 1px line rather than doubling. */
+  border-right: 1px solid var(--sg-border, #e2e8f0);
+  border-bottom: 1px solid var(--sg-border, #e2e8f0);
+}
+/* The last cell / column in each row drops its right border so the grid's
+   right edge stays clean (the shell provides the outer frame). */
+.sv-grid-table tr > :last-child.sv-grid-column,
+.sv-grid-table tr > :last-child.sv-grid-cell {
+  border-right: 0;
+}
+/* Row hover tint. */
+.sv-grid-table tbody tr:hover > .sv-grid-cell {
+  background: var(--sg-row-hover-bg, #eef2ff);
 }
 /* Only the active cell + the cell hosting the fill handle become a
    positioning context (so the absolutely-positioned handle anchors
@@ -384,14 +399,14 @@
    always points toward the scrollable middle. */
 .sv-grid-cell[data-pinned="left"],
 .sv-grid-column[data-pinned="left"] {
-  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 70%, var(--sg-accent, #2563eb) 8%));
+  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
   box-shadow:
     inset -1px 0 0 var(--sg-pinned-divider, var(--sg-border, #cbd5e1)),
     8px 0 12px -6px rgba(15, 23, 42, 0.22);
 }
 .sv-grid-cell[data-pinned="right"],
 .sv-grid-column[data-pinned="right"] {
-  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 70%, var(--sg-accent, #2563eb) 8%));
+  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
   box-shadow:
     inset 1px 0 0 var(--sg-pinned-divider, var(--sg-border, #cbd5e1)),
     -8px 0 12px -6px rgba(15, 23, 42, 0.22);
@@ -400,7 +415,7 @@
    so the frozen header itself reads as part of the grid chrome. */
 .sv-grid-head .sv-grid-column[data-pinned="left"],
 .sv-grid-head .sv-grid-column[data-pinned="right"] {
-  background: var(--sg-pinned-header-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 60%, var(--sg-accent, #2563eb) 14%));
+  background: var(--sg-pinned-header-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 86%, var(--sg-accent, #2563eb) 14%));
   font-weight: 600;
 }
 /* Zebra striping, opt-in via the `zebraRows` prop (which adds
@@ -414,7 +429,7 @@
 /* Zebra rows: keep the pinned tint visible (don't let the row-alt
    background bleed through) by re-painting the pinned cells. */
 .sv-grid-row-alt > .sv-grid-cell[data-pinned] {
-  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 70%, var(--sg-accent, #2563eb) 8%));
+  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
 }
 /* When the row is selected, keep the pinned tint but layer the
    selection color over it so the row still reads as selected. */
@@ -424,7 +439,7 @@
       color-mix(in srgb, var(--sg-selection-bg, #dbeafe) 65%, transparent),
       color-mix(in srgb, var(--sg-selection-bg, #dbeafe) 65%, transparent)
     ),
-    var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 70%, var(--sg-accent, #2563eb) 8%));
+    var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
 }
 /* Hovered row keeps the pinned tint distinguishable from the hover. */
 .sv-grid-row:hover > .sv-grid-cell[data-pinned] {
@@ -433,7 +448,7 @@
       color-mix(in srgb, var(--sg-row-hover-bg, #eef2ff) 55%, transparent),
       color-mix(in srgb, var(--sg-row-hover-bg, #eef2ff) 55%, transparent)
     ),
-    var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 70%, var(--sg-accent, #2563eb) 8%));
+    var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
 }
 
 .sv-grid-column {
@@ -462,6 +477,14 @@
 .sv-grid-column[data-align="right"] .sv-grid-header-sort {
   justify-content: flex-end;
 }
+/* The custom vertical scrollbar overlays the right 16px of the viewport
+   (absolute, z-index 40). Nudge the last column's right-aligned content in by
+   that width when the scrollbar is visible, so numbers/values aren't hidden
+   underneath it. Left/center content already clears the right edge. */
+.sv-grid-has-vscroll .sv-grid-table tr > :last-child.sv-grid-cell[data-align="right"],
+.sv-grid-has-vscroll .sv-grid-table tr > :last-child.sv-grid-column[data-align="right"] {
+  padding-right: calc(var(--sg-cell-px, 7px) + 16px);
+}
 .sv-grid-column[data-align="center"] .sv-grid-header-sort {
   justify-content: center;
 }
@@ -478,9 +501,26 @@
   transition: background-color 100ms ease;
 }
 
-.sv-grid-resize-handle:hover,
-.sv-grid-resize-handle.is-resizing {
-  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 30%, transparent);
+/* An accent center pill (rather than tinting the whole strip): faint on column
+   hover, bright when the handle itself is hovered or while dragging. */
+.sv-grid-resize-handle::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto 2px;
+  width: 2px;
+  background: var(--sg-fg, #0f172a);
+  opacity: 0;
+  border-radius: 1px;
+  transition: background-color 100ms ease, opacity 100ms ease;
+}
+.sv-grid-column:hover .sv-grid-resize-handle::after {
+  opacity: 0.3;
+}
+.sv-grid-column:hover .sv-grid-resize-handle:hover::after,
+.sv-grid-resize-handle.is-resizing::after {
+  background: var(--sg-accent, #2563eb);
+  opacity: 1;
 }
 
 /* Row resize handle (counterpart of the column resize handle). Lives
@@ -907,8 +947,9 @@ select.sv-grid-fr-editor {
 
 .sv-grid-checkbox[aria-checked="true"],
 .sv-grid-checkbox[aria-checked="mixed"] {
-  border-color: var(--sg-accent, #0b63f3);
-  background: var(--sg-selection-bg, #eaf2ff);
+  border-color: var(--sg-accent, #2563eb);
+  background: var(--sg-accent, #2563eb);
+  color: var(--sg-on-accent, #fff);
 }
 
 .sv-grid-checkbox[aria-checked="true"]::after {
@@ -1108,16 +1149,49 @@ select.sv-grid-fr-editor {
   padding: 0 8px;
 }
 
-/* Filter-related inputs share the same focused-cell outline treatment. */
+/* Base look for the filter inputs (header filter row, per-column filter, the
+   global search box, and the menu's search / condition inputs). The inline cell
+   editor is styled separately - it's borderless and fills its cell. Shipping
+   this with the grid means filters look like real inputs with no host
+   stylesheet. */
+.sv-grid-column-filter,
+.sv-grid-filter-value,
+.sv-grid-global-filter input,
+.sv-grid-menu-search,
+.sv-grid-menu-condition-value {
+  background: var(--sg-input-bg, #fff);
+  color: var(--sg-fg, #0f172a);
+  border: 1px solid var(--sg-input-border, #cbd5e1);
+  border-radius: 5px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  font: inherit;
+}
+.sv-grid-column-filter {
+  height: 28px;
+  width: 100%;
+  font-size: 0.8125rem;
+}
+.sv-grid-column-filter::placeholder,
+.sv-grid-filter-value::placeholder,
+.sv-grid-menu-search::placeholder,
+.sv-grid-global-filter input::placeholder,
+.sv-grid-cell-editor::placeholder {
+  color: var(--sg-muted, #64748b);
+  opacity: 0.7;
+}
+
+/* Calm, theme-aware focus (a soft box-shadow rather than a hard outline). */
 .sv-grid-global-filter input:focus,
 .sv-grid-filter-value:focus,
 .sv-grid-column-filter:focus,
 .sv-grid-menu-search:focus,
 .sv-grid-menu-condition-value:focus,
-.sv-grid-menu-operator:focus {
-  outline: 2px solid var(--sg-accent, #0b63f3);
-  outline-offset: -2px;
-  border-color: var(--sg-accent, #0b63f3);
+.sv-grid-menu-operator:focus,
+.sv-grid-cell-editor:focus {
+  outline: none;
+  border-color: var(--sg-accent, #2563eb);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent);
 }
 
 .sv-grid-cell-editor-number,
@@ -2010,3 +2084,207 @@ select.sv-grid-fr-editor {
   color: var(--sg-fg, #0f172a);
 }
 .sv-grid-find-step:disabled { opacity: 0.30; cursor: default; }
+
+/* ---- Pagination footer (GridFooter.svelte) ------------------------------
+   Ships with the grid so the pager is styled out of the box - previously this
+   lived only in the examples' host stylesheet, leaving bare consumers with an
+   unstyled pager. Uses --sg-* tokens with fallbacks like the rest of the theme. */
+.sv-grid-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+  padding: 12px 16px;
+  margin-top: 0;
+  border: 1px solid var(--sg-border, #e2e8f0);
+  border-top: 0;
+  border-radius: 0 0 var(--sg-radius, 6px) var(--sg-radius, 6px);
+  background: var(--sg-header-bg, #f1f5f9);
+  color: var(--sg-fg, #0f172a);
+  font-size: 13px;
+}
+.sv-grid-pagination-pagesize {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--sg-muted, #64748b);
+}
+.sv-grid-pagination-pagesize select {
+  height: 28px;
+  padding: 0 22px 0 8px;
+  border: 1px solid var(--sg-input-border, #cbd5e1);
+  border-radius: 5px;
+  background: var(--sg-input-bg, #fff);
+  color: var(--sg-fg, #0f172a);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px;
+  background-size: 4px 4px, 4px 4px;
+  background-repeat: no-repeat;
+}
+.sv-grid-pagination-pagesize select:focus {
+  outline: none;
+  border-color: var(--sg-accent, #2563eb);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent);
+}
+.sv-grid-pagination-range {
+  color: var(--sg-fg, #0f172a);
+}
+.sv-grid-pagination-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.sv-grid-pagination-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--sg-fg, #0f172a);
+  font: inherit;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 100ms ease, color 100ms ease;
+}
+.sv-grid-pagination-btn:hover:not(:disabled) {
+  background: var(--sg-input-bg, #fff);
+  color: var(--sg-accent, #2563eb);
+}
+.sv-grid-pagination-btn:disabled {
+  color: var(--sg-muted, #64748b);
+  opacity: 0.4;
+  cursor: default;
+}
+.sv-grid-pagination-label {
+  margin: 0 8px;
+  color: var(--sg-fg, #0f172a);
+}
+
+/* ---- Menu / filter chrome completeness -----------------------------------
+   These styles previously lived only in the examples' host stylesheet. Shipping
+   them here means the column menu, filter/choose-columns popovers, facet
+   checklist, operator select, filter buttons, and the scrollbar corner are
+   fully themed out of the box for any consumer - all via --sg-* tokens. */
+
+/* Hide the scrollbar corner when its scrollbar is absent. */
+.sv-grid-no-scroll .sv-grid-scrollbar-corner,
+.sv-grid-no-scroll .sv-grid-scrollbar {
+  display: none;
+}
+/* Scrollbar corner divider uses the theme border token. */
+.sv-grid-scrollbar-corner,
+.sv-grid-scrollbar-corner-br {
+  border-bottom-color: var(--sg-border, #e2e8f0);
+}
+
+/* Filter operator <select> (the dropdown that replaced the radio group). */
+.sv-grid-menu-operator-select {
+  width: 100%;
+  height: 28px;
+  padding: 0 22px 0 8px;
+  margin-bottom: 6px;
+  border: 1px solid var(--sg-input-border, #cbd5e1);
+  border-radius: 5px;
+  background: var(--sg-input-bg, #fff);
+  color: var(--sg-fg, #0f172a);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px;
+  background-size: 4px 4px, 4px 4px;
+  background-repeat: no-repeat;
+}
+.sv-grid-menu-operator-select:focus {
+  outline: none;
+  border-color: var(--sg-accent, #2563eb);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 40%, transparent);
+}
+/* Operator toggle button (active) uses the on-accent token. */
+.sv-grid-menu-operator-btn.is-active {
+  color: var(--sg-on-accent, #fff);
+}
+
+/* Filter-only + choose-columns popover widths. */
+.sv-grid-filter-menu {
+  width: 260px;
+}
+.sv-grid-choose-columns-menu {
+  width: 240px;
+}
+.sv-grid-choose-columns-menu .sv-grid-facet-list {
+  max-height: 280px;
+}
+
+/* Native checkboxes in the facet list pick up the theme accent. */
+.sv-grid-facet input[type="checkbox"] {
+  accent-color: var(--sg-accent, #2563eb);
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
+/* Submenu right-chevron on the "Choose columns" item. */
+.sv-grid-menu-item-chevron {
+  margin-left: auto;
+  transform: rotate(-90deg);
+  opacity: 0.55;
+}
+.sv-grid-menu-item.is-open .sv-grid-menu-item-chevron {
+  opacity: 1;
+}
+
+/* Magnifier prefix on the menu's search input. */
+.sv-grid-menu-search {
+  padding-left: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
+  background-position: 8px center;
+  background-repeat: no-repeat;
+  background-size: 14px 14px;
+}
+
+/* Filter menu vertical rhythm. */
+.sv-grid-menu-filter > * + * {
+  margin-top: 6px;
+}
+
+/* Column-header filter (funnel) button tints accent when a filter is active. */
+.sv-grid-col-filter-btn.is-active {
+  color: var(--sg-accent, #2563eb);
+}
+
+/* Row-number gutter: neutralize the right border so it fuses with the header. */
+.sv-grid-row-number-column,
+.sv-grid-row-number-cell {
+  border-right-color: var(--sg-header-bg, #f1f5f9);
+}
+
+/* Group row label colour. */
+.sv-grid-group-row > .sv-grid-cell {
+  color: var(--sg-header-fg, #0f172a);
+}
+
+/* Filter-row operator button: soften when idle, accent border on hover/open. */
+.sv-grid-filter-operator-btn {
+  opacity: 0.85;
+}
+.sv-grid-filter-operator-btn:hover {
+  opacity: 1;
+  border-color: var(--sg-accent, #2563eb);
+}
+.sv-grid-filter-operator-btn.is-open {
+  opacity: 1;
+}

package/dist/SvGrid.svelte

@@ -1189,6 +1189,7 @@
     >
       <div
         class="sv-grid-container sv-grid-container-custom-scrollbars"
+        class:sv-grid-has-vscroll={hasMeasured && hasVerticalOverflow}
         bind:this={ctrl.scrollContainer}
         onscroll={onBodyScroll}
         style={`overflow: auto; position: relative; height: calc(100% - ${hasMeasured && hasHorizontalOverflow ? 16 : 0}px);`}

package/dist/a11y.d.ts

@@ -29,7 +29,7 @@ export declare function getGridRowA11yProps(rowIndex?: number): {
     readonly role: "row";
 };
 export declare function getGridCellA11yProps(input?: GridCellA11yInput): {
-    readonly 'aria-selected'?: boolean | undefined;
+    readonly 'aria-selected': boolean;
     readonly 'aria-rowindex'?: number | undefined;
     readonly 'aria-colindex'?: number | undefined;
     readonly id?: string | undefined;

package/dist/a11y.js

@@ -29,7 +29,7 @@ export function getGridCellA11yProps(input = {}) {
         ...(id ? { id } : {}),
         ...(colIndex !== undefined ? { 'aria-colindex': colIndex } : {}),
         ...(rowIndex !== undefined ? { 'aria-rowindex': rowIndex } : {}),
-        ...(selected ? { 'aria-selected': true } : {}),
+        'aria-selected': selected,
     };
 }
 export function getGridCellDomId(baseId, rowIndex, colIndex) {