@elastic/eui 119.1.0 → 120.0.0

package/es/components/button/button.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "buttonRef", "size", "color", "fill", "isDisabled", "hasAriaDisabled", "fullWidth"];
+var _excluded = ["className", "buttonRef", "size", "color", "fill", "isDisabled", "hasAriaDisabled", "fullWidth", "id", "onClick", "isSelected"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -38,6 +38,9 @@ export var EuiButton = function EuiButton(_ref) {
     _isDisabled = _ref.isDisabled,
     _hasAriaDisabled = _ref.hasAriaDisabled,
     _fullWidth = _ref.fullWidth,
+    id = _ref.id,
+    _onClick = _ref.onClick,
+    _isSelected = _ref.isSelected,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useEuiButtonCommonPr = useEuiButtonCommonProps({
       size: _size,
@@ -46,16 +49,21 @@ export var EuiButton = function EuiButton(_ref) {
       hasAriaDisabled: _hasAriaDisabled,
       fullWidth: _fullWidth,
       fill: _fill,
+      isSelected: _isSelected,
       href: rest.href,
       disabled: rest.disabled,
-      isLoading: rest.isLoading
+      isLoading: rest.isLoading,
+      id: id,
+      onClick: _onClick
     }),
     size = _useEuiButtonCommonPr.size,
     color = _useEuiButtonCommonPr.color,
     isDisabled = _useEuiButtonCommonPr.isDisabled,
     hasAriaDisabled = _useEuiButtonCommonPr.hasAriaDisabled,
     fullWidth = _useEuiButtonCommonPr.fullWidth,
-    fill = _useEuiButtonCommonPr.fill;
+    fill = _useEuiButtonCommonPr.fill,
+    isSelected = _useEuiButtonCommonPr.isSelected,
+    onClick = _useEuiButtonCommonPr.onClick;
   var buttonColorStyles = useEuiButtonColorCSS({
     display: fill ? 'fill' : 'base'
   })[isDisabled ? 'disabled' : color];
@@ -63,14 +71,18 @@ export var EuiButton = function EuiButton(_ref) {
   var classes = classNames('euiButton', className);
   var cssStyles = [buttonColorStyles, buttonFocusStyle];
   return ___EmotionJSX(EuiButtonDisplay, _extends({
+    ref: buttonRef,
     className: classes,
     css: cssStyles,
-    ref: buttonRef,
     size: size,
     isDisabled: isDisabled,
     hasAriaDisabled: hasAriaDisabled,
     fullWidth: fullWidth
-  }, rest));
+  }, rest, {
+    id: id,
+    isSelected: isSelected,
+    onClick: onClick
+  }));
 };
 EuiButton.propTypes = {
   href: PropTypes.string,

package/es/components/button/button_display/_button_display_content.js

@@ -83,7 +83,7 @@ EuiButtonDisplayContent.propTypes = {
   /**
      * Any `type` accepted by EuiIcon
      */
-  iconType: PropTypes.oneOfType([PropTypes.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.string.isRequired, PropTypes.elementType.isRequired]),
+  iconType: PropTypes.oneOfType([PropTypes.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.string.isRequired, PropTypes.elementType.isRequired]),
   /**
      * Can only be one side `left` or `right`
      */

package/es/components/button/button_empty/button_empty.js

@@ -188,7 +188,7 @@ EuiButtonEmpty.propTypes = {
   /**
      * Any `type` accepted by EuiIcon
      */
-  iconType: PropTypes.oneOfType([PropTypes.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.string.isRequired, PropTypes.elementType.isRequired]),
+  iconType: PropTypes.oneOfType([PropTypes.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.string.isRequired, PropTypes.elementType.isRequired]),
   /**
      * Can only be one side `left` or `right`
      */

package/es/components/button/button_group/button_group.js

@@ -1,6 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -22,8 +22,9 @@ import PropTypes from "prop-types";
 import React, { useMemo } from 'react';
 import { useEuiMemoizedStyles } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
-import { EuiButtonGroupButton } from './button_group_button';
 import { EuiButtonContext } from '../button_context';
+import { EuiButtonGroupButton } from './button_group_button';
+import { useEuiButtonGroupSelection } from './use_button_group_selection';
 import { euiButtonGroupStyles, euiButtonGroupButtonsStyles } from './button_group.styles';
 
 // removes outer fragment wrappers only; no nested traversal of children
@@ -245,32 +246,62 @@ export var EuiButtonGroupChildren = function EuiButtonGroupChildren(_ref2) {
     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 = useEuiButtonGroupSelection({
+      type: type,
+      idSelected: idSelected,
+      idToSelectedMap: idToSelectedMap,
+      onChange: onChange
+    }),
+    isSelected = _useEuiButtonGroupSel.isSelected,
+    _onSelect = _useEuiButtonGroupSel.onSelect;
   var wrapperCssStyles = [euiButtonGroupStyles.euiButtonGroup, isFullWidth && euiButtonGroupStyles.fullWidth];
   var styles = useEuiMemoizedStyles(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 = classNames('euiButtonGroup', {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var contextValue = 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 ___EmotionJSX("div", {
       key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : "euiButtonGroupItem-".concat(index),
@@ -283,8 +314,9 @@ export var EuiButtonGroupChildren = function EuiButtonGroupChildren(_ref2) {
     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), ___EmotionJSX("div", {
@@ -326,14 +358,6 @@ EuiButtonGroupChildren.propTypes = {
        * @default 's'
        */
   buttonSize: PropTypes.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.oneOf(["default", "segmented"]),
   /**
        * Defines the gutter size between children buttons.
        * Applies only when `variant="default"`.
@@ -342,36 +366,94 @@ EuiButtonGroupChildren.propTypes = {
   gutterSize: PropTypes.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.bool,
   /**
        * Shows dividers between buttons.
-       * Applies only when `variant="segmented"`.
+       * Does not apply when `variant="default"`.
        * @default false
        */
   showDividers: PropTypes.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.oneOf(["horizontal", "vertical"]),
   /**
        * Defines if buttons wrap or shrink.
-       * Applies only when `variant="segmented"`.
+       * Does not apply when `variant="default"`.
        * @default true
        */
   wrap: PropTypes.bool,
   /**
-       * Callback fired when a child button is selected.
-       * Returns the `id` of the clicked option.
-       * Applies only for `variant="selection"`.
-       */
-  onChange: PropTypes.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.oneOfType([PropTypes.oneOf(["selection"]), PropTypes.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.oneOfType([PropTypes.oneOf(["single"]), PropTypes.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.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.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.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.any
 };
 // Renders either the (legacy) `options` API or the `children` API depending on which props are provided.
 export var EuiButtonGroup = function EuiButtonGroup(props) {

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

@@ -8,15 +8,16 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiButtonSizeMap, euiDisabledSelector, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiButtonSizeMap, euiDisabledSelector, euiShadowXSmall, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { highContrastModeStyles, preventForcedColors } from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../../form/form.styles';
 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'])";
 export var euiButtonGroupStyles = {
-  euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;&:where([data-variant='segmented']){&", hasButtonIconOnlySelector, "{display:flex;}};label:euiButtonGroup;"),
+  euiButtonGroup: /*#__PURE__*/css("display:inline-block;", 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;"
@@ -69,13 +70,25 @@ export var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(eu
   }), ";\n        inline-size: calc(\n          100% + ").concat(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__*/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__*/css(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(", 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__*/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__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", 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__*/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__*/css(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(", 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(", euiDisabledSelector, "){background-color:transparent;}}&:where([data-variant='selection'] &){*:where(.euiButton, .euiButtonIcon){&:is(", euiDisabledSelector, "){", highContrastModeStyles(euiThemeContext, {
+      forced: "\n              opacity: 0.5;\n            "
+    }), ";}&:is([aria-pressed='true']){", highContrastModeStyles(euiThemeContext, {
+      forced: "\n              --highContrastHoverIndicatorColor: ".concat(euiTheme.colors.textInverse, ";\n              ").concat(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, ";", 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']){", euiShadowXSmall(euiThemeContext), " ", highContrastModeStyles(euiThemeContext, {
+      forced: "\n              border: none;\n            "
+    }), ";}};label:euiButtonGroup__buttons;"),
+    noWrap: /*#__PURE__*/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__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", 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__*/css("border-radius:", euiTheme.border.radius.medium, ";", _highContrastStyles(euiThemeContext), ";;label:m;"),

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

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