jsl-ui 10.0.4 → 10.0.6

package/docs/GridComponent.md

@@ -1,19 +1,36 @@
 # GridComponent
 
+`GridComponent<T>` wraps the grid for use in a JSL render tree. It accepts an array or promise of rows, column definitions, grid options, and an optional height.
+
 ```ts
 import { GridComponent, NumericFormatter } from "jsl-ui";
 
-const grid = new GridComponent(
-  [{ id: 1, amount: 1250.5 }],
-  [{ id: "amount", name: "Amount", width: 140,
-     formatter: NumericFormatter, headerCssClass: "right" }],
-  { primaryKey: "id" }, "300px"
+interface Request { Id: number; Name: string; Amount: number; }
+
+const grid = new GridComponent<Request>(
+  [{ Id: 1, Name: "Office supplies", Amount: 1250.5 }],
+  [
+    { id: "Name", field: "Name", name: "Request", width: 180, sortable: true },
+    { id: "Amount", field: "Amount", name: "Amount", width: 140,
+      sortable: true, formatter: NumericFormatter, headerCssClass: "right" }
+  ],
+  { primaryKey: "Id", showHeaderMenu: true, saveColumnsKey: "requests-grid" },
+  "360px"
 );
-grid.initEvents(g => { /* subscribe to grid events here */ });
 ```
 
-- Use unique, stable primary keys. Mount before awaiting `getRef()`; register initialization callbacks with `initEvents()`.
-- Keep component instances stable across parent renders so unrelated UI updates do not recreate the grid.
-- Preserve `content-box` on cells and headers. Selection/formatter classes must not change padding or border widths.
-- NumericFormatter aligns cells; header alignment is explicit via `headerCssClass: "right"` or `"center"`.
-- Register dependent calculations with `addFormula()`, then call `triggerAllFormulas()` for initial values. See [the showcase](../examples/showcase/grids.ts) for formulas, totals, frozen columns, and row ordering.
+## Patterns and features
+
+- **Identity and lifecycle:** Use a unique, stable `primaryKey` and keep the component instance stable across parent renders. Register setup and event handlers with `initEvents()`; `getRef()` resolves after the grid mounts. A stable `saveColumnsKey` preserves column settings.
+- **Columns and editing:** Set formatters, editors, widths, `sortable`, and `filterable` per column. Enable `editable` in grid options to edit cells; the demos show text, number, date, time, boolean, lookup, and custom editors. Use grid events such as `onBeforeEditCell` and `onAfterEdit` for application rules.
+- **Derived and grouped data:** Use `addFormula(field, calculate, dependencies)` for calculated values, then `triggerAllFormulas()` for initial values. The grid's DataView supports filters, grouping, expand/collapse, and aggregators for group summaries.
+- **Sorting and layout:** `multiColumnSort` and `numberedMultiColumnSort` support prioritized sorts. `frozenColumn`, `rowHeight`/`autoHeight`, `showColumnGroups` with each column's `columnGroup`, and footer rows cover wide or structured grids.
+- **Interaction and rendering:** Examples include row and cell selection, manual row reordering (`allowRowMove`), custom cell formatters, rendered JSL components, asynchronous cell rendering, variable row heights, column spans, and undo/redo. Disable sorting when manual row order should remain authoritative.
+- **Styling:** `NumericFormatter` aligns cell values; set `headerCssClass: "right"` or `"center"` explicitly to align headers. Keep `content-box` sizing on cells and headers so padding and borders do not disrupt grid measurements.
+
+## Examples
+
+- [GridComponent showcase](../examples/showcase/grids.ts): sorting, editing, formatters, grouping, frozen columns, formulas, totals, and row reordering.
+- [Focused grid demos](../examples/grid/g-01-basic.html): [large-data grouping and filters](../examples/grid/g-02-grouping.html), [custom formatters and editors](../examples/grid/g-03-customformatter-forcefit.html), [JSL cell components](../examples/grid/g-06-cellcomponents.html), [async rendering](../examples/grid/g-07-asyncrender.html), [selection](../examples/grid/g-10-selection.html), [column spans](../examples/grid/g-11-colspan.html), [undo/redo](../examples/grid/g-12-undo-redo.html), [filter row](../examples/grid/g-13-filterrow.html), and [row reordering](../examples/grid/g-14-reorder.html).
+
+The focused demos mostly use `createJSLGrid` directly and show the underlying grid APIs; use the showcase for `GridComponent` patterns.

package/examples/showcase/grids.ts

@@ -104,7 +104,7 @@ const editorSampleColumns: ISlickColumn[] = [
 const editorCatalog = new GridComponent(editorSamples, editorSampleColumns, {
     primaryKey: "id", editable: true, autoEdit: false, rowHeight: 38
 }, "340px");
-const editorCatalogStatus: IJSLVNode = { tag: "p", content: "Double-click a cell or press F2 to edit. Enter commits; Escape cancels.", attr: { role: "status", class: "sample-status" } };
+const editorCatalogStatus: IJSLVNode = { tag: "p", content: "Double-click a cell to edit. Enter commits; Escape cancels.", attr: { role: "status", class: "sample-status" } };
 editorCatalog.initEvents(grid => grid.onAfterEdit.subscribe((_event, args) => {
     editorCatalogStatus.content = "Updated " + args.column.name + " for sample " + args.item.id + ".";
     JSLRender.lastCreatedRenderer?.refresh();
@@ -192,7 +192,7 @@ export const gridShowcase: IJSLVNode = {
         ] },
         { tag: "div", attr: { class: "grid-samples" }, children: [
             card("grid-basic", "Browse and sort", "30 projects. Click a heading to sort, then Shift-click other headings to add sort levels. Numbers show sorting priority. Select rows and resize or reorder columns.", basic),
-            card("grid-editable", "Edit in place", "Double-click an editable cell or press F2. Enter commits and Escape cancels. Editors retain their existing behavior and styling in this step.", editable, [edits]),
+            card("grid-editable", "Edit in place", "Double-click an editable cell. Enter commits and Escape cancels. Editors retain their existing behavior and styling in this step.", editable, [edits]),
             card("grid-editors-formatters", "Formatters and editors", "Try text, multiline, numeric, date, time, boolean, lookup, multi-lookup, and autosuggest editors. The adjacent columns demonstrate the matching display formatters; TimeFormatter displays a Date value, while TimeEditor edits a time string.", editorCatalog, [editorCatalogStatus]),
             card("grid-grouped", "Grouped projects", "45 projects grouped by team. Expand and collapse groups independently.", grouped, [
                 { tag: "div", attr: { class: "sample-row" }, children: [
@@ -213,4 +213,4 @@ export const gridShowcase: IJSLVNode = {
             text("p", "These examples use the existing GridComponent constructor, column definitions, editors, and DataView APIs. The default row height is 40 px; rowHeight can retain a different density. Column headers fit up to two lines. Core presentation follows the shared theme and inherits the host's typography. Filter dialogs, menus, and lifecycle behavior are reserved for later steps.")
         ] }
     ]
-};
+};

package/lib/components/select/SelectStyle.scss

@@ -7,7 +7,7 @@
     width: 14rem;
     max-width: 100%;
     min-width: 0;
-    min-height: 2.5rem;
+    min-height: 2.2rem;
     vertical-align: middle;
     color: var(--jsl-color-text);
     font: inherit;

package/lib/components/tabs/TabsStyle.scss

@@ -54,7 +54,7 @@
         justify-content: center;
         gap: 0.5rem;
         box-sizing: border-box;
-        min-height: 2.5rem;
+        min-height: 2.4rem;
         min-width: 0;
         padding: 0.625rem 0.875rem;
         margin: 0;