@elastic/eui 119.1.0 → 120.0.0

package/optimize/es/components/icon/svgs/product_tsvb.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M2 14h13v1H2a1 1 0 0 1-1-1V1h1z"/>
+  <path d="M5 6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm-1 6h1V7H4zm5-4a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1zm-1 4h1V9H8z"/>
+  <path d="M13.436 1.56a.88.88 0 0 1 .846-.064l.123.067.176.123A3.498 3.498 0 0 1 14 7.66v3.84a1.5 1.5 0 0 1-3 0V7.66a3.498 3.498 0 0 1-.405-6.097l.123-.067a.88.88 0 0 1 .847.065.97.97 0 0 1 .435.817V4h1V2.378c0-.34.17-.645.435-.817M14 4v1h-3V2.5a2.502 2.502 0 0 0 .667 4.358l.333.118V11.5a.5.5 0 0 0 1 0V6.976l.333-.118A2.502 2.502 0 0 0 14 2.5z"/>
+</svg>

package/optimize/es/components/icon/svgs/push.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M15 13h-1V3h1z"/>
+  <path d="M7.617 3.076a1 1 0 0 1 1.09.217l4 4a1 1 0 0 1 0 1.414l-4 4A1 1 0 0 1 7 12v-2H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5V4a1 1 0 0 1 .617-.924M8 7H2v2h6v3l4-4-4-4z"/>
+</svg>

package/optimize/es/components/icon/svgs/transition_right_in.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="m3.293 8 2.853 2.854.708-.707L5.207 8.5H9v-1H5.207l1.647-1.646-.708-.708z"/>
+  <path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm12 12.207V14h-.793L11 11.793v-1.586zM11.793 14H11v-.793zM10 14H2V2h8zm4-3.793v1.586l-3-3V7.207zm0-3v1.586l-3-3V4.207zm0-3v1.586l-3-3V2h.793zm0-1.414L13.207 2H14z"/>
+</svg>

package/optimize/es/components/icon/svgs/transition_right_out.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M5.146 5.854 6.793 7.5H3v1h3.793l-1.647 1.646.708.707L8.707 8 5.854 5.146z"/>
+  <path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm12 12.207V14h-.793L11 11.793v-1.586zM11.793 14H11v-.793zM10 14H2V2h8zm4-3.793v1.586l-3-3V7.207zm0-3v1.586l-3-3V4.207zm0-3v1.586l-3-3V2h.793zm0-1.414L13.207 2H14z"/>
+</svg>

package/optimize/es/components/icon/svgs/wrench.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M11.28 2.013 10 3.293V6h2.707l1.28-1.28a3 3 0 1 1-2.707-2.707Zm1.165-.744a4 4 0 0 0-5.31 4.767l-5.55 5.55a2 2 0 1 0 2.83 2.828l5.549-5.55A4.005 4.005 0 0 0 15 5c0-.509-.095-.996-.27-1.445a.5.5 0 0 0-.819-.173L12.293 5H11V3.707l1.618-1.618a.5.5 0 0 0-.173-.82ZM8.968 8.446l-5.26 5.261a1 1 0 0 1-1.415-1.414l5.26-5.261c.345.582.833 1.07 1.415 1.414Z" clip-rule="evenodd"/>
+  <path d="M13.121 7.121a3 3 0 0 0 .874-2.287L11.707 7.12 8.878 4.293l2.288-2.288A3 3 0 0 0 8.173 6.01l.106.298-5.986 5.986a1 1 0 0 0 1.414 1.414l5.986-5.986.298.105a3 3 0 0 0 3.13-.705m.707.708a4 4 0 0 1-3.863 1.034l-5.55 5.551a2 2 0 1 1-2.83-2.828l5.552-5.551a3.997 3.997 0 0 1 4.328-5.008l.143.028a.88.88 0 0 1 .62.628.97.97 0 0 1-.258.933l-1.677 1.677 1.414 1.414 1.677-1.677a.97.97 0 0 1 .933-.26c.29.079.54.3.628.622l.027.143.02.22a4 4 0 0 1-1.164 3.074"/>
 </svg>

package/optimize/es/components/resizable_container/resizable_collapse_button.js

@@ -38,12 +38,12 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
   var NOT_COLLAPSED_ICON = '';
   switch (externalPosition) {
     case 'before':
-      COLLAPSED_ICON = isHorizontal ? 'menuLeft' : 'menuUp';
-      NOT_COLLAPSED_ICON = isHorizontal ? 'menuRight' : 'menuDown';
+      COLLAPSED_ICON = isHorizontal ? 'transitionLeftOut' : 'transitionTopOut';
+      NOT_COLLAPSED_ICON = isHorizontal ? 'transitionLeftIn' : 'transitionTopIn';
       break;
     case 'after':
-      COLLAPSED_ICON = isHorizontal ? 'menuRight' : 'menuDown';
-      NOT_COLLAPSED_ICON = isHorizontal ? 'menuLeft' : 'menuUp';
+      COLLAPSED_ICON = isHorizontal ? 'transitionRightOut' : 'transitionBottomOut';
+      NOT_COLLAPSED_ICON = isHorizontal ? 'transitionRightIn' : 'transitionBottomIn';
       break;
   }
   var classes = classNames('euiResizableCollapseButton', className);

package/optimize/es/components/text_diff/text_diff.js

@@ -10,7 +10,7 @@ var _excluded = ["className", "insertComponent", "deleteComponent", "sameCompone
  */
 
 import React, { useMemo } from 'react';
-import Diff from 'text-diff';
+import DiffMatchPatch from 'diff-match-patch';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
 import { euiTextDiffStyles } from './text_diff.styles';
@@ -30,11 +30,9 @@ export var useEuiTextDiff = function useEuiTextDiff(_ref) {
     timeout = _ref$timeout === void 0 ? 0.1 : _ref$timeout,
     rest = _objectWithoutProperties(_ref, _excluded);
   var textDiff = useMemo(function () {
-    var diff = new Diff({
-      timeout: timeout
-    }); // options may be passed to constructor
-
-    return diff.main(beforeText, afterText);
+    var diff = new DiffMatchPatch();
+    diff.Diff_Timeout = timeout;
+    return diff.diff_main(beforeText, afterText);
   }, [beforeText, afterText, timeout]); // produces diff array
 
   var styles = useEuiMemoizedStyles(euiTextDiffStyles);

package/optimize/lib/components/button/button.js

@@ -13,7 +13,7 @@ var _button = require("../../global_styling/mixins/_button");
 var _button_display = require("./button_display/_button_display");
 var _use_button_common_props = require("./use_button_common_props");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "buttonRef", "size", "color", "fill", "isDisabled", "hasAriaDisabled", "fullWidth"];
+var _excluded = ["className", "buttonRef", "size", "color", "fill", "isDisabled", "hasAriaDisabled", "fullWidth", "id", "onClick", "isSelected"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -42,6 +42,9 @@ var EuiButton = exports.EuiButton = function EuiButton(_ref) {
     _isDisabled = _ref.isDisabled,
     _hasAriaDisabled = _ref.hasAriaDisabled,
     _fullWidth = _ref.fullWidth,
+    id = _ref.id,
+    _onClick = _ref.onClick,
+    _isSelected = _ref.isSelected,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useEuiButtonCommonPr = (0, _use_button_common_props.useEuiButtonCommonProps)({
       size: _size,
@@ -50,16 +53,21 @@ var EuiButton = exports.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 = (0, _button.useEuiButtonColorCSS)({
     display: fill ? 'fill' : 'base'
   })[isDisabled ? 'disabled' : color];
@@ -67,13 +75,17 @@ var EuiButton = exports.EuiButton = function EuiButton(_ref) {
   var classes = (0, _classnames.default)('euiButton', className);
   var cssStyles = [buttonColorStyles, buttonFocusStyle];
   return (0, _react2.jsx)(_button_display.EuiButtonDisplay, (0, _extends2.default)({
+    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.displayName = 'EuiButton';

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

@@ -13,12 +13,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 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
@@ -130,32 +131,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 = (0, _objectWithoutProperties2.default)(_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),
@@ -168,8 +199,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", {

package/optimize/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/optimize/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/optimize/lib/components/button/button_icon/button_icon.js

@@ -17,7 +17,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
@@ -48,8 +48,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useEuiButtonCommonPr = (0, _use_button_common_props.useEuiButtonCommonProps)({
       size: _size,
@@ -59,14 +61,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,
@@ -134,7 +141,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;
@@ -145,6 +154,8 @@ 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);
 };

package/optimize/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
   };
 }

package/optimize/lib/components/date_picker/react-datepicker/src/month_dropdown.js

@@ -117,7 +117,6 @@ var MonthDropdown = exports.default = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)(_this, "renderDropdown", function (monthNames) {
       return (0, _react2.jsx)(_month_dropdown_options.default, {
         key: "dropdown",
-        ref: "options",
         month: _this.props.month,
         monthNames: monthNames,
         onChange: _this.onChange,

package/optimize/lib/components/date_picker/react-datepicker/src/month_dropdown_options.js

@@ -58,7 +58,6 @@ var MonthDropdownOptions = exports.default = /*#__PURE__*/function (_React$Compo
             "react-datepicker__month-option--preselected": _this.props.accessibleMode && _this.state.preSelection === i
           }),
           key: month,
-          ref: month,
           onClick: _this.onChange.bind(_this, i)
         }, _this.props.month === i ? (0, _react2.jsx)("span", {
           className: "react-datepicker__month-option--selected"

package/optimize/lib/components/date_picker/react-datepicker/src/month_year_dropdown.js

@@ -129,7 +129,6 @@ var MonthYearDropdown = exports.default = /*#__PURE__*/function (_React$Componen
     (0, _defineProperty2.default)(_this, "renderDropdown", function () {
       return (0, _react2.jsx)(_month_year_dropdown_options.default, {
         key: "dropdown",
-        ref: "options",
         date: _this.props.date,
         dateFormat: _this.props.dateFormat,
         onChange: _this.onChange,

package/optimize/lib/components/date_picker/react-datepicker/src/year_dropdown.js

@@ -127,7 +127,6 @@ var YearDropdown = exports.default = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)(_this, "renderDropdown", function () {
       return (0, _react2.jsx)(_year_dropdown_options.default, {
         key: "dropdown",
-        ref: "options",
         year: _this.props.year,
         onChange: _this.onChange,
         onCancel: _this.toggleDropdown,

package/optimize/lib/components/date_picker/react-datepicker/test/helper_components/custom_input.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@emotion/react");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*
+ * The MIT License (MIT)
+ * 
+ * Copyright (c) 2018 HackerOne Inc and individual contributors
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * 
+ */
+var CustomInput = /*#__PURE__*/function (_React$Component) {
+  function CustomInput() {
+    (0, _classCallCheck2.default)(this, CustomInput);
+    return _callSuper(this, CustomInput, arguments);
+  }
+  (0, _inherits2.default)(CustomInput, _React$Component);
+  return (0, _createClass2.default)(CustomInput, [{
+    key: "onChange",
+    value: function onChange(e) {
+      var args = [e, e.target.value];
+      if (this.props.onChangeArgs) {
+        args = this.props.onChangeArgs(e);
+      }
+      this.props.onChange.apply(this, args);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(this.props), this.props));
+      delete props.onChangeArgs;
+      return (0, _react2.jsx)("input", (0, _extends2.default)({}, props, {
+        onChange: this.onChange.bind(this)
+      }));
+    }
+  }]);
+}(_react.default.Component);
+CustomInput.propTypes = {
+  onChange: _propTypes.default.func,
+  onChangeArgs: _propTypes.default.func
+};
+var _default = exports.default = CustomInput;
+module.exports = exports.default;

package/optimize/lib/components/date_picker/react-datepicker/test/test_wrapper.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@emotion/react");
+/*
+ * The MIT License (MIT)
+ * 
+ * Copyright (c) 2018 HackerOne Inc and individual contributors
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * 
+ */
+
+var TestWrapper = function TestWrapper(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)("div", {
+    className: "test-wrapper"
+  }, children);
+};
+TestWrapper.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = exports.default = TestWrapper;
+module.exports = exports.default;