mvc-kit 2.13.2 → 2.14.0

package/BEST_PRACTICES.md

@@ -986,11 +986,59 @@ class UserFormModel extends Model<UserFormState> {
 
 ### Models Inside ViewModels
 
-For forms with surrounding page state (submission, server errors), wrap the Model inside a ViewModel:
+For forms with surrounding page state (submission, server errors), wrap the Model inside a ViewModel. There are two shapes; the right choice depends on whether the form's initial data is already in hand:
+
+| If the initial data is... | Shape |
+|---|---|
+| **Available at construction** (create modal, edit modal receiving an entity prop) | Create the Model in the **constructor** as `readonly`. Non-nullable, no guard. |
+| **Fetched by ID** after mount (edit page that loads from the server) | Declare the Model as `\| null = null` and create it in `onInit()`. Component must guard. |
+
+**Never** write `public model!: FormModel` — the `!` definite-assignment assertion lies to TypeScript about runtime state. First render runs before `onInit()`, `vm.model` is undefined, and any component reading it crashes. Pick one of the two shapes below instead.
+
+#### Shape 1 — Data available at construction (preferred when applicable)
 
 ```typescript
 class EditUserViewModel extends ViewModel<EditState, EditEvents> {
-  public model!: UserFormModel;
+  // `readonly` refers to the *reference* — the model's state still changes via set().
+  public readonly model: UserFormModel;
+  private service = singleton(UserService);
+
+  constructor(initialState: EditState) {
+    super(initialState);
+    this.model = new UserFormModel(initialState.existing ?? INITIAL_FORM_STATE);
+  }
+
+  async save() {
+    if (!this.model.valid) return;
+    const result = await this.service.save(this.model.state, this.disposeSignal);
+    this.model.commit();
+    this.emit('saved', { id: result.id });
+  }
+
+  protected onDispose() {
+    this.model.dispose();
+  }
+}
+```
+
+The component — no guard needed; the model exists from the first render:
+
+```tsx
+function EditUserModal({ existing, onClose }: Props) {
+  const [, vm] = useLocal(EditUserViewModel, { existing });
+  const saveState = vm.async.save;
+
+  useEvent(vm, 'saved', onClose);
+
+  return <EditUserForm model={vm.model} onSave={vm.save} saving={saveState.loading} />;
+}
+```
+
+#### Shape 2 — Data fetched by ID
+
+```typescript
+class EditUserViewModel extends ViewModel<EditState, EditEvents> {
+  public model: UserFormModel | null = null;
   private service = singleton(UserService);
 
   protected async onInit() {
@@ -1000,7 +1048,7 @@ class EditUserViewModel extends ViewModel<EditState, EditEvents> {
   }
 
   async save() {
-    if (!this.model.valid) return;
+    if (!this.model || !this.model.valid) return;
     await this.service.update(this.userId, this.model.state, this.disposeSignal);
     this.model.commit();
     this.emit('saved', { id: this.userId });
@@ -1012,7 +1060,7 @@ class EditUserViewModel extends ViewModel<EditState, EditEvents> {
 }
 ```
 
-The component:
+The component — **must** guard on `vm.model` before rendering the form:
 
 ```tsx
 function EditUserPage() {
@@ -1388,3 +1436,4 @@ Components emit data attributes for CSS hooks — no class name opinions:
 - `Pending` as a ViewModel own property — it dies on unmount; put it on the singleton Resource
 - Passing `this.disposeSignal` to fetch inside Pending's execute callback — would abort on VM unmount, defeating resilience
 - Using `collection.optimistic()` rollback with Pending — snapshot goes stale during retries
+- Write `public model!: FormModel` or any other `!` definite-assignment / non-null assertion on a ViewModel / Model field — the `!` lies to TypeScript about runtime state. Either make the field non-nullable by creating it in the constructor, or declare it nullable and guard the component render. Same rule for non-null assertions on any nullable value (`foo!.bar`) — narrow or restructure instead.

package/agent-config/claude-code/skills/mvc-kit/SKILL.md

@@ -84,7 +84,7 @@ Most features combine multiple classes. These are the key composition patterns:
 
 - **Data table**: ViewModel + Collection/Resource + Sorting + Pagination + Selection → getter pipeline (`items → filtered → sorted → paged`). Always reset pagination when filters change.
 - **Infinite scroll / chat**: ViewModel + Feed + Service → cursor-based server pagination with `appendPage()`. Use `AbortSignal.any()` for per-call cancellation on rapid user interactions.
-- **Form with validation**: ViewModel creates Model in `onInit()`, disposes in `onDispose()`. Guard `save()` on `model.valid`. Call `model.commit()` after successful save.
+- **Form with validation**: ViewModel owns a Model. If the initial data is known at construction (create modal, edit modal with entity prop), declare the Model `readonly` and create it in the **constructor**. If the data is fetched by ID, declare it `| null = null` and create it in `onInit()` — the component must then guard with `if (!vm.model) return <Spinner />`. Never write `public model!: FormModel` (the `!` lies and crashes the first render). Dispose in `onDispose()`, guard `save()` on `model.valid`, commit after successful save. See Recipe 3 (known data) and Recipe 4 (fetched data).
 - **Two-tier events**: ViewModel `.emit()` for component reactions (navigate, show inline error). EventBus `.emit()` for app-wide side effects (toasts, analytics).
 - **Singleton with DEFAULT_STATE**: `static DEFAULT_STATE` lets `singleton()` and `useSingleton()` work without repeating initial state at every call site.
 

package/agent-config/claude-code/skills/mvc-kit/anti-patterns.md

@@ -591,3 +591,50 @@ async deleteItem(id: string) {
   });
 }
 ```
+
+---
+
+## 26. Definite-Assignment Assertion (`!`) on a Model/ViewModel Field
+
+```typescript
+// BAD — `!` lies to TypeScript about runtime state.
+// First render runs before onInit(), so vm.model is undefined and useField/useModel crash.
+class EditVM extends ViewModel<EditState> {
+  public model!: FormModel;
+
+  protected onInit() {
+    this.model = new FormModel(this.state.existing);
+  }
+}
+
+// GOOD (data known at construction) — create in constructor, non-nullable
+class EditVM extends ViewModel<EditState> {
+  public readonly model: FormModel;
+
+  constructor(state: EditState) {
+    super(state);
+    this.model = new FormModel(state.existing ?? INITIAL);
+  }
+
+  protected onDispose() { this.model.dispose(); }
+}
+
+// GOOD (data fetched by ID) — declare nullable, guard in component
+class EditVM extends ViewModel<EditState> {
+  public model: FormModel | null = null;
+
+  protected async onInit() {
+    const entity = await this.service.getById(this.state.id, this.disposeSignal);
+    this.model = new FormModel(entity);
+  }
+
+  protected onDispose() { this.model?.dispose(); }
+}
+```
+
+```tsx
+// Component must guard for the nullable shape:
+if (!vm.model) return <Spinner />;
+```
+
+Extends to non-null assertions in general (`foo!.bar`, `arr[0]!`) — don't use `!` to paper over a nullable type when the real fix is either (a) make it non-nullable by construction, or (b) narrow it with a proper check. See Recipe 3 (known data) and Recipe 4 (fetched data).

package/agent-config/claude-code/skills/mvc-kit/patterns.md

@@ -608,6 +608,17 @@ class UserFormModel extends Model<UserFormState> {
 const { state, errors, valid, dirty, model } = useModel(() => new UserFormModel({ name: '', email: '' }));
 ```
 
+### Model inside a ViewModel — two shapes
+
+| If the initial data is... | Shape |
+|---|---|
+| **Available at construction** (create modal, edit modal with entity prop) | `readonly model: FormModel;` + assign in constructor. Non-nullable, no guard. |
+| **Fetched by ID** after mount | `model: FormModel \| null = null;` + assign in `onInit()`. Component must guard with `if (!vm.model) return <Spinner />`. |
+
+**Never** write `public model!: FormModel`. The `!` definite-assignment assertion lies about runtime state: first render runs before `onInit`, so `vm.model` is `undefined`, and `useField`/`useModel` crash. Always either make the field non-nullable via constructor creation, or declare it nullable and guard.
+
+See Recipe 3 (known data) and Recipe 4 (fetched data) in [recipes.md](recipes.md).
+
 ---
 
 ## Testing Pattern

package/agent-config/claude-code/skills/mvc-kit/recipes.md

@@ -240,9 +240,96 @@ function MessageThread({ conversationId }: { conversationId: string }) {
 
 ---
 
-## Recipe 3: Form with Model Validation
+## Choosing a Form Recipe
 
-ViewModel creates and owns a Model instance. Model handles validation, dirty tracking, commit/rollback. ViewModel handles async save.
+| If the form's initial data is... | Use |
+|---|---|
+| **Already available** at construction (create modal, edit modal receiving an entity prop, wizard step) | **Recipe 3** — Form with Known Initial Data |
+| **Fetched by ID** after mount (edit page that loads from the server) | **Recipe 4** — Form that Loads by ID |
+
+The distinction matters because Recipe 4 has a null guard and a lifecycle trap that Recipe 3 does not. Don't copy Recipe 4 when Recipe 3 applies — you'll write defensive code for a nullability you never needed.
+
+---
+
+## Recipe 3: Form with Known Initial Data
+
+The initial data is available when the ViewModel is constructed — passed through `useLocal`'s initial state, or known from a constant. The Model is created in the constructor, so it's non-nullable from the first render onward.
+
+```typescript
+interface EditState {
+  existing: AlertConfig | null;  // null → create mode, non-null → edit mode
+}
+
+interface EditEvents {
+  saved: { id: string };
+}
+
+class EditAlertConfigViewModel extends ViewModel<EditState, EditEvents> {
+  // `readonly` means the reference never changes — the model's *state* still changes via set().
+  public readonly model: AlertConfigFormModel;
+
+  private service = singleton(AlertConfigService);
+  private collection = singleton(AlertConfigsCollection);
+
+  constructor(initialState: EditState) {
+    super(initialState);
+    this.model = new AlertConfigFormModel(
+      initialState.existing
+        ? alertConfigToFormState(initialState.existing)
+        : INITIAL_FORM_STATE,
+    );
+  }
+
+  get canSave(): boolean {
+    return this.model.valid && this.model.dirty;
+  }
+
+  protected onDispose() {
+    this.model.dispose();
+  }
+
+  async save() {
+    if (!this.model.valid) return;
+    const result = this.state.existing
+      ? await this.service.update(this.state.existing.id, this.model.state, this.disposeSignal)
+      : await this.service.create(this.model.state, this.disposeSignal);
+    this.collection.upsert(result);
+    this.model.commit();
+    this.emit('saved', { id: result.id });
+  }
+}
+```
+
+```tsx
+function EditAlertConfigModal({ existing, onClose }: { existing: AlertConfig | null; onClose: () => void }) {
+  const [, vm] = useLocal(EditAlertConfigViewModel, { existing });
+  const { loading: saving } = vm.async.save;
+
+  useEvent(vm, 'saved', onClose);
+
+  // No `!vm.model` guard — the model exists from the first render.
+  return (
+    <form onSubmit={e => { e.preventDefault(); vm.save(); }}>
+      <ModelFields model={vm.model} />
+      <button disabled={!vm.canSave || saving}>
+        {saving ? 'Saving…' : 'Save'}
+      </button>
+    </form>
+  );
+}
+```
+
+**Key rules:**
+- Declare the field as `readonly model: FormModel` and assign it in the constructor — not `model!:` (the `!` would lie about runtime state)
+- Pair the constructor creation with `this.model.dispose()` in `onDispose()`
+- No null guard needed — the component never sees a half-initialized ViewModel
+- Re-create the ViewModel when the entity changes using `useLocal(..., [existing.id])` — the constructor re-runs with the new data
+
+---
+
+## Recipe 4: Form that Loads by ID
+
+The ViewModel only knows an ID at construction; the entity is fetched in `onInit()`. The Model is nullable until the fetch completes, and the component must guard its render.
 
 ```typescript
 interface ProfileState {
@@ -255,32 +342,25 @@ interface ProfileEvents {
 }
 
 class LocationProfileViewModel extends ViewModel<ProfileState, ProfileEvents> {
-  // Model is created dynamically after data loads — starts null
+  // Model is created after the fetch resolves — starts null, component must guard.
   public model: LocationFormModel | null = null;
 
   private service = singleton(LocationService);
   private collection = singleton(LocationsCollection);
   private bus = singleton(AppEventBus);
 
-  // --- Computed getters ---
-
   get canSave(): boolean {
     return this.model !== null && this.model.valid && this.model.dirty;
   }
 
-  // --- Lifecycle ---
-
   protected onInit() {
     this.load();
   }
 
   protected onDispose() {
-    // Model has its own lifecycle — must dispose
     this.model?.dispose();
   }
 
-  // --- Actions ---
-
   async load() {
     const location = await this.service.getById(this.state.locationId, this.disposeSignal);
 
@@ -303,7 +383,7 @@ class LocationProfileViewModel extends ViewModel<ProfileState, ProfileEvents> {
         this.disposeSignal,
       );
       this.collection.update(this.state.locationId, updated);
-      this.model.commit(); // Reset dirty state after successful save
+      this.model.commit();
       this.set({ location: updated });
       this.emit('saved', { id: updated.id });
       this.bus.emit('toast:show', { message: 'Location saved', severity: 'success' });
@@ -311,7 +391,7 @@ class LocationProfileViewModel extends ViewModel<ProfileState, ProfileEvents> {
       if (!isAbortError(e)) {
         this.bus.emit('toast:show', { message: 'Failed to save', severity: 'error' });
       }
-      throw e; // Re-throw so async tracking captures it
+      throw e;
     }
   }
 }
@@ -319,18 +399,19 @@ class LocationProfileViewModel extends ViewModel<ProfileState, ProfileEvents> {
 
 ```tsx
 function LocationProfile({ locationId }: { locationId: string }) {
-  const [state, vm] = useLocal(LocationProfileViewModel, { location: null, locationId });
-  const { loading: saving } = vm.async.save ?? {};
+  const [, vm] = useLocal(LocationProfileViewModel, { location: null, locationId });
+  const { loading: saving } = vm.async.save;
 
   useEvent(vm, 'saved', () => navigate('/locations'));
 
+  // Required: the model is created in onInit() after the fetch resolves.
   if (!vm.model) return <Spinner />;
 
   return (
     <form onSubmit={e => { e.preventDefault(); vm.save(); }}>
       <ModelFields model={vm.model} />
       <button disabled={!vm.canSave || saving}>
-        {saving ? 'Saving...' : 'Save'}
+        {saving ? 'Saving…' : 'Save'}
       </button>
     </form>
   );
@@ -338,16 +419,16 @@ function LocationProfile({ locationId }: { locationId: string }) {
 ```
 
 **Key rules:**
-- Model is created in `onInit()` (or after async load), disposed in `onDispose()` — **always pair create/dispose**
-- Guard `save()` with `model.valid` — never submit invalid data
-- Call `model.commit()` after successful save to reset dirty tracking
-- Use `model.rollback()` for cancel/discard
+- Declare the field as `model: FormModel | null = null` — not `model!:` (the `!` would lie about runtime state and crash `useField`/`useModel` on the first render)
+- Guard the form render with `if (!vm.model) return <Spinner />` — the model is undefined until `onInit` resolves
+- Dispose with `this.model?.dispose()` (optional chain — may never have been created on error paths)
+- Guard `save()` with `!this.model || !this.model.valid`
 - For large forms: use `useModelRef(factory)` + `useField(model, 'fieldName')` for surgical per-field re-renders
 - ViewModel events (`emit('saved')`) for navigation; EventBus for app-wide toasts
 
 ---
 
-## Recipe 4: Two-Tier Event System
+## Recipe 5: Two-Tier Event System
 
 ViewModel events are for "this instance did something" (component reactions). EventBus events are for "something happened app-wide" (toasts, analytics, navigation).
 
@@ -419,7 +500,7 @@ function ToastProvider() {
 
 ---
 
-## Recipe 5: Resource with Singleton DEFAULT_STATE
+## Recipe 6: Resource with Singleton DEFAULT_STATE
 
 Singleton ViewModels that share state across routes need `static DEFAULT_STATE` so `singleton()` and `useSingleton()` work without repeating initial state at every call site.
 
@@ -454,7 +535,7 @@ const [state, auth] = useSingleton(AuthViewModel);  // React (auto-init + subscr
 
 ---
 
-## Recipe 6: Error Handling with isAbortError
+## Recipe 7: Error Handling with isAbortError
 
 Async tracking handles errors automatically. Manual try/catch is only needed when you have **side effects** in the catch block (toasts, event emissions, collection rollbacks).
 

package/agent-config/claude-code/skills/mvc-kit/testing.md

@@ -81,8 +81,9 @@ it('captures errors in async tracking', async () => {
 
   await vm.load().catch(() => {}); // Swallow the re-thrown error
 
-  expect(vm.async.load.error).toBeInstanceOf(Error);
-  expect(vm.async.load.error!.message).toBe('Network error');
+  // async.error is a string (message), not an Error. errorCode is the canonical code.
+  expect(vm.async.load.error).toBe('Network error');
+  expect(vm.async.load.errorCode).toBe('unknown');
 
   vm.dispose();
 });

package/agent-config/claude-code/skills/mvc-kit-review/checklist.md

@@ -166,16 +166,17 @@
 
 ---
 
-## Composition Checks (6)
+## Composition Checks (7)
 
 ### Critical
 1. **Model lifecycle pairing** — If a ViewModel creates a Model in `onInit()` or an action, it must dispose it in `onDispose()`.
+2. **No `!` definite-assignment or non-null assertion on a ViewModel/Model field** — `public model!: FormModel` lies to TypeScript about runtime state: first render runs before `onInit`, so `vm.model` is `undefined` and any component reading it crashes. Either (a) create the Model in the constructor so it's non-nullable (`readonly model: FormModel`, assigned in `constructor`), or (b) declare it nullable (`model: FormModel \| null = null`) and guard the component render with `if (!vm.model) return <Spinner />`. Same rule applies to non-null assertions on any other nullable field. See Recipe 3 (known data) and Recipe 4 (fetched data).
 
 ### Warning
-2. **Per-call cancellation for rapid interactions** — When users can switch contexts rapidly (conversations, search-as-you-type), use `AbortSignal.any([this.disposeSignal, controller.signal])` instead of `disposeSignal` alone.
-3. **Two-tier events** — ViewModel `.emit()` for component-scoped reactions (navigate, show error). EventBus `.emit()` for app-wide side effects (toasts, analytics). Don't use EventBus for single-component concerns.
-4. **Singleton DEFAULT_STATE** — Singleton ViewModels used with `useSingleton()` should have `static DEFAULT_STATE` to avoid repeating initial state at every call site.
-5. **Smart init** — `onInit()` should check `if (this.collection.length === 0)` before fetching to prevent re-fetching when component re-mounts and data is already loaded.
+3. **Per-call cancellation for rapid interactions** — When users can switch contexts rapidly (conversations, search-as-you-type), use `AbortSignal.any([this.disposeSignal, controller.signal])` instead of `disposeSignal` alone.
+4. **Two-tier events** — ViewModel `.emit()` for component-scoped reactions (navigate, show error). EventBus `.emit()` for app-wide side effects (toasts, analytics). Don't use EventBus for single-component concerns.
+5. **Singleton DEFAULT_STATE** — Singleton ViewModels used with `useSingleton()` should have `static DEFAULT_STATE` to avoid repeating initial state at every call site.
+6. **Smart init** — `onInit()` should check `if (this.collection.length === 0)` before fetching to prevent re-fetching when component re-mounts and data is already loaded.
 
 ### Suggestion
-6. **File naming convention** — Files should follow `{Name}{Role}.ts` pattern: `UsersViewModel.ts`, `UserService.ts`, `UsersCollection.ts`, `UsersResource.ts`, `LocationFormModel.ts`, `AppEventBus.ts`.
+7. **File naming convention** — Files should follow `{Name}{Role}.ts` pattern: `UsersViewModel.ts`, `UserService.ts`, `UsersCollection.ts`, `UsersResource.ts`, `LocationFormModel.ts`, `AppEventBus.ts`.

package/agent-config/copilot/copilot-instructions.md

@@ -179,6 +179,40 @@ class UserModel extends Model<UserFormState> {
 }
 ```
 
+### Model owned by a ViewModel — pick one of two shapes
+
+If the initial data is available at construction (create modal, edit modal receiving an entity prop):
+
+```typescript
+class EditUserVM extends ViewModel<{ existing: User | null }> {
+  public readonly model: UserModel;  // non-nullable — set in constructor
+
+  constructor(state: { existing: User | null }) {
+    super(state);
+    this.model = new UserModel(state.existing ?? INITIAL);
+  }
+
+  protected onDispose() { this.model.dispose(); }
+}
+```
+
+If the initial data is fetched by ID:
+
+```typescript
+class EditUserVM extends ViewModel<{ userId: string }> {
+  public model: UserModel | null = null;  // nullable — component must guard
+
+  protected async onInit() {
+    const user = await this.service.getById(this.state.userId, this.disposeSignal);
+    this.model = new UserModel(user);
+  }
+
+  protected onDispose() { this.model?.dispose(); }
+}
+```
+
+**Never** write `public model!: UserModel` — the `!` lies to TypeScript about runtime state and causes `useField`/`useModel` to crash on the first render with "Cannot read properties of undefined." Either make the Model non-nullable via constructor creation, or declare it nullable and guard the component with `if (!vm.model) return <Spinner />`.
+
 ## Composable Helpers Pattern
 
 Declare helpers as ViewModel instance properties. They have `subscribe()` so they're auto-tracked -- getters that read them recompute when helper state changes.

package/agent-config/cursor/cursorrules

@@ -179,6 +179,40 @@ class UserModel extends Model<UserFormState> {
 }
 ```
 
+### Model owned by a ViewModel — pick one of two shapes
+
+If the initial data is available at construction (create modal, edit modal receiving an entity prop):
+
+```typescript
+class EditUserVM extends ViewModel<{ existing: User | null }> {
+  public readonly model: UserModel;  // non-nullable — set in constructor
+
+  constructor(state: { existing: User | null }) {
+    super(state);
+    this.model = new UserModel(state.existing ?? INITIAL);
+  }
+
+  protected onDispose() { this.model.dispose(); }
+}
+```
+
+If the initial data is fetched by ID:
+
+```typescript
+class EditUserVM extends ViewModel<{ userId: string }> {
+  public model: UserModel | null = null;  // nullable — component must guard
+
+  protected async onInit() {
+    const user = await this.service.getById(this.state.userId, this.disposeSignal);
+    this.model = new UserModel(user);
+  }
+
+  protected onDispose() { this.model?.dispose(); }
+}
+```
+
+**Never** write `public model!: UserModel` — the `!` lies to TypeScript about runtime state and causes `useField`/`useModel` to crash on the first render with "Cannot read properties of undefined." Either make the Model non-nullable via constructor creation, or declare it nullable and guard the component with `if (!vm.model) return <Spinner />`.
+
 ## Composable Helpers Pattern
 
 Declare helpers as ViewModel instance properties. They have `subscribe()` so they're auto-tracked — getters that read them recompute when helper state changes.

package/dist/react/components/DataTable.cjs

@@ -74,20 +74,16 @@ function DataTable({ items, columns, keyOf = defaultKeyOf, pageSize, sort, onSor
 	if (error && renderError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: renderError(error) });
 	if (items.length === 0 && renderEmpty) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: renderEmpty() });
 	const resolvedSelection = selection ? resolveSelectionProp(selection) : void 0;
-	let resolvedSorts;
-	let resolvedOnSort;
-	if (sort) {
-		const resolved = resolveSortProp(sort, onSort);
-		resolvedSorts = resolved.sorts;
-		resolvedOnSort = resolved.onSort;
-	}
+	const resolvedSort = sort ? resolveSortProp(sort, onSort) : void 0;
+	const resolvedSorts = resolvedSort?.sorts;
+	const resolvedOnSort = resolvedSort?.onSort;
 	let displayItems = items;
 	let paginationInfo;
 	if (pagination) paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);
 	else if (pageSize && !pagination) displayItems = items.slice(0, pageSize);
 	const allKeys = resolvedSelection ? displayItems.map((item) => keyOf(item)) : [];
-	const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every((k) => resolvedSelection.selected.has(k));
-	const someSelected = resolvedSelection && allKeys.some((k) => resolvedSelection.selected.has(k));
+	const allSelected = !!resolvedSelection && allKeys.length > 0 && allKeys.every((k) => resolvedSelection.selected.has(k));
+	const someSelected = !!resolvedSelection && allKeys.some((k) => resolvedSelection.selected.has(k));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-component": "data-table",
 		className,

package/dist/react/components/DataTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs","names":[],"sources":["../../../src/react/components/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type {\n  Column,\n  SortHeaderProps,\n  SelectionState,\n  SelectionHelper,\n  PaginationState,\n  PaginationHelper,\n  PaginationInfo,\n  SortingHelper,\n  AsyncStateProps,\n} from './types';\nimport { isSelectionHelper, isPaginationHelper, isSortingHelper } from './types';\nimport type { SortDescriptor } from '../../Sorting';\n\n// ── Prop resolution helpers ──\n\ninterface ResolvedSelection {\n  selected: ReadonlySet<any>;\n  onToggle: (key: any) => void;\n  onToggleAll: (allKeys: any[]) => void;\n}\n\nfunction resolveSelectionProp(selection: SelectionState | SelectionHelper): ResolvedSelection {\n  if (isSelectionHelper(selection)) {\n    return {\n      selected: selection.selected,\n      onToggle: (key) => selection.toggle(key),\n      onToggleAll: (allKeys) => selection.toggleAll(allKeys),\n    };\n  }\n  return {\n    selected: selection.selected,\n    onToggle: selection.onToggle,\n    onToggleAll: (allKeys) => selection.onToggleAll(allKeys),\n  };\n}\n\nfunction resolveSortProp(\n  sort: readonly SortDescriptor[] | SortingHelper,\n  onSort?: (key: string) => void,\n): { sorts: readonly SortDescriptor[]; onSort: ((key: string) => void) | undefined } {\n  if (isSortingHelper(sort)) {\n    return { sorts: sort.sorts, onSort: (key) => sort.toggle(key) };\n  }\n  return { sorts: sort, onSort };\n}\n\nfunction resolvePaginationProp(\n  pagination: PaginationState | PaginationHelper,\n  pageSize?: number,\n  paginationTotal?: number,\n): PaginationInfo {\n  if (isPaginationHelper(pagination)) {\n    const total = paginationTotal ?? 0;\n    const ps = pagination.pageSize;\n    const pageCount = Math.max(1, Math.ceil(total / ps));\n    const page = pagination.page;\n    return {\n      page,\n      pageCount,\n      total,\n      pageSize: ps,\n      hasPrev: page > 1,\n      hasNext: page < pageCount,\n      goToPage: (p) => pagination.setPage(p),\n      goPrev: () => pagination.setPage(page - 1),\n      goNext: () => pagination.setPage(page + 1),\n    };\n  }\n  const total = pagination.total;\n  const ps = pageSize ?? 10;\n  const pageCount = Math.max(1, Math.ceil(total / ps));\n  const page = pagination.page;\n  return {\n    page,\n    pageCount,\n    total,\n    pageSize: ps,\n    hasPrev: page > 1,\n    hasNext: page < pageCount,\n    goToPage: pagination.onPageChange,\n    goPrev: () => pagination.onPageChange(page - 1),\n    goNext: () => pagination.onPageChange(page + 1),\n  };\n}\n\n/** Props for the DataTable headless component. */\nexport interface DataTableProps<T> extends AsyncStateProps {\n  items: T[];\n  columns: Column<T>[];\n  keyOf?: (item: T) => string | number;\n  pageSize?: number;\n\n  // Controlled state — accepts object-literal OR helper instance\n  sort?: readonly SortDescriptor[] | SortingHelper;\n  onSort?: (key: string) => void;\n  selection?: SelectionState | SelectionHelper;\n  pagination?: PaginationState | PaginationHelper;\n  paginationTotal?: number;\n\n  // Render slots\n  renderEmpty?: () => ReactNode;\n  renderLoading?: () => ReactNode;\n  renderError?: (error: string) => ReactNode;\n  renderSortIndicator?: (props: SortHeaderProps) => ReactNode;\n  renderRow?: (item: T, index: number, defaultCells: ReactNode) => ReactNode;\n  renderPagination?: (info: PaginationInfo) => ReactNode;\n\n  className?: string;\n  'aria-label'?: string;\n}\n\nconst defaultKeyOf = (item: any) => item.id;\n\nfunction getAriaSortValue(key: string, sorts: readonly SortDescriptor[] | undefined): 'ascending' | 'descending' | 'none' {\n  if (!sorts) return 'none';\n  const desc = sorts.find(s => s.key === key);\n  if (!desc) return 'none';\n  return desc.direction === 'asc' ? 'ascending' : 'descending';\n}\n\n/**\n * Headless data table with sort headers, selection checkboxes, and pagination slots.\n * Renders semantic HTML (`<table>`) with data attributes for styling.\n * Accepts Sorting/Selection/Pagination helpers directly via duck-typing.\n */\nexport function DataTable<T>({\n  items,\n  columns,\n  keyOf = defaultKeyOf,\n  pageSize,\n  sort,\n  onSort,\n  selection,\n  loading,\n  error,\n  pagination,\n  paginationTotal,\n  renderEmpty,\n  renderLoading,\n  renderError,\n  renderSortIndicator,\n  renderRow,\n  renderPagination,\n  className,\n  'aria-label': ariaLabel,\n}: DataTableProps<T>) {\n  if (loading && renderLoading) return <>{renderLoading()}</>;\n  if (error && renderError) return <>{renderError(error)}</>;\n  if (items.length === 0 && renderEmpty) return <>{renderEmpty()}</>;\n\n  // ── Resolve props ──\n  const resolvedSelection = selection ? resolveSelectionProp(selection) : undefined;\n\n  let resolvedSorts: readonly SortDescriptor[] | undefined;\n  let resolvedOnSort: ((key: string) => void) | undefined;\n  if (sort) {\n    const resolved = resolveSortProp(sort, onSort);\n    resolvedSorts = resolved.sorts;\n    resolvedOnSort = resolved.onSort;\n  }\n\n  let displayItems = items;\n  let paginationInfo: PaginationInfo | undefined;\n  if (pagination) {\n    paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);\n  } else if (pageSize && !pagination) {\n    displayItems = items.slice(0, pageSize);\n  }\n\n  // Selection: check indeterminate state\n  const allKeys = resolvedSelection ? displayItems.map(item => keyOf(item)) : [];\n  const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every(k => resolvedSelection!.selected.has(k));\n  const someSelected = resolvedSelection && allKeys.some(k => resolvedSelection!.selected.has(k));\n\n  return (\n    <div data-component=\"data-table\" className={className}>\n      <table role=\"grid\" aria-label={ariaLabel}>\n        <thead>\n          <tr>\n            {resolvedSelection && (\n              <th data-column=\"select\">\n                <input\n                  type=\"checkbox\"\n                  checked={!!allSelected}\n                  ref={(el) => {\n                    if (el) el.indeterminate = !!someSelected && !allSelected;\n                  }}\n                  onChange={() => resolvedSelection!.onToggleAll(allKeys)}\n                  aria-label=\"Select all\"\n                />\n              </th>\n            )}\n            {columns.map((col) => {\n              const isSortable = col.sortable && resolvedOnSort;\n              const sortDesc = resolvedSorts?.find(s => s.key === col.key);\n              const isActive = !!sortDesc;\n              const sortIndex = resolvedSorts ? resolvedSorts.findIndex(s => s.key === col.key) : -1;\n\n              return (\n                <th\n                  key={col.key}\n                  data-sortable={isSortable ? '' : undefined}\n                  data-sorted={isActive ? '' : undefined}\n                  data-align={col.align}\n                  style={col.width ? { width: col.width } : undefined}\n                  aria-sort={isSortable ? getAriaSortValue(col.key, resolvedSorts) : undefined}\n                >\n                  {isSortable ? (\n                    <button type=\"button\" onClick={() => resolvedOnSort!(col.key)}>\n                      {col.header}\n                      {renderSortIndicator?.({\n                        active: isActive,\n                        direction: sortDesc?.direction ?? 'asc',\n                        index: sortIndex,\n                        onToggle: () => resolvedOnSort!(col.key),\n                      })}\n                    </button>\n                  ) : (\n                    col.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {displayItems.map((item, index) => {\n            const key = keyOf(item);\n            const isSelected = resolvedSelection?.selected.has(key);\n\n            const cells = (\n              <>\n                {resolvedSelection && (\n                  <td data-column=\"select\">\n                    <input\n                      type=\"checkbox\"\n                      checked={!!isSelected}\n                      onChange={() => resolvedSelection!.onToggle(key)}\n                      aria-label={`Select row ${key}`}\n                    />\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    key={col.key}\n                    data-align={col.align}\n                  >\n                    {col.render(item, index)}\n                  </td>\n                ))}\n              </>\n            );\n\n            return (\n              <tr key={key} data-selected={isSelected ? '' : undefined}>\n                {renderRow ? renderRow(item, index, cells) : cells}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n      {paginationInfo && renderPagination?.(paginationInfo)}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.cjs","names":[],"sources":["../../../src/react/components/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type {\n  Column,\n  SortHeaderProps,\n  SelectionState,\n  SelectionHelper,\n  PaginationState,\n  PaginationHelper,\n  PaginationInfo,\n  SortingHelper,\n  AsyncStateProps,\n} from './types';\nimport { isSelectionHelper, isPaginationHelper, isSortingHelper } from './types';\nimport type { SortDescriptor } from '../../Sorting';\n\n// ── Prop resolution helpers ──\n\ninterface ResolvedSelection {\n  selected: ReadonlySet<any>;\n  onToggle: (key: any) => void;\n  onToggleAll: (allKeys: any[]) => void;\n}\n\nfunction resolveSelectionProp(selection: SelectionState | SelectionHelper): ResolvedSelection {\n  if (isSelectionHelper(selection)) {\n    return {\n      selected: selection.selected,\n      onToggle: (key) => selection.toggle(key),\n      onToggleAll: (allKeys) => selection.toggleAll(allKeys),\n    };\n  }\n  return {\n    selected: selection.selected,\n    onToggle: selection.onToggle,\n    onToggleAll: (allKeys) => selection.onToggleAll(allKeys),\n  };\n}\n\nfunction resolveSortProp(\n  sort: readonly SortDescriptor[] | SortingHelper,\n  onSort?: (key: string) => void,\n): { sorts: readonly SortDescriptor[]; onSort: ((key: string) => void) | undefined } {\n  if (isSortingHelper(sort)) {\n    return { sorts: sort.sorts, onSort: (key) => sort.toggle(key) };\n  }\n  return { sorts: sort, onSort };\n}\n\nfunction resolvePaginationProp(\n  pagination: PaginationState | PaginationHelper,\n  pageSize?: number,\n  paginationTotal?: number,\n): PaginationInfo {\n  if (isPaginationHelper(pagination)) {\n    const total = paginationTotal ?? 0;\n    const ps = pagination.pageSize;\n    const pageCount = Math.max(1, Math.ceil(total / ps));\n    const page = pagination.page;\n    return {\n      page,\n      pageCount,\n      total,\n      pageSize: ps,\n      hasPrev: page > 1,\n      hasNext: page < pageCount,\n      goToPage: (p) => pagination.setPage(p),\n      goPrev: () => pagination.setPage(page - 1),\n      goNext: () => pagination.setPage(page + 1),\n    };\n  }\n  const total = pagination.total;\n  const ps = pageSize ?? 10;\n  const pageCount = Math.max(1, Math.ceil(total / ps));\n  const page = pagination.page;\n  return {\n    page,\n    pageCount,\n    total,\n    pageSize: ps,\n    hasPrev: page > 1,\n    hasNext: page < pageCount,\n    goToPage: pagination.onPageChange,\n    goPrev: () => pagination.onPageChange(page - 1),\n    goNext: () => pagination.onPageChange(page + 1),\n  };\n}\n\n/** Props for the DataTable headless component. */\nexport interface DataTableProps<T> extends AsyncStateProps {\n  items: T[];\n  columns: Column<T>[];\n  keyOf?: (item: T) => string | number;\n  pageSize?: number;\n\n  // Controlled state — accepts object-literal OR helper instance\n  sort?: readonly SortDescriptor[] | SortingHelper;\n  onSort?: (key: string) => void;\n  selection?: SelectionState | SelectionHelper;\n  pagination?: PaginationState | PaginationHelper;\n  paginationTotal?: number;\n\n  // Render slots\n  renderEmpty?: () => ReactNode;\n  renderLoading?: () => ReactNode;\n  renderError?: (error: string) => ReactNode;\n  renderSortIndicator?: (props: SortHeaderProps) => ReactNode;\n  renderRow?: (item: T, index: number, defaultCells: ReactNode) => ReactNode;\n  renderPagination?: (info: PaginationInfo) => ReactNode;\n\n  className?: string;\n  'aria-label'?: string;\n}\n\nconst defaultKeyOf = (item: any) => item.id;\n\nfunction getAriaSortValue(key: string, sorts: readonly SortDescriptor[] | undefined): 'ascending' | 'descending' | 'none' {\n  if (!sorts) return 'none';\n  const desc = sorts.find(s => s.key === key);\n  if (!desc) return 'none';\n  return desc.direction === 'asc' ? 'ascending' : 'descending';\n}\n\n/**\n * Headless data table with sort headers, selection checkboxes, and pagination slots.\n * Renders semantic HTML (`<table>`) with data attributes for styling.\n * Accepts Sorting/Selection/Pagination helpers directly via duck-typing.\n */\nexport function DataTable<T>({\n  items,\n  columns,\n  keyOf = defaultKeyOf,\n  pageSize,\n  sort,\n  onSort,\n  selection,\n  loading,\n  error,\n  pagination,\n  paginationTotal,\n  renderEmpty,\n  renderLoading,\n  renderError,\n  renderSortIndicator,\n  renderRow,\n  renderPagination,\n  className,\n  'aria-label': ariaLabel,\n}: DataTableProps<T>) {\n  if (loading && renderLoading) return <>{renderLoading()}</>;\n  if (error && renderError) return <>{renderError(error)}</>;\n  if (items.length === 0 && renderEmpty) return <>{renderEmpty()}</>;\n\n  // ── Resolve props ──\n  const resolvedSelection = selection ? resolveSelectionProp(selection) : undefined;\n\n  const resolvedSort = sort ? resolveSortProp(sort, onSort) : undefined;\n  const resolvedSorts = resolvedSort?.sorts;\n  const resolvedOnSort = resolvedSort?.onSort;\n\n  let displayItems = items;\n  let paginationInfo: PaginationInfo | undefined;\n  if (pagination) {\n    paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);\n  } else if (pageSize && !pagination) {\n    displayItems = items.slice(0, pageSize);\n  }\n\n  // Selection: check indeterminate state\n  const allKeys = resolvedSelection ? displayItems.map(item => keyOf(item)) : [];\n  const allSelected = !!resolvedSelection && allKeys.length > 0 && allKeys.every(k => resolvedSelection.selected.has(k));\n  const someSelected = !!resolvedSelection && allKeys.some(k => resolvedSelection.selected.has(k));\n\n  return (\n    <div data-component=\"data-table\" className={className}>\n      <table role=\"grid\" aria-label={ariaLabel}>\n        <thead>\n          <tr>\n            {resolvedSelection && (\n              <th data-column=\"select\">\n                <input\n                  type=\"checkbox\"\n                  checked={!!allSelected}\n                  ref={(el) => {\n                    if (el) el.indeterminate = !!someSelected && !allSelected;\n                  }}\n                  onChange={() => resolvedSelection.onToggleAll(allKeys)}\n                  aria-label=\"Select all\"\n                />\n              </th>\n            )}\n            {columns.map((col) => {\n              const isSortable = col.sortable && resolvedOnSort;\n              const sortDesc = resolvedSorts?.find(s => s.key === col.key);\n              const isActive = !!sortDesc;\n              const sortIndex = resolvedSorts ? resolvedSorts.findIndex(s => s.key === col.key) : -1;\n\n              return (\n                <th\n                  key={col.key}\n                  data-sortable={isSortable ? '' : undefined}\n                  data-sorted={isActive ? '' : undefined}\n                  data-align={col.align}\n                  style={col.width ? { width: col.width } : undefined}\n                  aria-sort={isSortable ? getAriaSortValue(col.key, resolvedSorts) : undefined}\n                >\n                  {isSortable ? (\n                    <button type=\"button\" onClick={() => resolvedOnSort(col.key)}>\n                      {col.header}\n                      {renderSortIndicator?.({\n                        active: isActive,\n                        direction: sortDesc?.direction ?? 'asc',\n                        index: sortIndex,\n                        onToggle: () => resolvedOnSort(col.key),\n                      })}\n                    </button>\n                  ) : (\n                    col.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {displayItems.map((item, index) => {\n            const key = keyOf(item);\n            const isSelected = resolvedSelection?.selected.has(key);\n\n            const cells = (\n              <>\n                {resolvedSelection && (\n                  <td data-column=\"select\">\n                    <input\n                      type=\"checkbox\"\n                      checked={!!isSelected}\n                      onChange={() => resolvedSelection.onToggle(key)}\n                      aria-label={`Select row ${key}`}\n                    />\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    key={col.key}\n                    data-align={col.align}\n                  >\n                    {col.render(item, index)}\n                  </td>\n                ))}\n              </>\n            );\n\n            return (\n              <tr key={key} data-selected={isSelected ? '' : undefined}>\n                {renderRow ? renderRow(item, index, cells) : cells}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n      {paginationInfo && renderPagination?.(paginationInfo)}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/react/components/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/react/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,MAAM,EACN,eAAe,EACf,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,eAAe,EAChB,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AA0EpD,kDAAkD;AAClD,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,eAAe;IACxD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,IAAI,CAAC,EAAE,SAAS,cAAc,EAAE,GAAG,aAAa,CAAC;IACjD,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAC;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,WAAW,CAAC,EAAE,MAAM,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3C,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IAC5D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,KAAK,SAAS,CAAC;IAC3E,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,SAAS,CAAC;IAEvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAWD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,KAAK,EACL,OAAO,EACP,KAAoB,EACpB,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAuHnB"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/react/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,MAAM,EACN,eAAe,EACf,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,eAAe,EAChB,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AA0EpD,kDAAkD;AAClD,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,eAAe;IACxD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,IAAI,CAAC,EAAE,SAAS,cAAc,EAAE,GAAG,aAAa,CAAC;IACjD,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAC;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,WAAW,CAAC,EAAE,MAAM,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3C,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IAC5D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,KAAK,SAAS,CAAC;IAC3E,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,SAAS,CAAC;IAEvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAWD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,KAAK,EACL,OAAO,EACP,KAAoB,EACpB,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAmHnB"}

package/dist/react/components/DataTable.js

@@ -74,20 +74,16 @@ function DataTable({ items, columns, keyOf = defaultKeyOf, pageSize, sort, onSor
 	if (error && renderError) return /* @__PURE__ */ jsx(Fragment, { children: renderError(error) });
 	if (items.length === 0 && renderEmpty) return /* @__PURE__ */ jsx(Fragment, { children: renderEmpty() });
 	const resolvedSelection = selection ? resolveSelectionProp(selection) : void 0;
-	let resolvedSorts;
-	let resolvedOnSort;
-	if (sort) {
-		const resolved = resolveSortProp(sort, onSort);
-		resolvedSorts = resolved.sorts;
-		resolvedOnSort = resolved.onSort;
-	}
+	const resolvedSort = sort ? resolveSortProp(sort, onSort) : void 0;
+	const resolvedSorts = resolvedSort?.sorts;
+	const resolvedOnSort = resolvedSort?.onSort;
 	let displayItems = items;
 	let paginationInfo;
 	if (pagination) paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);
 	else if (pageSize && !pagination) displayItems = items.slice(0, pageSize);
 	const allKeys = resolvedSelection ? displayItems.map((item) => keyOf(item)) : [];
-	const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every((k) => resolvedSelection.selected.has(k));
-	const someSelected = resolvedSelection && allKeys.some((k) => resolvedSelection.selected.has(k));
+	const allSelected = !!resolvedSelection && allKeys.length > 0 && allKeys.every((k) => resolvedSelection.selected.has(k));
+	const someSelected = !!resolvedSelection && allKeys.some((k) => resolvedSelection.selected.has(k));
 	return /* @__PURE__ */ jsxs("div", {
 		"data-component": "data-table",
 		className,