@lowdefy/blocks-aggrid 5.5.1 → 6.0.0

package/dist/metas.js

@@ -17,4 +17,6 @@ export { default as AgGridBalham } from './blocks/AgGridBalham/meta.js';
 export { default as AgGridInputAlpine } from './blocks/AgGridInputAlpine/meta.js';
 export { default as AgGridInputBalham } from './blocks/AgGridInputBalham/meta.js';
 export { default as AgGridInputMaterial } from './blocks/AgGridInputMaterial/meta.js';
+export { default as AgGridLowdefy } from './blocks/AgGridLowdefy/meta.js';
+export { default as AgGridLowdefyInput } from './blocks/AgGridLowdefyInput/meta.js';
 export { default as AgGridMaterial } from './blocks/AgGridMaterial/meta.js';

package/dist/processColDefs.js

@@ -16,7 +16,7 @@
 import { type } from '@lowdefy/helpers';
 import { getCellRenderer } from './cellRenderers/index.js';
 import createEllipsisCell from './cellRenderers/EllipsisCell.js';
-function applyEllipsis(colDef, ellipsis) {
+function applyEllipsis(colDef, ellipsis, makeEllipsisRenderer) {
     if (!type.isInt(ellipsis) || ellipsis < 1) return colDef;
     const clampClass = `lf-ellipsis-${Math.min(ellipsis, 6)}`;
     const existingClass = colDef.cellClass;
@@ -34,7 +34,7 @@ function applyEllipsis(colDef, ellipsis) {
     // ag-grid's internal cell wrappers. Skip if a cellRenderer is already set
     // (user or built-in cell.type takes precedence and can opt in via CSS).
     if (!colDef.cellRenderer) {
-        next.cellRenderer = createEllipsisCell(ellipsis);
+        next.cellRenderer = makeEllipsisRenderer();
     }
     return next;
 }
@@ -66,41 +66,76 @@ function applyAlignment(colDef, cell) {
         headerClass
     };
 }
-function buildCellRenderer({ cell, methods, components }) {
-    const Renderer = getCellRenderer(cell?.type);
-    if (!Renderer) return undefined;
-    // ag-grid calls the renderer as a React function component when returned directly.
-    return function CellRendererAdapter(params) {
-        return Renderer({
-            ...params,
-            cellConfig: cell,
-            methods,
-            components
-        });
-    };
+// A cellRenderer is a React element type, so a new function is a different
+// component: CellCtrl.refreshCellRenderer bails when `cellRendererClass !==
+// componentClass`, and the React cell comp re-keys. Building the renderers fresh on
+// every render therefore unmounted every cell whenever anything re-rendered the
+// block, destroying whatever a cell was holding — an open popup, a focused input, a
+// half-typed value in the selector / textInput / paragraphInput cells.
+//
+// So the adapter installed on the colDef is created once per column and kept, and
+// the closure it calls is replaced in place. ag-grid keeps the cell; the cell
+// renders the current config.
+function stableRenderer(entry, slot, render) {
+    let stable = entry[slot];
+    if (!stable) {
+        const box = {
+            render
+        };
+        // ag-grid calls the renderer as a React function component when returned directly.
+        function CellRendererAdapter(params) {
+            return box.render(params);
+        }
+        stable = {
+            box,
+            Adapter: CellRendererAdapter
+        };
+        entry[slot] = stable;
+    }
+    stable.box.render = render;
+    return stable.Adapter;
+}
+// Keyed by colId or field so an adapter survives a column reorder, falling back to
+// position for columns that declare neither. A key already taken in this pass gets a
+// suffix, so two columns sharing a field do not share an adapter.
+function colKey(col, index, prefix, seen) {
+    const id = type.isString(col.colId) ? col.colId : type.isString(col.field) ? col.field : `${index}`;
+    const base = `${prefix}${id}`;
+    let key = base;
+    let n = 1;
+    while(seen.has(key)){
+        key = `${base}#${n}`;
+        n += 1;
+    }
+    seen.add(key);
+    return key;
 }
-function recProcessColDefs(columnDefs, methods, components) {
-    return columnDefs.map((col)=>{
+function recProcessColDefs(columnDefs, methods, components, cache, seen, prefix) {
+    return columnDefs.map((col, index)=>{
+        const key = colKey(col, index, prefix, seen);
+        const entry = cache.get(key) ?? {};
+        cache.set(key, entry);
         const newColDef = {};
         if (type.isArray(col.children)) {
-            newColDef.children = recProcessColDefs(col.children, methods, components);
+            newColDef.children = recProcessColDefs(col.children, methods, components, cache, seen, `${key}/`);
         }
         if (type.isObject(col.cell) && type.isString(col.cell.type)) {
-            const renderer = buildCellRenderer({
-                cell: col.cell,
-                methods,
-                components
-            });
-            if (renderer) {
-                newColDef.cellRenderer = renderer;
+            const Renderer = getCellRenderer(col.cell.type);
+            if (Renderer) {
+                const cell = col.cell;
+                newColDef.cellRenderer = stableRenderer(entry, 'cell', (params)=>Renderer({
+                        ...params,
+                        cellConfig: cell,
+                        methods,
+                        components
+                    }));
             }
         } else if (type.isFunction(col.cellRenderer)) {
-            newColDef.cellRenderer = (params)=>{
-                return renderHtml({
-                    html: col.cellRenderer(params),
+            const cellRenderer = col.cellRenderer;
+            newColDef.cellRenderer = stableRenderer(entry, 'cell', (params)=>renderHtml({
+                    html: cellRenderer(params),
                     methods
-                });
-            };
+                }));
         }
         const merged = {
             ...col,
@@ -110,10 +145,18 @@ function recProcessColDefs(columnDefs, methods, components) {
         delete merged.cell;
         delete merged.ellipsis;
         const aligned = applyAlignment(merged, col.cell);
-        return applyEllipsis(aligned, col.ellipsis);
+        return applyEllipsis(aligned, col.ellipsis, ()=>stableRenderer(entry, 'ellipsis', createEllipsisCell(col.ellipsis)));
     });
 }
-function processColDefs(columnDefs = [], methods, components) {
-    return recProcessColDefs(columnDefs, methods, components);
+function processColDefs(columnDefs = [], methods, components, cache = new Map()) {
+    const seen = new Set();
+    const processed = recProcessColDefs(columnDefs, methods, components, cache, seen, '');
+    // Drop columns that are no longer defined, so a grid whose columns come and go does
+    // not accumulate adapters. A column that returns gets a fresh one, which is correct
+    // — its cells were unmounted with it.
+    for (const key of cache.keys()){
+        if (!seen.has(key)) cache.delete(key);
+    }
+    return processed;
 }
 export default processColDefs;

package/dist/theme/themeLowdefy.js

@@ -0,0 +1,165 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { useMemo } from 'react';
+import { themeAlpine, themeBalham, themeMaterial, themeQuartz } from 'ag-grid-community';
+import { type } from '@lowdefy/helpers';
+// Mirrors antd Table's small / middle / default densities. spacing, rowHeight and headerHeight feed
+// the theme size variants; avatarSize and avatarFontSize feed the wrapper's inline CSS custom
+// properties. One table serves both consumers.
+const SIZES = {
+    small: {
+        spacing: 4,
+        rowHeight: 36,
+        headerHeight: 36,
+        avatarSize: 20,
+        avatarFontSize: 10
+    },
+    middle: {
+        spacing: 6,
+        rowHeight: 44,
+        headerHeight: 44,
+        avatarSize: 24,
+        avatarFontSize: 12
+    },
+    large: {
+        spacing: 8,
+        rowHeight: 54,
+        headerHeight: 54,
+        avatarSize: 28,
+        avatarFontSize: 14
+    }
+};
+// Every colour is a var(--ant-*) reference rather than a resolved value, so antd's cssVar mode
+// regenerates the grid's colours on each theme or dark-mode change with no JS.
+//
+// Four of these tokens carry a fallback chain even though antd's cssVar mode emits its whole alias
+// token set on `.lowdefy` regardless of which components a page renders — so in practice the primary
+// --ant-* reference always resolves and the fallback never fires. The chains are defensive, not
+// load-bearing: they guard against an antd alias no longer being emitted. That defensiveness is not
+// free — tooltipBackgroundColor's and modalOverlayBackgroundColor's fallbacks land on the grid's
+// normal surface colour, which would flatten the tooltip onto the grid and make the loading mask
+// opaque if either ever fired. They stay because removing them is not this fix's call.
+//
+// Applied to all four bases: this is what the antd CSS overlay (src/ag-grid-antd.module.css) imposes
+// on the six original theme blocks today, fontFamily / fontSize / oddRowBackgroundColor included; its
+// --ag-* colour block is superseded by these params once that file's colours are removed.
+const antdParams = {
+    accentColor: 'var(--ant-color-primary)',
+    backgroundColor: 'var(--ant-color-bg-container)',
+    foregroundColor: 'var(--ant-color-text)',
+    borderColor: 'var(--ant-color-border-secondary)',
+    chromeBackgroundColor: 'var(--ant-color-fill-quaternary)',
+    headerBackgroundColor: 'var(--ant-color-fill-quaternary)',
+    headerTextColor: 'var(--ant-color-text)',
+    headerCellHoverBackgroundColor: 'var(--ant-color-fill-tertiary)',
+    oddRowBackgroundColor: 'var(--ant-color-fill-quaternary)',
+    rowHoverColor: 'var(--ant-color-fill-tertiary)',
+    selectedRowBackgroundColor: 'var(--ant-color-primary-bg)',
+    checkboxCheckedBackgroundColor: 'var(--ant-color-primary)',
+    checkboxUncheckedBorderColor: 'var(--ant-color-border)',
+    fontFamily: 'var(--ant-font-family)',
+    fontSize: 'var(--ant-font-size)',
+    menuBackgroundColor: 'var(--ant-color-bg-elevated, var(--ant-color-bg-container))',
+    menuShadow: 'var(--ant-box-shadow-secondary)',
+    popupShadow: 'var(--ant-box-shadow-secondary)',
+    // dropdownShadow and cellEditingShadow both ref cardShadow, whose v33 default is a hardcoded
+    // light-mode literal, so leaving it unset renders wrong in dark mode.
+    cardShadow: 'var(--ant-box-shadow-secondary)',
+    tooltipBackgroundColor: 'var(--ant-color-bg-spotlight, var(--ant-color-bg-container))',
+    // AG Grid's default tooltipTextColor refs textColor, which foregroundColor above sets to antd's
+    // normal (non-inverted) text colour — unreadable against the spotlight surface tooltipBackgroundColor
+    // uses. antd always pairs colorBgSpotlight with colorTextLightSolid, a token that is #fff in both
+    // light and dark mode, so the fallback here is a literal #fff rather than another --ant-* alias:
+    // aliasing to e.g. --ant-color-text would just reintroduce this same inversion.
+    tooltipTextColor: 'var(--ant-color-text-light-solid, #fff)',
+    modalOverlayBackgroundColor: 'var(--ant-color-bg-mask, var(--ant-color-bg-container))',
+    // Not a colour. AG Grid's own dark value lives under a data-ag-theme-mode="dark" attribute Lowdefy
+    // never sets, and this param has no antd token to ride on, so the decision is handed to the
+    // document and set as color-scheme on <html> from the app's dark-mode state.
+    browserColorScheme: 'inherit'
+};
+// Lowdefy blocks only — the four structural choices the antd overlay never made. Applying these to a
+// legacy base would overwrite the params that base sets to define itself (Balham's borderRadius: 2 and
+// headerFontWeight: 'bold', Material's borderRadius: 0) and, because a param set in the default mode
+// is deleted from every non-default mode, erase that base's light/dark variants for those names too.
+const lowdefyParams = {
+    headerFontWeight: 600,
+    borderRadius: 'var(--ant-border-radius)',
+    wrapperBorderRadius: 'var(--ant-border-radius-lg, var(--ant-border-radius, 8px))',
+    oddRowBackgroundColor: 'transparent'
+};
+const base = themeQuartz.withParams({
+    ...antdParams,
+    ...lowdefyParams
+});
+// Sizes differ only in spacing and heights, matching antd, where size changes padding rather than
+// the type scale. Built once at module scope so switching size only swaps which object is passed.
+const themes = Object.fromEntries(Object.entries(SIZES).map(([size, { spacing, rowHeight, headerHeight }])=>[
+        size,
+        base.withParams({
+            spacing,
+            rowHeight,
+            headerHeight
+        })
+    ]));
+// Bounded by the number of distinct bad values in the app's config, not by render count.
+const warned = new Set();
+// Object.hasOwn rather than `in`: `in` walks the prototype chain, so size: 'toString' would resolve
+// themes['toString'] to a function and AG Grid would be handed a function as its theme.
+//
+// size is normalised to a string before the hasOwn check, the warned Set and the message: a
+// non-primitive size (e.g. an object or array from a config mistake) is a fresh reference every
+// render, so keying on the raw value would warn once per render instead of once per distinct value.
+const resolveSize = (size)=>{
+    if (type.isNone(size)) return 'middle';
+    const key = String(size);
+    if (Object.hasOwn(SIZES, key)) return key;
+    if (!warned.has(key)) {
+        warned.add(key);
+        console.warn(`Lowdefy AG Grid property "size" received "${key}", which is not a valid size. Use one of ${Object.keys(SIZES).join(', ')}. Falling back to "middle".`);
+    }
+    return 'middle';
+};
+const themeForSize = (size)=>themes[resolveSize(size)];
+const sizeConfig = (size)=>SIZES[resolveSize(size)];
+// The six original blocks take antdParams and only antdParams, on AG Grid's prebuilt reproductions of
+// their file themes. Their type scale, radii, header weight and zebra come from the base theme, which
+// is what keeps them recognisably Balham / Alpine / Material.
+const themeBalhamAntd = themeBalham.withParams(antdParams);
+const themeAlpineAntd = themeAlpine.withParams(antdParams);
+// Material's styleMaterial part sets its own primaryColor and refs it for the tab underline, button
+// text, input focus border and cell editing border. antdParams sets accentColor, a different param,
+// so without this those stay Material indigo. primaryColor exists only on Material's param type, so
+// the shared map cannot carry it.
+const themeMaterialAntd = themeMaterial.withParams({
+    ...antdParams,
+    primaryColor: 'var(--ant-color-primary)'
+});
+// Returns the base object untouched when there is nothing to merge, so the module-scope themes stay
+// shared and identity-stable. An empty object counts as absent: {} is what an operator-driven
+// themeParams produces when nothing applies. type.isObject rejects anything that is not a plain
+// object (a string, array, number or boolean from a config mistake) instead of letting
+// Object.keys coerce it — Object.keys('dark') is truthy and would make withParams emit junk
+// --ag-0 / --ag-1 style variables from the string's characters. Keyed on the serialised params
+// rather than object identity because Lowdefy re-evaluates block properties each render, so
+// themeParams is a fresh reference every time.
+const useGridTheme = (baseTheme, themeParams)=>{
+    const key = type.isObject(themeParams) && Object.keys(themeParams).length ? JSON.stringify(themeParams) : null;
+    return useMemo(()=>key ? baseTheme.withParams(JSON.parse(key)) : baseTheme, [
+        baseTheme,
+        key
+    ]);
+};
+export { SIZES, sizeConfig, themeAlpineAntd, themeBalhamAntd, themeForSize, themeMaterialAntd, useGridTheme };

package/dist/useColDefs.js

@@ -0,0 +1,65 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { useEffect, useRef } from 'react';
+import { type } from '@lowdefy/helpers';
+import processColDefs from './processColDefs.js';
+// Fingerprint the authored columnDefs, functions included. JSON.stringify drops
+// function values unless a replacer returns something for them, and a cellRenderer or
+// valueGetter built by an operator is a new function on every evaluation — so identity
+// is the only signal available that one of them changed.
+function fingerprint(columnDefs) {
+    const functions = [];
+    const json = JSON.stringify(columnDefs, (_key, value)=>{
+        if (type.isFunction(value)) {
+            functions.push(value);
+            return `__fn__${functions.length - 1}`;
+        }
+        return value;
+    });
+    return {
+        json,
+        functions
+    };
+}
+function unchanged(previous, next) {
+    if (!previous) return false;
+    if (previous.json !== next.json) return false;
+    if (previous.functions.length !== next.functions.length) return false;
+    return previous.functions.every((fn, index)=>fn === next.functions[index]);
+}
+// Cell renderers keep their identity across renders (see processColDefs), which is
+// what stops ag-grid destroying a cell mid-interaction — but it also means nothing
+// replaces a cell when its column definition changes. ag-grid refreshes body cells on
+// a data change; it does not listen for colDefChanged. So ask it: refreshCells
+// re-renders the mounted cells in place with the new definition. It passes
+// `newData: false`, so React keeps the instances, and with them whatever the cell
+// was holding.
+function useColDefs({ columnDefs, methods, components, gridRef }) {
+    const cache = useRef(new Map());
+    const previous = useRef();
+    const processed = processColDefs(columnDefs, methods, components, cache.current);
+    useEffect(()=>{
+        const next = fingerprint(columnDefs);
+        const first = previous.current === undefined;
+        const same = unchanged(previous.current, next);
+        previous.current = next;
+        if (first || same) return;
+        gridRef.current?.api?.refreshCells({
+            force: true
+        });
+    });
+    return processed;
+}
+export default useColDefs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-aggrid",
-  "version": "5.5.1",
+  "version": "6.0.0",
   "license": "Apache-2.0",
   "description": "AgGrid Blocks for Lowdefy.",
   "homepage": "https://lowdefy.com",
@@ -44,28 +44,25 @@
     "dist/*"
   ],
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "32.3.9",
-    "@ag-grid-community/core": "32.3.9",
-    "@ag-grid-community/csv-export": "32.3.9",
-    "@ag-grid-community/react": "32.3.9",
-    "@ag-grid-community/styles": "32.3.9",
-    "@lowdefy/block-utils": "5.5.1",
-    "@lowdefy/blocks-antd": "5.5.1",
-    "@lowdefy/helpers": "5.5.1"
+    "@lowdefy/block-utils": "6.0.0",
+    "@lowdefy/blocks-antd": "6.0.0",
+    "@lowdefy/helpers": "6.0.0",
+    "ag-grid-community": "33.3.2",
+    "ag-grid-react": "33.3.2"
   },
   "peerDependencies": {
-    "@ant-design/icons": ">=6",
+    "@ant-design/icons": "6.1.0",
     "antd": ">=6",
-    "dayjs": ">=1.11",
+    "dayjs": "1.11.20",
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.5.1",
-    "@lowdefy/e2e-utils": "5.5.1",
-    "@playwright/test": "1.50.1",
-    "@swc/cli": "0.8.0",
-    "@swc/core": "1.15.18",
+    "@lowdefy/block-dev-e2e": "6.0.0",
+    "@lowdefy/e2e-utils": "6.0.0",
+    "@playwright/test": "1.59.1",
+    "@swc/cli": "0.8.1",
+    "@swc/core": "1.15.32",
     "copyfiles": "2.4.1"
   },
   "publishConfig": {
@@ -74,7 +71,7 @@
   "scripts": {
     "build": "swc src --out-dir dist --config-file ../../../../.swcrc --cli-config-file ../../../../.swc-cli.json && pnpm copyfiles",
     "clean": "rm -rf dist",
-    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
+    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.snap\"",
     "e2e": "playwright test --config e2e/playwright.config.js",
     "e2e:ui": "playwright test --config e2e/playwright.config.js --ui"
   }