@iyulab/flex-table 0.40.2 → 0.41.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # Changelog
 
+## [0.41.0] - 2026-10-03
+
+### Added
+
+- **`mergeRepeated` column option — a run of repeated values reads as one merged cell.** For lists of
+  child rows under a parent (order lines under an order, boxes under a shipment), the parent's columns
+  no longer repeat on every line: the value shows once, on the run's first row, the lines inside the run
+  are dropped, and the run keeps one background. `true` merges equal values (empty values never merge);
+  a function `(row, previousRow, col) => boolean` decides by any rule — e.g. merge a customer only within
+  one order. Every row keeps its own value, so sorting, filtering, copying, export and screen readers
+  see each row as before. Rows are compared in display order; the value is drawn again on the first row
+  in view and below frozen rows, so scrolling or paging through a run never hides it.
+
+### Fixed
+
+- **Number entry reads a decimal comma.** The `number` cell editor and the number filter used the native
+  number input, which turns `1,5` into `15` or an empty value depending on the browser. Both are now text
+  fields with a decimal keyboard (`inputmode="decimal"`) that read numbers in the active `Locale` — `1,5`
+  is 1.5 and `1.234,5` is 1234.5 on a comma-decimal page — and the editor shows the current value with
+  that locale's decimal separator. The filter keeps what you typed while you type it and marks a condition
+  it cannot read (`aria-invalid`).
+- **Pasting `1,5` into a number column stores 1.5.** Pasted text was read with `Number()`, so a value from a
+  comma-decimal spreadsheet stayed text (`"1,5"`) and sorted and summed wrongly. Plain notation (`1e3`) is
+  still read; text that is not a number still stays text.
+- **The built-in editor rejects text that is not a number** in a `number` column. It fires
+  `validation-error` (`error`: "Enter a number") and keeps the old value, like a validator failure — the
+  native input never let such text through, so a text field must not store it.
+- The strict-autocomplete error ("Value must be from the existing list") follows the `Locale` (new keys
+  `notANumber` and `notInList` in `flexTableLocale`; `ko` built in).
+
+### Changed
+
+- **The `@iyulab/components` peer is `>=1.54.0`** — number parsing uses its `parseNumber`.
+
+- The optional `@lit/react` peer is `^1.0.8` (was `^1.0.0`) — the version the React entry is tested
+  with.
+
+### Documentation
+
+- README: the Accessibility section links the KWCAG 2.2 table in `@iyulab/components`.
+
+## [0.40.3] - 2026-09-30
+
+### Fixed
+
+- **Screen readers get the position of a row and a cell in the whole table, not in the rendered part.**
+  The grid renders only the visible rows and columns, so without indices a screen reader announced the
+  first rendered row as row 1 after scrolling. Rows now carry `aria-rowindex` and cells, column headers
+  and footer cells `aria-colindex` (1-based, in display order). `aria-rowcount` now counts the header
+  row and the footer row as the ARIA grid pattern defines it (it counted data rows only, so it is one or
+  two higher than before). The footer row's cells now have the grid cell role — the footer was a row
+  without cells.
+
 ## [0.40.2] - 2026-09-30
 
 ### Fixed
@@ -575,8 +628,6 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
-
 ## [0.23.1] - 2026-08-03
 
 ### Fixed

package/README.md

@@ -67,7 +67,7 @@ npm install @iyulab/flex-table
 - **Data Mode** — Client-side or server-side sorting/filtering (`dataMode`)
 - **Context Menu** — `context-menu` event for custom right-click menus
 - **React Wrapper** — `@iyulab/flex-table/react` subpath for idiomatic React usage
-- **ARIA** — `role="grid"`, `aria-sort`, `aria-selected`, `aria-readonly`, `aria-invalid`, `aria-rowcount`, `aria-colcount`
+- **ARIA** — `role="grid"`, `aria-sort`, `aria-selected`, `aria-readonly`, `aria-invalid`, `aria-rowcount`, `aria-colcount`, `aria-rowindex`, `aria-colindex`
 
 ## Sizing
 
@@ -150,6 +150,7 @@ interface ColumnDefinition {
   editor?: CellEditor;     // Custom cell editor: (value, row, col) => TemplateResult
   validator?: CellValidator; // Validate before commit: (value, row, col) => string | null
   conditionalRules?: ConditionalRule[]; // Per-cell style rules, see below
+  mergeRepeated?: boolean | ((row, previousRow, col) => boolean); // Merge runs of repeated values, see below
 }
 ```
 
@@ -157,6 +158,8 @@ The `editor` callback must return a Lit `TemplateResult` containing an input ele
 
 The `validator` callback returns `null` if valid, or an error message string. On failure, the cell shows a red border for 3 seconds and a `validation-error` event is dispatched.
 
+A `number` column's built-in editor reads numbers the way people type them in the active `Locale` — `1,5` on a comma-decimal page is 1.5, `1.234,5` is 1234.5 — and shows the value with that locale's decimal separator. Text that is not a number is rejected the same way as a validator failure (`error` is the localized "Enter a number"). The number filter's conditions and pasted values are read the same way; pasted text that is not a number stays text.
+
 ### `format` vs `render`
 
 Both control how a cell's raw value is displayed, but they differ in what they replace:
@@ -193,6 +196,22 @@ const columns: ColumnDefinition<Order>[] = [
 
 Rules are evaluated in order and combined; later matching rules override earlier ones for overlapping style properties.
 
+### Merging Repeated Values
+
+A list of child rows under a parent — order lines under an order, boxes under a shipment — repeats the parent's columns on every line. `mergeRepeated` draws each run of repeated values as one merged cell: the value shows once, on the run's first row, and the lines between the run's rows are dropped.
+
+```typescript
+const columns: ColumnDefinition<OrderLine>[] = [
+  { key: 'orderNo', label: 'Order', mergeRepeated: true },
+  // Two adjacent orders can share a customer — merge only within one order.
+  { key: 'customer', label: 'Customer', mergeRepeated: (row, prev) => row.orderNo === prev.orderNo },
+  { key: 'product', label: 'Product' },
+  { key: 'qty', label: 'Qty', type: 'number' },
+];
+```
+
+Every row keeps its own value. Sorting, filtering, copying, CSV/XLSX export and screen readers see each row exactly as without merging — a filter that drops a run's first row leaves the rest of the run labelled, and an export pivots. Rows are compared in display order, so sort by the merged column (or keep the server's order) for runs to form. The value is drawn again on the first row in view and on the first row below frozen rows, so scrolling or paging through a run never hides it. With `true`, empty values (`null`, `undefined`, `''`) never merge.
+
 ## Methods
 
 ### Row Operations
@@ -209,7 +228,7 @@ Rules are evaluated in order and combined; later matching rules override earlier
 | Method | Returns | Description |
 |--------|---------|-------------|
 | `addColumn(def, index?)` | `ColumnDefinition` | Add column at position (default: end) |
-| `deleteColumn(key)` | `void` | Remove column + cleanup filters/sort/widths |
+| `deleteColumn(key)` | `void` | Remove column + cleanup filters/sort/widths. Row objects keep that key's values (undo restores the column with them); delete the key from `data` yourself if you need it gone |
 | `moveColumn(key, newIndex)` | `void` | Reorder column to target index (clamped) |
 | `getColumnWidth(key)` | `number \| undefined` | Get internal resize width for column |
 | `selectColumn(colIndex)` | `void` | Select entire column (range selection) |
@@ -257,7 +276,7 @@ All events use `CustomEvent` with `bubbles: true, composed: true`.
 | `cell-edit-start` | `{ row, col, key, value }` | Cell editing started |
 | `cell-edit-commit` | `{ row, col, key, oldValue, newValue }` | Cell value committed |
 | `cell-edit-cancel` | `{ row, col }` | Cell edit cancelled (Escape) |
-| `validation-error` | `{ row, col, key, value, error }` | Cell validator rejected value |
+| `validation-error` | `{ row, col, key, value, error }` | Cell validator rejected value, or a `number` cell got text that is not a number |
 
 ### Data Events
 
@@ -471,10 +490,13 @@ conformance claim for the success criteria it does not list.
 | SC 2.5.8 Target Size (Minimum) | Sortable headers, column menu buttons, the open column menu, the open filter dropdown (text and number), the find/replace bar, the cell context menu and row selection checkboxes are at least 24×24 CSS px or meet the spacing exception (24px between centers, counting the neighbouring resize handles), and are actually hit at that position. Two small targets use the equivalent-control exception: the 6px column resize handle (every resize is also in the column menu) and the hidden-column marker (its column menu offers **Show: …**) | `tests/browser/target-size.browser.test.ts` (real Chromium) |
 | SC 2.1.1 Keyboard (pointer-cursor check) | Nothing the grid renders shows a pointer cursor without being an interactive element. Sorting by header click also has a keyboard path — the column menu's **Sort ascending** / **Sort descending** (the check alone cannot see that, because the header cell wraps the menu button) | `tests/browser/target-size.browser.test.ts` · `src/flex-table.test.ts` |
 | SC 2.5.7 Dragging Movements | Resizing never requires a drag — the column menu's **Auto-fit width**, **Wider** and **Narrower** are single clicks | `tests/browser/column-menu.browser.test.ts` |
+| SC 1.3.1 Info and Relationships (virtualized grid) | Only the visible rows and columns are in the DOM, so every row carries `aria-rowindex` and every cell `aria-colindex` (1-based, in display order), and the grid's `aria-rowcount` / `aria-colcount` give the full size — the header row is row 1, data rows start at 2, and the footer row (if any) is last. A screen reader announces "row 621 of 10001" after scrolling instead of counting the rows that happen to be rendered. The footer row's cells are grid cells | `tests/browser/aria-grid-index.browser.test.ts` |
 
 Not yet measured: the boolean and date filter dropdowns and the comment popup. Color contrast comes
 from the `@iyulab/components` tokens this package reads.
 
+For **KWCAG 2.2** (the Korean web accessibility standard), the `@iyulab/components` README has a table of all 33 check items — which are guaranteed by a test across the sibling packages, which are shared with the app, and which do not apply: [KWCAG 2.2 대응표](https://github.com/iyulab/node-components#kwcag-22-대응표).
+
 ## Usage Guide
 
 ### React

package/dist/clipboard/clipboard.d.ts

@@ -6,3 +6,8 @@ import type { ColumnDefinition, DataRow } from '../models/types.js';
  */
 export declare function copyToClipboard(data: DataRow[], columns: ColumnDefinition[], range: CellRange): string;
 export declare function parseValueForColumn(raw: string, col: ColumnDefinition): unknown;
+/**
+ * A number as a person edits it: the active locale's decimal separator, no grouping, every digit
+ * kept (`1234.5` → `1234,5` on a German page). The inverse is {@link parseValueForColumn}.
+ */
+export declare function editableNumber(value: number): string;