@elastic/eui 91.0.0 → 91.2.0

package/optimize/lib/components/datagrid/controls/column_sorting.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridColumnSorting = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _button = require("../../button");
 var _drag_and_drop = require("../../drag_and_drop");
@@ -17,6 +16,7 @@ var _i18n = require("../../i18n");
 var _popover = require("../../popover");
 var _text = require("../../text");
 var _token = require("../../token");
+var _data_grid_toolbar_control = require("./data_grid_toolbar_control");
 var _column_sorting_draggable = require("./column_sorting_draggable");
 var _data_grid_schema = require("../utils/data_grid_schema");
 var _react2 = require("@emotion/react");
@@ -61,15 +61,9 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
     }
   }, [columns, sorting]);
   var sortingButtonText = (0, _i18n.useEuiI18n)('euiColumnSorting.button', 'Sort fields');
-  var sortingButtonTextActive = (0, _i18n.useEuiI18n)('euiColumnSorting.buttonActive', function (_ref2) {
-    var numberOfSortedFields = _ref2.numberOfSortedFields;
-    return "".concat(numberOfSortedFields, " field").concat(numberOfSortedFields === 1 ? '' : 's', " sorted");
-  }, {
-    numberOfSortedFields: sorting != null ? sorting.columns.length : 0
-  });
   if (sorting == null) return null;
-  var activeColumnIds = new Set(sorting.columns.map(function (_ref3) {
-    var id = _ref3.id;
+  var activeColumnIds = new Set(sorting.columns.map(function (_ref2) {
+    var id = _ref2.id;
     return id;
   }));
   var _columns$reduce = columns.reduce(function (acc, column) {
@@ -84,24 +78,21 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
       inactiveColumns: []
     }),
     inactiveColumns = _columns$reduce.inactiveColumns;
-  var onDragEnd = function onDragEnd(_ref4) {
-    var sourceIndex = _ref4.source.index,
-      destination = _ref4.destination;
+  var onDragEnd = function onDragEnd(_ref3) {
+    var sourceIndex = _ref3.source.index,
+      destination = _ref3.destination;
     if (destination) {
       var destinationIndex = destination.index;
       var nextColumns = (0, _drag_and_drop.euiDragDropReorder)(sorting.columns, sourceIndex, destinationIndex);
       sorting.onSort(nextColumns);
     }
   };
-  var controlBtnClasses = (0, _classnames.default)('euiDataGrid__controlBtn', {
-    'euiDataGrid__controlBtn--active': sorting.columns.length > 0
-  });
   var schemaDetails = function schemaDetails(id) {
     return schema.hasOwnProperty(id) && schema[id].columnType != null ? (0, _data_grid_schema.getDetailsForSchema)(schemaDetectors, schema[id].columnType) : null;
   };
-  var inactiveSortableColumns = inactiveColumns.filter(function (_ref5) {
-    var id = _ref5.id,
-      isSortable = _ref5.isSortable;
+  var inactiveSortableColumns = inactiveColumns.filter(function (_ref4) {
+    var id = _ref4.id,
+      isSortable = _ref4.isSortable;
     var schemaDetail = schemaDetails(id);
     var sortable = true;
     if (isSortable != null) {
@@ -120,24 +111,22 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
     anchorPosition: "downLeft",
     panelPaddingSize: "s",
     hasDragDrop: true,
-    button: (0, _react2.jsx)(_button.EuiButtonEmpty, {
-      size: "xs",
+    button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
+      badgeContent: sorting.columns.length,
       iconType: "sortable",
-      color: "text",
-      className: controlBtnClasses,
       "data-test-subj": "dataGridColumnSortingButton",
       onClick: function onClick() {
         return setIsOpen(!isOpen);
       }
-    }, sorting.columns.length > 0 ? sortingButtonTextActive : sortingButtonText)
+    }, sortingButtonText)
   }, sorting.columns.length > 0 ? (0, _react2.jsx)(_drag_and_drop.EuiDragDropContext, {
     onDragEnd: onDragEnd
   }, (0, _react2.jsx)(_drag_and_drop.EuiDroppable, {
     droppableId: "columnSorting",
     className: "euiDataGrid__controlScroll"
-  }, (0, _react2.jsx)(_react.default.Fragment, null, sorting.columns.map(function (_ref6, index) {
-    var id = _ref6.id,
-      direction = _ref6.direction;
+  }, (0, _react2.jsx)(_react.default.Fragment, null, sorting.columns.map(function (_ref5, index) {
+    var id = _ref5.id,
+      direction = _ref5.direction;
     return (0, _react2.jsx)(_column_sorting_draggable.EuiDataGridColumnSortingDraggable, {
       key: id,
       id: id,
@@ -190,9 +179,9 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
     return (0, _react2.jsx)("div", {
       className: "euiDataGridColumnSorting__fieldList",
       role: "listbox"
-    }, inactiveSortableColumns.map(function (_ref7) {
-      var id = _ref7.id,
-        defaultSortDirection = _ref7.defaultSortDirection;
+    }, inactiveSortableColumns.map(function (_ref6) {
+      var id = _ref6.id,
+        defaultSortDirection = _ref6.defaultSortDirection;
       return (0, _react2.jsx)("button", {
         key: id,
         className: "euiDataGridColumnSorting__field",

package/optimize/lib/components/datagrid/controls/data_grid_toolbar_control.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiDataGridToolbarControl = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@emotion/react");
+var _button = require("../../button");
+var _badge = require("../../badge");
+var _i18n = require("../../i18n");
+var _excluded = ["children", "className", "badgeContent", "textProps"];
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+                                                                                                                                                                                                                                                                                           * 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.
+                                                                                                                                                                                                                                                                                           */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1vci2nd-EuiDataGridToolbarControl",
+  styles: "cursor:inherit;label:EuiDataGridToolbarControl;"
+} : {
+  name: "1vci2nd-EuiDataGridToolbarControl",
+  styles: "cursor:inherit;label:EuiDataGridToolbarControl;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "8fsqop-EuiDataGridToolbarControl",
+  styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:EuiDataGridToolbarControl;"
+} : {
+  name: "8fsqop-EuiDataGridToolbarControl",
+  styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:EuiDataGridToolbarControl;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var EuiDataGridToolbarControl = function EuiDataGridToolbarControl(_ref3) {
+  var children = _ref3.children,
+    className = _ref3.className,
+    badgeContent = _ref3.badgeContent,
+    textProps = _ref3.textProps,
+    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  var classes = (0, _classnames.default)('euiDataGridToolbarControl', className);
+  var badgeAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridToolbarControl.badgeAriaLabel', 'Active: {count}', {
+    count: typeof badgeContent === 'string' ? betterScreenReaderSlashes(badgeContent) : badgeContent
+  });
+  return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
+    className: classes,
+    size: "xs",
+    color: "text",
+    textProps: false
+    // Underline actual text, but not the badge
+    ,
+    css: _ref2
+  }, rest), (0, _react2.jsx)("span", (0, _extends2.default)({}, textProps, {
+    className: (0, _classnames.default)('euiDataGridToolbarControl__text', 'eui-textTruncate', textProps && textProps.className)
+  }), children), Boolean(badgeContent) && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
+    className: "euiDataGridToolbarControl__badge",
+    css: _ref,
+    color: "subdued",
+    "aria-label": "- ".concat(badgeAriaLabel) // Punctuation helps add pauses for screen readers
+    ,
+    role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
+  }, badgeContent));
+};
+
+// The columns control specifically passes (e.g.) `5/10` when some columns
+// are being hidden. We can make this a bit more legible to SRs with this quick util
+exports.EuiDataGridToolbarControl = EuiDataGridToolbarControl;
+var betterScreenReaderSlashes = function betterScreenReaderSlashes(badgeContent) {
+  return badgeContent.replaceAll('/', ' out of ');
+};

package/optimize/lib/components/datagrid/controls/display_selector.js

@@ -219,7 +219,6 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
     }, (0, _react2.jsx)(_button.EuiButtonIcon, {
       size: "xs",
       iconType: "controlsHorizontal",
-      className: "euiDataGrid__controlBtn",
       color: "text",
       "data-test-subj": "dataGridDisplaySelectorButton",
       onClick: function onClick() {

package/optimize/lib/components/datagrid/controls/fullscreen_selector.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridFullScreenSelector = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _tool_tip = require("../../tool_tip");
 var _button = require("../../button");
@@ -34,9 +33,6 @@ var useDataGridFullScreenSelector = function useDataGridFullScreenSelector() {
     _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 2),
     fullScreenButton = _useEuiI18n2[0],
     fullScreenButtonActive = _useEuiI18n2[1];
-  var controlBtnClasses = (0, _classnames.default)('euiDataGrid__controlBtn', {
-    'euiDataGrid__controlBtn--active': isFullScreen
-  });
   var fullScreenSelector = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       content: isFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, fullScreenButtonActive, " (", (0, _react2.jsx)("kbd", null, "esc"), ")") : fullScreenButton,
@@ -45,14 +41,14 @@ var useDataGridFullScreenSelector = function useDataGridFullScreenSelector() {
       size: "xs",
       iconType: isFullScreen ? 'fullScreenExit' : 'fullScreen',
       color: "text",
-      className: controlBtnClasses,
+      "aria-pressed": isFullScreen,
       "data-test-subj": "dataGridFullScreenButton",
       onClick: function onClick() {
         return setIsFullScreen(!isFullScreen);
       },
       "aria-label": isFullScreen ? fullScreenButtonActive : fullScreenButton
     }));
-  }, [isFullScreen, controlBtnClasses, fullScreenButton, fullScreenButtonActive]);
+  }, [isFullScreen, fullScreenButton, fullScreenButtonActive]);
   var handleGridKeyDown = (0, _react.useCallback)(function (event) {
     switch (event.key) {
       case _services.keys.ESCAPE:

package/optimize/lib/components/datagrid/controls/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "EuiDataGridToolbar", {
     return _data_grid_toolbar.EuiDataGridToolbar;
   }
 });
+Object.defineProperty(exports, "EuiDataGridToolbarControl", {
+  enumerable: true,
+  get: function get() {
+    return _data_grid_toolbar_control.EuiDataGridToolbarControl;
+  }
+});
 Object.defineProperty(exports, "checkOrDefaultToolBarDisplayOptions", {
   enumerable: true,
   get: function get() {
@@ -56,4 +62,5 @@ var _column_sorting = require("./column_sorting");
 var _display_selector = require("./display_selector");
 var _keyboard_shortcuts = require("./keyboard_shortcuts");
 var _fullscreen_selector = require("./fullscreen_selector");
-var _data_grid_toolbar = require("./data_grid_toolbar");
+var _data_grid_toolbar = require("./data_grid_toolbar");
+var _data_grid_toolbar_control = require("./data_grid_toolbar_control");

package/optimize/lib/components/datagrid/index.js

@@ -7,7 +7,8 @@ var _exportNames = {
   EuiDataGrid: true,
   useDataGridColumnSelector: true,
   useDataGridColumnSorting: true,
-  useDataGridDisplaySelector: true
+  useDataGridDisplaySelector: true,
+  EuiDataGridToolbarControl: true
 };
 Object.defineProperty(exports, "EuiDataGrid", {
   enumerable: true,
@@ -15,6 +16,12 @@ Object.defineProperty(exports, "EuiDataGrid", {
     return _data_grid.EuiDataGrid;
   }
 });
+Object.defineProperty(exports, "EuiDataGridToolbarControl", {
+  enumerable: true,
+  get: function get() {
+    return _controls.EuiDataGridToolbarControl;
+  }
+});
 Object.defineProperty(exports, "useDataGridColumnSelector", {
   enumerable: true,
   get: function get() {

package/optimize/lib/components/datagrid/utils/row_heights.js

@@ -157,7 +157,7 @@ var RowHeightUtils = /*#__PURE__*/function () {
       var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_ROW_HEIGHT;
       var _visibleRowIndex = arguments.length > 3 ? arguments[3] : undefined;
       var rowHeights = this.heightsCache.get(rowIndex) || new Map();
-      var adaptedHeight = Math.ceil(height + this.styles.paddingTop + this.styles.paddingBottom);
+      var adaptedHeight = Math.ceil(height);
       if (rowHeights.get(colId) === adaptedHeight) {
         return false;
       } else {

package/optimize/lib/components/date_picker/super_date_picker/super_update_button.js

@@ -149,7 +149,7 @@ var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
       }, sharedButtonProps, {
         fill: fill,
         textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {
-          className: (0, _classnames.default)('euiScreenReaderOnly', restTextProps === null || restTextProps === void 0 ? void 0 : restTextProps.className)
+          className: (0, _classnames.default)('euiScreenReaderOnly', restTextProps && restTextProps.className)
         })
       }, rest), buttonText)), (0, _react2.jsx)(_responsive2.EuiHideFor, {
         sizes: responsive || 'none'

package/optimize/lib/components/error_boundary/error_boundary.a11y.js

@@ -44,7 +44,7 @@ describe('EuiErrorBoundary', function () {
       cy.checkAxe();
     });
     it('has zero violations and accepts focus when the button is pressed', function () {
-      cy.realPress('Tab');
+      cy.get('button').first().focus();
       cy.realPress('Enter');
       cy.get('pre.euiCodeBlock__pre').should('have.focus');
       cy.checkAxe();

package/optimize/lib/components/expression/expression.a11y.js

@@ -204,8 +204,7 @@ describe('EuiExpression', function () {
       cy.checkAxe();
     });
     it('has zero violations when first popover is interacted with by keyboard', function () {
-      cy.realPress('Tab');
-      cy.get('button').contains(/When count\(\)/i).should('have.focus');
+      cy.get('button').contains(/When count\(\)/i).focus();
       cy.realPress('Enter');
       cy.get('div[data-test-subj="cy-expression-popover-1"]').should('exist');
       cy.realPress('Tab');
@@ -215,8 +214,7 @@ describe('EuiExpression', function () {
       cy.checkAxe();
     });
     it('has zero violations when second popover is interacted with by keyboard', function () {
-      cy.repeatRealPress('Tab');
-      cy.get('button').contains(/Is above 100/i).should('have.focus');
+      cy.get('button').contains(/Is above 100/i).focus();
       cy.realPress('Enter');
       cy.get('div[data-test-subj="cy-expression-popover-2"]').should('exist');
       cy.realPress('Tab');

package/optimize/lib/components/filter_group/filter_button.js

@@ -75,7 +75,7 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
   });
   var buttonTextClassNames = (0, _classnames.default)('euiFilterButton__text', {
     'euiFilterButton__text-hasNotification': showBadge
-  }, textProps === null || textProps === void 0 ? void 0 : textProps.className);
+  }, textProps && textProps.className);
   var badgeContent = showBadge && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
     className: "euiFilterButton__notification",
     css: [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled, ";label:badgeContent;"],
@@ -105,7 +105,7 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
     type: type,
     textProps: _objectSpread(_objectSpread({}, textProps), {}, {
       className: buttonTextClassNames,
-      css: [textStyles.euiFilterButton__text, showBadge && textStyles.hasNotification, textProps === null || textProps === void 0 ? void 0 : textProps.css]
+      css: [textStyles.euiFilterButton__text, showBadge && textStyles.hasNotification, textProps && textProps.css]
     }),
     contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
       css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]

package/optimize/lib/components/focus_trap/focus_trap.a11y.js

@@ -106,12 +106,12 @@ describe('EuiFocusTrap', function () {
   });
   describe('Accessibility checks for keyboard navigation', function () {
     it('allows the button outside the FocusTrap to receive focus', function () {
-      cy.repeatRealPress('Tab', 5);
-      cy.get('button[data-test-subj="cy-external-button"]').should('have.focus');
+      cy.get('button[data-test-subj="cy-external-button"]').focus();
       cy.checkAxe();
     });
     it('prevents the button outside the FocusTrap from receiving focus', function () {
-      cy.repeatRealPress('Tab', 4);
+      cy.get('input[data-test-subj="cy-input-one"]').focus();
+      cy.repeatRealPress('Tab', 3);
       cy.realPress('Enter');
       cy.realPress('Tab');
       cy.get('input[data-test-subj="cy-input-one"]').should('have.focus');

package/optimize/lib/components/form/range/range.a11y.js

@@ -55,15 +55,13 @@ describe('Single EuiRange', function () {
   });
   describe('Keyboard accessibility check', function () {
     it('has zero violations when the range slider is increased', function () {
-      cy.realPress('Tab');
-      cy.get('input#cy-range-single').should('have.focus');
+      cy.get('input#cy-range-single').focus();
       cy.repeatRealPress('ArrowRight', 10);
       cy.get('output.euiRangeTooltip__value').contains('100 - 110');
       cy.checkAxe();
     });
     it('has zero violations when the range slider is decreased', function () {
-      cy.realPress('Tab');
-      cy.get('input#cy-range-single').should('have.focus');
+      cy.get('input#cy-range-single').focus();
       cy.repeatRealPress('ArrowLeft', 10);
       cy.get('output.euiRangeTooltip__value').contains('100 - 100');
       cy.checkAxe();
@@ -102,8 +100,7 @@ describe('Dual EuiRange', function () {
   });
   describe('Keyboard accessibility check', function () {
     it('has zero violations when the range sliders are adjusted', function () {
-      cy.realPress('Tab');
-      cy.get('div[role="slider"]').first().should('have.focus');
+      cy.get('div[role="slider"]').first().focus();
       cy.repeatRealPress('ArrowLeft', 3);
       cy.get('div[role="slider"]').first().invoke('attr', 'aria-valuenow').should('eq', '70');
       cy.realPress('Tab');
@@ -144,8 +141,7 @@ describe('Highlight Area EuiRange', function () {
   });
   describe('Keyboard accessibility check', function () {
     it('has zero violations when the highlight area is adjusted using arrow keys', function () {
-      cy.realPress('Tab');
-      cy.get('div[role="slider"]').first().should('have.focus');
+      cy.get('div[role="slider"]').first().focus();
       cy.repeatRealPress('ArrowLeft', 3);
       cy.get('div[role="slider"]').first().invoke('attr', 'aria-valuetext').should('eq', '37, 57');
       cy.checkAxe();
@@ -190,8 +186,7 @@ describe('Highlight Area EuiRange', function () {
     });
     describe('Keyboard accessibility check', function () {
       it('updates the range value using arrow keys with input[type="number"]', function () {
-        cy.realPress('Tab');
-        cy.get('input#cy-range-in-dropdown').should('have.focus');
+        cy.get('input#cy-range-in-dropdown').focus();
         cy.repeatRealPress('ArrowUp', 10);
         cy.get('input[type="range"]').first().invoke('attr', 'value').should('eq', '30');
         cy.checkAxe();

package/optimize/lib/components/form/super_select/super_select.js

@@ -222,6 +222,7 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
           dropdownDisplay = option.dropdownDisplay,
           inputDisplay = option.inputDisplay,
           optionRest = (0, _objectWithoutProperties2.default)(option, _excluded2);
+        if (value == null) return;
         return (0, _react2.jsx)(_context_menu.EuiContextMenuItem, (0, _extends2.default)({
           key: index,
           className: itemClasses,
@@ -235,7 +236,7 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
             return _this2.setItemNode(node, index);
           },
           role: "option",
-          id: value,
+          id: String(value),
           "aria-selected": valueOfSelected === value
         }, optionRest), dropdownDisplay || inputDisplay);
       });
@@ -261,7 +262,7 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
           "aria-describedby": _this2.describedById,
           className: "euiSuperSelect__listbox",
           role: "listbox",
-          "aria-activedescendant": valueOfSelected,
+          "aria-activedescendant": valueOfSelected != null ? String(valueOfSelected) : undefined,
           tabIndex: 0
         }, items);
       }));

package/optimize/lib/components/form/super_select/super_select_control.js

@@ -28,8 +28,7 @@ var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
   var _useFormContext = (0, _eui_form_context.useFormContext)(),
     defaultFullWidth = _useFormContext.defaultFullWidth;
   var className = props.className,
-    _props$options = props.options,
-    options = _props$options === void 0 ? [] : _props$options,
+    options = props.options,
     id = props.id,
     name = props.name,
     _props$fullWidth = props.fullWidth,
@@ -60,27 +59,21 @@ var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
     'euiSuperSelectControl-isLoading': isLoading,
     'euiSuperSelectControl-isInvalid': isInvalid
   }, className);
-
-  // React HTML input can not have both value and defaultValue properties.
-  // https://reactjs.org/docs/uncontrolled-components.html#default-values
-  var selectDefaultValue;
-  if (value == null) {
-    selectDefaultValue = defaultValue || '';
-  }
-  var selectedValue;
-  if (value) {
-    var selectedOption = options.find(function (option) {
-      return option.value === value;
-    });
-    selectedValue = selectedOption ? selectedOption.inputDisplay : selectedValue;
-  }
+  var inputValue = value != null ? value : defaultValue;
+  var selectedValue = (0, _react.useMemo)(function () {
+    if (inputValue != null) {
+      var selectedOption = options === null || options === void 0 ? void 0 : options.find(function (option) {
+        return option.value === inputValue;
+      });
+      return selectedOption ? selectedOption.inputDisplay : undefined;
+    }
+  }, [inputValue, options]);
   var showPlaceholder = !!placeholder && !selectedValue;
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("input", {
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("input", {
     type: "hidden",
     id: id,
     name: name,
-    defaultValue: selectDefaultValue,
-    value: value,
+    value: String(inputValue !== null && inputValue !== void 0 ? inputValue : ''),
     readOnly: readOnly
   }), (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, {
     isDropdown: true,

package/optimize/lib/components/header/header.a11y.js

@@ -333,7 +333,7 @@ describe('EuiHeader', function () {
       cy.checkAxe();
     });
     it('has zero violations when a hidden breadcrumb is expanded', function () {
-      cy.get('button[aria-label="See collapsed breadcrumbs"]').realClick();
+      cy.get('button[title="See collapsed breadcrumbs"]').realClick();
       cy.get('a[data-test-subj="cy-breadcrumb-hidden"]').should('exist');
       cy.checkAxe();
     });

package/optimize/lib/components/icon/assets/endpoint.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconEndpoint = function EuiIconEndpoint(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M9.406 13.454a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  }), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M6.86 6.09a2.545 2.545 0 1 1 2.497-3.045h.368a2.727 2.727 0 1 1 0 5.455H6.543a1.727 1.727 0 1 0 0 3.454h.367a2.546 2.546 0 1 1 0 1h-.367a2.727 2.727 0 1 1 0-5.454h3.182a1.727 1.727 0 1 0 0-3.455h-.368a2.546 2.546 0 0 1-2.496 2.046L6.86 6.09Zm0-1a1.545 1.545 0 1 1 0-3.09 1.545 1.545 0 0 1 0 3.09ZM9.407 14a1.545 1.545 0 1 1 0-3.09 1.545 1.545 0 0 1 0 3.09Z",
+    clipRule: "evenodd"
+  }));
+};
+var icon = EuiIconEndpoint;
+exports.icon = icon;

package/optimize/lib/components/icon/icon_map.js

@@ -130,6 +130,7 @@ var typeToPathMap = {
   email: 'email',
   empty: 'empty',
   emsApp: 'app_ems',
+  endpoint: 'endpoint',
   eql: 'eql',
   eraser: 'eraser',
   error: 'error',

package/optimize/lib/components/icon/svgs/endpoint.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" >
+  <path d="M9.40601 13.454C9.67122 13.454 9.92558 13.3486 10.1131 13.1611C10.3006 12.9736 10.406 12.7192 10.406 12.454C10.406 12.1888 10.3006 11.9344 10.1131 11.7469C9.92558 11.5594 9.67122 11.454 9.40601 11.454C9.14079 11.454 8.88644 11.5594 8.6989 11.7469C8.51136 11.9344 8.40601 12.1888 8.40601 12.454C8.40601 12.7192 8.51136 12.9736 8.6989 13.1611C8.88644 13.3486 9.14079 13.454 9.40601 13.454Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.86001 6.09C6.37814 6.0897 5.90625 5.9526 5.49923 5.69464C5.09222 5.43669 4.7668 5.06848 4.56082 4.63285C4.35485 4.19722 4.27678 3.71206 4.33571 3.2338C4.39463 2.75554 4.58812 2.30384 4.89367 1.93123C5.19923 1.55862 5.60429 1.28041 6.06174 1.12896C6.5192 0.977515 7.01025 0.959051 7.47779 1.07572C7.94532 1.19239 8.37013 1.43939 8.7028 1.78801C9.03548 2.13662 9.26234 2.57252 9.35701 3.045H9.72501C10.4484 3.045 11.1421 3.33236 11.6536 3.84387C12.1651 4.35537 12.4525 5.04912 12.4525 5.7725C12.4525 6.49588 12.1651 7.18963 11.6536 7.70113C11.1421 8.21264 10.4484 8.5 9.72501 8.5H6.54301C6.08498 8.5 5.64571 8.68195 5.32184 9.00583C4.99796 9.3297 4.81601 9.76897 4.81601 10.227C4.81601 10.685 4.99796 11.1243 5.32184 11.4482C5.64571 11.772 6.08498 11.954 6.54301 11.954H6.91001C7.03408 11.3346 7.38401 10.7834 7.89181 10.4075C8.3996 10.0317 9.02899 9.85809 9.65766 9.92043C10.2863 9.98276 10.8694 10.2766 11.2935 10.7448C11.7176 11.2131 11.9524 11.8223 11.9524 12.454C11.9524 13.0857 11.7176 13.6949 11.2935 14.1632C10.8694 14.6314 10.2863 14.9252 9.65766 14.9876C9.02899 15.0499 8.3996 14.8763 7.89181 14.5005C7.38401 14.1246 7.03408 13.5734 6.91001 12.954H6.54301C5.81976 12.954 5.12614 12.6667 4.61473 12.1553C4.10332 11.6439 3.81601 10.9502 3.81601 10.227C3.81601 9.50375 4.10332 8.81013 4.61473 8.29872C5.12614 7.78731 5.81976 7.5 6.54301 7.5H9.72501C10.1832 7.5 10.6226 7.318 10.9465 6.99403C11.2705 6.67006 11.4525 6.23066 11.4525 5.7725C11.4525 5.31434 11.2705 4.87494 10.9465 4.55097C10.6226 4.227 10.1832 4.045 9.72501 4.045H9.35701C9.24146 4.62192 8.92966 5.14102 8.47462 5.51402C8.01958 5.88702 7.44939 6.0909 6.86101 6.091L6.86001 6.09ZM6.86001 5.09C6.45025 5.09 6.05727 4.92722 5.76753 4.63748C5.47779 4.34774 5.31501 3.95476 5.31501 3.545C5.31501 3.13524 5.47779 2.74226 5.76753 2.45252C6.05727 2.16278 6.45025 2 6.86001 2C7.26977 2 7.66275 2.16278 7.95249 2.45252C8.24223 2.74226 8.40501 3.13524 8.40501 3.545C8.40501 3.95476 8.24223 4.34774 7.95249 4.63748C7.66275 4.92722 7.26977 5.09 6.86001 5.09ZM9.40701 14C8.99725 14 8.60427 13.8372 8.31453 13.5475C8.02479 13.2577 7.86201 12.8648 7.86201 12.455C7.86201 12.0452 8.02479 11.6523 8.31453 11.3625C8.60427 11.0728 8.99725 10.91 9.40701 10.91C9.81677 10.91 10.2097 11.0728 10.4995 11.3625C10.7892 11.6523 10.952 12.0452 10.952 12.455C10.952 12.8648 10.7892 13.2577 10.4995 13.5475C10.2097 13.8372 9.81677 14 9.40701 14Z"/>
+</svg>

package/optimize/lib/components/image/image.a11y.js

@@ -45,8 +45,7 @@ describe('EuiImage', function () {
       cy.checkAxe();
     });
     it('has zero violations on keyboard interaction', function () {
-      cy.realPress('Tab');
-      cy.get('button[data-test-subj="activateFullScreenButton"]').should('have.focus');
+      cy.get('button[data-test-subj="activateFullScreenButton"]').focus();
       cy.realPress('Enter');
       cy.get('button[data-test-subj="deactivateFullScreenButton"]').should('exist');
       cy.get('button[data-test-subj="deactivateFullScreenButton"]').should('have.focus');

package/optimize/lib/components/key_pad_menu/key_pad_menu.a11y.js

@@ -133,20 +133,20 @@ describe('EuiKeyPadMenu', function () {
     });
     it('has zero violations on item click', function () {
       cy.get('a[data-test-subj="cy-keypad-link-2"]').realClick();
-      cy.get('a[data-test-subj="cy-keypad-link-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.get('a[data-test-subj="cy-keypad-link-2"]').should('have.attr', 'aria-current', 'true');
       cy.checkAxe();
     });
     it('has zero violations on item keypress', function () {
       cy.repeatRealPress('Tab', 3);
       cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.focus');
       cy.realPress('Space');
-      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.attr', 'aria-pressed', 'true');
       cy.checkAxe();
       cy.realPress(['Shift', 'Tab']);
-      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.focus');
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.attr', 'aria-pressed', 'false');
       cy.realPress('Space');
-      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
-      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('not.have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').invoke('attr', 'aria-pressed').should('equal', 'true');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').invoke('attr', 'aria-pressed').should('equal', 'false');
       cy.checkAxe();
     });
   });