@elastic/eui 87.0.0 → 87.1.0

package/es/components/accordion/accordion.js

@@ -27,6 +27,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { tabbable } from 'tabbable';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiText } from '../text';
@@ -49,33 +50,68 @@ export 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', 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 = 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;
     });
@@ -90,44 +126,55 @@ export 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;
@@ -136,7 +183,7 @@ export 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 = classNames('euiAccordion', {
-        'euiAccordion-isOpen': isOpen
+        'euiAccordion-isOpen': this.isOpen
       }, className);
       var childrenClasses = classNames('euiAccordion__children', {
         'euiAccordion__children-isLoading': isLoading
@@ -144,7 +191,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var buttonClasses = classNames('euiAccordion__button', buttonClassName, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.className);
       var buttonContentClasses = classNames('euiAccordion__buttonContent', buttonContentClassName);
       var iconButtonClasses = classNames('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);
 
@@ -154,9 +201,9 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var childrenStyles = euiAccordionChildrenStyles(theme);
       var cssChildrenStyles = [childrenStyles.euiAccordion__children, isLoading && childrenStyles.isLoading, paddingSize && paddingSize !== 'none' && childrenStyles[paddingSize]];
       var childWrapperStyles = euiAccordionChildWrapperStyles(theme);
-      var cssChildWrapperStyles = [childWrapperStyles.euiAccordion__childWrapper, isOpen && childWrapperStyles.isOpen];
+      var cssChildWrapperStyles = [childWrapperStyles.euiAccordion__childWrapper, this.isOpen && childWrapperStyles.isOpen];
       var iconButtonStyles = 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 = euiAccordionOptionalActionStyles();
       var cssOptionalActionStyles = [optionalActionStyles.euiAccordion__optionalAction];
       var spinnerStyles = euiAccordionSpinnerStyles(theme);
@@ -174,7 +221,7 @@ export 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
@@ -208,7 +255,7 @@ export 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/es/components/auto_sizer/index.js

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { EuiAutoSizer } from './auto_sizer';
+export * from './auto_sizer';

package/es/components/breadcrumbs/breadcrumb.js

@@ -185,9 +185,8 @@ EuiBreadcrumbContent.propTypes = {
        */
     anchorPosition: PropTypes.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.bool,
     buttonRef: PropTypes.any,

package/es/components/breadcrumbs/breadcrumbs.js

@@ -160,9 +160,8 @@ EuiBreadcrumbs.propTypes = {
          */
       anchorPosition: PropTypes.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.bool,
       buttonRef: PropTypes.any,

package/es/components/code/code_block_virtualized.js

@@ -45,26 +45,34 @@ export var EuiCodeBlockVirtualized = function EuiCodeBlockVirtualized(_ref) {
       }, codeProps));
     });
   }, [codeProps]);
-  return ___EmotionJSX(EuiAutoSizer, {
-    disableHeight: typeof overflowHeight === 'number'
+  var virtualizationProps = {
+    itemData: data,
+    itemSize: rowHeight,
+    itemCount: data.length,
+    outerElementType: VirtualizedOuterElement,
+    innerElementType: VirtualizedInnerElement
+  };
+  return typeof overflowHeight === 'number' ? ___EmotionJSX(EuiAutoSizer, {
+    disableHeight: true
   }, function (_ref4) {
-    var height = _ref4.height,
-      width = _ref4.width;
-    return ___EmotionJSX(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 ___EmotionJSX(FixedSizeList, _extends({
+      height: overflowHeight,
+      width: width
+    }, virtualizationProps), ListRow);
+  }) : ___EmotionJSX(EuiAutoSizer, null, function (_ref5) {
+    var height = _ref5.height,
+      width = _ref5.width;
+    return ___EmotionJSX(FixedSizeList, _extends({
+      height: height,
+      width: width
+    }, virtualizationProps), ListRow);
   });
 };
-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 = logicalStyles(style);
   return nodeToHtml(row, index, data, 0);

package/es/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -32,6 +32,7 @@ import classNames from 'classnames';
 import { useEuiTheme, useGeneratedHtmlId, throttle } from '../../services';
 import { mathWithUnits, logicalStyle } from '../../global_styling';
 import { EuiFlyout } from '../flyout';
+import { useEuiI18n } from '../i18n';
 import { euiHeaderVariables } from '../header/header.styles';
 import { EuiCollapsibleNavContext } from './context';
 import { EuiCollapsibleNavButton } from './collapsible_nav_button';
@@ -135,6 +136,7 @@ export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
     conditionalId: id,
     suffix: 'euiCollapsibleNav'
   });
+  var defaultAriaLabel = useEuiI18n('euiCollapsibleNavBeta.ariaLabel', 'Site menu');
   var buttonRef = useRef(null);
   var focusTrapProps = useMemo(function () {
     return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
@@ -146,7 +148,9 @@ export 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 && ___EmotionJSX(EuiFlyout, _extends({}, rest, {
+  var flyout = fixedHeadersCount !== false && ___EmotionJSX(EuiFlyout, _extends({
+    "aria-label": defaultAriaLabel
+  }, rest, {
     // EuiCollapsibleNav is significantly less permissive than EuiFlyout
     id: flyoutID,
     css: cssStyles,
@@ -177,6 +181,15 @@ export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
 };
 EuiCollapsibleNavBeta.propTypes = {
   className: PropTypes.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.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,

package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js

@@ -51,7 +51,8 @@ export var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
     size: "s",
     color: "text",
     href: href,
-    onClick: onClick
+    onClick: onClick,
+    "aria-label": title
   }, linkProps, {
     // Exclusive union shenanigans
     className: buttonClassName,
@@ -63,11 +64,11 @@ export var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
 };
 EuiCollapsedNavButton.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.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.
      */
@@ -95,11 +96,11 @@ EuiCollapsedNavButton.propTypes = {
        */
   items: PropTypes.arrayOf(PropTypes.shape({
     /**
-       * ReactNode to render as this component's title
+       * Required text to render as the nav item title
        */
-    title: PropTypes.node,
+    title: PropTypes.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/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js

@@ -38,11 +38,11 @@ export var EuiCollapsedNavItem = function EuiCollapsedNavItem(_ref) {
 };
 EuiCollapsedNavItem.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.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.
      */
@@ -70,11 +70,11 @@ EuiCollapsedNavItem.propTypes = {
        */
   items: PropTypes.arrayOf(PropTypes.shape({
     /**
-       * ReactNode to render as this component's title
+       * Required text to render as the nav item title
        */
-    title: PropTypes.node,
+    title: PropTypes.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/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -83,11 +83,11 @@ export var EuiCollapsedNavPopover = function EuiCollapsedNavPopover(_ref) {
 };
 EuiCollapsedNavPopover.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.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.
      */
@@ -115,11 +115,11 @@ EuiCollapsedNavPopover.propTypes = {
        */
   items: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
     /**
-       * ReactNode to render as this component's title
+       * Required text to render as the nav item title
        */
-    title: PropTypes.node,
+    title: PropTypes.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.
        */
@@ -138,7 +138,7 @@ EuiCollapsedNavPopover.propTypes = {
        */
     isGroupTitle: PropTypes.bool
   }).isRequired), PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.node,
+    title: PropTypes.string,
     titleElement: PropTypes.oneOf(["h2", "h3", "h4", "h5", "h6", "span", "div"]),
     icon: PropTypes.oneOfType([PropTypes.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.string.isRequired, PropTypes.elementType.isRequired]),
     iconProps: PropTypes.any,

package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js

@@ -128,11 +128,11 @@ EuiCollapsibleNavAccordion.propTypes = {
   // know for sure it's an actual accordion item and not a section heading
   items: PropTypes.arrayOf(PropTypes.shape({
     /**
-       * ReactNode to render as this component's title
+       * Required text to render as the nav item title
        */
-    title: PropTypes.node.isRequired,
+    title: PropTypes.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.
        */
@@ -160,11 +160,11 @@ EuiCollapsibleNavAccordion.propTypes = {
          */
     items: PropTypes.arrayOf(PropTypes.shape({
       /**
-         * ReactNode to render as this component's title
+         * Required text to render as the nav item title
          */
-      title: PropTypes.node,
+      title: PropTypes.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/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js

@@ -67,11 +67,11 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
  */
 EuiCollapsibleNavItemDisplay.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.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.
      */
@@ -175,11 +175,11 @@ export var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
  */
 EuiCollapsibleNavSubItem.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: PropTypes.node,
+  title: PropTypes.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.
      */
@@ -247,11 +247,11 @@ export var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(_ref4) {
 };
 EuiCollapsibleNavItem.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.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.
      */

package/es/components/color_picker/color_palette_picker/color_palette_picker.js

@@ -143,7 +143,7 @@ EuiColorPalettePicker.propTypes = {
        */
   isOpen: PropTypes.bool,
   /**
-       * Optional props to pass to the underlying [EuiPopover](/#/layout/popover).
+       * Optional props to pass to the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element).
        * Allows fine-grained control of the popover dropdown menu, including
        * `repositionOnScroll` for EuiSuperSelects used within scrollable containers,
        * and customizing popover panel styling.

package/es/components/control_bar/control_bar.js

@@ -390,9 +390,8 @@ EuiControlBar.propTypes = {
            */
         anchorPosition: PropTypes.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.bool,
         buttonRef: PropTypes.any,

package/es/components/date_picker/date_picker_range.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
+var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -28,6 +28,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? true : _ref$shadow,
     _fullWidth = _ref.fullWidth,
+    _compressed = _ref.compressed,
     isCustom = _ref.isCustom,
     readOnly = _ref.readOnly,
     isLoading = _ref.isLoading,
@@ -38,8 +39,9 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     append = _ref.append,
     prepend = _ref.prepend,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // `fullWidth` should not affect inline datepickers (matches non-range behavior)
+  // `fullWidth` and `compressed` should not affect inline datepickers (matches non-range behavior)
   var fullWidth = _fullWidth && !inline;
+  var compressed = _compressed && !inline;
   var classes = classNames('euiDatePickerRange', className);
   var euiTheme = useEuiTheme();
   var styles = euiDatePickerRangeStyles(euiTheme);
@@ -111,6 +113,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     startControl: startControl,
     endControl: endControl,
     fullWidth: fullWidth,
+    compressed: compressed,
     readOnly: readOnly,
     isDisabled: disabled,
     isInvalid: isInvalid,

package/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -609,7 +609,7 @@ EuiSuperDatePickerInternal.propTypes = {
       /**
          * Common display alternatives for the anchor wrapper
          */
-      display: PropTypes.oneOf(["inlineBlock", "block"]),
+      display: PropTypes.any,
       /**
          * Delay before showing tooltip. Good for repeatable items.
          */
@@ -790,7 +790,7 @@ EuiSuperDatePicker.propTypes = {
       children: PropTypes.element.isRequired,
       className: PropTypes.string,
       content: PropTypes.node,
-      display: PropTypes.oneOf(["inlineBlock", "block"]),
+      display: PropTypes.any,
       delay: PropTypes.oneOf(["regular", "long"]).isRequired,
       title: PropTypes.node,
       id: PropTypes.string,

package/es/components/date_picker/super_date_picker/super_update_button.js

@@ -212,7 +212,7 @@ EuiSuperUpdateButton.propTypes = {
     /**
        * Common display alternatives for the anchor wrapper
        */
-    display: PropTypes.oneOf(["inlineBlock", "block"]),
+    display: PropTypes.any,
     /**
        * Delay before showing tooltip. Good for repeatable items.
        */