@adyen/eslint-plugin-bento 2.10.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 2.12.0 (2026-05-12)
+
+### Features
+
+- added rule to deprecate `bento-date-range-picker` prop `has-actions` in eslint ([d594fcb72](https://github.com/Adyen/bento/commit/d594fcb72))
+
+### ❤️ Thank You
+
+- erice
+
+
+## 2.11.0 (2026-05-06)
+
+### Features
+
+- added deprecation rule for custom label in country components ([12d9fea55](https://github.com/Adyen/bento/commit/12d9fea55))
+- added rule to deprecate `handler` in `bento-data-grid-cell-action` in eslint ([26074a326](https://github.com/Adyen/bento/commit/26074a326))
+
+### ❤️ Thank You
+
+- erice
+- gerald
+
+
 ## 2.10.0 (2026-04-29)
 
 ### Features

package/configs/vue-recommended.js

@@ -11,10 +11,13 @@ module.exports = [
             },
         },
         rules: {
+            '@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler': 'warn',
+            '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop': 'warn',
             '@adyen/bento/deprecation-input-filter-dropdown-options': 'warn',
             '@adyen/bento/deprecation-bento-dropdown-size-prop': 'warn',
             '@adyen/bento/deprecation-bento-timeline-item-variant-prop': 'warn',
             '@adyen/bento/deprecation-bento-popover-modifiers-prop': 'warn',
+            '@adyen/bento/deprecation-country-custom-usage': 'warn',
             '@adyen/bento/deprecation-components-error-prop': 'warn',
             '@adyen/bento/deprecation-filter-bar-deprecated-props': 'warn',
             '@adyen/bento/deprecation-components-has-error-prop': 'warn',

package/configs/vue-strict.js

@@ -11,10 +11,13 @@ module.exports = [
             },
         },
         rules: {
+            '@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler': 'error',
+            '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop': 'error',
             '@adyen/bento/deprecation-input-filter-dropdown-options': 'error',
             '@adyen/bento/deprecation-bento-dropdown-size-prop': 'error',
             '@adyen/bento/deprecation-bento-timeline-item-variant-prop': 'error',
             '@adyen/bento/deprecation-bento-popover-modifiers-prop': 'error',
+            '@adyen/bento/deprecation-country-custom-usage': 'error',
             '@adyen/bento/deprecation-components-error-prop': 'error',
             '@adyen/bento/deprecation-filter-bar-deprecated-props': 'error',
             '@adyen/bento/deprecation-components-has-error-prop': 'error',

package/index.js

@@ -12,10 +12,13 @@ const plugin = {
         tailwind: require('./configs/tailwind'),
     },
     rules: {
+        'deprecation-bento-data-grid-cell-action-menu-item-handler': require('./rules/deprecation-bento-data-grid-cell-action-menu-item-handler/deprecation-bento-data-grid-cell-action-menu-item-handler'),
+        'deprecation-bento-date-range-picker-has-actions-prop': require('./rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop'),
         'deprecation-input-filter-dropdown-options': require('./rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options'),
         'deprecation-bento-dropdown-size-prop': require('./rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop'),
         'deprecation-bento-timeline-item-variant-prop': require('./rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop'),
         'deprecation-bento-popover-modifiers-prop': require('./rules/deprecation-bento-popover-modifiers-prop/deprecation-bento-popover-modifiers-prop'),
+        'deprecation-country-custom-usage': require('./rules/deprecation-country-custom-usage/deprecation-country-custom-usage'),
         'deprecation-components-error-prop': require('./rules/deprecation-components-error-prop/deprecation-components-error-prop'),
         'deprecation-filter-bar-deprecated-props': require('./rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props'),
         'deprecation-components-has-error-prop': require('./rules/deprecation-components-has-error-prop/deprecation-components-has-error-prop'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/eslint-plugin-bento",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Adyen Bento ESLint rules",
   "main": "index.js",
   "files": [
@@ -37,7 +37,7 @@
     "eslint": "9.39.0",
     "eslint-plugin-vue": "10.0.0",
     "globals": "16.5.0",
-    "vitest": "^3.0.0",
+    "vitest": "^3.2.4",
     "vue-eslint-parser": "10.1.3"
   },
   "peerDependencies": {

package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/README.md

@@ -0,0 +1,48 @@
+# deprecation-bento-data-grid-cell-action-menu-item-handler
+
+## Description
+
+The `handler` property on `BentoColumnCellActionMenuItem` objects (used in `menuData` arrays) is deprecated since
+v2.0.0. Use `event` instead, which receives `(rowDataItem, columnKey)` parameters providing context about which row and
+column triggered the action.
+
+## Options
+
+| Option        | Type      | Default | Description          |
+| :------------ | :-------- | :------ | :------------------- |
+| **`autofix`** | `boolean` | `false` | Enables auto-fixing. |
+
+## Rule Details
+
+This rule detects `handler` properties on objects inside `menuData` arrays, both in `<template>` expressions and
+`<script>` blocks.
+
+### ❌ Incorrect
+
+```javascript
+const cellActions = [
+    {
+        menuData: [
+            {
+                text: 'Cancel payment',
+                handler: () => cancelPayment(),
+            },
+        ],
+    },
+];
+```
+
+### ✅ Correct
+
+```javascript
+const cellActions = [
+    {
+        menuData: [
+            {
+                text: 'Cancel payment',
+                event: (rowDataItem, columnKey) => cancelPayment(rowDataItem),
+            },
+        ],
+    },
+];
+```

package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/__tests__/deprecation-bento-data-grid-cell-action-menu-item-handler.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <!-- Inline expression: should warn (2 handlers) -->
+        <bento-data-grid
+            :cell-actions="[
+                {
+                    variant: 'more',
+                    menuData: [
+                        {
+                            text: 'Cancel payment',
+                            handler: () => {
+                                return;
+                            },
+                        },
+                        {
+                            text: 'Transfer payment',
+                            handler: () => {
+                                return;
+                            },
+                        },
+                    ],
+                },
+            ]"
+            :data="[]"
+            :columns="[]"
+        />
+
+        <!-- Identifier reference: should warn (1 handler) -->
+        <bento-data-grid :cell-actions="rowActions" :data="[]" :columns="[]" />
+
+        <!-- Non-data-grid component: should NOT warn -->
+        <test-component
+            :cell-actions="[
+                {
+                    menuData: [
+                        {
+                            text: 'Action',
+                            handler: () => {
+                                return;
+                            },
+                        },
+                    ],
+                },
+            ]"
+        />
+    </div>
+</template>
+
+<script setup>
+    const rowActions = [
+        {
+            variant: 'more',
+            menuData: [
+                {
+                    text: 'Refund',
+                    handler: () => {
+                        return;
+                    },
+                },
+            ],
+        },
+    ];
+</script>

package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/__tests__/eslint.config.js

@@ -0,0 +1,26 @@
+// eslint.config.js
+const { defineConfig } = require('eslint/config');
+const vueParser = require('vue-eslint-parser');
+const tsParser = require('@typescript-eslint/parser');
+const adyenBento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: vueParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        plugins: {
+            '@adyen/bento': adyenBento,
+        },
+        rules: {
+            // Register the specific rule we are testing
+            '@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler': ['warn', { autofix: true }],
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/deprecation-bento-data-grid-cell-action-menu-item-handler.integration.test.ts

@@ -0,0 +1,24 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler', () => {
+    it('should lint with warning when handler is used in menuData', () => {
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        const vueFile = path.resolve(
+            __dirname,
+            '__tests__',
+            'deprecation-bento-data-grid-cell-action-menu-item-handler.vue'
+        );
+
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        expect(result[0].warningCount).toBe(3);
+
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler',
+            severity: 1,
+            messageId: 'deprecation',
+            message: `The "handler" property is deprecated in bento-data-grid cell action menu items. Use "event" instead.`,
+        });
+    });
+});

package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/deprecation-bento-data-grid-cell-action-menu-item-handler.js

@@ -0,0 +1,232 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+const DATA_GRID_NAMES = new Set(['bento-data-grid', 'BentoDataGrid']);
+const CELL_ACTION_PROPS = new Set(['cell-actions', 'cellActions', 'row-actions', 'rowActions']);
+
+/**
+ * Reports a deprecated handler property and optionally fixes it by renaming to "event".
+ */
+function reportHandler(context, node, autofix) {
+    context.report({
+        node,
+        messageId: 'deprecation',
+        ...(autofix && {
+            fix(fixer) {
+                return fixer.replaceText(node.key, 'event');
+            },
+        }),
+    });
+}
+
+/**
+ * Recursively walks an AST node looking for Property nodes with key "handler"
+ * that sit inside a "menuData" array. Reports each one found.
+ */
+function findHandlersInMenuData(astNode, context, autofix) {
+    if (!astNode || typeof astNode !== 'object') {
+        return;
+    }
+
+    // If this is a Property with key "menuData" whose value is an array,
+    // search that array for handler properties.
+    if (
+        astNode.type === 'Property' &&
+        astNode.key &&
+        (astNode.key.name === 'menuData' || astNode.key.value === 'menuData') &&
+        astNode.value &&
+        astNode.value.type === 'ArrayExpression'
+    ) {
+        findHandlersInArray(astNode.value, context, autofix);
+        return;
+    }
+
+    // Recurse into child nodes
+    for (const key of Object.keys(astNode)) {
+        if (key === 'parent') {
+            continue;
+        }
+        const child = astNode[key];
+        if (Array.isArray(child)) {
+            child.forEach(item => findHandlersInMenuData(item, context, autofix));
+        } else if (child && typeof child === 'object' && child.type) {
+            findHandlersInMenuData(child, context, autofix);
+        }
+    }
+}
+
+/**
+ * Searches an ArrayExpression (the value of menuData) for object items with a "handler" property.
+ */
+function findHandlersInArray(arrayNode, context, autofix) {
+    for (const element of arrayNode.elements) {
+        if (!element || element.type !== 'ObjectExpression') {
+            continue;
+        }
+        for (const prop of element.properties) {
+            if (prop.type === 'Property' && prop.key && prop.key.name === 'handler') {
+                reportHandler(context, prop, autofix);
+            }
+            // Also check nested items arrays (sub-menus)
+            if (
+                prop.type === 'Property' &&
+                prop.key &&
+                prop.key.name === 'items' &&
+                prop.value &&
+                prop.value.type === 'ArrayExpression'
+            ) {
+                findHandlersInArray(prop.value, context, autofix);
+            }
+        }
+    }
+}
+
+/**
+ * Checks whether a Property node with key "handler" is inside a menuData context.
+ * Walks up the AST looking for an ArrayExpression whose parent Property has key "menuData".
+ */
+function isInsideMenuData(node) {
+    let current = node.parent;
+
+    while (current) {
+        if (current.type === 'ArrayExpression') {
+            const arrayParent = current.parent;
+            if (
+                arrayParent &&
+                arrayParent.type === 'Property' &&
+                arrayParent.key &&
+                (arrayParent.key.name === 'menuData' || arrayParent.key.value === 'menuData')
+            ) {
+                return true;
+            }
+        }
+        current = current.parent;
+    }
+
+    return false;
+}
+
+/**
+ * Finds the VariableDeclarator ancestor of a node and returns its id name.
+ */
+function getDeclaratorName(node) {
+    let current = node.parent;
+    while (current) {
+        if (current.type === 'VariableDeclarator' && current.id && current.id.name) {
+            return current.id.name;
+        }
+        current = current.parent;
+    }
+    return null;
+}
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Deprecates usage of the "handler" property in bento-data-grid cell action menu items. Use "event" instead.',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/README.md',
+            recommended: true,
+        },
+        messages: {
+            deprecation: `The "handler" property is deprecated in bento-data-grid cell action menu items. Use "event" instead.`,
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const options = context.options[0] || {};
+        const autofix = options.autofix === true;
+
+        // Identifiers referenced in :cell-actions / :row-actions on bento-data-grid
+        const boundIdentifiers = new Set();
+        // Handler nodes found in menuData in <script>, pending cross-reference
+        const pendingHandlers = [];
+
+        const visitors = VueUtils.defineTemplateBodyVisitor(
+            context,
+            {
+                /**
+                 * Matches :cell-actions or :row-actions bindings on bento-data-grid elements.
+                 * Handles inline expressions directly, and collects identifier names for
+                 * the script visitor to resolve.
+                 */
+                'VAttribute[directive=true][key.name.name="bind"]'(node) {
+                    const argName = node.key && node.key.argument && node.key.argument.name;
+                    if (!argName || !CELL_ACTION_PROPS.has(argName)) {
+                        return;
+                    }
+
+                    const startTag = node.parent;
+                    const element = startTag && startTag.parent;
+                    if (!element || !DATA_GRID_NAMES.has(element.name)) {
+                        return;
+                    }
+
+                    const expr = node.value && node.value.expression ? node.value.expression : null;
+                    if (!expr) {
+                        return;
+                    }
+
+                    if (expr.type === 'Identifier') {
+                        // Collect identifier name for the script visitor to check
+                        boundIdentifiers.add(expr.name);
+                    } else {
+                        // Inline expression — search directly
+                        findHandlersInMenuData(expr, context, autofix);
+                    }
+                },
+            },
+            {
+                // Script visitor (runs before template): collect handler nodes with their variable names
+                'Property[key.name="handler"]'(node) {
+                    if (!isInsideMenuData(node)) {
+                        return;
+                    }
+                    const varName = getDeclaratorName(node);
+                    if (varName) {
+                        pendingHandlers.push({ node, varName });
+                    }
+                },
+            }
+        );
+
+        // Program:exit runs after both script and template visitors have completed,
+        // allowing us to cross-reference collected identifiers with pending handlers.
+        const originalProgramExit = visitors['Program:exit'];
+        visitors['Program:exit'] = function (node) {
+            if (originalProgramExit) {
+                originalProgramExit(node);
+            }
+            for (const { node: handlerNode, varName } of pendingHandlers) {
+                if (boundIdentifiers.has(varName)) {
+                    reportHandler(context, handlerNode, autofix);
+                }
+            }
+        };
+
+        return visitors;
+    },
+};

package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/deprecation-bento-data-grid-cell-action-menu-item-handler.test.ts

@@ -0,0 +1,116 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationRule from './deprecation-bento-data-grid-cell-action-menu-item-handler';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler', () => {
+    ruleTester.run('deprecation-bento-data-grid-cell-action-menu-item-handler', deprecationRule, {
+        valid: [
+            {
+                name: 'Valid: menuData with event instead of handler',
+                filename: 'test.vue',
+                code: `<template>
+                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Edit', event: fn }] }]" />
+                    </template>`,
+            },
+            {
+                name: 'Valid: handler in menuData on a non-data-grid component (template)',
+                filename: 'test.vue',
+                code: `<template>
+                        <test-component :cell-actions="[{ menuData: [{ text: 'Edit', handler: fn }] }]" />
+                    </template>`,
+            },
+            {
+                name: 'Valid: handler outside of menuData context',
+                filename: 'test.vue',
+                code: `<script>const obj = { handler: () => {} };</script>`,
+            },
+            {
+                name: 'Valid: handler in unrelated array',
+                filename: 'test.vue',
+                code: `<script>const arr = [{ handler: () => {} }];</script>`,
+            },
+            {
+                name: 'Valid: menuData with event in script',
+                filename: 'test.vue',
+                code: `<script>
+                        const actions = [{ menuData: [{ text: 'Edit', event: () => {} }] }];
+                    </script>`,
+            },
+            {
+                name: 'Valid: handler in menuData in script not passed to bento-data-grid',
+                filename: 'test.vue',
+                code: `<template>
+                        <test-component :cell-actions="actions" />
+                    </template>
+                    <script>
+                        const actions = [{ menuData: [{ text: 'Cancel', handler: () => {} }] }];
+                    </script>`,
+            },
+        ],
+        invalid: [
+            {
+                name: 'Invalid: handler in menuData (template, no autofix)',
+                filename: 'test.vue',
+                code: `<template>
+                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Cancel', handler: fn }] }]" />
+                    </template>`,
+                output: null,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: handler in menuData (template, autofix renames to event)',
+                filename: 'test.vue',
+                code: `<template>
+                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Cancel', handler: fn }] }]" />
+                    </template>`,
+                output: `<template>
+                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Cancel', event: fn }] }]" />
+                    </template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: handler resolved from script variable via identifier',
+                filename: 'test.vue',
+                code: `<template>
+                        <bento-data-grid :cell-actions="actions" />
+                    </template>
+                    <script>
+                        const actions = [{ menuData: [{ text: 'Cancel', handler: () => {} }] }];
+                    </script>`,
+                output: `<template>
+                        <bento-data-grid :cell-actions="actions" />
+                    </template>
+                    <script>
+                        const actions = [{ menuData: [{ text: 'Cancel', event: () => {} }] }];
+                    </script>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: multiple handlers in menuData (template, autofix)',
+                filename: 'test.vue',
+                code: `<template>
+                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Cancel', handler: a }, { text: 'Delete', handler: b }] }]" />
+                    </template>`,
+                output: `<template>
+                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Cancel', event: a }, { text: 'Delete', event: b }] }]" />
+                    </template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }, { messageId: 'deprecation' }],
+            },
+        ],
+    });
+});

package/rules/deprecation-bento-date-range-picker-has-actions-prop/README.md

@@ -0,0 +1,50 @@
+# deprecation-bento-date-range-picker-has-actions-prop
+
+## Description
+
+Manages the **temporary** `has-actions` prop on `bento-date-range-picker`.
+
+The `has-actions` prop is a temporary opt-in flag for the new actions behavior. This rule helps teams adopt it during
+the transition period, and later remove it once the behavior becomes the default.
+
+## Options
+
+| Option        | Type                  | Default | Description                                                    |
+| :------------ | :-------------------- | :------ | :------------------------------------------------------------- |
+| **`action`**  | `'add'` \| `'remove'` | `'add'` | `add` reports missing `has-actions`. `remove` reports present. |
+| **`autofix`** | `boolean`             | `false` | Enables auto-fixing.                                           |
+
+## Rule Details
+
+### Action: `add` (default)
+
+Reports `bento-date-range-picker` instances that are **missing** the `has-actions` prop.
+
+#### ❌ Incorrect
+
+```html
+<bento-date-range-picker label="Pick" />
+```
+
+#### ✅ Correct
+
+```html
+<bento-date-range-picker has-actions label="Pick" />
+```
+
+### Action: `remove`
+
+Reports `bento-date-range-picker` instances that **have** the `has-actions` prop, so it can be cleaned up once the
+behavior becomes permanent.
+
+#### ❌ Incorrect
+
+```html
+<bento-date-range-picker has-actions label="Pick" />
+```
+
+#### ✅ Correct
+
+```html
+<bento-date-range-picker label="Pick" />
+```

package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/deprecation-bento-date-range-picker-has-actions-prop.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>
+        <!-- These should trigger the "add" action (missing has-actions) -->
+        <bento-date-range-picker label="Pick a date" />
+        <bento-date-range-picker label="Another picker" :min="minDate" />
+        <bento-date-range-picker v-model="value" />
+    </div>
+</template>
+
+<script setup></script>