@elastic/eui 119.1.0 → 120.0.0

package/lib/components/button/button_group/button_group.js

@@ -10,12 +10,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
-var _button_group_button = require("./button_group_button");
 var _button_context = require("../button_context");
+var _button_group_button = require("./button_group_button");
+var _use_button_group_selection = require("./use_button_group_selection");
 var _button_group = require("./button_group.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelectedMap", "isDisabled", "hasAriaDisabled", "isFullWidth", "isIconOnly", "legend", "name", "onChange", "options", "type"],
-  _excluded2 = ["className", "children", "legend", "buttonSize", "variant", "gutterSize", "isDisabled", "hasAriaDisabled", "isFullWidth", "showDividers", "wrap", "layout", "onChange"];
+  _excluded2 = ["className", "children", "legend", "buttonSize", "variant", "gutterSize", "isDisabled", "hasAriaDisabled", "isFullWidth", "showDividers", "wrap", "layout", "display", "type", "idSelected", "idToSelectedMap", "onChange"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -252,32 +253,62 @@ var EuiButtonGroupChildren = exports.EuiButtonGroupChildren = function EuiButton
     wrap = _ref2$wrap === void 0 ? true : _ref2$wrap,
     _ref2$layout = _ref2.layout,
     layout = _ref2$layout === void 0 ? 'horizontal' : _ref2$layout,
-    _onChange = _ref2.onChange,
+    _ref2$display = _ref2.display,
+    display = _ref2$display === void 0 ? 'regular' : _ref2$display,
+    type = _ref2.type,
+    idSelected = _ref2.idSelected,
+    idToSelectedMap = _ref2.idToSelectedMap,
+    onChange = _ref2.onChange,
     rest = _objectWithoutProperties(_ref2, _excluded2);
   var isSegmented = variant === 'segmented';
+  var isSelection = variant === 'selection';
+  var hasSegmentedStyle = isSegmented || isSelection;
   var hasGutterSize = variant === 'default' && gutterSize !== 'none';
+  var _useEuiButtonGroupSel = (0, _use_button_group_selection.useEuiButtonGroupSelection)({
+      type: type,
+      idSelected: idSelected,
+      idToSelectedMap: idToSelectedMap,
+      onChange: onChange
+    }),
+    isSelected = _useEuiButtonGroupSel.isSelected,
+    _onSelect = _useEuiButtonGroupSel.onSelect;
   var wrapperCssStyles = [_button_group.euiButtonGroupStyles.euiButtonGroup, isFullWidth && _button_group.euiButtonGroupStyles.fullWidth];
   var styles = (0, _services.useEuiMemoizedStyles)(_button_group.euiButtonGroupButtonsStyles);
-  var cssStyles = [styles.euiButtonGroup__buttons, hasGutterSize && styles.gutterSize[gutterSize], isSegmented && !wrap && styles.noWrap];
+  var cssStyles = [styles.euiButtonGroup__buttons, hasGutterSize && styles.gutterSize[gutterSize], hasSegmentedStyle && !wrap && styles.noWrap];
   var containerCssStyles = [styles.euiButtonGroup__container, isFullWidth && layout !== 'vertical' && styles.fullWidth];
   var classes = (0, _classnames.default)('euiButtonGroup', {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var contextValue = (0, _react.useMemo)(function () {
-    return _objectSpread({
+    return _objectSpread(_objectSpread(_objectSpread({
       size: buttonSize,
       isDisabled: isDisabled || undefined,
       hasAriaDisabled: hasAriaDisabled || undefined,
       fullWidth: isFullWidth
-    }, isSegmented && {
+    }, (isSegmented || isSelection) && {
+      color: 'text'
+    }), isSegmented && {
       display: 'base',
-      color: 'text',
       fill: false
+    }), isSelection && {
+      getSelectionProps: function getSelectionProps(id) {
+        var selected = isSelected(id);
+        var isInverse = display === 'inverse';
+        var hasFill = selected && display === 'highlighted';
+        return {
+          isSelected: selected,
+          fill: isInverse ? false : hasFill,
+          display: isInverse ? 'base' : hasFill ? 'fill' : undefined,
+          onSelect: function onSelect() {
+            return _onSelect(id);
+          }
+        };
+      }
     });
-  }, [buttonSize, isDisabled, hasAriaDisabled, isFullWidth, isSegmented]);
+  }, [buttonSize, isDisabled, hasAriaDisabled, isFullWidth, isSegmented, isSelection, isSelected, _onSelect, display]);
 
-  // wrap children in a wrapper to be able to apply required styles
-  var children = isSegmented ? flattenButtonGroupChildren(_children).map(function (child, index) {
+  // wrap children in a wrapper to apply required inset styles
+  var children = isSegmented || isSelection ? flattenButtonGroupChildren(_children).map(function (child, index) {
     var _child$key;
     return (0, _react2.jsx)("div", {
       key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : "euiButtonGroupItem-".concat(index),
@@ -290,8 +321,9 @@ var EuiButtonGroupChildren = exports.EuiButtonGroupChildren = function EuiButton
     role: "group",
     "data-variant": variant,
     "data-size": buttonSize,
-    "data-layout": isSegmented ? layout : undefined,
-    "data-dividers": isSegmented && showDividers || undefined,
+    "data-display": isSelection ? display : undefined,
+    "data-layout": hasSegmentedStyle ? layout : undefined,
+    "data-dividers": hasSegmentedStyle && showDividers || undefined,
     "aria-label": legend,
     "aria-disabled": isDisabled || undefined
   }, rest), (0, _react2.jsx)("div", {
@@ -333,14 +365,6 @@ EuiButtonGroupChildren.propTypes = {
        * @default 's'
        */
   buttonSize: _propTypes.default.oneOf(["s", "m"]),
-  /**
-       * Defines the type of a button group, which renders visually and functionally different:
-       * - default: arranges buttons in a horizontal row with optional gutter via `gutterSize`
-       * - segmented: arranges buttons in a horizontal or vertical row with no gutter.
-       *   The buttons are placed inset and dividers can optionally be shown between them.
-       * @default 'default'
-       */
-  variant: _propTypes.default.oneOf(["default", "segmented"]),
   /**
        * Defines the gutter size between children buttons.
        * Applies only when `variant="default"`.
@@ -349,36 +373,94 @@ EuiButtonGroupChildren.propTypes = {
   gutterSize: _propTypes.default.any,
   /**
        * Expands the whole group to the full width of the container.
-       * `EuiButton` children will stretch to fill the available space via their `fullWidth` prop.
+       * Only `EuiButton` children will stretch to fill the available space.
+       * `EuiButtonIcon` groups will not stretch.
        * Does not apply when `layout="vertical"`.
        * @default false
        */
   isFullWidth: _propTypes.default.bool,
   /**
        * Shows dividers between buttons.
-       * Applies only when `variant="segmented"`.
+       * Does not apply when `variant="default"`.
        * @default false
        */
   showDividers: _propTypes.default.bool,
   /**
        * Defines the layout direction of the button group.
        * `layout="vertical"` should only be used with EuiButtonIcon children.
-       * Applies only when `variant="segmented"`.
+       * Does not apply when `variant="default"`.
        * @default 'horizontal'
        */
   layout: _propTypes.default.oneOf(["horizontal", "vertical"]),
   /**
        * Defines if buttons wrap or shrink.
-       * Applies only when `variant="segmented"`.
+       * Does not apply when `variant="default"`.
        * @default true
        */
   wrap: _propTypes.default.bool,
   /**
-       * Callback fired when a child button is selected.
-       * Returns the `id` of the clicked option.
-       * Applies only for `variant="selection"`.
-       */
-  onChange: _propTypes.default.func
+           * Defines the type of a button group, which renders visually and functionally different:
+           * - default: arranges buttons in a horizontal row with optional gutter via `gutterSize`
+           * - segmented: arranges buttons in a horizontal or vertical row with no gutter.
+           *   The buttons are placed inset and dividers can optionally be shown between them.
+           * - selection: arranges buttons inset with toggle selection state (single or multi).
+           *   Each child button must have a unique `id` prop.
+           * @default 'default'
+           */
+  variant: _propTypes.default.oneOfType([_propTypes.default.oneOf(["selection"]), _propTypes.default.oneOf(["default", "segmented"])]),
+  /**
+           * Determines selection behavior.
+           * With `'multi'` multiple buttons can be selected simultaneously.
+           * Applies only when `variant="selection"`.
+           */
+  /**
+           * Determines selection behavior.
+           * With `'single'` only one button can be selected at a time.
+           * Applies only when `variant="selection"`.
+           * @default 'single'
+           */
+  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(["single"]), _propTypes.default.oneOf(["multi"])]),
+  /**
+           * The currently selected button `id`.
+           * Omit or pass `undefined` for no initial selection.
+           * Applies only when `variant="selection"` and `type="single"`.
+           */
+  idSelected: _propTypes.default.string,
+  /**
+     * Visual display variant for the selection container background.
+     * Applies only when `variant="selection"`.
+     * - `'regular'`: subdued toggle state, light container background
+     * - `'highlighted'`: highlighted toggle state, light container background
+     * - `'inverse'`: light toggle state, dark container background
+     * @default 'regular'
+     */
+  /**
+     * Visual display variant for the selection container background.
+     * Applies only when `variant="selection"`.
+     * - `'regular'`: subdued toggle state, light container background
+     * - `'highlighted'`: highlighted toggle state, light container background
+     * - `'inverse'`: light toggle state, dark container background
+     * @default 'regular'
+     */
+  display: _propTypes.default.oneOf(["regular", "highlighted", "inverse"]),
+  /**
+     * Callback fired when a child button is selected.
+     * Returns the `id` of the clicked option.
+     * Applies only when `variant="selection"`.
+     */
+  /**
+     * Callback fired when a child button is selected.
+     * Returns the `id` of the clicked option.
+     * Applies only when `variant="selection"`.
+     */
+  onChange: _propTypes.default.func,
+  /**
+           * A map of button `id`s to their selected boolean values.
+           * Omit or pass `{}` for no initial selection.
+           * The consumer must update this value via `onChange` to reflect new selections.
+           * Applies only when `variant="selection"` and `type="multi"`.
+           */
+  idToSelectedMap: _propTypes.default.any
 };
 // Renders either the (legacy) `options` API or the `children` API depending on which props are provided.
 var EuiButtonGroup = exports.EuiButtonGroup = function EuiButtonGroup(props) {

package/lib/components/button/button_group/button_group.styles.js

@@ -19,8 +19,9 @@ var hasButtonOnlySelector = ':not(:has(.euiButtonIcon))';
 var hasButtonIconOnlySelector = ':not(:has(.euiButton, .euiButtonEmpty))';
 var buttonItemSelector = '.euiButtonGroup__item, .euiToolTipAnchor, .euiPopover, .euiButton';
 var buttonOnlyItemSelector = "*:is(".concat(buttonItemSelector, "):not(:has(.euiButtonIcon))");
+var segmentedStyledSelector = "*:is([data-variant='segmented'], [data-variant='selection'])";
 var euiButtonGroupStyles = exports.euiButtonGroupStyles = {
-  euiButtonGroup: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;&:where([data-variant='segmented']){&", hasButtonIconOnlySelector, "{display:flex;}};label:euiButtonGroup;"),
+  euiButtonGroup: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;&:where(", segmentedStyledSelector, "){&", hasButtonIconOnlySelector, "{display:flex;}};label:euiButtonGroup;"),
   fullWidth: process.env.NODE_ENV === "production" ? {
     name: "jl0hie-fullWidth",
     styles: "display:block;label:fullWidth;"
@@ -73,13 +74,25 @@ var euiButtonGroupButtonsStyles = exports.euiButtonGroupButtonsStyles = function
   }), ";\n        inline-size: calc(\n          100% + ").concat((0, _global_styling.mathWithUnits)(containerPadding, function (x) {
     return x * 2;
   }), "\n        );\n        block-size: ").concat(euiTheme.border.width.thin, ";\n        border-block-start: ").concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBasePlain, ";\n        pointer-events: none;\n      }\n\n      /* inline border */\n      &::after {\n        content: '';\n        position: absolute;\n        inset-inline-start: -").concat(dividerOffset, ";\n        block-size: calc(\n          var(--euiButtonGroupButtonInsetSize) - ").concat(euiTheme.size.s, "\n        );\n        inline-size: ").concat(euiTheme.border.width.thin, ";\n        border-inline-start: ").concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBasePlain, ";\n        pointer-events: none;\n      }\n    }\n\n    &:where([data-layout='horizontal'] &) {\n      &:where(:is(").concat(hasButtonIconOnlySelector, ") &) {\n        .euiButtonGroup__item::before {\n          inset-inline-start: 0;\n          inline-size: 100%;\n        }\n      }\n    }\n\n    &:where([data-layout='vertical'] &) {\n      &:where(:is(").concat(hasButtonIconOnlySelector, ") &) {\n        .euiButtonGroup__item::before {\n          inset-inline-start: auto;\n          inline-size: calc(\n            var(--euiButtonGroupButtonInsetSize) - ").concat(euiTheme.size.s, "\n          );\n        }\n      }\n    }\n  ");
-  var segmentedChildrenStyles = "\n    /* Buttons are used inset and shouldn't have their own borders */\n    .euiButton,\n    .euiButtonIcon {\n      border: none;\n      pointer-events: auto; /* Ensure buttons are still clickable in jsdom */\n\n      &::before {\n        border-radius: inherit;\n      }\n    }\n\n    /* Adjust children for inset behavior */\n    ".concat(buttonItemSelector, ", \n    .euiButtonIcon {\n      display: inline-flex;\n      align-items: center;\n      block-size: var(--euiButtonGroupButtonInsetSize);\n      border-radius: ").concat(buttonGroupVariables.radius.inner, ";\n    }\n\n    .euiButtonIcon {\n      inline-size: var(--euiButtonGroupButtonInsetSize);\n    }\n\n    /* Only non-icon buttons auto-grow/shrink */\n    .euiButton,\n    ").concat(buttonOnlyItemSelector, " {\n      flex: 1;\n      min-inline-size: auto;\n    }\n  ");
+
+  // Shared inset styles for both segmented and selection variants.
+  var segmentedChildrenStyles = "\n    /* Buttons are used inset and shouldn't have their own borders */\n    .euiButton,\n    .euiButtonIcon {\n      border: none;\n      pointer-events: auto; /* Ensure buttons are still clickable in jsdom */\n\n      &::before {\n        border-radius: inherit;\n      }\n\n      &:focus-visible {\n        outline-offset: 0;\n      }\n    }\n\n    /* Adjust children for inset behavior */\n    ".concat(buttonItemSelector, ",\n    .euiButtonIcon {\n      display: inline-flex;\n      align-items: center;\n      block-size: var(--euiButtonGroupButtonInsetSize);\n      border-radius: ").concat(buttonGroupVariables.radius.inner, ";\n    }\n\n    .euiButtonIcon {\n      inline-size: var(--euiButtonGroupButtonInsetSize);\n    }\n\n    /* Only non-icon buttons auto-grow/shrink */\n    .euiButton,\n    ").concat(buttonOnlyItemSelector, " {\n      flex: 1;\n      min-inline-size: auto;\n    }\n  ");
   return {
     // Base
-    euiButtonGroup__container: /*#__PURE__*/(0, _react.css)("&:where([data-variant='segmented'] &){position:relative;display:inline-flex;align-items:center;max-inline-size:100%;padding:", splitPadding, ";border-radius:", buttonGroupVariables.radius.outer, ";background-color:", euiTheme.colors.backgroundBasePlain, ";&:where([data-size='s'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.s, ";min-block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.m, ";min-block-size:", buttonSizeMap.m.height, ";}&::after{content:'';position:absolute;inset:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBasePlain, ";border-radius:inherit;pointer-events:none;}};label:euiButtonGroup__container;"),
-    euiButtonGroup__buttons: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " display:flex;align-items:center;&:where([data-variant='default'] &){flex-wrap:wrap;}&:where([data-variant='segmented'] &){position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:", buttonGroupVariables.gap.regular, ";max-inline-size:100%;padding:", splitPadding, ";overflow:hidden;*:where(.euiButton, .euiButtonIcon):is(", _global_styling.euiDisabledSelector, "){background-color:transparent;}&:where([data-dividers='true'] &){", dividerStyles, ";}", segmentedChildrenStyles, " &:where([data-layout='vertical'] &){flex-direction:column;.euiButtonGroup__item{justify-content:center;}}};label:euiButtonGroup__buttons;"),
-    noWrap: /*#__PURE__*/(0, _react.css)("&:where([data-variant='segmented'] &){flex-wrap:nowrap;", buttonOnlyItemSelector, "{flex:0 1 auto;min-inline-size:0;.euiButton .eui-textTruncate{min-inline-size:0;}}&", hasButtonIconOnlySelector, "{overflow-inline:auto;}};label:noWrap;"),
-    fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", (0, _global_styling.logicalCSS)('width', '100%'), ";}&:where([data-variant='default'] &){.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;}}&:where([data-variant='segmented'] &){&", hasButtonIconOnlySelector, "{inline-size:auto;}&", hasButtonOnlySelector, "{.euiButtonGroup__buttons{inline-size:100%;}", buttonOnlyItemSelector, "{flex-grow:1;}}};label:fullWidth;"),
+    euiButtonGroup__container: /*#__PURE__*/(0, _react.css)("&:where(", segmentedStyledSelector, " &){position:relative;display:inline-flex;align-items:center;max-inline-size:100%;padding:", splitPadding, ";border-radius:", buttonGroupVariables.radius.outer, ";background-color:", euiTheme.colors.backgroundBasePlain, ";&:where([data-size='s'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.s, ";min-block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.m, ";min-block-size:", buttonSizeMap.m.height, ";}&::after{content:'';position:absolute;inset:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBasePlain, ";border-radius:inherit;pointer-events:none;}}&:where([data-variant='selection'][data-display='inverse'] &){background-color:", euiTheme.colors.backgroundBaseSubdued, ";};label:euiButtonGroup__container;"),
+    euiButtonGroup__buttons: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " display:flex;align-items:center;&:where([data-variant='default'] &){flex-wrap:wrap;}&:where(", segmentedStyledSelector, " &){position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:", buttonGroupVariables.gap.regular, ";max-inline-size:100%;padding:", splitPadding, ";overflow:hidden;", segmentedChildrenStyles, " *:where(.euiButton, .euiButtonIcon):is(", _global_styling.euiDisabledSelector, "){background-color:transparent;}&:where([data-dividers='true'] &){", dividerStyles, ";}&:where([data-layout='vertical'] &){flex-direction:column;.euiButtonGroup__item{justify-content:center;}}}&:where([data-variant='segmented'] &){*:where(.euiButton, .euiButtonIcon):is(", _global_styling.euiDisabledSelector, "){background-color:transparent;}}&:where([data-variant='selection'] &){*:where(.euiButton, .euiButtonIcon){&:is(", _global_styling.euiDisabledSelector, "){", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      forced: "\n              opacity: 0.5;\n            "
+    }), ";}&:is([aria-pressed='true']){", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      forced: "\n              --highContrastHoverIndicatorColor: ".concat(euiTheme.colors.textInverse, ";\n              ").concat((0, _high_contrast.preventForcedColors)(euiThemeContext), "\n              background-color: ").concat(euiTheme.colors.fullShade, ";\n              color: ").concat(euiTheme.colors.emptyShade, ";\n            ")
+    }), ";}&:is([aria-pressed='false']){background-color:transparent;}}}&:where([data-variant='selection'][data-display='regular'] &){*:where(.euiButton, .euiButtonIcon):is([aria-pressed='true']){background-color:", euiTheme.colors.backgroundLightText, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: "\n              background-color: ".concat(euiTheme.colors.backgroundLightText, ";\n            "),
+      preferred: "\n              border: ".concat(euiTheme.border.thin, ";\n            "),
+      forced: "\n              background-color: ".concat(euiTheme.colors.fullShade, ";\n              border: none;\n            ")
+    }), ";}}&:where([data-variant='selection'][data-display='inverse'] &){*:where(.euiButton, .euiButtonIcon):is([aria-pressed='true']){", (0, _global_styling.euiShadowXSmall)(euiThemeContext), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      forced: "\n              border: none;\n            "
+    }), ";}};label:euiButtonGroup__buttons;"),
+    noWrap: /*#__PURE__*/(0, _react.css)("&:where(", segmentedStyledSelector, " &){flex-wrap:nowrap;", buttonOnlyItemSelector, "{flex:0 1 auto;min-inline-size:0;.euiButton .eui-textTruncate{min-inline-size:0;}}&", hasButtonIconOnlySelector, "{overflow-inline:auto;}};label:noWrap;"),
+    fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", (0, _global_styling.logicalCSS)('width', '100%'), ";}&:where([data-variant='default'] &){.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;}}&:where(", segmentedStyledSelector, " &){&", hasButtonIconOnlySelector, "{inline-size:auto;}&", hasButtonOnlySelector, "{.euiButtonGroup__buttons{inline-size:100%;}", buttonOnlyItemSelector, "{flex-grow:1;}}};label:fullWidth;"),
     // Sizes
     size: {
       m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", _highContrastStyles(euiThemeContext), ";;label:m;"),

package/lib/components/button/button_group/use_button_group_selection.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiButtonGroupSelection = useEuiButtonGroupSelection;
+var _react = require("react");
+/*
+ * 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.
+ */
+
+/**
+ * Purely controlled selection state for `EuiButtonGroup` with `variant="selection"`.
+ * The consumer owns state via `idSelected` (single) or `idToSelectedMap` (multi)
+ * and updates it through `onChange`.
+ */
+function useEuiButtonGroupSelection(_ref) {
+  var type = _ref.type,
+    idSelected = _ref.idSelected,
+    idToSelectedMap = _ref.idToSelectedMap,
+    onChange = _ref.onChange;
+  var isSelected = (0, _react.useCallback)(function (id) {
+    return type === 'multi' ? !!(idToSelectedMap !== null && idToSelectedMap !== void 0 && idToSelectedMap[id]) : id === idSelected;
+  }, [type, idSelected, idToSelectedMap]);
+  var onSelect = (0, _react.useCallback)(function (id) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(id);
+  }, [onChange]);
+  return {
+    isSelected: isSelected,
+    onSelect: onSelect
+  };
+}

package/lib/components/button/button_icon/button_icon.js

@@ -15,7 +15,7 @@ var _loading = require("../../loading");
 var _use_button_common_props = require("../use_button_common_props");
 var _button_icon = require("./button_icon.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "disabled", "hasAriaDisabled", "href", "type", "display", "target", "rel", "size", "buttonRef", "isSelected", "isLoading"],
+var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "disabled", "hasAriaDisabled", "href", "type", "display", "target", "rel", "size", "buttonRef", "isSelected", "isLoading", "id", "onClick"],
   _excluded2 = ["ref"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -50,8 +50,10 @@ var EuiButtonIcon = exports.EuiButtonIcon = function EuiButtonIcon(_ref) {
     _ref$size = _ref.size,
     _size = _ref$size === void 0 ? 'xs' : _ref$size,
     buttonRef = _ref.buttonRef,
-    isSelected = _ref.isSelected,
+    _isSelected = _ref.isSelected,
     isLoading = _ref.isLoading,
+    id = _ref.id,
+    _onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useEuiButtonCommonPr = (0, _use_button_common_props.useEuiButtonCommonProps)({
       size: _size,
@@ -61,14 +63,19 @@ var EuiButtonIcon = exports.EuiButtonIcon = function EuiButtonIcon(_ref) {
       display: _display,
       href: href,
       disabled: disabled,
-      isLoading: isLoading
+      isLoading: isLoading,
+      id: id,
+      isSelected: _isSelected,
+      onClick: _onClick
     }),
     size = _useEuiButtonCommonPr.size,
     color = _useEuiButtonCommonPr.color,
     isDisabled = _useEuiButtonCommonPr.isDisabled,
     _useEuiButtonCommonPr2 = _useEuiButtonCommonPr.hasAriaDisabled,
     hasAriaDisabled = _useEuiButtonCommonPr2 === void 0 ? false : _useEuiButtonCommonPr2,
-    display = _useEuiButtonCommonPr.display;
+    display = _useEuiButtonCommonPr.display,
+    isSelected = _useEuiButtonCommonPr.isSelected,
+    onClick = _useEuiButtonCommonPr.onClick;
   var _useEuiDisabledElemen = (0, _useEuiDisabledElement.useEuiDisabledElement)({
       isDisabled: isDisabled,
       hasAriaDisabled: hasAriaDisabled,
@@ -136,7 +143,9 @@ var EuiButtonIcon = exports.EuiButtonIcon = function EuiButtonIcon(_ref) {
       href: href,
       target: target,
       rel: secureRel,
-      ref: setCombinedRef
+      ref: setCombinedRef,
+      id: id,
+      onClick: onClick
     }, rest), buttonIcon);
   }
   var buttonType;
@@ -147,14 +156,16 @@ var EuiButtonIcon = exports.EuiButtonIcon = function EuiButtonIcon(_ref) {
     className: classes,
     "aria-pressed": isSelected,
     type: type,
-    ref: setCombinedRef
+    ref: setCombinedRef,
+    id: id,
+    onClick: onClick
   }, rest, disabledButtonProps), buttonIcon);
 };
 EuiButtonIcon.propTypes = {
   type: _propTypes.default.any,
   href: _propTypes.default.string,
   onClick: _propTypes.default.func,
-  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "addToChat", "addToDashboard", "advancedSettingsApp", "agentApp", "aggregate", "alignBottom", "alignBottomLeft", "alignBottomRight", "alignCenterHorizontal", "alignCenterVertical", "alignLeft", "alignRight", "alignTop", "alignTopLeft", "alignTopRight", "analyzeEvent", "annotation", "chartAnomaly", "anomalySwimLane", "apmApp", "chartWaterfall", "appSearchApp", "apps", "chevronSingleDown", "chevronSingleLeft", "chevronSingleRight", "chevronSingleUp", "chevronLimitLeft", "chevronLimitRight", "article", "asterisk", "at", "archive", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "bell", "bellSlash", "beta", "bolt", "boxesVertical", "branch", "briefcase", "branchUser", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "chartChangePoint", "chartArea", "visArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "visBarVertical", "chartBarVerticalStack", "chartGauge", "visGauge", "chartHeatmap", "chartLine", "visLine", "chartPie", "visPie", "chartTagCloud", "chartThreshold", "check", "checkCircle", "checkCircleFill", "popper", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "clockControl", "cloud", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "paintBucket", "commandLine", "comment", "editorComment", "compare", "processor", "compute", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastFill", "controls", "copy", "crossProjectSearch", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossCircle", "crosshair", "cursorDefault", "money", "scissors", "dashboardApp", "dashedCircle", "dataVisualizer", "database", "display", "devToolsApp", "discoverApp", "distributeHorizontal", "distributeVertical", "download", "drag", "dragHorizontal", "dragVertical", "document", "documentation", "documents", "dot", "dotInCircle", "chevronDoubleLeft", "chevronDoubleRight", "ellipsis", "textAlignCenter", "textAlignLeft", "textAlignRight", "textBold", "listCheck", "textHeading", "textItalic", "listNumber", "redo", "textStrike", "table", "visTable", "textUnderline", "undo", "listBullet", "list", "mail", "empty", "emsApp", "endpoint", "query", "eraser", "error", "errorFill", "esqlVis", "logIn", "logOut", "maximize", "export", "upload", "external", "eye", "eyeSlash", "faceHappy", "faceNeutral", "faceSad", "tableInfo", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "flask", "flag", "fleetApp", "fold", "folder", "folderClosed", "folderClose", "folderCheck", "folderExclamation", "folderOpen", "folderOpened", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "globe", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "help", "home", "hourglass", "if", "info", "image", "index", "indexClose", "tableCross", "indexEdit", "tablePencil", "indexManagementApp", "mapping", "indexOpen", "tablePlus", "indexPatternApp", "indexRollupApp", "indexRuntime", "tablePlay", "indexSettings", "tableGear", "tableTime", "infinity", "inputOutput", "inspect", "ip", "key", "keyboard", "queryField", "kqlFunction", "queryOperand", "querySelector", "queryValue", "kubernetesNode", "kubernetesPod", "cube", "rocket", "layers", "lensApp", "text", "lineBreak", "lineBreakSlash", "lineDash", "lineDot", "lineSolid", "link", "linkSlash", "lock", "lockOpen", "pattern", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVectorDB", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashInput", "logstashOutput", "queue", "machineLearningApp", "magnet", "magnify", "search", "magnifyExclamation", "magnifyMinus", "magnifyPlus", "managementApp", "map", "mapMarker", "waypoint", "megaphone", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusCircle", "minusSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "vectorTriangle", "notebookApp", "number", "wifiSlash", "wifi", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "documentsCheck", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipelineApp", "pivot", "play", "plugs", "plus", "plusCircle", "plusSquare", "presentation", "productAgent", "productCloudInfra", "productDashboard", "productDiscover", "productML", "productStreamsClassic", "productStreamsWired", "send", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "routeSplit", "save", "savedObjectsApp", "scale", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignalDetected", "securitySignalResolved", "server", "sessionViewer", "shard", "share", "significantEvents", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "star", "starEmpty", "starEmptySpace", "starFill", "starFilled", "starFillSpace", "starMinusEmpty", "starMinusFill", "starPlusEmpty", "starPlusFill", "stats", "stop", "stopFill", "stopSlash", "storage", "string", "sun", "swatchInput", "symlink", "tableDensityHigh", "tableDensityLow", "tableOfContents", "tag", "tear", "thermometer", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelinePointer", "timelionApp", "refreshTime", "transitionBottomIn", "transitionBottomOut", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "translate", "trash", "unfold", "upgradeAssistantApp", "uptimeApp", "user", "users", "usersRolesApp", "unarchive", "vectorSquare", "videoPlayer", "visGoal", "chartMetric", "visTimelion", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "warningFill", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workflow", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired,
+  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "addToChat", "addToDashboard", "advancedSettingsApp", "agentApp", "aggregate", "alignBottom", "alignBottomLeft", "alignBottomRight", "alignCenterHorizontal", "alignCenterVertical", "alignLeft", "alignRight", "alignTop", "alignTopLeft", "alignTopRight", "analyzeEvent", "annotation", "chartAnomaly", "anomalySwimLane", "apmApp", "chartWaterfall", "appSearchApp", "apps", "chevronSingleDown", "chevronSingleLeft", "chevronSingleRight", "chevronSingleUp", "chevronLimitLeft", "chevronLimitRight", "asterisk", "at", "archive", "article", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "bell", "bellSlash", "beta", "bolt", "boxesVertical", "branch", "briefcase", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "chartChangePoint", "chartArea", "visArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "visBarVertical", "chartBarVerticalStack", "chartGauge", "visGauge", "chartHeatmap", "chartLine", "visLine", "chartPie", "visPie", "chartTagCloud", "chartThreshold", "check", "checkCircle", "checkCircleFill", "popper", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "clockControl", "cloud", "cloudBolt", "cloudDrizzle", "cloudRain", "cloudStormy", "cloudSun", "cloudSunny", "cluster", "code", "codeApp", "paintBucket", "commandLine", "comment", "editorComment", "compare", "processor", "compute", "consoleApp", "container", "continuityAbove", "continuityWithin", "contrast", "contrastFill", "controls", "copy", "crossProjectSearch", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossCircle", "crosshair", "cursorDefault", "money", "scissors", "dashboardApp", "dashedCircle", "dataVisualizer", "database", "display", "devToolsApp", "discoverApp", "distributeHorizontal", "distributeVertical", "download", "drag", "dragHorizontal", "dragVertical", "document", "documentation", "documents", "dot", "dotInCircle", "chevronDoubleLeft", "chevronDoubleRight", "ellipsis", "textAlignCenter", "textAlignLeft", "textAlignRight", "textBold", "listCheck", "textHeading", "textItalic", "listNumber", "redo", "textStrike", "table", "visTable", "textUnderline", "undo", "listBullet", "list", "mail", "empty", "emsApp", "endpoint", "query", "eraser", "error", "errorFill", "esqlVis", "logIn", "logOut", "maximize", "export", "upload", "external", "eye", "eyeSlash", "faceHappy", "faceNeutral", "faceSad", "tableInfo", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "flask", "flag", "fleetApp", "fold", "folder", "folderClosed", "folderClose", "folderCheck", "folderExclamation", "folderOpen", "folderOpened", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "gear", "gisApp", "globe", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "help", "home", "hourglass", "if", "info", "image", "index", "indexClose", "tableCross", "indexEdit", "tablePencil", "indexManagementApp", "mapping", "indexOpen", "tablePlus", "indexPatternApp", "indexRollupApp", "indexRuntime", "tablePlay", "indexSettings", "tableGear", "tableTime", "infinity", "inputOutput", "inspect", "ip", "key", "keyboard", "queryField", "kqlFunction", "queryOperand", "querySelector", "queryValue", "kubernetesNamespace", "kubernetesNode", "kubernetesPod", "cube", "rocket", "layers", "lensApp", "text", "lineBreak", "lineBreakSlash", "lineDash", "lineDot", "lineSolid", "link", "linkSlash", "lock", "lockOpen", "pattern", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVectorDB", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashInput", "logstashOutput", "queue", "machineLearningApp", "magnify", "search", "magnifyExclamation", "magnifyMinus", "magnifyPlus", "managementApp", "map", "mapMarker", "waypoint", "megaphone", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusCircle", "minusSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "vectorTriangle", "notebookApp", "number", "wifiSlash", "wifi", "outlierDetectionJob", "package", "packetbeatApp", "pagesSelect", "documentsCheck", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipelineApp", "pivot", "play", "plugs", "plus", "plusCircle", "plusSquare", "presentation", "productAgent", "productCloudInfra", "productDashboard", "productDiscover", "productML", "productStreamsClassic", "productStreamsWired", "productTimelion", "productTSVB", "push", "send", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "routeSplit", "save", "scale", "savedObjectsApp", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignalDetected", "server", "sessionViewer", "shard", "share", "significantEvents", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "star", "starEmpty", "starEmptySpace", "starFill", "starFilled", "starFillSpace", "starMinusEmpty", "starMinusFill", "starPlusEmpty", "starPlusFill", "stats", "stop", "stopFill", "stopSlash", "storage", "string", "sun", "swatchInput", "symlink", "tableDensityHigh", "tableDensityLow", "tableOfContents", "tag", "thermometer", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelinePointer", "timelionApp", "refreshTime", "transitionBottomIn", "transitionBottomOut", "transitionLeftIn", "transitionLeftOut", "transitionRightIn", "transitionRightOut", "transitionTopIn", "transitionTopOut", "translate", "trash", "unfold", "upgradeAssistantApp", "uptimeApp", "user", "users", "usersRolesApp", "unarchive", "vectorSquare", "videoPlayer", "visGoal", "chartMetric", "visTimelion", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "warningFill", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workflow", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired,
   /**
      * Any of the named color palette options.
      *

package/lib/components/button/use_button_common_props.js

@@ -20,31 +20,40 @@ var _button_display = require("./button_display/_button_display");
  * popover boundary isolation and isDisabled computation.
  */
 function useEuiButtonCommonProps(_ref) {
-  var _groupContext$isDisab, _groupContext$size, _groupContext$color, _groupContext$hasAria, _groupContext$fullWid, _groupContext$display, _groupContext$fill;
+  var _groupContext$isDisab, _groupContext$getSele, _groupContext$size, _groupContext$color, _groupContext$hasAria, _groupContext$fullWid, _ref2, _groupContext$display, _selectionProps$isSel;
   var size = _ref.size,
     color = _ref.color,
     _isDisabled = _ref.isDisabled,
     hasAriaDisabled = _ref.hasAriaDisabled,
     fullWidth = _ref.fullWidth,
     fill = _ref.fill,
-    display = _ref.display,
+    _display = _ref.display,
     href = _ref.href,
     disabled = _ref.disabled,
-    isLoading = _ref.isLoading;
-  var buttonContext = (0, _react.useContext)(_button_context.EuiButtonContext);
-  var groupContext = buttonContext;
+    isLoading = _ref.isLoading,
+    id = _ref.id,
+    _isSelected = _ref.isSelected,
+    _onClick = _ref.onClick;
+  var groupContext = (0, _react.useContext)(_button_context.EuiButtonContext);
   var isDisabled = (0, _button_display.isButtonDisabled)({
     href: href,
     isDisabled: ((_groupContext$isDisab = groupContext.isDisabled) !== null && _groupContext$isDisab !== void 0 ? _groupContext$isDisab : _isDisabled) || disabled,
     isLoading: isLoading
   });
+  var selectionProps = id != null ? (_groupContext$getSele = groupContext.getSelectionProps) === null || _groupContext$getSele === void 0 ? void 0 : _groupContext$getSele.call(groupContext, id) : undefined;
+  var onClick = selectionProps ? function (event) {
+    selectionProps.onSelect();
+    _onClick === null || _onClick === void 0 || _onClick(event);
+  } : _onClick;
   return {
     size: (_groupContext$size = groupContext.size) !== null && _groupContext$size !== void 0 ? _groupContext$size : size,
     color: (_groupContext$color = groupContext.color) !== null && _groupContext$color !== void 0 ? _groupContext$color : color,
     isDisabled: isDisabled,
     hasAriaDisabled: (_groupContext$hasAria = groupContext.hasAriaDisabled) !== null && _groupContext$hasAria !== void 0 ? _groupContext$hasAria : hasAriaDisabled,
     fullWidth: (_groupContext$fullWid = groupContext.fullWidth) !== null && _groupContext$fullWid !== void 0 ? _groupContext$fullWid : fullWidth,
-    display: (_groupContext$display = groupContext.display) !== null && _groupContext$display !== void 0 ? _groupContext$display : display,
-    fill: (_groupContext$fill = groupContext.fill) !== null && _groupContext$fill !== void 0 ? _groupContext$fill : fill
+    display: (_ref2 = (_groupContext$display = groupContext.display) !== null && _groupContext$display !== void 0 ? _groupContext$display : selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.display) !== null && _ref2 !== void 0 ? _ref2 : _display,
+    fill: (selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.fill) !== undefined ? selectionProps.fill : groupContext.fill !== undefined ? groupContext.fill : fill,
+    isSelected: (_selectionProps$isSel = selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.isSelected) !== null && _selectionProps$isSel !== void 0 ? _selectionProps$isSel : _isSelected,
+    onClick: onClick
   };
 }