@lowdefy/blocks-aggrid 5.5.1 → 6.0.0

package/dist/blocks/AgGridMaterial/tests/AgGridMaterial.e2e.yaml

@@ -0,0 +1,310 @@
+# 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.
+
+id: aggridmaterial
+type: Box
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: aggridmaterial_basic
+    type: AgGridMaterial
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+      rowData:
+        - name: Alice
+          age: 25
+        - name: Bob
+          age: 30
+        - name: Charlie
+          age: 35
+
+  # ============================================
+  # PROPERTY TESTS
+  # ============================================
+
+  - id: aggridmaterial_height
+    type: AgGridMaterial
+    properties:
+      height: 300
+      columnDefs:
+        - headerName: Name
+          field: name
+      rowData:
+        - name: Alice
+        - name: Bob
+
+  - id: aggridmaterial_default_col_def
+    type: AgGridMaterial
+    properties:
+      defaultColDef:
+        sortable: true
+        resizable: true
+        filter: true
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+      rowData:
+        - name: Alice
+          age: 25
+        - name: Bob
+          age: 30
+
+  - id: aggridmaterial_empty
+    type: AgGridMaterial
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+      rowData: []
+
+  # ============================================
+  # EVENT TESTS
+  # ============================================
+
+  - id: aggridmaterial_onrowclick
+    type: AgGridMaterial
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+      rowData:
+        - name: Alice
+          age: 25
+        - name: Bob
+          age: 30
+    events:
+      onRowClick:
+        - id: set_row_click
+          type: SetState
+          params:
+            aggridmaterial_row_clicked:
+              _event: row.name
+
+  - id: aggridmaterial_row_click_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridmaterial_row_clicked
+              - null
+          then:
+            _string.concat:
+              - 'Row: '
+              - _state: aggridmaterial_row_clicked
+          else: ''
+
+  - id: aggridmaterial_oncellclick
+    type: AgGridMaterial
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+      rowData:
+        - name: Alice
+          age: 25
+        - name: Bob
+          age: 30
+    events:
+      onCellClick:
+        - id: set_cell_click
+          type: SetState
+          params:
+            aggridmaterial_cell_clicked:
+              _event: cell.value
+
+  - id: aggridmaterial_cell_click_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridmaterial_cell_clicked
+              - null
+          then:
+            _string.concat:
+              - 'Cell: '
+              - _state: aggridmaterial_cell_clicked
+          else: ''
+
+  - id: aggridmaterial_onrowselected
+    type: AgGridMaterial
+    properties:
+      rowSelection:
+        mode: singleRow
+        checkboxes: false
+        enableClickSelection: true
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+      rowData:
+        - name: Alice
+          age: 25
+        - name: Bob
+          age: 30
+    events:
+      onRowSelected:
+        - id: set_row_selected
+          type: SetState
+          params:
+            aggridmaterial_row_selected:
+              _event: row.name
+
+  - id: aggridmaterial_row_selected_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridmaterial_row_selected
+              - null
+          then:
+            _string.concat:
+              - 'Selected: '
+              - _state: aggridmaterial_row_selected
+          else: ''
+
+  # ============================================
+  # SORTING & FILTERING
+  # ============================================
+
+  - id: aggridmaterial_sortable
+    type: AgGridMaterial
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+          sortable: true
+        - headerName: Age
+          field: age
+          sortable: true
+      rowData:
+        - name: Charlie
+          age: 35
+        - name: Alice
+          age: 25
+        - name: Bob
+          age: 30
+    events:
+      onSortChanged:
+        - id: set_sort_changed
+          type: SetState
+          params:
+            aggridmaterial_sort_changed: true
+
+  - id: aggridmaterial_sort_changed_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: aggridmaterial_sort_changed
+              - true
+          then: Sort changed
+          else: ''
+
+  - id: aggridmaterial_filterable
+    type: AgGridMaterial
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+          filter: true
+        - headerName: Age
+          field: age
+          filter: true
+      rowData:
+        - name: Alice
+          age: 25
+        - name: Bob
+          age: 30
+        - name: Charlie
+          age: 35
+    events:
+      onFilterChanged:
+        - id: set_filter_changed
+          type: SetState
+          params:
+            aggridmaterial_filter_changed: true
+
+  - id: aggridmaterial_filter_changed_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: aggridmaterial_filter_changed
+              - true
+          then: Filter changed
+          else: ''
+
+  # ============================================
+  # BUILT-IN CELL RENDERERS — cross-theme smoke
+  # ============================================
+
+  - id: aggridmaterial_cell_types
+    type: AgGridMaterial
+    properties:
+      columnDefs:
+        - headerName: Status
+          field: status
+          cell:
+            type: tag
+            colorMap:
+              Active: green
+              Blocked: red
+        - headerName: Assignee
+          field: name
+          cell:
+            type: avatar
+            nameField: name
+            idField: id
+        - headerName: Revenue
+          field: revenue
+          cell:
+            type: number
+            format: currency
+            currency: USD
+            decimals: 0
+      rowData:
+        - id: u1
+          status: Active
+          name: Alice Johnson
+          revenue: 12500
+        - id: u2
+          status: Blocked
+          name: Bob Smith
+          revenue: -4200

package/dist/blocks.js

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

package/dist/cellRenderers/MenuCell.js

@@ -0,0 +1,110 @@
+/*
+  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 React from 'react';
+import { Button, Dropdown } from 'antd';
+import { type } from '@lowdefy/helpers';
+import { renderHtml } from '@lowdefy/block-utils';
+import NullCell from './NullCell.js';
+import { resolvePath } from './resolveFieldRefs.js';
+function resolveField(literalKey, fieldKey, item, data) {
+    if (type.isString(item?.[fieldKey])) return resolvePath(item[fieldKey], data);
+    return item?.[literalKey];
+}
+function MenuCell(params) {
+    const { value, data, cellConfig, methods, components } = params;
+    const Icon = components?.Icon;
+    const items = type.isArray(cellConfig?.items) ? cellConfig.items : [];
+    // Resolve every item against the row before antd sees it, and drop hidden items
+    // rather than disabling them — so a row whose every item is hidden renders no
+    // trigger at all, instead of a button that opens an empty menu.
+    const resolved = items.map((item, idx)=>{
+        if (!type.isObject(item) || !type.isString(item.eventName)) return null;
+        if (resolveField('hidden', 'hiddenField', item, data) === true) return null;
+        return {
+            idx,
+            item,
+            title: resolveField('title', 'titleField', item, data),
+            iconConfig: resolveField('icon', 'iconField', item, data),
+            disabled: resolveField('disabled', 'disabledField', item, data) === true
+        };
+    }).filter(Boolean);
+    if (resolved.length === 0) return /*#__PURE__*/ React.createElement(NullCell, null);
+    const menuItems = resolved.map(({ idx, item, title, iconConfig, disabled })=>({
+            // Keyed by the item's index in the AUTHORED array, not by its position in the
+            // resolved one, so onClick can find it back after hidden items have shifted
+            // everything.
+            key: String(idx),
+            label: type.isNone(title) ? undefined : renderHtml({
+                html: String(title),
+                methods
+            }),
+            icon: iconConfig && Icon ? /*#__PURE__*/ React.createElement(Icon, {
+                blockId: `menucell_${idx}_icon`,
+                events: {},
+                properties: iconConfig
+            }) : undefined,
+            disabled,
+            danger: item.danger === true
+        }));
+    function onClick({ key, domEvent }) {
+        domEvent?.stopPropagation?.();
+        const entry = resolved.find((r)=>String(r.idx) === key);
+        if (!entry) return;
+        methods?.triggerEvent?.({
+            name: entry.item.eventName,
+            event: {
+                row: data,
+                value,
+                item: {
+                    eventName: entry.item.eventName,
+                    title: entry.title
+                },
+                itemIndex: entry.idx
+            }
+        });
+    }
+    // The trigger is icon-only: a row menu is an affordance, not a labelled action.
+    const triggerIcon = Icon ? /*#__PURE__*/ React.createElement(Icon, {
+        blockId: "menucell_trigger_icon",
+        events: {},
+        properties: cellConfig.icon ?? 'AiOutlineMore'
+    }) : undefined;
+    return(// stopPropagation lives on a wrapper, not on the Button: antd's Dropdown clones its
+    // child to attach the trigger handler, so an onClick of ours on the Button is the
+    // one that gets shadowed. It keeps a stray click from bubbling within React;
+    // ag-grid uses native listeners, so a grid that also wires onCellClick /
+    // onRowClick may still see the click — the same as the buttons cell.
+    /*#__PURE__*/ React.createElement("div", {
+        onClick: (e)=>e.stopPropagation()
+    }, /*#__PURE__*/ React.createElement(Dropdown, {
+        menu: {
+            items: menuItems,
+            onClick
+        },
+        trigger: [
+            'click'
+        ],
+        placement: cellConfig.placement ?? 'bottomRight',
+        // Render the menu to the body so it is not clipped by the cell, which hides
+        // its overflow — the same reason SelectorCell does it.
+        getPopupContainer: ()=>document.body
+    }, /*#__PURE__*/ React.createElement(Button, {
+        size: "small",
+        type: "text",
+        shape: "square",
+        icon: triggerIcon
+    }))));
+}
+export default MenuCell;

package/dist/cellRenderers/index.js

@@ -20,6 +20,7 @@ import BooleanCell from './BooleanCell.js';
 import ProgressCell from './ProgressCell.js';
 import NumberCell from './NumberCell.js';
 import ButtonsCell from './ButtonsCell.js';
+import MenuCell from './MenuCell.js';
 import SelectorCell from './SelectorCell.js';
 import SwitchCell from './SwitchCell.js';
 import TextInputCell from './TextInputCell.js';
@@ -33,6 +34,7 @@ const CELL_RENDERERS = {
     progress: ProgressCell,
     number: NumberCell,
     buttons: ButtonsCell,
+    menu: MenuCell,
     selector: SelectorCell,
     multipleSelector: SelectorCell,
     switch: SwitchCell,

package/dist/createAgGridDisplayHelper.js

@@ -14,7 +14,7 @@
   limitations under the License.
 */ import { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
 import { expect } from '@playwright/test';
-function createAgGridDisplayHelper(theme) {
+function createAgGridDisplayHelper() {
     const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)} .ag-root-wrapper`);
     return createBlockHelper({
         locator,
@@ -26,7 +26,6 @@ function createAgGridDisplayHelper(theme) {
             rowCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ag-row')).toHaveCount(count),
             headerCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ag-header-cell-text')).toHaveCount(count),
             cellText: (page, blockId, rowIndex, colIndex, text)=>expect(locator(page, blockId).locator(`.ag-row[row-index="${rowIndex}"] .ag-cell`).nth(colIndex)).toHaveText(text),
-            themeClass: (page, blockId)=>expect(page.locator(`#${escapeId(blockId)}`)).toHaveClass(new RegExp(`ag-theme-${theme}`)),
             emptyOverlay: (page, blockId)=>expect(locator(page, blockId).locator('.ag-overlay-no-rows-center')).toBeVisible()
         }
     });

package/dist/createAgGridInputHelper.js

@@ -14,7 +14,7 @@
   limitations under the License.
 */ import { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
 import { expect } from '@playwright/test';
-function createAgGridInputHelper(theme) {
+function createAgGridInputHelper() {
     const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)} .ag-root-wrapper`);
     return createBlockHelper({
         locator,
@@ -33,7 +33,6 @@ function createAgGridInputHelper(theme) {
             rowCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ag-row')).toHaveCount(count),
             headerCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ag-header-cell-text')).toHaveCount(count),
             cellText: (page, blockId, rowIndex, colIndex, text)=>expect(locator(page, blockId).locator(`.ag-row[row-index="${rowIndex}"] .ag-cell`).nth(colIndex)).toHaveText(text),
-            themeClass: (page, blockId)=>expect(page.locator(`#${escapeId(blockId)}`)).toHaveClass(new RegExp(`ag-theme-${theme}`)),
             emptyOverlay: (page, blockId)=>expect(locator(page, blockId).locator('.ag-overlay-no-rows-center')).toBeVisible(),
             dragHandle: (page, blockId, rowIndex)=>expect(locator(page, blockId).locator(`.ag-row[row-index="${rowIndex}"] .ag-drag-handle`)).toBeVisible()
         }

package/dist/createDisplayMeta.js

@@ -12,10 +12,11 @@
   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.
-*/ // Shared meta for the display AgGrid theme blocks (AgGridAlpine / AgGridMaterial / AgGridBalham).
-// They are identical apart from the theme name in the css key description, so each block's meta.js
-// is a one-line call to this factory rather than a duplicated copy of the whole schema.
-function createDisplayMeta(blockName) {
+*/ // Shared meta for the display AgGrid theme blocks (AgGridAlpine / AgGridMaterial / AgGridBalham /
+// AgGridLowdefy). They are identical apart from the theme name in the css key description and
+// whether they take a size property, so each block's meta.js is a one-line call to this factory
+// rather than a duplicated copy of the whole schema.
+function createDisplayMeta(blockName, { size = false } = {}) {
     return {
         category: 'display',
         icons: [],
@@ -86,12 +87,37 @@ function createDisplayMeta(blockName) {
                     button: 'The clicked button: { eventName, title }.',
                     buttonIndex: 'Zero-based index in the buttons array.'
                 }
+            },
+            onCellMenuItem: {
+                description: 'Documentation reference — the actual event name fired is the `eventName` string declared on each `cell.items[]` entry of a `cell.type: menu` cell. Wire any number of named events on the block (e.g. `onRename`, `onDelete`).',
+                event: {
+                    row: 'The row data.',
+                    value: 'The cell value.',
+                    item: 'The clicked item: { eventName, title }.',
+                    itemIndex: 'Zero-based index in the authored items array (unshifted by hidden items).'
+                }
             }
         },
         properties: {
             type: 'object',
             additionalProperties: false,
             properties: {
+                ...size ? {
+                    size: {
+                        type: 'string',
+                        enum: [
+                            'small',
+                            'middle',
+                            'large'
+                        ],
+                        default: 'middle',
+                        description: "Row density, mirroring antd Table sizes. `small` is compact, `middle` (the Lowdefy default) matches antd Table's `middle`, `large` matches antd Table's default density. Changes spacing and row/header height only — colours and font size are identical across sizes."
+                    }
+                } : {},
+                themeParams: {
+                    type: 'object',
+                    description: "AG Grid Theming API parameters merged onto this block's theme, for per-grid overrides. Keys are AG Grid param names, e.g. `headerBackgroundColor`, `rowHoverColor`, `borderColor`. Values are CSS strings and may reference antd tokens, e.g. `var(--ant-color-primary)`. An unrecognised param name has no effect — neither Lowdefy nor AG Grid validates the names — so check spelling against AG Grid's theming parameter reference."
+                },
                 height: {
                     type: [
                         'number',
@@ -211,6 +237,7 @@ function createDisplayMeta(blockName) {
                                             'progress',
                                             'number',
                                             'buttons',
+                                            'menu',
                                             'selector',
                                             'multipleSelector',
                                             'switch',
@@ -538,6 +565,90 @@ function createDisplayMeta(blockName) {
                                             }
                                         }
                                     },
+                                    items: {
+                                        type: 'array',
+                                        description: 'Menu cell: items in the row action menu, rendered in a dropdown behind a single trigger button. Each item triggers its own block-level event (declared in `events:`). `*Field` variants (`titleField`, `iconField`, `disabledField`, `hiddenField`) are row-data paths. A hidden item is dropped, not disabled — a row on which every item is hidden renders no trigger at all.',
+                                        items: {
+                                            type: 'object',
+                                            required: [
+                                                'eventName'
+                                            ],
+                                            properties: {
+                                                eventName: {
+                                                    type: 'string',
+                                                    description: 'Block-level event name to trigger on click. Event payload is `{ row, value, item: { eventName, title }, itemIndex }`.'
+                                                },
+                                                title: {
+                                                    type: 'string',
+                                                    description: 'Item label - supports html.'
+                                                },
+                                                titleField: {
+                                                    type: 'string',
+                                                    description: 'Row-data path for the label.'
+                                                },
+                                                icon: {
+                                                    type: [
+                                                        'string',
+                                                        'object'
+                                                    ],
+                                                    description: 'Name of a React-Icon or Icon block config.',
+                                                    docs: {
+                                                        displayType: 'icon'
+                                                    }
+                                                },
+                                                iconField: {
+                                                    type: 'string',
+                                                    description: 'Row-data path for the icon name or config.'
+                                                },
+                                                danger: {
+                                                    type: 'boolean',
+                                                    default: false,
+                                                    description: 'Render the item in the danger colour.'
+                                                },
+                                                disabled: {
+                                                    type: 'boolean',
+                                                    default: false
+                                                },
+                                                disabledField: {
+                                                    type: 'string',
+                                                    description: 'Row-data path → boolean.'
+                                                },
+                                                hidden: {
+                                                    type: 'boolean',
+                                                    default: false,
+                                                    description: 'Hide the item entirely.'
+                                                },
+                                                hiddenField: {
+                                                    type: 'string',
+                                                    description: 'Row-data path → boolean.'
+                                                }
+                                            }
+                                        }
+                                    },
+                                    icon: {
+                                        type: [
+                                            'string',
+                                            'object'
+                                        ],
+                                        default: 'AiOutlineMore',
+                                        description: 'Menu cell: the trigger icon. Name of a React-Icon or Icon block config. The trigger is icon-only.',
+                                        docs: {
+                                            displayType: 'icon'
+                                        }
+                                    },
+                                    placement: {
+                                        type: 'string',
+                                        enum: [
+                                            'bottomLeft',
+                                            'bottom',
+                                            'bottomRight',
+                                            'topLeft',
+                                            'top',
+                                            'topRight'
+                                        ],
+                                        default: 'bottomRight',
+                                        description: 'Menu cell: where the dropdown opens relative to its trigger.'
+                                    },
                                     options: {
                                         type: 'array',
                                         description: 'Selector / Multiple selector cell: dropdown options. An array of primitives, or objects mirroring the `Selector` block options: `{ label, value, disabled, color, filterString, style }`. `label` supports html.'

package/dist/createInputMeta.js

@@ -13,9 +13,10 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ // Shared meta for the input AgGrid theme blocks (AgGridInputAlpine / AgGridInputMaterial /
-// AgGridInputBalham). They are identical apart from the theme name in the css key description, so
-// each block's meta.js is a one-line call to this factory rather than a duplicated copy.
-function createInputMeta(blockName) {
+// AgGridInputBalham / AgGridLowdefyInput). They are identical apart from the theme name in the css
+// key description and whether they take a size property, so each block's meta.js is a one-line call
+// to this factory rather than a duplicated copy of the whole schema.
+function createInputMeta(blockName, { size = false } = {}) {
     return {
         category: 'input',
         icons: [],
@@ -104,6 +105,22 @@ function createInputMeta(blockName) {
             type: 'object',
             additionalProperties: false,
             properties: {
+                ...size ? {
+                    size: {
+                        type: 'string',
+                        enum: [
+                            'small',
+                            'middle',
+                            'large'
+                        ],
+                        default: 'middle',
+                        description: "Row density, mirroring antd Table sizes. `small` is compact, `middle` (the Lowdefy default) matches antd Table's `middle`, `large` matches antd Table's default density. Changes spacing and row/header height only — colours and font size are identical across sizes."
+                    }
+                } : {},
+                themeParams: {
+                    type: 'object',
+                    description: "AG Grid Theming API parameters merged onto this block's theme, for per-grid overrides. Keys are AG Grid param names, e.g. `headerBackgroundColor`, `rowHoverColor`, `borderColor`. Values are CSS strings and may reference antd tokens, e.g. `var(--ant-color-primary)`. An unrecognised param name has no effect — neither Lowdefy nor AG Grid validates the names — so check spelling against AG Grid's theming parameter reference."
+                },
                 height: {
                     type: [
                         'number',

package/dist/e2e.js

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