@elastic/eui 76.0.2 → 76.2.0

package/optimize/es/components/datagrid/data_grid_types.js

@@ -1 +1,18 @@
-export {};
+/*
+ * 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.
+ */
+// since react-window doesn't export a type with the imperative api only we can
+// use this to omit the react-specific class component methods
+// An array of [x,y] coordinates. Note that the `y` value expected internally is a `visibleRowIndex`
+// Force either aria-label or aria-labelledby to be defined
+
+/**
+ * Props shared between renderCellValue and renderCellPopover
+ */
+// The empty control column array fallbacks need to be cached, or
+// they'll cause rerendering/remount issues in memoized dependencies
+export var emptyControlColumns = [];

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

@@ -1,9 +1,18 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _get from "@babel/runtime/helpers/get";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,16 +33,11 @@ export var cellPaddingsMap = {
 export var AUTO_HEIGHT = 'auto';
 export var DEFAULT_ROW_HEIGHT = 34;
 export var RowHeightUtils = /*#__PURE__*/function () {
-  function RowHeightUtils(gridRef, outerGridElementRef, gridItemsRenderedRef, rerenderGridBodyRef) {
+  function RowHeightUtils() {
     var _this = this;
 
     _classCallCheck(this, RowHeightUtils);
 
-    this.gridRef = gridRef;
-    this.outerGridElementRef = outerGridElementRef;
-    this.gridItemsRenderedRef = gridItemsRenderedRef;
-    this.rerenderGridBodyRef = rerenderGridBodyRef;
-
     _defineProperty(this, "styles", {
       paddingTop: 0,
       paddingBottom: 0
@@ -65,10 +69,6 @@ export var RowHeightUtils = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "heightsCache", new Map());
-
-    _defineProperty(this, "timerId", void 0);
-
-    _defineProperty(this, "lastUpdatedRow", Infinity);
   }
 
   _createClass(RowHeightUtils, [{
@@ -154,6 +154,11 @@ export var RowHeightUtils = /*#__PURE__*/function () {
 
       return false;
     }
+    /**
+     * Heights cache utils
+     * This cache is primarily used by auto heights & secondarily used by lineCount row overrides
+     */
+
   }, {
     key: "getRowHeight",
     value: function getRowHeight(rowIndex) {
@@ -166,23 +171,20 @@ export var RowHeightUtils = /*#__PURE__*/function () {
   }, {
     key: "setRowHeight",
     value: function setRowHeight(rowIndex, colId) {
-      var _this$rerenderGridBod, _this$rerenderGridBod2;
-
       var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_ROW_HEIGHT;
-      var visibleRowIndex = arguments.length > 3 ? arguments[3] : undefined;
+
+      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);
 
       if (rowHeights.get(colId) === adaptedHeight) {
-        return;
+        return false;
+      } else {
+        rowHeights.set(colId, adaptedHeight);
+        this.heightsCache.set(rowIndex, rowHeights);
+        return true;
       }
-
-      rowHeights.set(colId, adaptedHeight);
-      this.heightsCache.set(rowIndex, rowHeights);
-      this.resetRow(visibleRowIndex); // When an auto row height is updated, force a re-render
-      // of the grid body to update the unconstrained height
-
-      (_this$rerenderGridBod = (_this$rerenderGridBod2 = this.rerenderGridBodyRef).current) === null || _this$rerenderGridBod === void 0 ? void 0 : _this$rerenderGridBod.call(_this$rerenderGridBod2);
     }
   }, {
     key: "pruneHiddenColumnHeights",
@@ -201,22 +203,84 @@ export var RowHeightUtils = /*#__PURE__*/function () {
           }
         });
       });
+      return didModify;
+    }
+  }]);
+
+  return RowHeightUtils;
+}();
+/**
+ * Row height utils with virtualization library-specific APIs
+ */
+
+export var RowHeightVirtualizationUtils = /*#__PURE__*/function (_RowHeightUtils) {
+  _inherits(RowHeightVirtualizationUtils, _RowHeightUtils);
+
+  var _super = _createSuper(RowHeightVirtualizationUtils);
+
+  function RowHeightVirtualizationUtils(gridRef, outerGridElementRef, gridItemsRenderedRef, rerenderGridBodyRef) {
+    var _this2;
+
+    _classCallCheck(this, RowHeightVirtualizationUtils);
+
+    _this2 = _super.call(this);
+    _this2.gridRef = gridRef;
+    _this2.outerGridElementRef = outerGridElementRef;
+    _this2.gridItemsRenderedRef = gridItemsRenderedRef;
+    _this2.rerenderGridBodyRef = rerenderGridBodyRef;
+
+    _defineProperty(_assertThisInitialized(_this2), "timerId", void 0);
+
+    _defineProperty(_assertThisInitialized(_this2), "lastUpdatedRow", Infinity);
+
+    return _this2;
+  }
+  /**
+   * Virtualization workarounds for auto height rows
+   */
+
+
+  _createClass(RowHeightVirtualizationUtils, [{
+    key: "setRowHeight",
+    value: function setRowHeight(rowIndex, colId) {
+      var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_ROW_HEIGHT;
+      var visibleRowIndex = arguments.length > 3 ? arguments[3] : undefined;
+
+      var didModify = _get(_getPrototypeOf(RowHeightVirtualizationUtils.prototype), "setRowHeight", this).call(this, rowIndex, colId, height, visibleRowIndex); // When an auto row height is updated, force a re-render
+      // of the grid body to update the unconstrained height
+
+
+      if (didModify) {
+        var _this$rerenderGridBod, _this$rerenderGridBod2;
+
+        (_this$rerenderGridBod = (_this$rerenderGridBod2 = this.rerenderGridBodyRef).current) === null || _this$rerenderGridBod === void 0 ? void 0 : _this$rerenderGridBod.call(_this$rerenderGridBod2);
+        this.resetRow(visibleRowIndex);
+      }
+
+      return didModify; // Mostly just here for typing
+    }
+  }, {
+    key: "pruneHiddenColumnHeights",
+    value: function pruneHiddenColumnHeights(visibleColumns) {
+      var didModify = _get(_getPrototypeOf(RowHeightVirtualizationUtils.prototype), "pruneHiddenColumnHeights", this).call(this, visibleColumns);
 
       if (didModify) {
         this.resetRow(0);
       }
+
+      return didModify; // Mostly just here for typing
     }
   }, {
     key: "resetRow",
     value: function resetRow(visibleRowIndex) {
-      var _this2 = this;
+      var _this3 = this;
 
       // save the first row index of batch, reassigning it only
       // if this visible row index less than lastUpdatedRow
       this.lastUpdatedRow = Math.min(this.lastUpdatedRow, visibleRowIndex);
       clearTimeout(this.timerId);
       this.timerId = window.setTimeout(function () {
-        return _this2.resetGrid();
+        return _this3.resetGrid();
       }, 0);
     }
   }, {
@@ -254,24 +318,29 @@ export var RowHeightUtils = /*#__PURE__*/function () {
     }
   }]);
 
-  return RowHeightUtils;
-}();
+  return RowHeightVirtualizationUtils;
+}(RowHeightUtils);
 /**
  * Hook for instantiating RowHeightUtils, setting internal class vars,
  * and setting up various row-height-related side effects
  */
 
 export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
-  var gridRef = _ref2.gridRef,
-      outerGridElementRef = _ref2.outerGridElementRef,
-      gridItemsRenderedRef = _ref2.gridItemsRenderedRef,
+  var virtualization = _ref2.virtualization,
+      rowHeightsOptions = _ref2.rowHeightsOptions,
       gridStyles = _ref2.gridStyles,
-      columns = _ref2.columns,
-      rowHeightsOptions = _ref2.rowHeightsOptions;
+      columns = _ref2.columns;
   var forceRenderRef = useLatest(useForceRender());
 
   var _useState = useState(function () {
-    return new RowHeightUtils(gridRef, outerGridElementRef, gridItemsRenderedRef, forceRenderRef);
+    if (virtualization) {
+      var _gridRef = virtualization.gridRef,
+          _outerGridElementRef = virtualization.outerGridElementRef,
+          _gridItemsRenderedRef = virtualization.gridItemsRenderedRef;
+      return new RowHeightVirtualizationUtils(_gridRef, _outerGridElementRef, _gridItemsRenderedRef, forceRenderRef);
+    } else {
+      return new RowHeightUtils();
+    }
   }),
       _useState2 = _slicedToArray(_useState, 1),
       rowHeightUtils = _useState2[0]; // Forces a rerender whenever the row heights change, as this can cause the

package/optimize/es/components/date_picker/auto_refresh/auto_refresh.js

@@ -119,7 +119,8 @@ export var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
     isOpen: isPopoverOpen,
     closePopover: function closePopover() {
       setIsPopoverOpen(false);
-    }
+    },
+    popoverScreenReaderText: isPaused ? autoRefeshLabelOff : autoRefeshLabelOn
   }, ___EmotionJSX(EuiRefreshInterval, {
     onRefreshChange: onRefreshChange,
     isPaused: isPaused,

package/optimize/es/components/form/range/dual_range.js

@@ -44,6 +44,7 @@ import { EuiRangeWrapper } from './range_wrapper';
 import { calculateThumbPosition } from './utils';
 import { euiRangeStyles } from './range.styles';
 import { euiDualRangeStyles } from './dual_range.styles';
+import { EuiI18n } from '../../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
   _inherits(EuiDualRangeClass, _Component);
@@ -553,6 +554,11 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         backgroundColor: euiRangeLevelColor(rightThumbColor, theme.euiTheme)
       }) : rightThumbPosition;
 
+      var dualSliderScreenReaderInstructions = ___EmotionJSX(EuiI18n, {
+        token: "euiDualRange.sliderScreenReaderInstructions",
+        default: "You are in a custom range slider. Use the Up and Down arrow keys to change the minimum value. Press Tab to interact with the maximum value."
+      });
+
       var theRange = ___EmotionJSX(EuiRangeWrapper, {
         css: cssStyles,
         className: classes,
@@ -608,8 +614,8 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           onFocus: _this2.onThumbFocus,
           onBlur: _this2.onThumbBlur,
           onKeyDown: _this2.handleDraggableKeyDown,
-          "aria-describedby": _this2.props['aria-describedby'],
-          "aria-label": _this2.props['aria-label']
+          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
+          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
         }), ___EmotionJSX(EuiRangeThumb, {
           min: min,
           max: Number(_this2.upperValue),
@@ -621,8 +627,8 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           onFocus: _this2.onThumbFocus,
           onBlur: _this2.onThumbBlur,
           style: logicalStyles(leftThumbStyles),
-          "aria-describedby": _this2.props['aria-describedby'],
-          "aria-label": _this2.props['aria-label']
+          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
+          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
         }), ___EmotionJSX(EuiRangeThumb, {
           min: Number(_this2.lowerValue),
           max: max,
@@ -634,8 +640,8 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           onFocus: _this2.onThumbFocus,
           onBlur: _this2.onThumbBlur,
           style: logicalStyles(rightThumbStyles),
-          "aria-describedby": _this2.props['aria-describedby'],
-          "aria-label": _this2.props['aria-label']
+          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
+          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
         })), showRange && _this2.isValid && ___EmotionJSX(EuiRangeHighlight, {
           showTicks: showTicks,
           min: Number(min),
@@ -669,7 +675,8 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         isOpen: this.state.isPopoverOpen,
         closePopover: this.closePopover,
         disableFocusTrap: true,
-        onPanelResize: this.onResize
+        onPanelResize: this.onResize,
+        popoverScreenReaderText: dualSliderScreenReaderInstructions
       }, theRange) : undefined;
       return thePopover || theRange;
     }

package/optimize/es/components/form/range/range.js

@@ -35,6 +35,7 @@ import { EuiRangeTooltip } from './range_tooltip';
 import { EuiRangeTrack } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
 import { euiRangeStyles } from './range.styles';
+import { EuiI18n } from '../../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRangeClass = /*#__PURE__*/function (_Component) {
   _inherits(EuiRangeClass, _Component);
@@ -180,6 +181,11 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
       var cssStyles = [styles.euiRange, showInput && styles.hasInput];
       var thumbColor = levels && getLevelColor(levels, Number(value));
 
+      var sliderScreenReaderInstructions = ___EmotionJSX(EuiI18n, {
+        token: "euiRange.sliderScreenReaderInstructions",
+        default: "You are in a custom range slider. Use the Up and Down arrow keys to change the value."
+      });
+
       var theRange = ___EmotionJSX(EuiRangeWrapper, {
         className: classes,
         css: cssStyles,
@@ -200,7 +206,7 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         levels: levels,
         onChange: this.handleOnChange,
         value: value,
-        "aria-hidden": showInput === true,
+        "aria-hidden": !!showInput,
         showRange: showRange
       }, function (trackWidth) {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiRangeSlider, _extends({
@@ -221,7 +227,7 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
           } : undefined,
           onFocus: showInput === true ? undefined : onFocus,
           onBlur: showInputOnly ? _this2.onInputBlur : onBlur,
-          "aria-hidden": showInput === true ? true : false,
+          "aria-hidden": !!showInput,
           thumbColor: thumbColor
         }, rest)), showRange && _this2.isValid && ___EmotionJSX(EuiRangeHighlight, {
           showTicks: showTicks,
@@ -255,7 +261,8 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         fullWidth: fullWidth,
         isOpen: this.state.isPopoverOpen,
         closePopover: this.closePopover,
-        disableFocusTrap: true
+        disableFocusTrap: true,
+        popoverScreenReaderText: sliderScreenReaderInstructions
       }, theRange) : undefined;
       return thePopover ? thePopover : theRange;
     }

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

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "options", "valueOfSelected", "onChange", "isOpen", "isInvalid", "hasDividers", "itemClassName", "itemLayoutAlign", "fullWidth", "popoverProps", "compressed"],
+var _excluded = ["className", "options", "valueOfSelected", "placeholder", "onChange", "isOpen", "isInvalid", "hasDividers", "itemClassName", "itemLayoutAlign", "fullWidth", "popoverProps", "compressed"],
     _excluded2 = ["value", "dropdownDisplay", "inputDisplay"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -59,8 +59,6 @@ export var EuiSuperSelect = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "describedById", htmlIdGenerator('euiSuperSelect_')('_screenreaderDescribeId'));
 
-    _defineProperty(_assertThisInitialized(_this), "labelledById", htmlIdGenerator('euiSuperSelect_')('_screenreaderLabelId'));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       isPopoverOpen: _this.props.isOpen || false
     });
@@ -226,6 +224,7 @@ export var EuiSuperSelect = /*#__PURE__*/function (_Component) {
           className = _this$props.className,
           options = _this$props.options,
           valueOfSelected = _this$props.valueOfSelected,
+          placeholder = _this$props.placeholder,
           onChange = _this$props.onChange,
           isOpen = _this$props.isOpen,
           isInvalid = _this$props.isInvalid,
@@ -246,9 +245,9 @@ export var EuiSuperSelect = /*#__PURE__*/function (_Component) {
       }, itemClassName);
 
       var button = ___EmotionJSX(EuiSuperSelectControl, _extends({
-        screenReaderId: this.labelledById,
         options: options,
         value: valueOfSelected,
+        placeholder: placeholder,
         onClick: this.state.isPopoverOpen ? this.closePopover : this.openPopover,
         onKeyDown: this.onSelectKeyDown,
         className: buttonClasses,
@@ -293,14 +292,19 @@ export var EuiSuperSelect = /*#__PURE__*/function (_Component) {
       }, ___EmotionJSX(EuiI18n, {
         token: "euiSuperSelect.screenReaderAnnouncement",
         default: "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close."
-      }))), ___EmotionJSX("div", {
-        "aria-labelledby": this.labelledById,
-        "aria-describedby": this.describedById,
-        className: "euiSuperSelect__listbox",
-        role: "listbox",
-        "aria-activedescendant": valueOfSelected,
-        tabIndex: 0
-      }, items));
+      }))), ___EmotionJSX(EuiI18n, {
+        token: "euiSuperSelect.ariaLabel",
+        default: "Select listbox"
+      }, function (ariaLabel) {
+        return ___EmotionJSX("div", {
+          "aria-label": ariaLabel,
+          "aria-describedby": _this2.describedById,
+          className: "euiSuperSelect__listbox",
+          role: "listbox",
+          "aria-activedescendant": valueOfSelected,
+          tabIndex: 0
+        }, items);
+      }));
     }
   }]);
 

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "options", "id", "name", "fullWidth", "isLoading", "isInvalid", "readOnly", "defaultValue", "compressed", "value", "prepend", "append", "screenReaderId", "disabled"];
+var _excluded = ["className", "options", "id", "name", "fullWidth", "isLoading", "isInvalid", "readOnly", "defaultValue", "compressed", "value", "placeholder", "prepend", "append", "disabled"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -11,9 +11,7 @@ var _excluded = ["className", "options", "id", "name", "fullWidth", "isLoading",
  */
 import React, { Fragment } from 'react';
 import classNames from 'classnames';
-import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFormControlLayout } from '../form_control_layout';
-import { EuiI18n } from '../../i18n';
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
 import { useFormContext } from '../eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -37,9 +35,9 @@ export var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
       _props$compressed = props.compressed,
       compressed = _props$compressed === void 0 ? false : _props$compressed,
       value = props.value,
+      placeholder = props.placeholder,
       prepend = props.prepend,
       append = props.append,
-      screenReaderId = props.screenReaderId,
       disabled = props.disabled,
       rest = _objectWithoutProperties(props, _excluded);
 
@@ -72,6 +70,7 @@ export var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
     selectedValue = selectedOption ? selectedOption.inputDisplay : selectedValue;
   }
 
+  var showPlaceholder = !!placeholder && !selectedValue;
   return ___EmotionJSX(Fragment, null, ___EmotionJSX("input", {
     type: "hidden",
     id: id,
@@ -89,20 +88,14 @@ export var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
     compressed: compressed,
     prepend: prepend,
     append: append
-  }, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", {
-    id: screenReaderId
-  }, ___EmotionJSX(EuiI18n, {
-    token: "euiSuperSelectControl.selectAnOption",
-    default: "Select an option: {selectedValue}, is selected",
-    values: {
-      selectedValue: selectedValue
-    }
-  }))), ___EmotionJSX("button", _extends({
+  }, ___EmotionJSX("button", _extends({
     type: "button",
     className: classes,
     "aria-haspopup": "listbox",
     disabled: disabled || readOnly // @ts-ignore Using as a selector only for mixin use
     ,
     readOnly: readOnly
-  }, rest), selectedValue)));
+  }, rest), showPlaceholder ? ___EmotionJSX("span", {
+    className: "euiSuperSelectControl__placeholder"
+  }, placeholder) : selectedValue)));
 };

package/optimize/es/components/selectable/selectable.js

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -8,7 +8,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "options", "onChange", "onActiveOptionChange", "searchable", "searchProps", "singleSelection", "isLoading", "listProps", "renderOption", "height", "allowExclusions", "aria-label", "aria-describedby", "loadingMessage", "noMatchesMessage", "emptyMessage", "errorMessage", "isPreFiltered"],
+var _excluded = ["children", "className", "options", "onChange", "onActiveOptionChange", "searchable", "searchProps", "singleSelection", "isLoading", "listProps", "renderOption", "height", "allowExclusions", "aria-label", "aria-describedby", "loadingMessage", "noMatchesMessage", "emptyMessage", "errorMessage", "selectableScreenReaderText", "isPreFiltered"],
     _excluded2 = ["aria-label", "aria-describedby", "onChange", "defaultValue", "inputRef"],
     _excluded3 = ["aria-label", "aria-describedby", "isVirtualized", "rowHeight"];
 
@@ -67,6 +67,16 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "listId", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "isFocusOnSearchOrListBox", function (target) {
+      var _this$optionsListRef$, _this$optionsListRef$2;
+
+      var searchHasFocus = _this.props.searchable && target === _this.inputRef;
+      var listBox = (_this$optionsListRef$ = _this.optionsListRef.current) === null || _this$optionsListRef$ === void 0 ? void 0 : (_this$optionsListRef$2 = _this$optionsListRef$.listBoxRef) === null || _this$optionsListRef$2 === void 0 ? void 0 : _this$optionsListRef$2.parentElement;
+      var listBoxContainsFocus = target instanceof Node && (listBox === null || listBox === void 0 ? void 0 : listBox.contains(target));
+      var listBoxHasFocus = target === listBox || listBoxContainsFocus;
+      return searchHasFocus || listBoxHasFocus;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onMouseDown", function () {
       // Bypass onFocus when a click event originates from this.containerRef.
       // Prevents onFocus from scrolling away from a clicked option and negating the selection event.
@@ -74,7 +84,7 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
       _this.preventOnFocus = true;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onFocus", function () {
+    _defineProperty(_assertThisInitialized(_this), "onFocus", function (event) {
       if (_this.preventOnFocus) {
         _this.preventOnFocus = false;
         return;
@@ -84,6 +94,10 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
         return;
       }
 
+      if (event && !_this.isFocusOnSearchOrListBox(event.target)) {
+        return;
+      }
+
       var firstSelected = _this.state.visibleOptions.findIndex(function (option) {
         return option.checked && !option.disabled && !option.isGroupLabel;
       });
@@ -104,7 +118,19 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
-      var optionsList = _this.optionsListRef.current;
+      var optionsList = _this.optionsListRef.current; // Check if the user is interacting with something other than the
+      // searchbox or selection list. If so, the user may be attempting to
+      // interact with the search clear button or a totally custom button,
+      // and listbox keyboard navigation/selection should not be triggered.
+
+      if (!_this.isFocusOnSearchOrListBox(event.target)) {
+        _this.setState({
+          activeOptionIndex: undefined,
+          isFocused: false
+        });
+
+        return;
+      }
 
       switch (event.key) {
         case keys.ARROW_UP:
@@ -129,20 +155,10 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
         case keys.ENTER:
         case keys.SPACE:
           if (_this.props.searchable) {
-            var _this$optionsListRef$, _this$optionsListRef$2;
-
             // For searchable instances, SPACE is reserved as a character for filtering
             // via the input box, and as such only ENTER will toggle selection.
             if (event.target === _this.inputRef && event.key === keys.SPACE) {
               return;
-            } // Check if the user is interacting with something other than the
-            // searchbox or selection list. If not, the user is attempting to
-            // interact with an internal button such as the clear button,
-            // and the event should not be altered.
-
-
-            if (!(event.target === _this.inputRef || event.target === ((_this$optionsListRef$ = _this.optionsListRef.current) === null || _this$optionsListRef$ === void 0 ? void 0 : (_this$optionsListRef$2 = _this$optionsListRef$.listBoxRef) === null || _this$optionsListRef$2 === void 0 ? void 0 : _this$optionsListRef$2.parentElement))) {
-              return;
             }
           }
 
@@ -233,10 +249,8 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onContainerBlur", function (e) {
-      var _e$relatedTarget, _e$relatedTarget$firs;
-
       // Ignore blur events when moving from search to option to avoid activeOptionIndex conflicts
-      if (((_e$relatedTarget = e.relatedTarget) === null || _e$relatedTarget === void 0 ? void 0 : (_e$relatedTarget$firs = _e$relatedTarget.firstChild) === null || _e$relatedTarget$firs === void 0 ? void 0 : _e$relatedTarget$firs.id) === _this.listId) {
+      if (_this.isFocusOnSearchOrListBox(e.relatedTarget)) {
         return;
       }
 
@@ -343,6 +357,7 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
           noMatchesMessage = _this$props3.noMatchesMessage,
           emptyMessage = _this$props3.emptyMessage,
           errorMessage = _this$props3.errorMessage,
+          selectableScreenReaderText = _this$props3.selectableScreenReaderText,
           isPreFiltered = _this$props3.isPreFiltered,
           rest = _objectWithoutProperties(_this$props3, _excluded);
 
@@ -478,10 +493,15 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
       var searchAccessibleName = getAccessibleName(searchProps, this.messageContentId);
       var searchHasAccessibleName = Boolean(Object.keys(searchAccessibleName).length);
       var search = searchable ? ___EmotionJSX(EuiI18n, {
-        token: "euiSelectable.placeholderName",
-        default: "Filter options"
-      }, function (placeholderName) {
-        return ___EmotionJSX(EuiSelectableSearch, _extends({
+        tokens: ['euiSelectable.screenReaderInstructions', 'euiSelectable.placeholderName'],
+        defaults: ['Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.', 'Filter options']
+      }, function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 2),
+            screenReaderInstructions = _ref5[0],
+            placeholderName = _ref5[1];
+
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSelectableSearch, _extends({
+          "aria-describedby": listAriaDescribedbyId,
           key: "listSearch",
           options: options,
           value: searchValue,
@@ -500,7 +520,9 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
           }
         }, searchHasAccessibleName ? searchAccessibleName : {
           'aria-label': placeholderName
-        }, cleanedSearchProps));
+        }, cleanedSearchProps)), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+          id: listAriaDescribedbyId
+        }, selectableScreenReaderText, " ", screenReaderInstructions)));
       }) : undefined;
       var resultsLength = visibleOptions.filter(function (option) {
         return !option.disabled;
@@ -508,8 +530,8 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
 
       var listScreenReaderStatus = searchable && ___EmotionJSX(EuiI18n, {
         token: "euiSelectable.searchResults",
-        default: function _default(_ref4) {
-          var resultsLength = _ref4.resultsLength;
+        default: function _default(_ref6) {
+          var resultsLength = _ref6.resultsLength;
           return "".concat(resultsLength, " result").concat(resultsLength === 1 ? '' : 's', " available");
         },
         values: {
@@ -522,18 +544,12 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
       var listHasAccessibleName = Boolean(Object.keys(listAccessibleName).length);
 
       var list = ___EmotionJSX(EuiI18n, {
-        tokens: ['euiSelectable.screenReaderInstructions', 'euiSelectable.placeholderName'],
-        defaults: ['Use up and down arrows to move focus over options. Enter to select. Escape to collapse options.', 'Filter options']
-      }, function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-            placeholderName = _ref6[0],
-            screenReaderInstructions = _ref6[1];
-
+        token: "euiSelectable.placeholderName",
+        default: "Filter options"
+      }, function (placeholderName) {
         return ___EmotionJSX(React.Fragment, null, searchable && ___EmotionJSX(EuiScreenReaderLive, {
           isActive: messageContent != null || activeOptionIndex != null
-        }, messageContent || listScreenReaderStatus), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-          id: listAriaDescribedbyId
-        }, screenReaderInstructions)), messageContent ? ___EmotionJSX(EuiSelectableMessage, {
+        }, messageContent || listScreenReaderStatus), messageContent ? ___EmotionJSX(EuiSelectableMessage, {
           "data-test-subj": "euiSelectableMessage",
           id: _this2.messageContentId,
           bordered: listProps && listProps.bordered