@elastic/eui 87.0.0 → 87.1.0

package/optimize/lib/components/tool_tip/tool_tip.js

@@ -17,7 +17,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("../common");
 var _services = require("../../services");
 var _react2 = require("../../services/react");
 var _resize_observer = require("../observer/resize_observer");
@@ -38,22 +37,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
                                                                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                            */
-var positionsToClassNameMap = {
-  top: 'euiToolTip--top',
-  right: 'euiToolTip--right',
-  bottom: 'euiToolTip--bottom',
-  left: 'euiToolTip--left'
-};
-var POSITIONS = (0, _common.keysOf)(positionsToClassNameMap);
+var POSITIONS = ['top', 'right', 'bottom', 'left'];
 exports.POSITIONS = POSITIONS;
+var DISPLAYS = ['inlineBlock', 'block'];
 var delayToMsMap = {
   regular: 250,
   long: 250 * 5
 };
-var displayToClassNameMap = {
-  inlineBlock: undefined,
-  block: 'euiToolTipAnchor--displayBlock'
-};
 var DEFAULT_TOOLTIP_STYLES = {
   // position the tooltip content near the top-left
   // corner of the window so it can't create scrollbars
@@ -264,7 +254,7 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
         onFocus: this.onFocus,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut,
-        id: this.state.id,
+        id: id,
         className: anchorClasses,
         display: display,
         isVisible: visible

package/optimize/lib/components/tool_tip/tool_tip_anchor.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiToolTipAnchor = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -23,8 +22,6 @@ var _excluded = ["onBlur", "onFocus", "onMouseOver", "onMouseOut", "id", "classN
  */
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _onBlur = _ref.onBlur,
     _onFocus = _ref.onFocus,
@@ -48,7 +45,7 @@ var EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       className: classes,
       onMouseOver: onMouseOver,
       onMouseOut: onMouseOut
-    }), /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread({
+    }), /*#__PURE__*/(0, _react.cloneElement)(children, {
       onFocus: function onFocus(e) {
         _onFocus();
         children.props.onFocus && children.props.onFocus(e);
@@ -56,10 +53,9 @@ var EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       onBlur: function onBlur(e) {
         _onBlur();
         children.props.onBlur && children.props.onBlur(e);
-      }
-    }, isVisible && {
-      'aria-describedby': id
-    })))
+      },
+      'aria-describedby': isVisible ? (0, _classnames.default)(id, children.props['aria-describedby']) : children.props['aria-describedby']
+    }))
   );
 });
 exports.EuiToolTipAnchor = EuiToolTipAnchor;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "87.0.0",
+  "version": "87.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -68,25 +68,24 @@
     "@types/lodash": "^4.14.194",
     "@types/numeral": "^0.0.28",
     "@types/react-input-autosize": "^2.2.1",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/refractor": "^3.0.0",
     "@types/resize-observer-browser": "^0.1.5",
     "@types/vfile-message": "^2.0.0",
     "chroma-js": "^2.4.2",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "mdast-util-to-hast": "^10.2.0",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.0",
-    "react-dropzone": "^11.5.3",
+    "react-dropzone": "^11.7.1",
     "react-element-to-jsx-string": "^14.3.4",
     "react-focus-on": "^3.9.1",
     "react-input-autosize": "^3.0.0",
     "react-is": "^17.0.2",
     "react-remove-scroll-bar": "^2.3.4",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.6",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
     "refractor": "^3.5.0",
     "rehype-raw": "^5.0.0",
     "rehype-react": "^6.0.0",
@@ -95,7 +94,7 @@
     "remark-emoji": "^2.1.0",
     "remark-parse-no-trim": "^8.0.4",
     "remark-rehype": "^8.0.0",
-    "tabbable": "^5.2.1",
+    "tabbable": "^5.3.3",
     "text-diff": "^1.0.1",
     "unified": "^9.2.0",
     "unist-util-visit": "^2.0.3",
@@ -147,7 +146,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/cheerio": "^0.22.31",
     "@types/chroma-js": "^2.4.0",
-    "@types/classnames": "^2.2.10",
+    "@types/classnames": "^2.3.1",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^24.0.6",
     "@types/node": "^10.17.5",
@@ -155,7 +154,6 @@
     "@types/react-dom": "^18.2.6",
     "@types/react-is": "^17.0.3",
     "@types/react-router-dom": "^5.3.3",
-    "@types/tabbable": "^3.1.2",
     "@types/testing-library__jest-dom": "^5.14.3",
     "@types/url-parse": "^1.4.8",
     "@types/uuid": "^8.3.0",

package/test-env/components/accordion/accordion.js

@@ -18,6 +18,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _tabbable = require("tabbable");
 var _loading = require("../loading");
 var _resize_observer = require("../observer/resize_observer");
 var _text = require("../text");
@@ -52,33 +53,68 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "childContent", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "childWrapper", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tabbableChildren", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isOpen: _this.props.forceState ? _this.props.forceState === 'open' : _this.props.initialIsOpen
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setChildContentHeight", function () {
-      var forceState = _this.props.forceState;
       requestAnimationFrame(function () {
-        var height = _this.childContent && (forceState ? forceState === 'open' : _this.state.isOpen) ? _this.childContent.clientHeight : 0;
+        var height = _this.childContent && _this.isOpen ? _this.childContent.clientHeight : 0;
         _this.childWrapper && _this.childWrapper.setAttribute('style', (0, _global_styling.logicalCSS)('height', "".concat(height, "px")));
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToggle", function () {
       var forceState = _this.props.forceState;
       if (forceState) {
-        _this.props.onToggle && _this.props.onToggle(forceState === 'open' ? false : true);
+        var _this$props$onToggle, _this$props;
+        (_this$props$onToggle = (_this$props = _this.props).onToggle) === null || _this$props$onToggle === void 0 ? void 0 : _this$props$onToggle.call(_this$props, forceState === 'open' ? false : true);
       } else {
         _this.setState(function (prevState) {
           return {
             isOpen: !prevState.isOpen
           };
         }, function () {
+          var _this$props$onToggle2, _this$props2;
           if (_this.state.isOpen && _this.childWrapper) {
             _this.childWrapper.focus();
           }
-          _this.props.onToggle && _this.props.onToggle(_this.state.isOpen);
+          (_this$props$onToggle2 = (_this$props2 = _this.props).onToggle) === null || _this$props$onToggle2 === void 0 ? void 0 : _this$props$onToggle2.call(_this$props2, _this.state.isOpen);
         });
       }
     });
+    // When accordions are closed, tabbable children should not be present in the tab order
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preventTabbing", function () {
+      if (_this.childContent) {
+        // Re-check for children on every close - content can change dynamically
+        _this.tabbableChildren = (0, _tabbable.tabbable)(_this.childContent);
+        _this.tabbableChildren.forEach(function (element) {
+          // If the element has an existing `tabIndex` set, make sure we can restore it
+          var originalTabIndex = element.getAttribute('tabIndex');
+          if (originalTabIndex) {
+            element.setAttribute('data-original-tabindex', originalTabIndex);
+          }
+          element.setAttribute('tabIndex', '-1');
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "enableTabbing", function () {
+      // If no tabbable children were set, we don't need to re-enable anything
+      if (_this.tabbableChildren) {
+        _this.tabbableChildren.forEach(function (element) {
+          var originalTabIndex = element.getAttribute('data-original-tabindex');
+          if (originalTabIndex) {
+            // If the element originally had an existing `tabIndex` set, restore it
+            element.setAttribute('tabIndex', originalTabIndex);
+            element.removeAttribute('data-original-tabindex');
+          } else {
+            // If not, remove the tabIndex property
+            element.removeAttribute('tabIndex');
+          }
+        });
+        // Cleanup - unset the list of children
+        _this.tabbableChildren = null;
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setChildContentRef", function (node) {
       _this.childContent = node;
     });
@@ -93,44 +129,55 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
     return _this;
   }
   (0, _createClass2.default)(EuiAccordionClass, [{
+    key: "isOpen",
+    get: function get() {
+      return this.props.forceState ? this.props.forceState === 'open' : this.state.isOpen;
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setChildContentHeight();
+      if (!this.isOpen) this.preventTabbing();
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps, prevState) {
       this.setChildContentHeight();
+      if (prevProps.forceState === 'open' && this.props.forceState === 'closed' || prevState.isOpen === true && this.state.isOpen === false) {
+        this.preventTabbing();
+      }
+      if (prevProps.forceState === 'closed' && this.props.forceState === 'open' || prevState.isOpen === false && this.state.isOpen === true) {
+        this.enableTabbing();
+      }
     }
   }, {
     key: "render",
     value: function render() {
       var _buttonProps$id,
         _this2 = this;
-      var _this$props = this.props,
-        children = _this$props.children,
-        buttonContent = _this$props.buttonContent,
-        className = _this$props.className,
-        id = _this$props.id,
-        _this$props$element = _this$props.element,
-        Element = _this$props$element === void 0 ? 'div' : _this$props$element,
-        buttonClassName = _this$props.buttonClassName,
-        buttonContentClassName = _this$props.buttonContentClassName,
-        extraAction = _this$props.extraAction,
-        paddingSize = _this$props.paddingSize,
-        initialIsOpen = _this$props.initialIsOpen,
-        arrowDisplay = _this$props.arrowDisplay,
-        forceState = _this$props.forceState,
-        isLoading = _this$props.isLoading,
-        isLoadingMessage = _this$props.isLoadingMessage,
-        isDisabled = _this$props.isDisabled,
-        buttonProps = _this$props.buttonProps,
-        _this$props$buttonEle = _this$props.buttonElement,
-        _ButtonElement = _this$props$buttonEle === void 0 ? 'button' : _this$props$buttonEle,
-        arrowProps = _this$props.arrowProps,
-        theme = _this$props.theme,
-        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var isOpen = forceState ? forceState === 'open' : this.state.isOpen;
+      var _this$props3 = this.props,
+        children = _this$props3.children,
+        buttonContent = _this$props3.buttonContent,
+        className = _this$props3.className,
+        id = _this$props3.id,
+        _this$props3$element = _this$props3.element,
+        Element = _this$props3$element === void 0 ? 'div' : _this$props3$element,
+        buttonClassName = _this$props3.buttonClassName,
+        buttonContentClassName = _this$props3.buttonContentClassName,
+        extraAction = _this$props3.extraAction,
+        paddingSize = _this$props3.paddingSize,
+        initialIsOpen = _this$props3.initialIsOpen,
+        arrowDisplay = _this$props3.arrowDisplay,
+        forceState = _this$props3.forceState,
+        isLoading = _this$props3.isLoading,
+        isLoadingMessage = _this$props3.isLoadingMessage,
+        isDisabled = _this$props3.isDisabled,
+        buttonProps = _this$props3.buttonProps,
+        _this$props3$buttonEl = _this$props3.buttonElement,
+        _ButtonElement = _this$props3$buttonEl === void 0 ? 'button' : _this$props3$buttonEl,
+        arrowProps = _this$props3.arrowProps,
+        theme = _this$props3.theme,
+        rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
 
       // Force button element to be a legend if the element is a fieldset
       var ButtonElement = Element === 'fieldset' ? 'legend' : _ButtonElement;
@@ -139,7 +186,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       // Force visibility of arrow button if button element is not focusable
       var _arrowDisplay = arrowDisplay === 'none' && !buttonElementIsFocusable ? 'left' : arrowDisplay;
       var classes = (0, _classnames.default)('euiAccordion', {
-        'euiAccordion-isOpen': isOpen
+        'euiAccordion-isOpen': this.isOpen
       }, className);
       var childrenClasses = (0, _classnames.default)('euiAccordion__children', {
         'euiAccordion__children-isLoading': isLoading
@@ -147,7 +194,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var buttonClasses = (0, _classnames.default)('euiAccordion__button', buttonClassName, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.className);
       var buttonContentClasses = (0, _classnames.default)('euiAccordion__buttonContent', buttonContentClassName);
       var iconButtonClasses = (0, _classnames.default)('euiAccordion__iconButton', {
-        'euiAccordion__iconButton-isOpen': isOpen,
+        'euiAccordion__iconButton-isOpen': this.isOpen,
         'euiAccordion__iconButton--right': _arrowDisplay === 'right'
       }, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className);
 
@@ -157,9 +204,9 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var childrenStyles = (0, _accordion.euiAccordionChildrenStyles)(theme);
       var cssChildrenStyles = [childrenStyles.euiAccordion__children, isLoading && childrenStyles.isLoading, paddingSize && paddingSize !== 'none' && childrenStyles[paddingSize]];
       var childWrapperStyles = (0, _accordion.euiAccordionChildWrapperStyles)(theme);
-      var cssChildWrapperStyles = [childWrapperStyles.euiAccordion__childWrapper, isOpen && childWrapperStyles.isOpen];
+      var cssChildWrapperStyles = [childWrapperStyles.euiAccordion__childWrapper, this.isOpen && childWrapperStyles.isOpen];
       var iconButtonStyles = (0, _accordion.euiAccordionIconButtonStyles)(theme);
-      var cssIconButtonStyles = [iconButtonStyles.euiAccordion__iconButton, isOpen && iconButtonStyles.isOpen, _arrowDisplay === 'right' && iconButtonStyles.arrowRight, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.css];
+      var cssIconButtonStyles = [iconButtonStyles.euiAccordion__iconButton, this.isOpen && iconButtonStyles.isOpen, _arrowDisplay === 'right' && iconButtonStyles.arrowRight, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.css];
       var optionalActionStyles = (0, _accordion.euiAccordionOptionalActionStyles)();
       var cssOptionalActionStyles = [optionalActionStyles.euiAccordion__optionalAction];
       var spinnerStyles = (0, _accordion.euiAccordionSpinnerStyles)(theme);
@@ -177,7 +224,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           iconType: "arrowRight",
           onClick: this.onToggle,
           "aria-controls": id,
-          "aria-expanded": isOpen,
+          "aria-expanded": this.isOpen,
           "aria-labelledby": buttonId,
           tabIndex: buttonElementIsFocusable ? -1 : 0,
           isDisabled: isDisabled
@@ -211,7 +258,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         "aria-controls": id
         // `aria-expanded` is only a valid attribute on interactive controls - axe-core throws a violation otherwise
         ,
-        "aria-expanded": ButtonElement === 'button' ? isOpen : undefined,
+        "aria-expanded": ButtonElement === 'button' ? this.isOpen : undefined,
         onClick: isDisabled ? undefined : this.onToggle,
         type: ButtonElement === 'button' ? 'button' : undefined,
         disabled: ButtonElement === 'button' ? isDisabled : undefined

package/test-env/components/auto_sizer/index.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EuiAutoSizer", {
-  enumerable: true,
-  get: function get() {
-    return _auto_sizer.EuiAutoSizer;
-  }
-});
-var _auto_sizer = require("./auto_sizer");
+var _auto_sizer = require("./auto_sizer");
+Object.keys(_auto_sizer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _auto_sizer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _auto_sizer[key];
+    }
+  });
+});

package/test-env/components/breadcrumbs/breadcrumb.js

@@ -189,9 +189,8 @@ EuiBreadcrumbContent.propTypes = {
        */
     anchorPosition: _propTypes.default.any,
     /**
-       * Style and position alteration for arrow-less, left-aligned
-       * attachment. Intended for use with inputs as anchors, e.g.
-       * EuiInputPopover
+       * Style and position alteration for arrow-less attachment.
+       * Intended for use with inputs as anchors, e.g. EuiInputPopover
        */
     attachToAnchor: _propTypes.default.bool,
     buttonRef: _propTypes.default.any,

package/test-env/components/code/code_block_virtualized.js

@@ -53,27 +53,35 @@ var EuiCodeBlockVirtualized = function EuiCodeBlockVirtualized(_ref) {
       }, codeProps));
     });
   }, [codeProps]);
-  return (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
-    disableHeight: typeof overflowHeight === 'number'
+  var virtualizationProps = {
+    itemData: data,
+    itemSize: rowHeight,
+    itemCount: data.length,
+    outerElementType: VirtualizedOuterElement,
+    innerElementType: VirtualizedInnerElement
+  };
+  return typeof overflowHeight === 'number' ? (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
+    disableHeight: true
   }, function (_ref4) {
-    var height = _ref4.height,
-      width = _ref4.width;
-    return (0, _react2.jsx)(_reactWindow.FixedSizeList, {
-      height: height !== null && height !== void 0 ? height : overflowHeight,
-      width: width,
-      itemData: data,
-      itemSize: rowHeight,
-      itemCount: data.length,
-      outerElementType: VirtualizedOuterElement,
-      innerElementType: VirtualizedInnerElement
-    }, ListRow);
+    var width = _ref4.width;
+    return (0, _react2.jsx)(_reactWindow.FixedSizeList, (0, _extends2.default)({
+      height: overflowHeight,
+      width: width
+    }, virtualizationProps), ListRow);
+  }) : (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, null, function (_ref5) {
+    var height = _ref5.height,
+      width = _ref5.width;
+    return (0, _react2.jsx)(_reactWindow.FixedSizeList, (0, _extends2.default)({
+      height: height,
+      width: width
+    }, virtualizationProps), ListRow);
   });
 };
 exports.EuiCodeBlockVirtualized = EuiCodeBlockVirtualized;
-var ListRow = function ListRow(_ref5) {
-  var data = _ref5.data,
-    index = _ref5.index,
-    style = _ref5.style;
+var ListRow = function ListRow(_ref6) {
+  var data = _ref6.data,
+    index = _ref6.index,
+    style = _ref6.style;
   var row = data[index];
   row.properties.style = (0, _global_styling.logicalStyles)(style);
   return (0, _utils.nodeToHtml)(row, index, data, 0);

package/test-env/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -17,6 +17,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _flyout = require("../flyout");
+var _i18n = require("../i18n");
 var _header = require("../header/header.styles");
 var _context = require("./context");
 var _collapsible_nav_button = require("./collapsible_nav_button");
@@ -132,6 +133,7 @@ var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
     conditionalId: id,
     suffix: 'euiCollapsibleNav'
   });
+  var defaultAriaLabel = (0, _i18n.useEuiI18n)('euiCollapsibleNavBeta.ariaLabel', 'Site menu');
   var buttonRef = (0, _react.useRef)(null);
   var focusTrapProps = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
@@ -143,7 +145,9 @@ var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
   var cssStyles = [styles.euiCollapsibleNavBeta, styles[side], isPush && styles.isPush, isPush && isCollapsed && styles.isPushCollapsed, isOverlayFullWidth && styles.isOverlayFullWidth];
 
   // Wait for any fixed headers to be queried before rendering (prevents position jumping)
-  var flyout = fixedHeadersCount !== false && (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({}, rest, {
+  var flyout = fixedHeadersCount !== false && (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({
+    "aria-label": defaultAriaLabel
+  }, rest, {
     // EuiCollapsibleNav is significantly less permissive than EuiFlyout
     id: flyoutID,
     css: cssStyles,
@@ -175,6 +179,15 @@ var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
 exports.EuiCollapsibleNavBeta = EuiCollapsibleNavBeta;
 EuiCollapsibleNavBeta.propTypes = {
   className: _propTypes.default.string,
+  /**
+       * Overlay flyouts are considered dialogs, and dialogs must have a label.
+       * By default, a label of `Site menu` will be applied.
+       *
+       * If your usage of this component is not actually for site-wide navigation,
+       * please set your own `aria-label` or `aria-labelledby`.
+       *
+       * @default 'Site menu'
+       */
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,

package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js

@@ -59,7 +59,8 @@ var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
     size: "s",
     color: "text",
     href: href,
-    onClick: onClick
+    onClick: onClick,
+    "aria-label": title
   }, linkProps, {
     // Exclusive union shenanigans
     className: buttonClassName,
@@ -72,11 +73,11 @@ var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
 exports.EuiCollapsedNavButton = EuiCollapsedNavButton;
 EuiCollapsedNavButton.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string.isRequired,
   /**
-     * Allows customizing title's element.
+     * Allows customizing the title element.
      * Consider using a heading element for better accessibility.
      * Defaults to an unsemantic `span` or `div`, depending on context.
      */
@@ -104,11 +105,11 @@ EuiCollapsedNavButton.propTypes = {
        */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * ReactNode to render as this component's title
+       * Required text to render as the nav item title
        */
-    title: _propTypes.default.node,
+    title: _propTypes.default.string,
     /**
-       * Allows customizing title's element.
+       * Allows customizing the title element.
        * Consider using a heading element for better accessibility.
        * Defaults to an unsemantic `span` or `div`, depending on context.
        */

package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js

@@ -43,11 +43,11 @@ var EuiCollapsedNavItem = function EuiCollapsedNavItem(_ref) {
 exports.EuiCollapsedNavItem = EuiCollapsedNavItem;
 EuiCollapsedNavItem.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string.isRequired,
   /**
-     * Allows customizing title's element.
+     * Allows customizing the title element.
      * Consider using a heading element for better accessibility.
      * Defaults to an unsemantic `span` or `div`, depending on context.
      */
@@ -75,11 +75,11 @@ EuiCollapsedNavItem.propTypes = {
        */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * ReactNode to render as this component's title
+       * Required text to render as the nav item title
        */
-    title: _propTypes.default.node,
+    title: _propTypes.default.string,
     /**
-       * Allows customizing title's element.
+       * Allows customizing the title element.
        * Consider using a heading element for better accessibility.
        * Defaults to an unsemantic `span` or `div`, depending on context.
        */

package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -87,11 +87,11 @@ var EuiCollapsedNavPopover = function EuiCollapsedNavPopover(_ref) {
 exports.EuiCollapsedNavPopover = EuiCollapsedNavPopover;
 EuiCollapsedNavPopover.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string.isRequired,
   /**
-     * Allows customizing title's element.
+     * Allows customizing the title element.
      * Consider using a heading element for better accessibility.
      * Defaults to an unsemantic `span` or `div`, depending on context.
      */
@@ -119,11 +119,11 @@ EuiCollapsedNavPopover.propTypes = {
        */
   items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * ReactNode to render as this component's title
+       * Required text to render as the nav item title
        */
-    title: _propTypes.default.node,
+    title: _propTypes.default.string,
     /**
-       * Allows customizing title's element.
+       * Allows customizing the title element.
        * Consider using a heading element for better accessibility.
        * Defaults to an unsemantic `span` or `div`, depending on context.
        */
@@ -142,7 +142,7 @@ EuiCollapsedNavPopover.propTypes = {
        */
     isGroupTitle: _propTypes.default.bool
   }).isRequired), _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.node,
+    title: _propTypes.default.string,
     titleElement: _propTypes.default.oneOf(["h2", "h3", "h4", "h5", "h6", "span", "div"]),
     icon: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
     iconProps: _propTypes.default.any,