@lowdefy/blocks-aggrid 5.6.0 → 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/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/createDisplayMeta.js

@@ -87,6 +87,15 @@ function createDisplayMeta(blockName, { size = false } = {}) {
                     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: {
@@ -228,6 +237,7 @@ function createDisplayMeta(blockName, { size = false } = {}) {
                                             'progress',
                                             'number',
                                             'buttons',
+                                            'menu',
                                             'selector',
                                             'multipleSelector',
                                             'switch',
@@ -555,6 +565,90 @@ function createDisplayMeta(blockName, { size = false } = {}) {
                                             }
                                         }
                                     },
+                                    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.'