@iyulab/flex-table 0.34.3 → 0.36.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # Changelog
 
+## [0.36.0] - 2026-09-17
+
+### Added
+
+- **The table's own chrome text now goes through a locale namespace.** The filter menus, the
+  find-and-replace panel, the column menu and the empty-state message were written in English in the
+  source, so an application translated into another language showed thirty-one English strings in
+  the middle of its own UI — "Contains", "Starts with", "Match case", "Replace all" and the rest.
+  `flexTableLocale` is exported for consumers to register further languages or reword the built-in
+  ones:
+
+  ```ts
+  import { flexTableLocale } from '@iyulab/flex-table';
+  flexTableLocale.register('ja', { contains: '含む', startsWith: '前方一致' });
+  ```
+
+  English and Korean ship with the package; other languages are added the same way. The filter
+  operators `AND` and `OR`, and the glyphs standing in for icons, are deliberately left alone —
+  they read the same in every language and translating them makes them harder to recognise.
+
+### Changed
+
+- The package compiles against `ESNext` rather than `ES2021`, matching every sibling package in the
+  same family.
+## [0.35.0] - 2026-09-15
+
+### Changed
+
+- **Every header now has a 24×24 column menu button (`⋮`), which replaces the 14px filter button.**
+  The menu — the same one a header right-click opens — gathers the per-column actions: **Sort
+  ascending** / **Sort descending** (for sortable columns — the keyboard path to sorting), **Filter…**
+  and **Clear filter** (with `show-filters`), **Hide column** / **Show: …**, **Auto-fit width**,
+  **Wider** and **Narrower** (±20px, the menu stays open for repeated steps). Opening a filter is now
+  two clicks. The button is highlighted while its column is filtered, as the filter button was.
+  The old filter button was below the WCAG 2.2 SC 2.5.8 minimum and sat right next to the resize handle;
+  the handle keeps its 6px width and the column menu is its equivalent, which also means resizing
+  no longer requires a drag (SC 2.5.7).
+
+### Fixed
+
+- **Sorting from the cell context menu broke the `sort-change` contract.** It reported
+  `{ sortCriteria }` instead of `{ criteria }`, re-sorted the data locally even with
+  `data-mode="server"`, and ignored `sortable: false`. It now behaves exactly like a header click.
+- **The header and cell context menus could not be used from the keyboard, and could open
+  off-screen.** Their items are now buttons in a `role="menu"`: arrow keys, Home and End move between
+  them, Escape closes and returns focus (to the column menu button, or to the grid). The cell menu
+  focuses its first item when it opens. Both menus are moved back inside the visible area once their
+  real size is known — the cell menu previously flipped on a guessed 200×280 size, and a menu fitted
+  to the window width could still sit under the vertical scrollbar.
+
 ## [0.34.3] - 2026-09-13
 
 ### Fixed

package/README.md

@@ -52,7 +52,8 @@ npm install @iyulab/flex-table
 - **Row Selection** — Checkbox-based row selection (`selectable`, single/multi mode)
 - **Clipboard** — Ctrl+C/X/V with TSV format (Excel/Google Sheets compatible, RFC 4180)
 - **Sorting** — Click header to sort (asc/desc/none), Shift+click for multi-sort
-- **Column Resize** — Drag header border, double-click to auto-fit, Alt+Arrow keyboard resize
+- **Column Menu** — A 24×24 button in every header opens the column's menu: sort, filter, hide/show, auto-fit, wider/narrower (also opens on header right-click)
+- **Column Resize** — Drag header border, double-click to auto-fit, Alt+Arrow keyboard resize, or the column menu
 - **Column Operations** — `addColumn()`, `deleteColumn()`, `moveColumn()` with undo
 - **Pinned Columns** — Freeze columns to left or right (`pinned: 'left' | 'right'`)
 - **Filtering** — Programmatic API + built-in header filter UI (`show-filters`)
@@ -103,7 +104,7 @@ guarantee about a *constrained* host. `height-model.browser.test.ts` pins both s
 | `showRowNumbers` | `show-row-numbers` | `boolean` | `false` | Show row number column |
 | `theme` | `theme` | `'light' \| 'dark'` | auto | Force theme; auto-detects `prefers-color-scheme` |
 | `editable` | `editable` | `boolean` | `true` | Global read-only mode when `false`. Defaults to `true` — a purely read-only grid should set this explicitly rather than relying on per-column `editable: false` alone, since it's also what makes Enter fire `row-activate` (see [Events](#events)) instead of entering edit mode |
-| `showFilters` | `show-filters` | `boolean` | `false` | Show built-in header filter dropdowns |
+| `showFilters` | `show-filters` | `boolean` | `false` | Offer the built-in filter dropdowns through each column menu («Filter…») |
 | `maxRows` | `max-rows` | `number` | `0` | Max row count (0 = unlimited); blocks `addRow()` and paste expansion |
 | `maxUndoSize` | `max-undo-size` | `number` | `100` | Max undo history stack size |
 | `selectable` | `selectable` | `boolean` | `false` | Enable row-level checkbox selection |
@@ -404,6 +405,63 @@ package dependency; CSS custom properties are resolved at render time, not impor
 | Ctrl+Shift+Z / Ctrl+Y | Redo |
 | Alt+ArrowLeft / Alt+ArrowRight | Resize current column (±20px) |
 | Ctrl+Click header | Select entire column |
+| Enter / Space on a column menu button | Open the column menu |
+| ArrowUp / ArrowDown / Home / End (column menu) | Move between menu items |
+| Escape (column menu) | Close the menu and return focus to its button |
+
+## Localization
+
+The text the table draws itself — filter menus, the find-and-replace panel, the column menu, the
+empty-state message — resolves through a locale namespace. English and Korean ship with the package
+and follow whatever locale `@iyulab/components` has active:
+
+```ts
+import { Locale } from '@iyulab/components';
+
+Locale.set('ko');   // the table's own chrome follows
+```
+
+Register another language, or reword the built-in strings, through the exported namespace. Partial
+tables are merged, so you only pass the keys you want to change:
+
+```ts
+import { flexTableLocale, type FlexTableMessageKey } from '@iyulab/flex-table';
+
+flexTableLocale.register('ja', {
+  contains: '含む',
+  startsWith: '前方一致',
+  matchCase: '大文字と小文字を区別',
+});
+
+flexTableLocale.register('en', { replaceAll: 'Replace everything' });  // reword one string
+```
+
+Keys cover the column header and menu (`showHiddenColumns`, `columnMenu`, `cellActions`,
+`noColumnsDefined`), cell comments (`addCommentPlaceholder`, `cancel`, `save`), the filter panel
+(`clear`, `blankCells`, `emptyOnly`, `nonEmptyOnly`, `blankAll`, `all`, `contains`, `startsWith`,
+`endsWith`, `wildcard`, `searchPlaceholder`, `valuePlaceholder`, `fromPlaceholder`,
+`toPlaceholder`) and find-and-replace (`findPlaceholder`, `findPrevious`, `findNext`, `matchCase`,
+`wholeCell`, `closeFind`, `replaceWithPlaceholder`, `replace`, `replaceAll`). `FlexTableMessageKey`
+is exported, so a missing or misspelled key is a type error rather than a string that silently falls
+back to its own name.
+
+The filter operators `AND` and `OR` are not in the table, and neither are the glyphs that stand in
+for icons. They read the same in every language, and translating them makes them harder to
+recognise rather than easier.
+
+## Accessibility
+
+The baseline is **WCAG 2.2**. The table lists what this package **measures in tests** — it is not a
+conformance claim for the success criteria it does not list.
+
+| Success criterion | Guarantee | Measured by |
+|---|---|---|
+| 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` |
+
+Not yet measured: the boolean and date filter dropdowns and the comment popup. Color contrast comes
+from the `@iyulab/components` tokens this package reads.
 
 ## Usage Guide
 
@@ -569,7 +627,9 @@ Use `updateRows()` for programmatic edits — it provides undo/redo and dispatch
 
 ### Built-in Filter UI
 
-Enable with `show-filters` attribute. Filter dropdowns appear in column headers:
+Enable with `show-filters` attribute. Each column menu (the `⋮` button in the header) then offers **Filter…**,
+which opens that column's filter dropdown, and **Clear filter** while the column is filtered. The menu
+button is highlighted while its column has an active filter.
 
 - **text**: case-insensitive substring search
 - **number**: min/max range inputs