@elastic/eui 87.0.0 → 87.2.0

package/i18ntokens.json

@@ -5,14 +5,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 349,
+        "line": 408,
         "column": 16,
-        "index": 10174
+        "index": 12163
       },
       "end": {
-        "line": 349,
+        "line": 408,
         "column": 76,
-        "index": 10234
+        "index": 12223
       }
     },
     "filepath": "src/components/accordion/accordion.tsx"
@@ -431,6 +431,24 @@
     },
     "filepath": "src/components/code/code_block_full_screen.tsx"
   },
+  {
+    "token": "euiCollapsibleNavBeta.ariaLabel",
+    "defString": "Site menu",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 170,
+        "column": 27,
+        "index": 5493
+      },
+      "end": {
+        "line": 173,
+        "column": 3,
+        "index": 5563
+      }
+    },
+    "filepath": "src/components/collapsible_nav_beta/collapsible_nav_beta.tsx"
+  },
   {
     "token": "euiCollapsibleNavButton.ariaLabelOpen",
     "defString": "Toggle navigation open",
@@ -4667,14 +4685,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 294,
+        "line": 295,
         "column": 8,
-        "index": 9459
+        "index": 9503
       },
       "end": {
-        "line": 294,
+        "line": 295,
         "column": 78,
-        "index": 9529
+        "index": 9573
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4685,14 +4703,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 357,
+        "line": 359,
         "column": 12,
-        "index": 11739
+        "index": 11856
       },
       "end": {
-        "line": 360,
+        "line": 362,
         "column": 14,
-        "index": 11948
+        "index": 12065
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4703,14 +4721,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 362,
+        "line": 364,
         "column": 12,
-        "index": 11977
+        "index": 12094
       },
       "end": {
-        "line": 365,
+        "line": 367,
         "column": 14,
-        "index": 12149
+        "index": 12266
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4721,14 +4739,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 368,
+        "line": 370,
         "column": 12,
-        "index": 12220
+        "index": 12337
       },
       "end": {
-        "line": 371,
+        "line": 373,
         "column": 14,
-        "index": 12407
+        "index": 12524
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4901,14 +4919,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 614,
+        "line": 616,
         "column": 6,
-        "index": 18263
+        "index": 18346
       },
       "end": {
-        "line": 617,
+        "line": 619,
         "column": 8,
-        "index": 18498
+        "index": 18581
       }
     },
     "filepath": "src/components/form/range/dual_range.tsx"
@@ -4919,14 +4937,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 182,
+        "line": 183,
         "column": 6,
-        "index": 4833
+        "index": 4858
       },
       "end": {
-        "line": 185,
+        "line": 186,
         "column": 8,
-        "index": 5010
+        "index": 5035
       }
     },
     "filepath": "src/components/form/range/range.tsx"
@@ -4939,12 +4957,12 @@
       "start": {
         "line": 344,
         "column": 12,
-        "index": 9030
+        "index": 9079
       },
       "end": {
         "line": 348,
         "column": 14,
-        "index": 9276
+        "index": 9325
       }
     },
     "filepath": "src/components/form/super_select/super_select.tsx"
@@ -4957,12 +4975,12 @@
       "start": {
         "line": 351,
         "column": 8,
-        "index": 9331
+        "index": 9380
       },
       "end": {
         "line": 351,
         "column": 75,
-        "index": 9398
+        "index": 9447
       }
     },
     "filepath": "src/components/form/super_select/super_select.tsx"
@@ -6017,14 +6035,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 676,
+        "line": 671,
         "column": 16,
-        "index": 19791
+        "index": 19639
       },
       "end": {
-        "line": 679,
+        "line": 674,
         "column": 18,
-        "index": 19985
+        "index": 19833
       }
     },
     "filepath": "src/components/popover/popover.tsx"
@@ -6049,36 +6067,36 @@
   },
   {
     "token": "euiResizableButton.horizontalResizerAriaLabel",
-    "defString": "Press left or right to adjust panels size",
+    "defString": "Press the left or right arrow keys to adjust panels size",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 111,
+        "line": 69,
         "column": 4,
-        "index": 3069
+        "index": 2211
       },
       "end": {
-        "line": 120,
+        "line": 78,
         "column": 5,
-        "index": 3350
+        "index": 2522
       }
     },
     "filepath": "src/components/resizable_container/resizable_button.tsx"
   },
   {
     "token": "euiResizableButton.verticalResizerAriaLabel",
-    "defString": "Press up or down to adjust panels size",
+    "defString": "Press the up or down arrow keys to adjust panels size",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 111,
+        "line": 69,
         "column": 4,
-        "index": 3069
+        "index": 2211
       },
       "end": {
-        "line": 120,
+        "line": 78,
         "column": 5,
-        "index": 3350
+        "index": 2522
       }
     },
     "filepath": "src/components/resizable_container/resizable_button.tsx"

package/lib/components/accordion/accordion.js

@@ -7,6 +7,7 @@ exports.PADDING_SIZES = exports.EuiAccordionClass = exports.EuiAccordion = void
 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");
@@ -57,33 +58,68 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "childContent", null);
     _defineProperty(_assertThisInitialized(_this), "childWrapper", null);
+    _defineProperty(_assertThisInitialized(_this), "tabbableChildren", null);
     _defineProperty(_assertThisInitialized(_this), "state", {
       isOpen: _this.props.forceState ? _this.props.forceState === 'open' : _this.props.initialIsOpen
     });
     _defineProperty(_assertThisInitialized(_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")));
       });
     });
     _defineProperty(_assertThisInitialized(_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
+    _defineProperty(_assertThisInitialized(_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');
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_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;
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "setChildContentRef", function (node) {
       _this.childContent = node;
     });
@@ -98,44 +134,55 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_this$props3, _excluded);
 
       // Force button element to be a legend if the element is a fieldset
       var ButtonElement = Element === 'fieldset' ? 'legend' : _ButtonElement;
@@ -144,7 +191,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
@@ -152,7 +199,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);
 
@@ -162,9 +209,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);
@@ -182,7 +229,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
@@ -216,7 +263,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/lib/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/lib/components/breadcrumbs/breadcrumb.js

@@ -195,9 +195,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/lib/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, _extends({
+      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, _extends({
+      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/lib/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -11,6 +11,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");
@@ -143,6 +144,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), {}, {
@@ -154,7 +156,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, _extends({}, rest, {
+  var flyout = fixedHeadersCount !== false && (0, _react2.jsx)(_flyout.EuiFlyout, _extends({
+    "aria-label": defaultAriaLabel
+  }, rest, {
     // EuiCollapsibleNav is significantly less permissive than EuiFlyout
     id: flyoutID,
     css: cssStyles,
@@ -186,6 +190,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/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js

@@ -60,7 +60,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,
@@ -73,11 +74,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.
      */
@@ -105,11 +106,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/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js

@@ -44,11 +44,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.
      */
@@ -76,11 +76,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.
        */