@invopop/popui 0.1.83 → 0.1.84

package/dist/data-table/data-table-helpers.d.ts

@@ -8,3 +8,4 @@ export declare function shouldIgnoreKeyEvent(event: KeyboardEvent): boolean;
 export declare function handleArrowDown<TData>(currentIndex: number, rows: Row<TData>[], shiftKey: boolean, enableSelection: boolean, onScroll: () => void): number;
 export declare function handleArrowUp<TData>(currentIndex: number, rows: Row<TData>[], shiftKey: boolean, enableSelection: boolean, onScroll: () => void): number;
 export declare function handleSelectKey<TData>(currentIndex: number, rows: Row<TData>[], enableSelection: boolean): void;
+export declare function handleEnterKey<TData>(currentIndex: number, rows: Row<TData>[], loading: boolean, onRowClick?: (row: TData) => void): void;

package/dist/data-table/data-table-helpers.js

@@ -151,3 +151,10 @@ export function handleSelectKey(currentIndex, rows, enableSelection) {
         rows[currentIndex].toggleSelected();
     }
 }
+export function handleEnterKey(currentIndex, rows, loading, onRowClick) {
+    if (loading || !onRowClick)
+        return;
+    if (currentIndex >= 0 && currentIndex < rows.length) {
+        onRowClick(rows[currentIndex].original);
+    }
+}

package/dist/data-table/data-table.svelte

@@ -9,35 +9,30 @@
     type SortingState,
     type VisibilityState
   } from '@tanstack/table-core'
-  import { onMount, onDestroy } from 'svelte'
+  import { onMount, onDestroy, untrack } from 'svelte'
   import DataTableToolbar from './data-table-toolbar.svelte'
   import DataTablePagination from './data-table-pagination.svelte'
   import DataTableHeaderCell from './data-table-header-cell.svelte'
   import DataTableRow from './data-table-row.svelte'
-  import FlexRender from './flex-render.svelte'
   import * as Table from '../table/index.js'
   import BaseTableActions from '../BaseTableActions.svelte'
   import BaseDropdown from '../BaseDropdown.svelte'
   import EmptyState from '../EmptyState.svelte'
-  import Skeleton from '../skeleton/skeleton.svelte'
-  import SkeletonAvatar from '../skeleton/skeleton-avatar.svelte'
   import { Search } from '@invopop/ui-icons'
   import { cn } from '../utils.js'
   import type { DataTableProps } from './data-table-types.js'
   import { calculateColumnSizing } from './column-sizing-helpers.js'
-  import { getCellStyle, getCellClasses } from './table-styles.js'
   import { buildColumns, setupTable } from './table-setup.js'
   import {
     reorderFrozenColumn,
     reorderUnfrozenColumn,
-    calculateFrozenOffset,
     handleScrollEvent,
     shouldIgnoreKeyEvent,
     handleArrowDown,
     handleArrowUp,
-    handleSelectKey
+    handleSelectKey,
+    handleEnterKey
   } from './data-table-helpers.js'
-  import clsx from 'clsx'
 
   let {
     data,
@@ -89,14 +84,18 @@
   const enablePagination = !disablePagination
 
   let rowSelection = $state<RowSelectionState>({})
-  let columnVisibility = $state<VisibilityState>(initialColumnVisibility)
+  let columnVisibility = $state<VisibilityState>(untrack(() => initialColumnVisibility))
   let sorting = $state<SortingState>(
-    initialSortColumn && initialSortDirection
-      ? [{ id: initialSortColumn, desc: initialSortDirection === 'desc' }]
-      : []
+    untrack(() =>
+      initialSortColumn && initialSortDirection
+        ? [{ id: initialSortColumn, desc: initialSortDirection === 'desc' }]
+        : []
+    )
+  )
+  let pagination = $state<PaginationState>(
+    untrack(() => ({ pageIndex: initialPage, pageSize: initialPageSize }))
   )
-  let pagination = $state<PaginationState>({ pageIndex: initialPage, pageSize: initialPageSize })
-  let columnSizing = $state<ColumnSizingState>(initialColumnSizing)
+  let columnSizing = $state<ColumnSizingState>(untrack(() => initialColumnSizing))
   let columnSizingInfo = $state<ColumnSizingInfoState>({
     columnSizingStart: [],
     deltaOffset: null,
@@ -105,10 +104,10 @@
     startOffset: null,
     startSize: null
   })
-  let columnOrder = $state<ColumnOrderState>(initialColumnOrder)
+  let columnOrder = $state<ColumnOrderState>(untrack(() => initialColumnOrder))
   let containerRef = $state<HTMLDivElement | null>(null)
   let columnDropdowns = $state<Record<string, BaseDropdown>>({})
-  let frozenColumns = $state<Set<string>>(new Set(initialFrozenColumns))
+  let frozenColumns = $state<Set<string>>(untrack(() => new Set(initialFrozenColumns)))
   let focusedRowIndex = $state<number>(-1)
   let tableBodyRef = $state<HTMLTableSectionElement | null>(null)
   let tableRenderKey = $state<number>(0) // Force re-render when visibility changes
@@ -259,10 +258,13 @@
         )
         break
       case ' ':
-      case 'Enter':
         event.preventDefault()
         handleSelectKey(focusedRowIndex, rows, enableSelection)
         break
+      case 'Enter':
+        event.preventDefault()
+        handleEnterKey(focusedRowIndex, rows, loading, onRowClick)
+        break
       case 'Escape':
         focusedRowIndex = -1
         break

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.83",
+  "version": "0.1.84",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },
@@ -55,6 +55,7 @@
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
     "@types/lodash-es": "^4.17.12",
+    "@types/node": "^25.6.0",
     "@typescript-eslint/eslint-plugin": "^8.56.1",
     "@typescript-eslint/parser": "^8.56.1",
     "eslint": "^8.28.0",