@elastic/eui 76.0.0 → 76.1.0

package/es/components/suggest/suggest.js

@@ -32,8 +32,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useState, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useGeneratedHtmlId } from '../../services';
-import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiIcon } from '../icon';
 import { useEuiI18n } from '../i18n';
 import { EuiInputPopover } from '../popover';
@@ -128,14 +126,11 @@ export var EuiSuggest = function EuiSuggest(_ref) {
   var searchOnChange = function searchOnChange(value) {
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
   };
-
-  var inputDescribedbyId = useGeneratedHtmlId({
-    prefix: id
-  });
   /**
    * Status
    */
 
+
   var icon = '';
   var color = '';
 
@@ -226,6 +221,7 @@ export var EuiSuggest = function EuiSuggest(_ref) {
     }
   }, [onItemClick, suggestions]);
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSelectable, {
+    selectableScreenReaderText: stateMessage,
     singleSelection: true,
     height: isVirtualized ? undefined : 'full',
     options: suggestionList,
@@ -250,7 +246,6 @@ export var EuiSuggest = function EuiSuggest(_ref) {
       onBlur: searchOnBlur,
       onInput: searchOnInput,
       onChange: searchOnChange,
-      'aria-describedby': inputDescribedbyId,
       'aria-label': ariaLabel,
       'aria-labelledby': labelId
     }, rest)
@@ -274,9 +269,7 @@ export var EuiSuggest = function EuiSuggest(_ref) {
       },
       className: "eui-yScroll"
     }, list));
-  }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-    id: inputDescribedbyId
-  }, stateMessage)));
+  }));
 };
 EuiSuggest.propTypes = {
   className: PropTypes.string,

package/eui.d.ts

@@ -5752,7 +5752,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select_contr
 	    disabled?: boolean;
 	    'data-test-subj'?: string;
 	}
-	export interface EuiSuperSelectControlProps<T> extends CommonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+	export interface EuiSuperSelectControlProps<T> extends CommonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'placeholder'> {
 	    /**
 	     * @default false
 	     */
@@ -5773,6 +5773,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select_contr
 	    isLoading?: boolean;
 	    readOnly?: boolean;
 	    name?: string;
+	    placeholder?: ReactNode;
 	    value?: T;
 	    options?: Array<EuiSuperSelectOption<T>>;
 	    /**
@@ -5785,11 +5786,6 @@ declare module '@elastic/eui/src/components/form/super_select/super_select_contr
 	     * `string` | `ReactElement` or an array of these
 	     */
 	    append?: EuiFormControlLayoutProps['append'];
-	    /**
-	     * Creates a semantic label ID for the `div[role="listbox"]` that's opened on click or keypress.
-	     * __Generated and passed down by `EuiSuperSelect`.__
-	     */
-	    screenReaderId?: string;
 	}
 	export const EuiSuperSelectControl: <T extends string>(props: EuiSuperSelectControlProps<T>) => ReturnType<FunctionComponent<EuiSuperSelectControlProps<T>>>;
 
@@ -6270,7 +6266,7 @@ declare module '@elastic/eui/src/components/context_menu' {
 
 }
 declare module '@elastic/eui/src/components/form/super_select/super_select' {
-	import React, { Component, FocusEvent } from 'react';
+	import React, { Component, FocusEvent, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiSuperSelectControlProps, EuiSuperSelectOption } from '@elastic/eui/src/components/form/super_select/super_select_control';
 	import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
@@ -6287,6 +6283,10 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	     */
 	    options: Array<EuiSuperSelectOption<T>>;
 	    valueOfSelected?: T;
+	    /**
+	     * Placeholder to display when the current selected value is empty.
+	     */
+	    placeholder?: ReactNode;
 	    /**
 	     * Classes for the context menu item
 	     */
@@ -6332,7 +6332,6 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	    private itemNodes;
 	    private _isMounted;
 	    describedById: string;
-	    labelledById: string;
 	    state: {
 	        isPopoverOpen: boolean;
 	    };
@@ -11592,6 +11591,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	import { RowHeightUtils } from '@elastic/eui/src/components/datagrid/utils/row_heights';
 	import { IconType } from '@elastic/eui/src/components/icon';
 	import { EuiTokenProps } from '@elastic/eui/src/components/token';
+	import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
 	export type ImperativeGridApi = Omit<Grid, keyof Component>;
 	export interface EuiDataGridToolbarProps {
 	    gridWidth: number;
@@ -11746,6 +11746,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    closeCellPopover(): void;
 	    setPopoverAnchor(anchor: HTMLElement): void;
 	    setPopoverContent(content: ReactNode): void;
+	    setCellPopoverProps: EuiDataGridCellPopoverElementProps['setCellPopoverProps'];
 	}
 	export type CommonGridProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    /**
@@ -12011,6 +12012,11 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * If so, that component is provided here as a passed React function component for your usage.
 	     */
 	    DefaultCellPopover: JSXElementConstructor<EuiDataGridCellPopoverElementProps>;
+	    /**
+	     * Allows passing props to the wrapping cell expansion popover and panel.
+	     * Accepts any props that `EuiPopover` accepts, except for `button` and `closePopover`.
+	     */
+	    setCellPopoverProps: (props: Omit<EuiPopoverProps, 'button' | 'closePopover'>) => void;
 	}
 	export interface EuiDataGridCellProps {
 	    rowIndex: number;
@@ -18331,7 +18337,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list' {
 
 }
 declare module '@elastic/eui/src/components/selectable/selectable' {
-	import React, { Component, HTMLAttributes, ReactNode, ReactElement, KeyboardEvent, MouseEvent } from 'react';
+	import React, { Component, HTMLAttributes, ReactNode, ReactElement, KeyboardEvent, MouseEvent, FocusEvent } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiSelectableSearch } from '@elastic/eui/src/components/selectable/selectable_search';
 	import { EuiSelectableMessage } from '@elastic/eui/src/components/selectable/selectable_message';
@@ -18434,6 +18440,12 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	     * Default: false
 	     */
 	    isPreFiltered?: boolean;
+	    /**
+	     * Optional screen reader instructions to announce upon focus/interaction. This text is read out
+	     * after the `EuiSelectable` label and a brief pause, but before the default keyboard instructions for
+	     * interacting with a selectable are read out.
+	     */
+	    selectableScreenReaderText?: string;
 	};
 	export interface EuiSelectableState<T> {
 	    activeOptionIndex?: number;
@@ -18458,8 +18470,9 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	    constructor(props: EuiSelectableProps<T>);
 	    static getDerivedStateFromProps<T>(nextProps: EuiSelectableProps<T>, prevState: EuiSelectableState<T>): Partial<EuiSelectableState<T>>;
 	    componentDidUpdate<T>(prevProps: EuiSelectableProps<T>, prevState: EuiSelectableState<T>): void;
+	    isFocusOnSearchOrListBox: (target: EventTarget | null) => boolean | undefined;
 	    onMouseDown: () => void;
-	    onFocus: () => void;
+	    onFocus: (event?: React.FocusEvent<Element, Element> | undefined) => void;
 	    onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
 	    incrementActiveOptionIndex: (amount: number) => void;
 	    onSearchChange: (searchValue: string, visibleOptions: Array<EuiSelectableOption<T>>) => void;
@@ -26330,8 +26343,10 @@ declare module '@elastic/eui' {
 "euiFilePicker.removeSelected": any;
 "euiFormControlLayoutClearButton.label": any;
 "euiForm.addressFormErrors": any;
-"euiSuperSelectControl.selectAnOption": any;
+"euiDualRange.sliderScreenReaderInstructions": any;
+"euiRange.sliderScreenReaderInstructions": any;
 "euiSuperSelect.screenReaderAnnouncement": any;
+"euiSuperSelect.ariaLabel": any;
 "euiHeaderLinks.openNavigationMenu": any;
 "euiHeaderLinks.appNavigation": any;
 "euiImageButton.openFullScreen": any;
@@ -26405,9 +26420,9 @@ declare module '@elastic/eui' {
 "euiSelectable.loadingOptions": any;
 "euiSelectable.noMatchingOptions": any;
 "euiSelectable.noAvailableOptions": any;
+"euiSelectable.screenReaderInstructions": any;
 "euiSelectable.placeholderName": any;
 "euiSelectable.searchResults": any;
-"euiSelectable.screenReaderInstructions": any;
 "euiSkeletonLoading.loadingAriaText": any;
 "euiSkeletonLoading.loadedAriaText": any;
 "euiStat.loadingText": any;

package/i18ntokens.json

@@ -4288,20 +4288,36 @@
     "filepath": "src/components/form/form.tsx"
   },
   {
-    "token": "euiSuperSelectControl.selectAnOption",
-    "defString": "Select an option: {selectedValue}, is selected",
+    "token": "euiDualRange.sliderScreenReaderInstructions",
+    "defString": "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.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 166,
-        "column": 12
+        "line": 571,
+        "column": 6
       },
       "end": {
-        "line": 170,
-        "column": 14
+        "line": 574,
+        "column": 8
       }
     },
-    "filepath": "src/components/form/super_select/super_select_control.tsx"
+    "filepath": "src/components/form/range/dual_range.tsx"
+  },
+  {
+    "token": "euiRange.sliderScreenReaderInstructions",
+    "defString": "You are in a custom range slider. Use the Up and Down arrow keys to change the value.",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 184,
+        "column": 6
+      },
+      "end": {
+        "line": 187,
+        "column": 8
+      }
+    },
+    "filepath": "src/components/form/range/range.tsx"
   },
   {
     "token": "euiSuperSelect.screenReaderAnnouncement",
@@ -4309,16 +4325,32 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 339,
+        "line": 344,
         "column": 12
       },
       "end": {
-        "line": 343,
+        "line": 348,
         "column": 14
       }
     },
     "filepath": "src/components/form/super_select/super_select.tsx"
   },
+  {
+    "token": "euiSuperSelect.ariaLabel",
+    "defString": "Select listbox",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 351,
+        "column": 8
+      },
+      "end": {
+        "line": 351,
+        "column": 75
+      }
+    },
+    "filepath": "src/components/form/super_select/super_select.tsx"
+  },
   {
     "token": "euiHeaderLinks.openNavigationMenu",
     "defString": "Open menu",
@@ -5189,11 +5221,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 688,
+        "line": 689,
         "column": 16
       },
       "end": {
-        "line": 691,
+        "line": 692,
         "column": 18
       }
     },
@@ -5445,11 +5477,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 570,
+        "line": 587,
         "column": 16
       },
       "end": {
-        "line": 573,
+        "line": 590,
         "column": 18
       }
     },
@@ -5461,11 +5493,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 592,
+        "line": 609,
         "column": 14
       },
       "end": {
-        "line": 596,
+        "line": 613,
         "column": 16
       }
     },
@@ -5477,60 +5509,60 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 611,
+        "line": 628,
         "column": 14
       },
       "end": {
-        "line": 614,
+        "line": 631,
         "column": 16
       }
     },
     "filepath": "src/components/selectable/selectable.tsx"
   },
   {
-    "token": "euiSelectable.placeholderName",
-    "defString": "Filter options",
+    "token": "euiSelectable.screenReaderInstructions",
+    "defString": "Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 676,
+        "line": 693,
         "column": 6
       },
       "end": {
-        "line": 676,
-        "column": 78
+        "line": 702,
+        "column": 7
       }
     },
     "filepath": "src/components/selectable/selectable.tsx"
   },
   {
-    "token": "euiSelectable.searchResults",
-    "defString": "({\n  resultsLength\n}) => `${resultsLength} result${resultsLength === 1 ? '' : 's'} available`;",
-    "highlighting": "code",
+    "token": "euiSelectable.placeholderName",
+    "defString": "Filter options",
+    "highlighting": "string",
     "loc": {
       "start": {
-        "line": 703,
+        "line": 693,
         "column": 6
       },
       "end": {
-        "line": 709,
-        "column": 8
+        "line": 702,
+        "column": 7
       }
     },
     "filepath": "src/components/selectable/selectable.tsx"
   },
   {
-    "token": "euiSelectable.screenReaderInstructions",
-    "defString": "Use up and down arrows to move focus over options. Enter to select. Escape to collapse options.",
-    "highlighting": "string",
+    "token": "euiSelectable.searchResults",
+    "defString": "({\n  resultsLength\n}) => `${resultsLength} result${resultsLength === 1 ? '' : 's'} available`;",
+    "highlighting": "code",
     "loc": {
       "start": {
-        "line": 721,
+        "line": 738,
         "column": 6
       },
       "end": {
-        "line": 730,
-        "column": 7
+        "line": 744,
+        "column": 8
       }
     },
     "filepath": "src/components/selectable/selectable.tsx"
@@ -5541,12 +5573,12 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 721,
+        "line": 756,
         "column": 6
       },
       "end": {
-        "line": 730,
-        "column": 7
+        "line": 756,
+        "column": 78
       }
     },
     "filepath": "src/components/selectable/selectable.tsx"
@@ -5861,11 +5893,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 201,
+        "line": 197,
         "column": 39
       },
       "end": {
-        "line": 204,
+        "line": 200,
         "column": 3
       }
     },
@@ -5877,11 +5909,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 201,
+        "line": 197,
         "column": 39
       },
       "end": {
-        "line": 204,
+        "line": 200,
         "column": 3
       }
     },
@@ -5893,11 +5925,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 227,
+        "line": 223,
         "column": 67
       },
       "end": {
-        "line": 235,
+        "line": 231,
         "column": 3
       }
     },
@@ -5909,11 +5941,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 227,
+        "line": 223,
         "column": 67
       },
       "end": {
-        "line": 235,
+        "line": 231,
         "column": 3
       }
     },
@@ -5925,11 +5957,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 227,
+        "line": 223,
         "column": 67
       },
       "end": {
-        "line": 235,
+        "line": 231,
         "column": 3
       }
     },
@@ -5941,11 +5973,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 227,
+        "line": 223,
         "column": 67
       },
       "end": {
-        "line": 235,
+        "line": 231,
         "column": 3
       }
     },

package/lib/components/color_picker/color_palette_picker/color_palette_picker.js

@@ -132,6 +132,11 @@ EuiColorPalettePicker.propTypes = {
   readOnly: _propTypes.default.bool,
   name: _propTypes.default.string,
 
+  /**
+       * Placeholder to display when the current selected value is empty.
+       */
+  placeholder: _propTypes.default.node,
+
   /**
      * Creates an input group with element(s) coming before input.
      * `string` | `ReactElement` or an array of these
@@ -143,12 +148,6 @@ EuiColorPalettePicker.propTypes = {
      * `string` | `ReactElement` or an array of these
      */
   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,
   valueOfSelected: _propTypes.default.any,
 
   /**

package/lib/components/datagrid/body/data_grid_cell.js

@@ -893,7 +893,8 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       if (_this.isPopoverOpen()) {
         var _this$props$popoverCo2 = _this.props.popoverContext,
             setPopoverAnchor = _this$props$popoverCo2.setPopoverAnchor,
-            setPopoverContent = _this$props$popoverCo2.setPopoverContent; // Set popover anchor
+            setPopoverContent = _this$props$popoverCo2.setPopoverContent,
+            setCellPopoverProps = _this$props$popoverCo2.setCellPopoverProps; // Set popover anchor
 
         var cellAnchorEl = _this.popoverAnchorRef.current;
         setPopoverAnchor(cellAnchorEl); // Set popover contents with cell content
@@ -919,7 +920,8 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           cellActions: (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellPopoverActions, _extends({}, sharedProps, {
             column: column
           })),
-          DefaultCellPopover: _data_grid_cell_popover.DefaultCellPopover
+          DefaultCellPopover: _data_grid_cell_popover.DefaultCellPopover,
+          setCellPopoverProps: setCellPopoverProps
         }), (0, _react2.jsx)(CellElement, _extends({}, sharedProps, {
           setCellProps: _this.setCellProps,
           isExpandable: true,
@@ -1632,7 +1634,8 @@ EuiDataGridCell.propTypes = {
     openCellPopover: _propTypes.default.func.isRequired,
     closeCellPopover: _propTypes.default.func.isRequired,
     setPopoverAnchor: _propTypes.default.func.isRequired,
-    setPopoverContent: _propTypes.default.func.isRequired
+    setPopoverContent: _propTypes.default.func.isRequired,
+    setCellPopoverProps: _propTypes.default.func.isRequired
   }).isRequired,
   renderCellValue: _propTypes.default.oneOfType([_propTypes.default.func.isRequired, _propTypes.default.func.isRequired]).isRequired,
   renderCellPopover: _propTypes.default.oneOfType([_propTypes.default.func.isRequired, _propTypes.default.func.isRequired]),

package/lib/components/datagrid/body/data_grid_cell_popover.js

@@ -9,6 +9,8 @@ exports.useCellPopover = exports.JsonPopoverContent = exports.DefaultCellPopover
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _services = require("../../../services");
 
 var _popover = require("../../popover");
@@ -19,10 +21,20 @@ var _code = require("../../code");
 
 var _react2 = require("@emotion/react");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -44,11 +56,14 @@ var DataGridCellPopoverContext = /*#__PURE__*/(0, _react.createContext)({
   openCellPopover: function openCellPopover() {},
   closeCellPopover: function closeCellPopover() {},
   setPopoverAnchor: function setPopoverAnchor() {},
-  setPopoverContent: function setPopoverContent() {}
+  setPopoverContent: function setPopoverContent() {},
+  setCellPopoverProps: function setCellPopoverProps() {}
 });
 exports.DataGridCellPopoverContext = DataGridCellPopoverContext;
 
 var useCellPopover = function useCellPopover() {
+  var _cellPopoverProps$pan;
+
   // Current open state & cell location are handled here
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -72,7 +87,13 @@ var useCellPopover = function useCellPopover() {
   var _useState7 = (0, _react.useState)(),
       _useState8 = _slicedToArray(_useState7, 2),
       popoverContent = _useState8[0],
-      setPopoverContent = _useState8[1];
+      setPopoverContent = _useState8[1]; // Allow customization of most (not all) popover props by consumers
+
+
+  var _useState9 = (0, _react.useState)({}),
+      _useState10 = _slicedToArray(_useState9, 2),
+      cellPopoverProps = _useState10[0],
+      setCellPopoverProps = _useState10[1];
 
   var closeCellPopover = (0, _react.useCallback)(function () {
     return setPopoverIsOpen(false);
@@ -102,20 +123,20 @@ var useCellPopover = function useCellPopover() {
     openCellPopover: openCellPopover,
     cellLocation: cellLocation,
     setPopoverAnchor: setPopoverAnchor,
-    setPopoverContent: setPopoverContent
+    setPopoverContent: setPopoverContent,
+    setCellPopoverProps: setCellPopoverProps
   }; // Note that this popover is rendered once at the top grid level, rather than one popover per cell
 
-  var cellPopover = popoverIsOpen && popoverAnchor && (0, _react2.jsx)(_popover.EuiWrappingPopover, {
+  var cellPopover = popoverIsOpen && popoverAnchor && (0, _react2.jsx)(_popover.EuiWrappingPopover, _extends({
     isOpen: popoverIsOpen,
-    button: popoverAnchor,
     display: "block",
     hasArrow: false,
-    panelPaddingSize: "s",
-    panelClassName: "euiDataGridRowCell__popover",
-    panelProps: {
+    panelPaddingSize: "s"
+  }, cellPopoverProps, {
+    panelProps: _objectSpread({
       'data-test-subj': 'euiDataGridExpansionPopover'
-    },
-    closePopover: closeCellPopover,
+    }, cellPopoverProps.panelProps || {}),
+    panelClassName: (0, _classnames.default)('euiDataGridRowCell__popover', cellPopoverProps.panelClassName, (_cellPopoverProps$pan = cellPopoverProps.panelProps) === null || _cellPopoverProps$pan === void 0 ? void 0 : _cellPopoverProps$pan.className),
     onKeyDown: function onKeyDown(event) {
       if (event.key === _services.keys.F2 || event.key === _services.keys.ESCAPE) {
         event.preventDefault();
@@ -126,8 +147,10 @@ var useCellPopover = function useCellPopover() {
           return popoverAnchor.parentElement.focus();
         });
       }
-    }
-  }, popoverContent);
+    },
+    button: popoverAnchor,
+    closePopover: closeCellPopover
+  }), popoverContent);
   return {
     cellPopoverContext: cellPopoverContext,
     cellPopover: cellPopover

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/form_control_layout/form_control_layout_icons.js

@@ -189,7 +189,7 @@ var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         size: compressed ? 's' : 'm',
         color: "danger",
-        type: "alert"
+        type: "warning"
       });
     }
   }]);