@elastic/eui 76.0.2 → 76.2.0

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

@@ -1,9 +1,11 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 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 _react = require("react");
 
@@ -21,6 +23,24 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -54,16 +74,11 @@ 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;
 
     _classCallCheck(this, RowHeightUtils);
 
-    this.gridRef = gridRef;
-    this.outerGridElementRef = outerGridElementRef;
-    this.gridItemsRenderedRef = gridItemsRenderedRef;
-    this.rerenderGridBodyRef = rerenderGridBodyRef;
-
     _defineProperty(this, "styles", {
       paddingTop: 0,
       paddingBottom: 0
@@ -95,10 +110,6 @@ var RowHeightUtils = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "heightsCache", new Map());
-
-    _defineProperty(this, "timerId", void 0);
-
-    _defineProperty(this, "lastUpdatedRow", Infinity);
   }
 
   _createClass(RowHeightUtils, [{
@@ -184,6 +195,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) {
@@ -196,23 +212,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",
@@ -231,22 +244,87 @@ var RowHeightUtils = /*#__PURE__*/function () {
           }
         });
       });
+      return didModify;
+    }
+  }]);
+
+  return RowHeightUtils;
+}();
+/**
+ * Row height utils with virtualization library-specific APIs
+ */
+
+
+exports.RowHeightUtils = RowHeightUtils;
+
+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);
     }
   }, {
@@ -284,27 +362,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 = _slicedToArray(_useState, 1),
       rowHeightUtils = _useState2[0]; // Forces a rerender whenever the row heights change, as this can cause the

package/lib/components/date_picker/auto_refresh/auto_refresh.js

@@ -178,7 +178,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/lib/components/form/range/dual_range.js

@@ -49,6 +49,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"];
@@ -598,6 +600,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,
@@ -653,8 +659,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),
@@ -666,8 +672,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,
@@ -679,8 +685,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),
@@ -713,7 +719,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/lib/components/form/range/range.js

@@ -39,6 +39,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"];
@@ -220,6 +222,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,
@@ -240,7 +246,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, _extends({
@@ -261,7 +267,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,
@@ -294,7 +300,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/lib/components/form/super_select/super_select.js

@@ -27,7 +27,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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -93,8 +93,6 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "describedById", (0, _services.htmlIdGenerator)('euiSuperSelect_')('_screenreaderDescribeId'));
 
-    _defineProperty(_assertThisInitialized(_this), "labelledById", (0, _services.htmlIdGenerator)('euiSuperSelect_')('_screenreaderLabelId'));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       isPopoverOpen: _this.props.isOpen || false
     });
@@ -260,6 +258,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,
@@ -279,9 +278,9 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
         'euiSuperSelect__item--hasDividers': hasDividers
       }, itemClassName);
       var button = (0, _react2.jsx)(_super_select_control.EuiSuperSelectControl, _extends({
-        screenReaderId: this.labelledById,
         options: options,
         value: valueOfSelected,
+        placeholder: placeholder,
         onClick: this.state.isPopoverOpen ? this.closePopover : this.openPopover,
         onKeyDown: this.onSelectKeyDown,
         className: buttonClasses,
@@ -325,14 +324,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);
+      }));
     }
   }]);
 
@@ -379,6 +383,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
@@ -391,12 +400,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/lib/components/form/super_select/super_select_control.js

@@ -11,19 +11,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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -57,9 +53,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 = _objectWithoutProperties(props, _excluded);
 
@@ -92,6 +88,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,
@@ -109,22 +106,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", _extends({
+  }, (0, _react2.jsx)("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 ? (0, _react2.jsx)("span", {
+    className: "euiSuperSelectControl__placeholder"
+  }, placeholder) : selectedValue)));
 };
 
 exports.EuiSuperSelectControl = EuiSuperSelectControl;