@elastic/eslint-plugin-eui 2.16.0 → 3.0.0

package/README.md

@@ -377,10 +377,14 @@ When the render-prop child is not an `EuiToolTip`, `beforeMessage` simply config
 
 Enforce that `EuiButtonGroup` children (when using the Children API) are valid button components.
 
-Valid direct children are:
-- `variant="default"`: `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon`
+Valid direct children depend on the variant:
+- `variant="default"` (or no variant): `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon`
+- `variant="segmented"`: `EuiButton` and `EuiButtonIcon` only (`EuiButtonEmpty` is not allowed)
+- `variant="selection"`: `EuiButton` and `EuiButtonIcon` only (`EuiButtonEmpty` is not allowed)
 
-Besides those button components, these three wrapper components are also allowed: `EuiPopover`, `EuiToolTip` and `EuiCopy`.
+In addition, these wrapper components are allowed for all variants: `EuiPopover`, `EuiToolTip`, and `EuiCopy`.
+
+For `variant="segmented"` and `variant="selection"`, all children must also use the **same button type** — either all `EuiButton` or all `EuiButtonIcon`. Mixing both types is reported as an error, including when buttons appear inside `EuiToolTip`, as an `EuiPopover` trigger, or in an `EuiCopy` render prop.
 
 #### Examples
 
@@ -391,6 +395,29 @@ Besides those button components, these three wrapper components are also allowed
   <EuiFlexGroup>...</EuiFlexGroup>
 </EuiButtonGroup>
 
+// ✗ Bad - variant="segmented" with EuiButtonEmpty (not allowed)
+<EuiButtonGroup legend="Actions" variant="segmented">
+  <EuiButton>Save</EuiButton>
+  <EuiButtonEmpty color="text">Cancel</EuiButtonEmpty>
+</EuiButtonGroup>
+
+// ✗ Bad - variant="segmented" mixing EuiButton and EuiButtonIcon
+<EuiButtonGroup legend="Actions" variant="segmented">
+  <EuiButton>Save</EuiButton>
+  <EuiButtonIcon iconType="trash" aria-label="Delete" />
+</EuiButtonGroup>
+
+// ✗ Bad - variant="selection" with EuiButtonEmpty (not allowed)
+<EuiButtonGroup legend="Format" variant="selection">
+  <EuiButtonEmpty color="text">Bold</EuiButtonEmpty>
+</EuiButtonGroup>
+
+// ✗ Bad - variant="selection" mixing EuiButton and EuiButtonIcon
+<EuiButtonGroup legend="Format" variant="selection">
+  <EuiButton id="bold">Bold</EuiButton>
+  <EuiButtonIcon id="italic" iconType="italic" aria-label="Italic" />
+</EuiButtonGroup>
+
 // ✓ Good - direct buttons
 <EuiButtonGroup legend="Actions">
   <EuiButton>Save</EuiButton>
@@ -442,6 +469,30 @@ Besides those button components, these three wrapper components are also allowed
     Panel content
   </EuiPopover>
 </EuiButtonGroup>
+
+// ✓ Good - variant="segmented" with all EuiButton
+<EuiButtonGroup legend="Actions" variant="segmented">
+  <EuiButton>Save</EuiButton>
+  <EuiButton color="danger">Delete</EuiButton>
+</EuiButtonGroup>
+
+// ✓ Good - variant="segmented" with all EuiButtonIcon
+<EuiButtonGroup legend="Actions" variant="segmented">
+  <EuiButtonIcon iconType="pencil" aria-label="Edit" />
+  <EuiButtonIcon iconType="trash" aria-label="Delete" />
+</EuiButtonGroup>
+
+// ✓ Good - variant="selection" with all EuiButton
+<EuiButtonGroup legend="Format" variant="selection">
+  <EuiButton id="bold">Bold</EuiButton>
+  <EuiButton id="italic">Italic</EuiButton>
+</EuiButtonGroup>
+
+// ✓ Good - variant="selection" with all EuiButtonIcon
+<EuiButtonGroup legend="Format" variant="selection">
+  <EuiButtonIcon id="bold" iconType="bold" aria-label="Bold" />
+  <EuiButtonIcon id="italic" iconType="italic" aria-label="Italic" />
+</EuiButtonGroup>
 ```
 
 #### Custom button wrapper components
@@ -453,6 +504,51 @@ If a project-specific button component (e.g. `<SaveButton />`) is used as a chil
 <SaveButton />
 ```
 
+### `@elastic/eui/button-group-selection-require-id`
+
+Enforce that every `EuiButton` and `EuiButtonIcon` child of an `EuiButtonGroup` with `variant="selection"` has an `id` prop. The selection variant uses the `id` of each button to track which buttons are selected, so a missing `id` will cause incorrect or broken selection state at runtime.
+
+The rule only fires when `variant="selection"` is set as a static string. Dynamic variants (`variant={myVar}`) are skipped conservatively. It traverses the same nesting depth as `button-group-no-invalid-children`: fragments, conditionals, variable resolution, `.map()`, and the three supported wrappers (`EuiToolTip`, `EuiPopover` trigger, `EuiCopy` render prop). Children with spread props (`{...props}`) are skipped — the `id` may be provided via the spread.
+
+#### Examples
+
+```tsx
+// ✗ Bad - missing id on direct child
+<EuiButtonGroup legend="Format" variant="selection">
+  <EuiButton>Bold</EuiButton>
+</EuiButtonGroup>
+
+// ✗ Bad - missing id on button inside EuiToolTip
+<EuiButtonGroup legend="Format" variant="selection">
+  <EuiToolTip content="Italic">
+    <EuiButton>Italic</EuiButton>
+  </EuiToolTip>
+</EuiButtonGroup>
+
+// ✗ Bad - missing id on EuiPopover trigger
+<EuiButtonGroup legend="Format" variant="selection">
+  <EuiPopover button={<EuiButton>More</EuiButton>} isOpen={false} closePopover={() => {}}>
+    Panel content
+  </EuiPopover>
+</EuiButtonGroup>
+
+// ✓ Good - all children have id
+<EuiButtonGroup legend="Format" variant="selection">
+  <EuiButton id="bold">Bold</EuiButton>
+  <EuiToolTip content="Italic">
+    <EuiButton id="italic">Italic</EuiButton>
+  </EuiToolTip>
+  <EuiPopover button={<EuiButton id="more">More</EuiButton>} isOpen={false} closePopover={() => {}}>
+    Panel content
+  </EuiPopover>
+</EuiButtonGroup>
+
+// ✓ Good - spread props are skipped (id may come from the spread)
+<EuiButtonGroup legend="Format" variant="selection">
+  <EuiButton {...buttonProps} />
+</EuiButtonGroup>
+```
+
 ## Testing
 
 ### Running unit tests

package/lib/cjs/index.js

@@ -24,6 +24,7 @@ var _tooltip_no_interactive_content = require("./rules/a11y/tooltip_no_interacti
 var _tooltip_button_icon_wrap = require("./rules/a11y/tooltip_button_icon_wrap");
 var _no_deprecated_icon_aliases = require("./rules/no_deprecated_icon_aliases");
 var _button_group_no_invalid_children = require("./rules/button_group_no_invalid_children");
+var _button_group_selection_require_id = require("./rules/button_group_selection_require_id");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -57,7 +58,8 @@ const config = {
     'require-href-for-link': _require_href_for_link.RequireHrefForLink,
     'tooltip-no-interactive-content': _tooltip_no_interactive_content.TooltipNoInteractiveContent,
     'tooltip-button-icon-wrap': _tooltip_button_icon_wrap.TooltipButtonIconWrap,
-    'button-group-no-invalid-children': _button_group_no_invalid_children.ButtonGroupNoInvalidChildren
+    'button-group-no-invalid-children': _button_group_no_invalid_children.ButtonGroupNoInvalidChildren,
+    'button-group-selection-require-id': _button_group_selection_require_id.ButtonGroupSelectionRequireId
   },
   configs: {
     recommended: {
@@ -65,6 +67,7 @@ const config = {
       rules: {
         '@elastic/eui/accessible-interactive-element': 'warn',
         '@elastic/eui/button-group-no-invalid-children': 'error',
+        '@elastic/eui/button-group-selection-require-id': 'error',
         '@elastic/eui/callout-announce-on-mount': 'warn',
         '@elastic/eui/callout-prefer-props-for-content': 'warn',
         '@elastic/eui/consistent-is-invalid-props': 'warn',

package/lib/cjs/rules/button_group_no_invalid_children.d.ts

@@ -1,3 +1,3 @@
 import { type TSESLint } from '@typescript-eslint/utils';
-export declare const ButtonGroupNoInvalidChildren: TSESLint.RuleModule<"invalidUnresolvableWrapperChild" | "invalidWrapperChild" | "invalidChild" | "invalidUnresolvableChild" | "invalidPopoverButton" | "invalidUnresolvablePopoverButton", [], unknown, TSESLint.RuleListener>;
+export declare const ButtonGroupNoInvalidChildren: TSESLint.RuleModule<"invalidUnresolvableWrapperChild" | "invalidWrapperChild" | "invalidChild" | "invalidUnresolvableChild" | "invalidPopoverButton" | "invalidUnresolvablePopoverButton" | "invalidMixedTypes", [], unknown, TSESLint.RuleListener>;
 //# sourceMappingURL=button_group_no_invalid_children.d.ts.map

package/lib/cjs/rules/button_group_no_invalid_children.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button_group_no_invalid_children.d.ts","sourceRoot":"","sources":["../../../src/rules/button_group_no_invalid_children.ts"],"names":[],"mappings":"AAQA,OAAO,EAEL,KAAK,QAAQ,EAEd,MAAM,0BAA0B,CAAC;AAwDlC,eAAO,MAAM,4BAA4B,gOAuLxC,CAAC"}
+{"version":3,"file":"button_group_no_invalid_children.d.ts","sourceRoot":"","sources":["../../../src/rules/button_group_no_invalid_children.ts"],"names":[],"mappings":"AAQA,OAAO,EAEL,KAAK,QAAQ,EAEd,MAAM,0BAA0B,CAAC;AAwDlC,eAAO,MAAM,4BAA4B,sPAsPxC,CAAC"}

package/lib/cjs/rules/button_group_no_invalid_children.js

@@ -8,8 +8,9 @@ var _utils = require("@typescript-eslint/utils");
 var _has_spread = require("../utils/has_spread");
 var _flat_map = require("../utils/flat_map");
 var _get_element_name = require("../utils/get_element_name");
-var _walk_jsx_children = require("../utils/walk_jsx_children");
 var _get_attr_value = require("../utils/get_attr_value");
+var _collect_jsx_children = require("../utils/collect_jsx_children");
+var _button_group_constants = require("../utils/button_group_constants");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,37 +19,27 @@ var _get_attr_value = require("../utils/get_attr_value");
  * Side Public License, v 1.
  */
 
-const BUTTON_GROUP = 'EuiButtonGroup';
-const VALID_BUTTONS = new Set(['EuiButton', 'EuiButtonEmpty', 'EuiButtonIcon']);
-const VALID_WRAPPERS = new Set(['EuiToolTip', 'EuiPopover', 'EuiCopy']);
-const VALID_BUTTONS_LIST = Array.from(VALID_BUTTONS).join(', ');
-const VALID_WRAPPERS_LIST = Array.from(VALID_WRAPPERS).join(', ');
+const VALID_WRAPPERS_LIST = Array.from(_button_group_constants.VALID_WRAPPERS).join(', ');
 function isCustomComponent(name) {
   return name[0] === name[0].toUpperCase();
 }
-function collectJsxChildren(node, sourceCode) {
-  const results = [];
-  (0, _walk_jsx_children.walkJsxChildren)(node, leaf => {
-    if (leaf.type === 'JSXElement') {
-      results.push(leaf);
-    }
-  }, {
-    sourceCode
-  });
-  return results;
-}
-function reportInvalidWrapperChildren(wrapper, wrapperName, context) {
-  const children = (0, _flat_map.flatMap)(wrapper.children, c => collectJsxChildren(c, context.sourceCode));
+function reportInvalidWrapperChildren(wrapper, wrapperName, context, validButtons, allowed, seenButtonTypes) {
+  const children = (0, _flat_map.flatMap)(wrapper.children, c => (0, _collect_jsx_children.collectJsxChildren)(c, context.sourceCode));
   for (const wrapperChild of children) {
     if ((0, _has_spread.hasSpread)(wrapperChild.openingElement.attributes)) continue;
     const wrapperChildName = (0, _get_element_name.getElementName)(wrapperChild.openingElement);
-    if (wrapperChildName === null || VALID_BUTTONS.has(wrapperChildName)) continue;
+    if (wrapperChildName === null) continue;
+    if (validButtons.has(wrapperChildName)) {
+      seenButtonTypes?.add(wrapperChildName);
+      continue;
+    }
     context.report({
       node: wrapperChild.openingElement,
-      messageId: isCustomComponent(wrapperChildName) ? 'invalidUnresolvableWrapperChild' : 'invalidWrapperChild',
+      messageId: isCustomComponent(wrapperChildName) && !_button_group_constants.VALID_BUTTONS.has(wrapperChildName) ? 'invalidUnresolvableWrapperChild' : 'invalidWrapperChild',
       data: {
         name: wrapperChildName,
-        wrapper: wrapperName
+        wrapper: wrapperName,
+        allowed
       }
     });
   }
@@ -60,25 +51,36 @@ const ButtonGroupNoInvalidChildren = exports.ButtonGroupNoInvalidChildren = _uti
         const {
           openingElement
         } = node;
-        if (openingElement.name.type !== 'JSXIdentifier' || openingElement.name.name !== BUTTON_GROUP) {
+        if (openingElement.name.type !== 'JSXIdentifier' || openingElement.name.name !== _button_group_constants.BUTTON_GROUP) {
           return;
         }
 
-        // Only validate when the variant is "default" (or absent — the default).
-        // Rules for "segmented" and "selection" are added in later chunks.
+        // Validate "default", "segmented", and "selection" variants.
         // Dynamic variant values (variables) are conservatively skipped.
         const variant = (0, _get_attr_value.findAttrValue)(context, openingElement.attributes, 'variant');
-        if (variant !== undefined && variant !== 'default') return;
-        const children = (0, _flat_map.flatMap)(node.children, c => collectJsxChildren(c, context.sourceCode));
+        if (variant !== undefined && variant !== 'default' && variant !== 'segmented' && variant !== 'selection') return;
+        const isSegmented = variant === 'segmented';
+        const isSelection = variant === 'selection';
+        const validButtons = isSegmented ? _button_group_constants.SEGMENTED_VALID_BUTTONS : isSelection ? _button_group_constants.SELECTION_VALID_BUTTONS : _button_group_constants.VALID_BUTTONS;
+        const allowed = Array.from(validButtons).join(', ');
+        const children = (0, _flat_map.flatMap)(node.children, c => (0, _collect_jsx_children.collectJsxChildren)(c, context.sourceCode));
         if (children.length === 0) return;
+
+        // Collect seen button types for the segmented/selection mixed-type check.
+        // Populated during the main loop to avoid a second traversal.
+        const seenButtonTypes = isSegmented || isSelection ? new Set() : null;
         for (const child of children) {
           const name = (0, _get_element_name.getElementName)(child.openingElement);
           if (name === null) continue;
-          if (VALID_BUTTONS.has(name)) continue;
-          if (VALID_WRAPPERS.has(name)) {
+          if (validButtons.has(name)) {
+            seenButtonTypes?.add(name);
+            continue;
+          }
+          if (_button_group_constants.VALID_WRAPPERS.has(name)) {
             if (name === 'EuiToolTip') {
               // Validate JSX children (expanding fragments/conditionals).
-              reportInvalidWrapperChildren(child, name, context);
+              // Also collects button types for the segmented mixed-type check.
+              reportInvalidWrapperChildren(child, name, context, validButtons, allowed, seenButtonTypes ?? undefined);
             } else if (name === 'EuiPopover') {
               // The trigger is the `button` prop, not JSX children (panel
               // content). The prop value may be a JSXExpressionContainer or
@@ -86,23 +88,32 @@ const ButtonGroupNoInvalidChildren = exports.ButtonGroupNoInvalidChildren = _uti
               // EuiToolTip wrapping the trigger button is also supported.
               const buttonProp = child.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === 'button');
               if (buttonProp?.value != null) {
-                const triggerElements = collectJsxChildren(buttonProp.value, context.sourceCode);
+                const triggerElements = (0, _collect_jsx_children.collectJsxChildren)(buttonProp.value, context.sourceCode);
                 for (const triggerElement of triggerElements) {
                   if ((0, _has_spread.hasSpread)(triggerElement.openingElement.attributes)) continue;
                   const triggerElementName = (0, _get_element_name.getElementName)(triggerElement.openingElement);
-                  if (triggerElementName === null || VALID_BUTTONS.has(triggerElementName)) continue;
+                  if (triggerElementName === null) continue;
+                  if (validButtons.has(triggerElementName)) {
+                    seenButtonTypes?.add(triggerElementName);
+                    continue;
+                  }
                   if (triggerElementName === 'EuiToolTip') {
                     // EuiToolTip wrapping the trigger — validate its children.
-                    const tooltipChildren = (0, _flat_map.flatMap)(triggerElement.children, c => collectJsxChildren(c, context.sourceCode));
+                    const tooltipChildren = (0, _flat_map.flatMap)(triggerElement.children, c => (0, _collect_jsx_children.collectJsxChildren)(c, context.sourceCode));
                     for (const tooltipChild of tooltipChildren) {
                       if ((0, _has_spread.hasSpread)(tooltipChild.openingElement.attributes)) continue;
                       const tooltipChildName = (0, _get_element_name.getElementName)(tooltipChild.openingElement);
-                      if (tooltipChildName === null || VALID_BUTTONS.has(tooltipChildName)) continue;
+                      if (tooltipChildName === null) continue;
+                      if (validButtons.has(tooltipChildName)) {
+                        seenButtonTypes?.add(tooltipChildName);
+                        continue;
+                      }
                       context.report({
                         node: tooltipChild.openingElement,
-                        messageId: isCustomComponent(tooltipChildName) ? 'invalidUnresolvablePopoverButton' : 'invalidPopoverButton',
+                        messageId: isCustomComponent(tooltipChildName) && !_button_group_constants.VALID_BUTTONS.has(tooltipChildName) ? 'invalidUnresolvablePopoverButton' : 'invalidPopoverButton',
                         data: {
-                          name: tooltipChildName
+                          name: tooltipChildName,
+                          allowed
                         }
                       });
                     }
@@ -110,9 +121,10 @@ const ButtonGroupNoInvalidChildren = exports.ButtonGroupNoInvalidChildren = _uti
                   }
                   context.report({
                     node: triggerElement.openingElement,
-                    messageId: isCustomComponent(triggerElementName) ? 'invalidUnresolvablePopoverButton' : 'invalidPopoverButton',
+                    messageId: isCustomComponent(triggerElementName) && !_button_group_constants.VALID_BUTTONS.has(triggerElementName) ? 'invalidUnresolvablePopoverButton' : 'invalidPopoverButton',
                     data: {
-                      name: triggerElementName
+                      name: triggerElementName,
+                      allowed
                     }
                   });
                 }
@@ -121,7 +133,8 @@ const ButtonGroupNoInvalidChildren = exports.ButtonGroupNoInvalidChildren = _uti
               // Children is a render prop: {(copy) => <EuiButton />}
               // ArrowFunctionExpression with expression body is expanded by
               // collectJsxChildren, so validation works the same as EuiToolTip.
-              reportInvalidWrapperChildren(child, name, context);
+              // Also collects button types for the segmented mixed-type check.
+              reportInvalidWrapperChildren(child, name, context, validButtons, allowed, seenButtonTypes ?? undefined);
             }
             continue;
           }
@@ -131,9 +144,23 @@ const ButtonGroupNoInvalidChildren = exports.ButtonGroupNoInvalidChildren = _uti
           if ((0, _has_spread.hasSpread)(child.openingElement.attributes)) continue;
           context.report({
             node: child.openingElement,
-            messageId: isCustomComponent(name) ? 'invalidUnresolvableChild' : 'invalidChild',
+            messageId: isCustomComponent(name) && !_button_group_constants.VALID_BUTTONS.has(name) ? 'invalidUnresolvableChild' : 'invalidChild',
+            data: {
+              name,
+              allowed
+            }
+          });
+        }
+
+        // For segmented/selection, all children must be the same button type —
+        // either all EuiButton or all EuiButtonIcon. Types are collected during
+        // the main loop above, including from EuiToolTip, EuiPopover, and EuiCopy.
+        if (seenButtonTypes?.has('EuiButton') && seenButtonTypes.has('EuiButtonIcon')) {
+          context.report({
+            node: openingElement,
+            messageId: 'invalidMixedTypes',
             data: {
-              name
+              variant: isSelection ? 'selection' : 'segmented'
             }
           });
         }
@@ -143,16 +170,17 @@ const ButtonGroupNoInvalidChildren = exports.ButtonGroupNoInvalidChildren = _uti
   meta: {
     type: 'problem',
     docs: {
-      description: `Enforce that EuiButtonGroup children are ${VALID_BUTTONS_LIST}, or a supported wrapper (${VALID_WRAPPERS_LIST})`
+      description: `Enforce that EuiButtonGroup children are valid button components, or a supported wrapper (${VALID_WRAPPERS_LIST})`
     },
     schema: [],
     messages: {
-      invalidChild: [`{{ name }} is not a valid child of EuiButtonGroup.`, `Allowed children: ${VALID_BUTTONS_LIST}.`, `Allowed wrappers: ${VALID_WRAPPERS_LIST}.`].join(' '),
-      invalidUnresolvableChild: [`{{ name }} cannot be verified as a valid child of EuiButtonGroup.`, `Allowed children: ${VALID_BUTTONS_LIST}.`, `Allowed wrappers: ${VALID_WRAPPERS_LIST}.`, `If {{ name }} is a shared button wrapper component only containing`, `valid button children, suppress this rule inline with a comment`, `explaining why it's valid.`, `// eslint-disable-next-line @elastic/eui/button-group-no-invalid-children -- SaveButton only wraps EuiButton`].join(' '),
-      invalidPopoverButton: [`{{ name }} is not a valid trigger button for EuiPopover in EuiButtonGroup.`, `The \`button\` prop must be ${VALID_BUTTONS_LIST}.`].join(' '),
-      invalidUnresolvablePopoverButton: [`{{ name }} cannot be verified as a valid trigger button for EuiPopover in EuiButtonGroup.`, `The \`button\` prop must be ${VALID_BUTTONS_LIST}.`, `If {{ name }} is a shared button wrapper component only containing`, `valid button children, suppress this rule inline with a comment`, `explaining why it's valid.`, `// eslint-disable-next-line @elastic/eui/button-group-no-invalid-children -- SaveButton only wraps EuiButton`].join(' '),
-      invalidWrapperChild: [`{{ name }} inside {{ wrapper }} is not a valid button for EuiButtonGroup.`, `The wrapper must contain ${VALID_BUTTONS_LIST}.`].join(' '),
-      invalidUnresolvableWrapperChild: [`{{ name }} inside {{ wrapper }} cannot be verified as a valid button for EuiButtonGroup.`, `The wrapper must contain ${VALID_BUTTONS_LIST}.`, `If {{ name }} is a shared button wrapper component, suppress this rule inline`, `with a comment explaining why it renders valid button children:`, `// eslint-disable-next-line @elastic/eui/button-group-no-invalid-children -- SaveButton wraps EuiButton`].join(' ')
+      invalidChild: [`{{ name }} is not a valid child of EuiButtonGroup.`, `Allowed children: {{ allowed }}.`, `Allowed wrappers: ${VALID_WRAPPERS_LIST}.`].join(' '),
+      invalidUnresolvableChild: [`{{ name }} cannot be verified as a valid child of EuiButtonGroup.`, `Allowed children: {{ allowed }}.`, `Allowed wrappers: ${VALID_WRAPPERS_LIST}.`, `If {{ name }} is a shared button wrapper component only containing`, `valid button children, suppress this rule inline with a comment`, `explaining why it's valid.`, `// eslint-disable-next-line @elastic/eui/button-group-no-invalid-children -- SaveButton only wraps EuiButton`].join(' '),
+      invalidPopoverButton: [`{{ name }} is not a valid trigger button for EuiPopover in EuiButtonGroup.`, `The \`button\` prop must be {{ allowed }}.`].join(' '),
+      invalidUnresolvablePopoverButton: [`{{ name }} cannot be verified as a valid trigger button for EuiPopover in EuiButtonGroup.`, `The \`button\` prop must be {{ allowed }}.`, `If {{ name }} is a shared button wrapper component only containing`, `valid button children, suppress this rule inline with a comment`, `explaining why it's valid.`, `// eslint-disable-next-line @elastic/eui/button-group-no-invalid-children -- SaveButton only wraps EuiButton`].join(' '),
+      invalidWrapperChild: [`{{ name }} inside {{ wrapper }} is not a valid button for EuiButtonGroup.`, `The wrapper must contain {{ allowed }}.`].join(' '),
+      invalidUnresolvableWrapperChild: [`{{ name }} inside {{ wrapper }} cannot be verified as a valid button for EuiButtonGroup.`, `The wrapper must contain {{ allowed }}.`, `If {{ name }} is a shared button wrapper component, suppress this rule inline`, `with a comment explaining why it renders valid button children:`, `// eslint-disable-next-line @elastic/eui/button-group-no-invalid-children -- SaveButton wraps EuiButton`].join(' '),
+      invalidMixedTypes: [`EuiButtonGroup with variant="{{ variant }}" must use a single button type throughout.`, `Use either all EuiButton or all EuiButtonIcon children — not both.`].join(' ')
     }
   },
   defaultOptions: []

package/lib/cjs/rules/button_group_selection_require_id.d.ts

@@ -0,0 +1,3 @@
+import { type TSESLint } from '@typescript-eslint/utils';
+export declare const ButtonGroupSelectionRequireId: TSESLint.RuleModule<"missingId", [], unknown, TSESLint.RuleListener>;
+//# sourceMappingURL=button_group_selection_require_id.d.ts.map

package/lib/cjs/rules/button_group_selection_require_id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button_group_selection_require_id.d.ts","sourceRoot":"","sources":["../../../src/rules/button_group_selection_require_id.ts"],"names":[],"mappings":"AAQA,OAAO,EAEL,KAAK,QAAQ,EAEd,MAAM,0BAA0B,CAAC;AA8BlC,eAAO,MAAM,6BAA6B,sEAiHtC,CAAC"}

package/lib/cjs/rules/button_group_selection_require_id.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonGroupSelectionRequireId = void 0;
+var _utils = require("@typescript-eslint/utils");
+var _has_spread = require("../utils/has_spread");
+var _flat_map = require("../utils/flat_map");
+var _get_element_name = require("../utils/get_element_name");
+var _get_attr_value = require("../utils/get_attr_value");
+var _has_meaningful_attr = require("../utils/has_meaningful_attr");
+var _collect_jsx_children = require("../utils/collect_jsx_children");
+var _button_group_constants = require("../utils/button_group_constants");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+function checkButtonForId(element, context) {
+  const name = (0, _get_element_name.getElementName)(element.openingElement);
+  if (name === null || !_button_group_constants.SELECTION_VALID_BUTTONS.has(name)) return;
+  const {
+    attributes
+  } = element.openingElement;
+  if ((0, _has_meaningful_attr.hasMeaningfulAttr)(element.openingElement, 'id')) return;
+  if ((0, _has_spread.hasSpread)(attributes)) return;
+  context.report({
+    node: element.openingElement,
+    messageId: 'missingId',
+    data: {
+      name
+    }
+  });
+}
+const ButtonGroupSelectionRequireId = exports.ButtonGroupSelectionRequireId = _utils.ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    return {
+      JSXElement(node) {
+        const {
+          openingElement
+        } = node;
+        if (openingElement.name.type !== 'JSXIdentifier' || openingElement.name.name !== _button_group_constants.BUTTON_GROUP) {
+          return;
+        }
+
+        // Only validate variant="selection". Dynamic or other variants are skipped.
+        const variant = (0, _get_attr_value.findAttrValue)(context, openingElement.attributes, 'variant');
+        if (variant !== 'selection') return;
+        const children = (0, _flat_map.flatMap)(node.children, c => (0, _collect_jsx_children.collectJsxChildren)(c, context.sourceCode));
+        if (children.length === 0) return;
+        for (const child of children) {
+          const name = (0, _get_element_name.getElementName)(child.openingElement);
+          if (name === null) continue;
+          if (_button_group_constants.SELECTION_VALID_BUTTONS.has(name)) {
+            checkButtonForId(child, context);
+            continue;
+          }
+          if (_button_group_constants.VALID_WRAPPERS.has(name)) {
+            if (name === 'EuiToolTip') {
+              const wrapperChildren = (0, _flat_map.flatMap)(child.children, c => (0, _collect_jsx_children.collectJsxChildren)(c, context.sourceCode));
+              for (const wrapperChild of wrapperChildren) {
+                checkButtonForId(wrapperChild, context);
+              }
+            } else if (name === 'EuiPopover') {
+              const buttonProp = child.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === 'button');
+              if (buttonProp?.value != null) {
+                const triggerElements = (0, _collect_jsx_children.collectJsxChildren)(buttonProp.value, context.sourceCode);
+                for (const triggerElement of triggerElements) {
+                  const triggerName = (0, _get_element_name.getElementName)(triggerElement.openingElement);
+                  if (triggerName === null) continue;
+                  if (_button_group_constants.SELECTION_VALID_BUTTONS.has(triggerName)) {
+                    checkButtonForId(triggerElement, context);
+                    continue;
+                  }
+                  if (triggerName === 'EuiToolTip') {
+                    // EuiToolTip wrapping the popover trigger — check its children.
+                    const tooltipChildren = (0, _flat_map.flatMap)(triggerElement.children, c => (0, _collect_jsx_children.collectJsxChildren)(c, context.sourceCode));
+                    for (const tooltipChild of tooltipChildren) {
+                      checkButtonForId(tooltipChild, context);
+                    }
+                  }
+                }
+              }
+            } else if (name === 'EuiCopy') {
+              // Children is a render prop; walkJsxChildren expands it.
+              const wrapperChildren = (0, _flat_map.flatMap)(child.children, c => (0, _collect_jsx_children.collectJsxChildren)(c, context.sourceCode));
+              for (const wrapperChild of wrapperChildren) {
+                checkButtonForId(wrapperChild, context);
+              }
+            }
+            continue;
+          }
+
+          // Non-button, non-wrapper children are skipped — the other rule handles those.
+        }
+      }
+    };
+  },
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce that EuiButtonGroup children have an id prop when variant="selection"'
+    },
+    schema: [],
+    messages: {
+      missingId: [`{{ name }} inside EuiButtonGroup with variant="selection" is missing a required id prop.`, `Each button must have a unique id so the group can track selection state.`].join(' ')
+    }
+  },
+  defaultOptions: []
+});