@elastic/eui 76.0.2 → 76.2.0

package/test-env/components/datagrid/utils/row_heights.js

@@ -5,10 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useRowHeightUtils = exports.useDefaultRowHeight = exports.cellPaddingsMap = exports.RowHeightUtils = exports.DEFAULT_ROW_HEIGHT = exports.AUTO_HEIGHT = void 0;
+exports.useRowHeightUtils = exports.useDefaultRowHeight = exports.cellPaddingsMap = exports.RowHeightVirtualizationUtils = exports.RowHeightUtils = exports.DEFAULT_ROW_HEIGHT = exports.AUTO_HEIGHT = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -25,13 +35,10 @@ var _predicate = require("../../../services/predicate");
 
 var _sorting = require("./sorting");
 
-/*
- * 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.
- */
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
 // TODO: Once JS variables are available, use them here instead of hard-coded maps
 var cellPaddingsMap = {
   s: 4,
@@ -45,14 +52,10 @@ var DEFAULT_ROW_HEIGHT = 34;
 exports.DEFAULT_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
 
 var RowHeightUtils = /*#__PURE__*/function () {
-  function RowHeightUtils(gridRef, outerGridElementRef, gridItemsRenderedRef, rerenderGridBodyRef) {
+  function RowHeightUtils() {
     var _this = this;
 
     (0, _classCallCheck2.default)(this, RowHeightUtils);
-    this.gridRef = gridRef;
-    this.outerGridElementRef = outerGridElementRef;
-    this.gridItemsRenderedRef = gridItemsRenderedRef;
-    this.rerenderGridBodyRef = rerenderGridBodyRef;
     (0, _defineProperty2.default)(this, "styles", {
       paddingTop: 0,
       paddingBottom: 0
@@ -82,8 +85,6 @@ var RowHeightUtils = /*#__PURE__*/function () {
       };
     });
     (0, _defineProperty2.default)(this, "heightsCache", new Map());
-    (0, _defineProperty2.default)(this, "timerId", void 0);
-    (0, _defineProperty2.default)(this, "lastUpdatedRow", Infinity);
   }
 
   (0, _createClass2.default)(RowHeightUtils, [{
@@ -169,6 +170,11 @@ 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) {
@@ -181,23 +187,20 @@ 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",
@@ -216,22 +219,80 @@ var RowHeightUtils = /*#__PURE__*/function () {
           }
         });
       });
+      return didModify;
+    }
+  }]);
+  return RowHeightUtils;
+}();
+/**
+ * Row height utils with virtualization library-specific APIs
+ */
+
+
+exports.RowHeightUtils = RowHeightUtils;
+
+var RowHeightVirtualizationUtils = /*#__PURE__*/function (_RowHeightUtils) {
+  (0, _inherits2.default)(RowHeightVirtualizationUtils, _RowHeightUtils);
+
+  var _super = _createSuper(RowHeightVirtualizationUtils);
+
+  function RowHeightVirtualizationUtils(gridRef, outerGridElementRef, gridItemsRenderedRef, rerenderGridBodyRef) {
+    var _this2;
+
+    (0, _classCallCheck2.default)(this, RowHeightVirtualizationUtils);
+    _this2 = _super.call(this);
+    _this2.gridRef = gridRef;
+    _this2.outerGridElementRef = outerGridElementRef;
+    _this2.gridItemsRenderedRef = gridItemsRenderedRef;
+    _this2.rerenderGridBodyRef = rerenderGridBodyRef;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "timerId", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "lastUpdatedRow", Infinity);
+    return _this2;
+  }
+  /**
+   * Virtualization workarounds for auto height rows
+   */
+
+
+  (0, _createClass2.default)(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 = (0, _get2.default)((0, _getPrototypeOf2.default)(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 = (0, _get2.default)((0, _getPrototypeOf2.default)(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);
     }
   }, {
@@ -268,27 +329,32 @@ 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
  */
 
 
-exports.RowHeightUtils = RowHeightUtils;
+exports.RowHeightVirtualizationUtils = RowHeightVirtualizationUtils;
 
 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 = (0, _services.useLatest)((0, _services.useForceRender)());
 
   var _useState = (0, _react.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 = (0, _slicedToArray2.default)(_useState, 1),
       rowHeightUtils = _useState2[0]; // Forces a rerender whenever the row heights change, as this can cause the

package/test-env/components/date_picker/auto_refresh/auto_refresh.js

@@ -165,7 +165,8 @@ var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
     isOpen: isPopoverOpen,
     closePopover: function closePopover() {
       setIsPopoverOpen(false);
-    }
+    },
+    popoverScreenReaderText: isPaused ? autoRefeshLabelOff : autoRefeshLabelOn
   }, (0, _react2.jsx)(_refresh_interval.EuiRefreshInterval, {
     onRefreshChange: onRefreshChange,
     isPaused: isPaused,

package/test-env/components/form/range/dual_range.js

@@ -69,6 +69,8 @@ var _range = require("./range.styles");
 
 var _dual_range = require("./dual_range.styles");
 
+var _i18n = require("../../i18n");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable", "theme"];
@@ -560,6 +562,10 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var rightThumbStyles = rightThumbColor ? _objectSpread(_objectSpread({}, rightThumbPosition), {}, {
         backgroundColor: (0, _range_levels_colors.euiRangeLevelColor)(rightThumbColor, theme.euiTheme)
       }) : rightThumbPosition;
+      var dualSliderScreenReaderInstructions = (0, _react2.jsx)(_i18n.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 = (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, {
         css: cssStyles,
         className: classes,
@@ -615,8 +621,8 @@ 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']
         }), (0, _react2.jsx)(_range_thumb.EuiRangeThumb, {
           min: min,
           max: Number(_this2.upperValue),
@@ -628,8 +634,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           onFocus: _this2.onThumbFocus,
           onBlur: _this2.onThumbBlur,
           style: (0, _global_styling.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']
         }), (0, _react2.jsx)(_range_thumb.EuiRangeThumb, {
           min: Number(_this2.lowerValue),
           max: max,
@@ -641,8 +647,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           onFocus: _this2.onThumbFocus,
           onBlur: _this2.onThumbBlur,
           style: (0, _global_styling.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 && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
           showTicks: showTicks,
           min: Number(min),
@@ -675,7 +681,8 @@ 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/test-env/components/form/range/range.js

@@ -59,6 +59,8 @@ var _range_wrapper = require("./range_wrapper");
 
 var _range = require("./range.styles");
 
+var _i18n = require("../../i18n");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
@@ -205,6 +207,10 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
       var styles = (0, _range.euiRangeStyles)(theme);
       var cssStyles = [styles.euiRange, showInput && styles.hasInput];
       var thumbColor = levels && (0, _range_levels_colors.getLevelColor)(levels, Number(value));
+      var sliderScreenReaderInstructions = (0, _react2.jsx)(_i18n.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 = (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, {
         className: classes,
         css: cssStyles,
@@ -225,7 +231,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         levels: levels,
         onChange: this.handleOnChange,
         value: value,
-        "aria-hidden": showInput === true,
+        "aria-hidden": !!showInput,
         showRange: showRange
       }, function (trackWidth) {
         return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_range_slider.EuiRangeSlider, (0, _extends2.default)({
@@ -246,7 +252,7 @@ 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 && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
           showTicks: showTicks,
@@ -279,7 +285,8 @@ 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/test-env/components/form/super_select/super_select.js

@@ -47,7 +47,7 @@ var _i18n = require("../../i18n");
 
 var _react2 = require("@emotion/react");
 
-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 _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); }
@@ -83,7 +83,6 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "itemNodes", []);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_isMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "describedById", (0, _services.htmlIdGenerator)('euiSuperSelect_')('_screenreaderDescribeId'));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "labelledById", (0, _services.htmlIdGenerator)('euiSuperSelect_')('_screenreaderLabelId'));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isPopoverOpen: _this.props.isOpen || false
     });
@@ -242,6 +241,7 @@ 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,
@@ -260,9 +260,9 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
         'euiSuperSelect__item--hasDividers': hasDividers
       }, itemClassName);
       var button = (0, _react2.jsx)(_super_select_control.EuiSuperSelectControl, (0, _extends2.default)({
-        screenReaderId: this.labelledById,
         options: options,
         value: valueOfSelected,
+        placeholder: placeholder,
         onClick: this.state.isPopoverOpen ? this.closePopover : this.openPopover,
         onKeyDown: this.onSelectKeyDown,
         className: buttonClasses,
@@ -305,14 +305,19 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
       }, (0, _react2.jsx)(_i18n.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."
-      }))), (0, _react2.jsx)("div", {
-        "aria-labelledby": this.labelledById,
-        "aria-describedby": this.describedById,
-        className: "euiSuperSelect__listbox",
-        role: "listbox",
-        "aria-activedescendant": valueOfSelected,
-        tabIndex: 0
-      }, items));
+      }))), (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiSuperSelect.ariaLabel",
+        default: "Select listbox"
+      }, function (ariaLabel) {
+        return (0, _react2.jsx)("div", {
+          "aria-label": ariaLabel,
+          "aria-describedby": _this2.describedById,
+          className: "euiSuperSelect__listbox",
+          role: "listbox",
+          "aria-activedescendant": valueOfSelected,
+          tabIndex: 0
+        }, items);
+      }));
     }
   }]);
   return EuiSuperSelect;
@@ -356,6 +361,11 @@ EuiSuperSelect.propTypes = {
   readOnly: _propTypes.default.bool,
   name: _propTypes.default.string,
 
+  /**
+       * Placeholder to display when the current selected value is empty.
+       */
+  placeholder: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.node]),
+
   /**
      * Creates an input group with element(s) coming before input.
      * `string` | `ReactElement` or an array of these
@@ -368,12 +378,6 @@ EuiSuperSelect.propTypes = {
      */
   append: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired).isRequired]),
 
-  /**
-     * Creates a semantic label ID for the `div[role="listbox"]` that's opened on click or keypress.
-     * __Generated and passed down by `EuiSuperSelect`.__
-     */
-  screenReaderId: _propTypes.default.string,
-
   /**
        * Pass an array of options that must at least include:
        * `value`: storing unique value of item,

package/test-env/components/form/super_select/super_select_control.js

@@ -17,19 +17,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _accessibility = require("../../accessibility");
-
 var _form_control_layout = require("../form_control_layout");
 
-var _i18n = require("../../i18n");
-
 var _num_icons = require("../form_control_layout/_num_icons");
 
 var _eui_form_context = require("../eui_form_context");
 
 var _react2 = require("@emotion/react");
 
-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"];
 
 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); }
 
@@ -55,9 +51,9 @@ 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 = (0, _objectWithoutProperties2.default)(props, _excluded);
   var numIconsClass = (0, _num_icons.getFormControlClassNameForIconCount)({
@@ -89,6 +85,7 @@ var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
     selectedValue = selectedOption ? selectedOption.inputDisplay : selectedValue;
   }
 
+  var showPlaceholder = !!placeholder && !selectedValue;
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("input", {
     type: "hidden",
     id: id,
@@ -106,22 +103,16 @@ var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
     compressed: compressed,
     prepend: prepend,
     append: append
-  }, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", {
-    id: screenReaderId
-  }, (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiSuperSelectControl.selectAnOption",
-    default: "Select an option: {selectedValue}, is selected",
-    values: {
-      selectedValue: selectedValue
-    }
-  }))), (0, _react2.jsx)("button", (0, _extends2.default)({
+  }, (0, _react2.jsx)("button", (0, _extends2.default)({
     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 ? (0, _react2.jsx)("span", {
+    className: "euiSuperSelectControl__placeholder"
+  }, placeholder) : selectedValue)));
 };
 
 exports.EuiSuperSelectControl = EuiSuperSelectControl;