@elastic/eui 65.0.2 → 66.0.0

package/es/components/description_list/description_list_title.styles.js

@@ -12,9 +12,9 @@ import { euiTitle } from '../title/title.styles';
 export var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
       colorMode = euiThemeContext.colorMode;
-  var columnDisplay = "\n    ".concat(logicalCSS('width', '50%'), " // Flex-basis doesn't work in IE with padding\n    ").concat(logicalCSS('padding-right', euiTheme.size.s), "\n  ");
+  var columnDisplay = "\n  ".concat(logicalCSS('width', '50%'), "\n    ").concat(logicalCSS('padding-right', euiTheme.size.s), "\n  ");
   return {
-    euiDescriptionList__title: /*#__PURE__*/css(euiTextBreakWord(), "&:not(:first-of-type){", logicalCSS('margin-top', euiTheme.size.base), ";};label:euiDescriptionList__title;"),
+    euiDescriptionList__title: /*#__PURE__*/css(euiTextBreakWord(), ";;label:euiDescriptionList__title;"),
     // Types
     row: /*#__PURE__*/css(";label:row;"),
     column: /*#__PURE__*/css(columnDisplay, ";;label:column;"),
@@ -32,6 +32,10 @@ export var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyle
       compressed: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";", logicalCSS('padding-vertical', '0'), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), ";;label:compressed;")
     },
     // Alignment
-    right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;")
+    right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;"),
+    // Gutter
+    // Add margin only to the non-first <dt>.
+    s: /*#__PURE__*/css("&:not(:first-of-type){", logicalCSS('margin-top', euiTheme.size.s), ";};label:s;"),
+    m: /*#__PURE__*/css("&:not(:first-of-type){", logicalCSS('margin-top', euiTheme.size.base), ";};label:m;")
   };
 };

package/es/components/description_list/description_list_types.js

@@ -7,4 +7,5 @@
  */
 export var TYPES = ['row', 'inline', 'column', 'responsiveColumn'];
 export var ALIGNMENTS = ['center', 'left'];
-export var TEXT_STYLES = ['normal', 'reverse'];
+export var TEXT_STYLES = ['normal', 'reverse'];
+export var GUTTER_SIZES = ['s', 'm'];

package/es/components/form/field_search/field_search.js

@@ -86,26 +86,16 @@ export var EuiFieldSearch = /*#__PURE__*/function (_Component) {
 
       if (nativeInputValueSetter) {
         nativeInputValueSetter.call(_this.inputElement, '');
-      } // dispatch input event, with IE11 support/fallback
+      } // dispatch input event
 
 
-      var event;
-
-      if ('Event' in window && typeof Event === 'function') {
-        event = new Event('input', {
-          bubbles: true,
-          cancelable: false
-        });
-      } else {
-        // IE11
-        event = document.createEvent('Event');
-        event.initEvent('input', true, false);
-      }
+      var event = new Event('input', {
+        bubbles: true,
+        cancelable: false
+      });
 
       if (_this.inputElement) {
-        if (event) {
-          _this.inputElement.dispatchEvent(event);
-        } // set focus on the search field
+        _this.inputElement.dispatchEvent(event); // set focus on the search field
 
 
         _this.inputElement.focus();

package/es/components/form/range/range_input.js

@@ -34,7 +34,7 @@ export var EuiRangeInput = function EuiRangeInput(_ref) {
       autoSize = _ref$autoSize === void 0 ? true : _ref$autoSize,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  // Chrome will properly size the input based on the max value, but FF & IE do not.
+  // Chrome will properly size the input based on the max value, but FF does not.
   // Calculate the width of the input based on highest number of characters.
   // Add 2 to accommodate for input stepper
   var widthStyle = autoSize ? {

package/es/components/header/header_section/header_section_item.js

@@ -29,10 +29,11 @@ export var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className);
-  return ___EmotionJSX("div", _extends({
+  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className); // we check if there is any children and if not, we don't render anything
+
+  return children ? ___EmotionJSX("div", _extends({
     className: classes
-  }, rest), children);
+  }, rest), children) : null;
 };
 EuiHeaderSectionItem.propTypes = {
   className: PropTypes.string,

package/es/components/icon/icon.js

@@ -249,14 +249,7 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
 
       var styles = euiIconStyles(theme);
       var cssStyles = [styles.euiIcon, styles[size], color && isNamedColor(color) && styles[color], isCustomColor && styles.customColor, isElasticLogoOutline && styles.logoElasticOutline, isAppIcon && !appIconHasColor && styles.app, isLoading && styles.isLoading, !isLoading && neededLoading && styles.isLoaded];
-      var icon = this.state.icon || empty; // This is a fix for IE and Edge, which ignores tabindex="-1" on an SVG, but respects
-      // focusable="false".
-      //   - If there's no tabindex specified, we'll default the icon to not be focusable,
-      //     which is how SVGs behave in Chrome, Safari, and FF.
-      //   - If tabindex is -1, then the consumer wants the icon to be focusable by JavaScript only.
-      //   - If the tabindex is 0, the consumer wants the icon to be keyboard focusable.
-
-      var focusable = tabIndex == null || tabIndex === -1 ? 'false' : 'true';
+      var icon = this.state.icon || empty;
 
       if (typeof icon === 'string') {
         return ___EmotionJSX("img", _extends({
@@ -288,7 +281,6 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
           style: optionalCustomStyles,
           css: cssStyles,
           tabIndex: tabIndex,
-          focusable: focusable,
           role: "img",
           title: title,
           "data-icon-type": iconTitle,

package/es/components/list_group/list_group.js

@@ -262,7 +262,13 @@ EuiListGroup.propTypes = {
          * Pass-through ref reference specifically for targeting
          * instances where the item content is rendered as a `button`
          */
-    buttonRef: PropTypes.any
+    buttonRef: PropTypes.any,
+
+    /**
+         * Text to be displayed in the tooltip when `showToolTip` is true.
+         * By default the text will be same as the label text.
+         */
+    toolTipText: PropTypes.string
   }).isRequired),
 
   /**

package/es/components/list_group/list_group_item.js

@@ -1,4 +1,4 @@
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText"],
     _excluded2 = ["iconType", "alwaysShow", "className", "isDisabled"];
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -74,6 +74,7 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
       showToolTip = _ref$showToolTip === void 0 ? false : _ref$showToolTip,
       wrapText = _ref.wrapText,
       buttonRef = _ref.buttonRef,
+      toolTipText = _ref.toolTipText,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var isHrefValid = !href || validateHref(href);
@@ -175,7 +176,7 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
       className: classes
     }, ___EmotionJSX(EuiToolTip, {
       anchorClassName: "euiListGroupItem__tooltip",
-      content: label,
+      content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
       delay: "long"
     }, itemContent));
@@ -318,5 +319,11 @@ EuiListGroupItem.propTypes = {
        * Pass-through ref reference specifically for targeting
        * instances where the item content is rendered as a `button`
        */
-  buttonRef: PropTypes.any
+  buttonRef: PropTypes.any,
+
+  /**
+       * Text to be displayed in the tooltip when `showToolTip` is true.
+       * By default the text will be same as the label text.
+       */
+  toolTipText: PropTypes.string
 };

package/es/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -252,6 +252,12 @@ EuiPinnableListGroup.propTypes = {
          */
     buttonRef: PropTypes.any,
 
+    /**
+         * Text to be displayed in the tooltip when `showToolTip` is true.
+         * By default the text will be same as the label text.
+         */
+    toolTipText: PropTypes.string,
+
     /**
        * Saves the pinned status and changes the visibility of the pin icon
        */
@@ -362,7 +368,13 @@ EuiPinnableListGroup.propTypes = {
          * Pass-through ref reference specifically for targeting
          * instances where the item content is rendered as a `button`
          */
-    buttonRef: PropTypes.any
+    buttonRef: PropTypes.any,
+
+    /**
+         * Text to be displayed in the tooltip when `showToolTip` is true.
+         * By default the text will be same as the label text.
+         */
+    toolTipText: PropTypes.string
   }).isRequired)]),
 
   /**

package/es/components/modal/modal.js

@@ -77,9 +77,7 @@ export var EuiModal = function EuiModal(_ref) {
       color: "text",
       "aria-label": closeModal
     });
-  }), ___EmotionJSX("div", {
-    className: "euiModal__flex"
-  }, children))));
+  }), children)));
 };
 EuiModal.propTypes = {
   className: PropTypes.string,

package/es/components/observer/mutation_observer/mutation_observer.js

@@ -65,7 +65,7 @@ export var EuiMutationObserver = /*#__PURE__*/function (_EuiObserver) {
 }(EuiObserver);
 
 var makeMutationObserver = function makeMutationObserver(node, _observerOptions, callback) {
-  // IE11 and the MutationObserver polyfill used in Kibana (for Jest) implement
+  // The MutationObserver polyfill used in Kibana (for Jest) implements
   // an older spec in which specifying `attributeOldValue` or `attributeFilter`
   // without specifying `attributes` results in a `SyntaxError`.
   // The following logic patches the newer spec in which `attributes: true` can be

package/es/components/page/page_sidebar/page_sidebar.js

@@ -64,13 +64,17 @@ export var EuiPageSidebar = function EuiPageSidebar(_ref) {
       setInlineStyles = _useState2[1];
 
   useEffect(function () {
+    var updatedStyles = _objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth));
+
     if (sticky) {
       var _document$body$datase;
 
       var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       var offset = _typeof(sticky) === 'object' ? sticky === null || sticky === void 0 ? void 0 : sticky.offset : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
-      setInlineStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth)), logicalStyle('top', offset)), logicalStyle('max-height', "calc(100vh - ".concat(offset, "px)"))));
+      updatedStyles = _objectSpread(_objectSpread(_objectSpread({}, updatedStyles), logicalStyle('top', offset)), logicalStyle('max-height', "calc(100vh - ".concat(offset, "px)")));
     }
+
+    setInlineStyles(updatedStyles);
   }, [style, sticky, themeContext.euiTheme.base, isResponding, minWidth]);
   return ___EmotionJSX("div", _extends({
     className: className,

package/es/components/table/table_row_cell.js

@@ -203,9 +203,8 @@ EuiTableRowCell.propTypes = {
     showOnHover: PropTypes.bool,
 
     /**
-       * Setting `textOnly` to `false` will break words unnecessarily on FF and
-       * IE.  To combat this problem on FF, wrap contents with the css utility
-       * `.eui-textBreakWord`.
+       * Creates a text wrapper around cell content that helps word break or truncate
+       * long text correctly.
        */
     textOnly: PropTypes.bool,
 
@@ -226,9 +225,8 @@ EuiTableRowCell.propTypes = {
   showOnHover: PropTypes.bool,
 
   /**
-     * Setting `textOnly` to `false` will break words unnecessarily on FF and
-     * IE.  To combat this problem on FF, wrap contents with the css utility
-     * `.eui-textBreakWord`.
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
   textOnly: PropTypes.bool,
 

package/es/components/tabs/tabbed_content/tabbed_content.js

@@ -136,24 +136,6 @@ export var EuiTabbedContent = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(EuiTabbedContent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // IE11 doesn't support the `relatedTarget` event property for blur events
-      // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.addEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.removeEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -182,7 +164,8 @@ export var EuiTabbedContent = /*#__PURE__*/function (_Component) {
         ref: this.tabsRef,
         expand: expand,
         size: size,
-        onFocus: this.initializeFocus
+        onFocus: this.initializeFocus,
+        onBlur: this.removeFocus
       }, tabs.map(function (tab) {
         var id = tab.id,
             name = tab.name,

package/es/global_styling/mixins/_typography.js

@@ -29,7 +29,7 @@ export var useEuiFontSize = function useEuiFontSize(scale, options) {
  */
 
 export var euiTextBreakWord = function euiTextBreakWord() {
-  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other\n  word-break: break-word; // IE doesn't understand but that's ok\n";
+  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-break: break-word;\n";
 };
 /**
  * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.

package/es/services/theme/hooks.js

@@ -7,18 +7,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useMemo } from 'react';
 import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useEuiTheme = function useEuiTheme() {
   var theme = useContext(EuiThemeContext);
   var colorMode = useContext(EuiColorModeContext);
   var modifications = useContext(EuiModificationsContext);
-  return {
-    euiTheme: theme,
-    colorMode: colorMode,
-    modifications: modifications
-  };
+  var assembledTheme = useMemo(function () {
+    return {
+      euiTheme: theme,
+      colorMode: colorMode,
+      modifications: modifications
+    };
+  }, [theme, colorMode, modifications]);
+  return assembledTheme;
 };
 // Provide the component props interface as the generic to allow the docs props table to populate.
 // e.g., `const EuiComponent = withEuiTheme<EuiComponentProps>(_EuiComponent)`
@@ -26,17 +29,9 @@ export var withEuiTheme = function withEuiTheme(Component) {
   var componentName = Component.displayName || Component.name || 'ComponentWithTheme';
 
   var Render = function Render(props, ref) {
-    var _useEuiTheme = useEuiTheme(),
-        euiTheme = _useEuiTheme.euiTheme,
-        colorMode = _useEuiTheme.colorMode,
-        modifications = _useEuiTheme.modifications;
-
+    var theme = useEuiTheme();
     return ___EmotionJSX(Component, _extends({
-      theme: {
-        euiTheme: euiTheme,
-        colorMode: colorMode,
-        modifications: modifications
-      },
+      theme: theme,
       ref: ref
     }, props));
   };

package/eui.d.ts

@@ -9471,7 +9471,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	    areAllOptionsSelected: () => boolean;
 	    onComboBoxFocus: FocusEventHandler<HTMLInputElement>;
 	    setCustomOptions: (isContainerBlur: boolean) => void;
-	    onContainerBlur: EventListener;
+	    onContainerBlur: FocusEventHandler<HTMLDivElement>;
 	    onKeyDown: KeyboardEventHandler<HTMLDivElement>;
 	    onOptionEnterKey: OptionHandler<T>;
 	    onOptionClick: OptionHandler<T>;
@@ -9970,6 +9970,11 @@ declare module '@elastic/eui/src/components/list_group/list_group_item' {
 	     * instances where the item content is rendered as a `button`
 	     */
 	    buttonRef?: React.Ref<HTMLButtonElement>;
+	    /**
+	     * Text to be displayed in the tooltip when `showToolTip` is true.
+	     * By default the text will be same as the label text.
+	     */
+	    toolTipText?: string;
 	};
 	export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps>;
 	export {};
@@ -12268,7 +12273,7 @@ declare module '@elastic/eui/src/components/tabs/tabs' {
 
 }
 declare module '@elastic/eui/src/components/tabs/tabbed_content/tabbed_content' {
-	import { Component, HTMLAttributes, ReactNode } from 'react';
+	import { Component, HTMLAttributes, ReactNode, FocusEvent } from 'react';
 	import { EuiTabsSizes } from '@elastic/eui/src/components/tabs/tabs';
 	import { EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
 	import { CommonProps } from '@elastic/eui/src/components/common';
@@ -12320,11 +12325,9 @@ declare module '@elastic/eui/src/components/tabs/tabbed_content/tabbed_content'
 	    private readonly rootId;
 	    private readonly tabsRef;
 	    constructor(props: EuiTabbedContentProps);
-	    componentDidMount(): void;
-	    componentWillUnmount(): void;
 	    focusTab: () => void;
 	    initializeFocus: () => void;
-	    removeFocus: (blurEvent: FocusEvent) => void;
+	    removeFocus: (blurEvent: FocusEvent<HTMLDivElement>) => void;
 	    onTabClick: (selectedTab: EuiTabbedContentTab) => void;
 	    render(): JSX.Element;
 	}
@@ -13226,6 +13229,10 @@ declare module '@elastic/eui/src/components/description_list/description_list_ty
 	     * Props object to be passed to `EuiDescriptionListDescription`
 	     */
 	    descriptionProps?: HTMLAttributes<HTMLElement> & CommonProps;
+	    /**
+	     * Vertical spacing added between `EuiDescriptionList` elements
+	     */
+	    gutterSize?: EuiDescriptionListGutterSizes;
 	}
 	export const TYPES: readonly ["row", "inline", "column", "responsiveColumn"];
 	export type EuiDescriptionListType = typeof TYPES[number];
@@ -13233,6 +13240,8 @@ declare module '@elastic/eui/src/components/description_list/description_list_ty
 	export type EuiDescriptionListAlignment = typeof ALIGNMENTS[number];
 	export const TEXT_STYLES: readonly ["normal", "reverse"];
 	export type EuiDescriptionListTextStyle = typeof TEXT_STYLES[number];
+	export const GUTTER_SIZES: readonly ["s", "m"];
+	export type EuiDescriptionListGutterSizes = typeof GUTTER_SIZES[number];
 
 }
 declare module '@elastic/eui/src/components/description_list/description_list_title.styles' {
@@ -13253,12 +13262,14 @@ declare module '@elastic/eui/src/components/description_list/description_list_ti
 	        compressed: import("@emotion/utils").SerializedStyles;
 	    };
 	    right: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
 	};
 
 }
 declare module '@elastic/eui/src/components/description_list/description_list_context' {
 	
-	import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list_types'; type EuiDescriptionListContextValues = Required<Pick<EuiDescriptionListProps, 'type' | 'textStyle' | 'align'>> & {
+	import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list_types'; type EuiDescriptionListContextValues = Required<Pick<EuiDescriptionListProps, 'type' | 'textStyle' | 'align' | 'gutterSize'>> & {
 	    compressed?: EuiDescriptionListProps['compressed'];
 	};
 	export const contextDefaults: EuiDescriptionListContextValues;
@@ -13292,6 +13303,8 @@ declare module '@elastic/eui/src/components/description_list/description_list_de
 	        normal: import("@emotion/utils").SerializedStyles;
 	    };
 	    left: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -18076,9 +18089,8 @@ declare module '@elastic/eui/src/components/table/table_row_cell' {
 	     */
 	    showOnHover?: boolean;
 	    /**
-	     * Setting `textOnly` to `false` will break words unnecessarily on FF and
-	     * IE.  To combat this problem on FF, wrap contents with the css utility
-	     * `.eui-textBreakWord`.
+	     * Creates a text wrapper around cell content that helps word break or truncate
+	     * long text correctly.
 	     */
 	    textOnly?: boolean;
 	    /**
@@ -18512,6 +18524,10 @@ declare module '@elastic/eui/src/components/basic_table/table_types' {
 	     */
 	    sortable?: boolean | ((item: T) => Primitive);
 	    isExpander?: boolean;
+	    /**
+	     * Creates a text wrapper around cell content that helps word break or truncate
+	     * long text correctly.
+	     */
 	    textOnly?: boolean;
 	    /**
 	     * Defines the horizontal alignment of the column
@@ -18818,7 +18834,10 @@ declare module '@elastic/eui/src/components/basic_table/basic_table' {
 	     */
 	    tableLayout?: 'fixed' | 'auto';
 	    /**
-	     * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+	     * Applied to table cells. Any cell using a render function will set this to be false.
+	     *
+	     * Creates a text wrapper around cell content that helps word break or truncate
+	     * long text correctly.
 	     */
 	    textOnly?: boolean;
 	} type BasicTableWithPaginationProps<T> = Omit<BasicTableProps<T>, 'pagination' | 'onChange'> & {

package/i18ntokens.json

@@ -21,11 +21,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 309,
+        "line": 312,
         "column": 6
       },
       "end": {
-        "line": 309,
+        "line": 312,
         "column": 79
       }
     },
@@ -37,11 +37,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 671,
+        "line": 674,
         "column": 10
       },
       "end": {
-        "line": 675,
+        "line": 678,
         "column": 12
       }
     },
@@ -53,11 +53,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 684,
+        "line": 687,
         "column": 12
       },
       "end": {
-        "line": 688,
+        "line": 691,
         "column": 14
       }
     },
@@ -69,11 +69,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 692,
+        "line": 695,
         "column": 12
       },
       "end": {
-        "line": 696,
+        "line": 699,
         "column": 14
       }
     },
@@ -85,11 +85,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 701,
+        "line": 704,
         "column": 10
       },
       "end": {
-        "line": 705,
+        "line": 708,
         "column": 12
       }
     },
@@ -101,11 +101,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 747,
+        "line": 750,
         "column": 6
       },
       "end": {
-        "line": 747,
+        "line": 750,
         "column": 77
       }
     },
@@ -117,11 +117,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1140,
+        "line": 1143,
         "column": 8
       },
       "end": {
-        "line": 1140,
+        "line": 1143,
         "column": 79
       }
     },
@@ -133,11 +133,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1360,
+        "line": 1363,
         "column": 8
       },
       "end": {
-        "line": 1364,
+        "line": 1367,
         "column": 9
       }
     },
@@ -773,11 +773,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 992,
+        "line": 968,
         "column": 10
       },
       "end": {
-        "line": 995,
+        "line": 971,
         "column": 11
       }
     },

package/lib/components/basic_table/basic_table.js

@@ -1251,6 +1251,11 @@ EuiBasicTable.propTypes = {
        */
     sortable: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.func.isRequired]),
     isExpander: _propTypes.default.bool,
+
+    /**
+       * Creates a text wrapper around cell content that helps word break or truncate
+       * long text correctly.
+       */
     textOnly: _propTypes.default.bool,
 
     /**
@@ -1597,11 +1602,17 @@ EuiBasicTable.propTypes = {
   tableLayout: _propTypes.default.oneOf(["fixed", "auto"]),
 
   /**
-     * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+     * Applied to table cells. Any cell using a render function will set this to be false.
+     *
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
 
   /**
-     * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+     * Applied to table cells. Any cell using a render function will set this to be false.
+     *
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
   textOnly: _propTypes.default.bool
 };