@elastic/eui 91.3.0 → 92.0.0

package/optimize/es/components/flyout/index.js

@@ -10,4 +10,5 @@ export { EuiFlyout } from './flyout';
 export { EuiFlyoutBody } from './flyout_body';
 export { EuiFlyoutFooter } from './flyout_footer';
 export { EuiFlyoutHeader } from './flyout_header';
-export { euiFlyoutSlideInRight, euiFlyoutSlideInLeft } from './flyout.styles';
+export { euiFlyoutSlideInRight, euiFlyoutSlideInLeft } from './flyout.styles';
+export { EuiFlyoutResizable } from './flyout_resizable';

package/optimize/es/components/form/range/dual_range.js

@@ -54,38 +54,10 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "state", {
       id: _this.props.id || htmlIdGenerator()(),
-      rangeSliderRefAvailable: false,
       isPopoverOpen: false,
-      rangeWidth: 0,
-      isVisible: true // used to trigger a rerender if initial element width is 0
+      rangeWidth: 0
     });
     _defineProperty(_assertThisInitialized(_this), "preventPopoverClose", false);
-    _defineProperty(_assertThisInitialized(_this), "rangeSliderRef", null);
-    _defineProperty(_assertThisInitialized(_this), "handleRangeSliderRefUpdate", function (ref) {
-      _this.rangeSliderRef = ref;
-      if (ref) {
-        if (_this.isInPopover) {
-          // Wait a tick for popover rendering to settle
-          requestAnimationFrame(function () {
-            _this.setState({
-              rangeSliderRefAvailable: true,
-              rangeWidth: ref.clientWidth
-            });
-          });
-        } else {
-          // If not in a popover, no need to wait
-          _this.setState({
-            rangeSliderRefAvailable: true,
-            rangeWidth: ref.clientWidth
-          });
-        }
-      } else {
-        _this.setState({
-          rangeSliderRefAvailable: false,
-          rangeWidth: 0
-        });
-      }
-    });
     _defineProperty(_assertThisInitialized(_this), "leftPosition", 0);
     _defineProperty(_assertThisInitialized(_this), "dragAcc", 0);
     _defineProperty(_assertThisInitialized(_this), "_determineInvalidThumbMovement", function (newVal, lower, upper, e) {
@@ -276,14 +248,11 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         isPopoverOpen: false
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "onResize", function (width) {
-      var _this$props$inputPopo, _this$props$inputPopo2;
-      if (_this.rangeSliderRef) {
-        _this.setState({
-          rangeWidth: _this.rangeSliderRef.clientWidth
-        });
-      }
-      (_this$props$inputPopo = _this.props.inputPopoverProps) === null || _this$props$inputPopo === void 0 ? void 0 : (_this$props$inputPopo2 = _this$props$inputPopo.onPanelResize) === null || _this$props$inputPopo2 === void 0 ? void 0 : _this$props$inputPopo2.call(_this$props$inputPopo, width);
+    _defineProperty(_assertThisInitialized(_this), "setRangeWidth", function (_ref) {
+      var width = _ref.width;
+      _this.setState({
+        rangeWidth: width
+      });
     });
     _defineProperty(_assertThisInitialized(_this), "getNearestStep", function (value) {
       var min = _this.props.min;
@@ -306,7 +275,7 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var delta = _this.leftPosition - x;
       _this.leftPosition = x;
       _this.dragAcc = _this.dragAcc + delta;
-      var percentageOfArea = _this.dragAcc / _this.rangeSliderRef.clientWidth;
+      var percentageOfArea = _this.dragAcc / _this.state.rangeWidth;
       var percentageOfRange = percentageOfArea * (max - min);
       var newLower = _this.getNearestStep(lowerValue - percentageOfRange);
       var newUpper = _this.getNearestStep(upperValue - percentageOfRange);
@@ -350,32 +319,12 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     get: function get() {
       return this.lowerValueIsValid && this.upperValueIsValid;
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$rangeSliderRef;
-      if (((_this$rangeSliderRef = this.rangeSliderRef) === null || _this$rangeSliderRef === void 0 ? void 0 : _this$rangeSliderRef.clientWidth) === 0) {
-        this.setState({
-          isVisible: false
-        });
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$rangeSliderRef2;
-      if ((_this$rangeSliderRef2 = this.rangeSliderRef) !== null && _this$rangeSliderRef2 !== void 0 && _this$rangeSliderRef2.clientWidth && !this.state.isVisible) {
-        this.setState({
-          isVisible: true
-        });
-      }
-    }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _ref = this.context,
-        defaultFullWidth = _ref.defaultFullWidth;
+      var _ref2 = this.context,
+        defaultFullWidth = _ref2.defaultFullWidth;
       var _this$props = this.props,
         className = _this$props.className,
         customCss = _this$props.css,
@@ -531,10 +480,10 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var classes = classNames('euiDualRange', className);
       var dualRangeStyles = euiDualRangeStyles();
       var cssStyles = [dualRangeStyles.euiDualRange, customCss];
-      var leftThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.lowerValue) || min, this.state.rangeWidth) : {
+      var leftThumbPosition = this.state.rangeWidth ? this.calculateThumbPositionStyle(Number(this.lowerValue) || min, this.state.rangeWidth) : {
         left: '0'
       };
-      var rightThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.upperValue) || max, this.state.rangeWidth) : {
+      var rightThumbPosition = this.state.rangeWidth ? this.calculateThumbPositionStyle(Number(this.upperValue) || max, this.state.rangeWidth) : {
         left: '0'
       };
       var leftThumbColor = levels && getLevelColor(levels, Number(this.lowerValue));
@@ -578,7 +527,6 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       }, ___EmotionJSX(EuiRangeSlider, _extends({
         className: "euiDualRange__slider",
         css: dualRangeStyles.euiDualRange__slider,
-        ref: this.handleRangeSliderRefUpdate,
         id: id,
         name: name,
         min: min,
@@ -592,7 +540,9 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         showRange: showRange,
         onFocus: _onFocus,
         onBlur: _onBlur
-      }, rest)), this.state.rangeSliderRefAvailable && ___EmotionJSX(React.Fragment, null, isDraggable && this.isValid && ___EmotionJSX(EuiRangeDraggable, {
+      }, rest, {
+        onResize: this.setRangeWidth
+      })), isDraggable && this.isValid && ___EmotionJSX(EuiRangeDraggable, {
         min: min,
         max: max,
         value: [this.lowerValue, this.upperValue],
@@ -632,7 +582,7 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         style: logicalStyles(rightThumbStyles),
         "aria-describedby": showInputOnly ? undefined : this.props['aria-describedby'],
         "aria-label": showInputOnly ? undefined : this.props['aria-label']
-      })), showRange && this.isValid && ___EmotionJSX(EuiRangeHighlight, {
+      }), showRange && this.isValid && ___EmotionJSX(EuiRangeHighlight, {
         showTicks: showTicks,
         min: Number(min),
         max: Number(max),
@@ -664,7 +614,6 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         isOpen: this.state.isPopoverOpen,
         closePopover: this.closePopover,
         disableFocusTrap: true,
-        onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
       }), theRange) : undefined;
       return thePopover || theRange;

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

@@ -57,9 +57,10 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         _this.props.onChange(e, isValid);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "rangeSliderRef", function (ref) {
+    _defineProperty(_assertThisInitialized(_this), "setTrackWidth", function (_ref) {
+      var width = _ref.width;
       _this.setState({
-        trackWidth: (ref === null || ref === void 0 ? void 0 : ref.clientWidth) || 0
+        trackWidth: width
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onInputFocus", function (e) {
@@ -103,8 +104,8 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _ref = this.context,
-        defaultFullWidth = _ref.defaultFullWidth;
+      var _ref2 = this.context,
+        defaultFullWidth = _ref2.defaultFullWidth;
       var _this$props = this.props,
         className = _this$props.className,
         compressed = _this$props.compressed,
@@ -210,7 +211,7 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         "aria-hidden": !!showInput,
         thumbColor: thumbColor
       }, rest, {
-        ref: this.rangeSliderRef
+        onResize: this.setTrackWidth
       })), showRange && this.isValid && ___EmotionJSX(EuiRangeHighlight, {
         showTicks: showTicks,
         min: Number(min),

package/optimize/es/components/form/range/range_slider.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "disabled", "id", "max", "min", "name", "step", "onChange", "tabIndex", "value", "style", "showTicks", "showRange", "thumbColor"];
+var _excluded = ["className", "disabled", "id", "max", "min", "name", "step", "onChange", "tabIndex", "value", "style", "showTicks", "showRange", "thumbColor", "onResize"];
 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) { _defineProperty(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; }
 /*
@@ -12,14 +12,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { forwardRef, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../../services';
 import { logicalStyles } from '../../../global_styling';
+import { EuiResizeObserver } from '../../observer/resize_observer';
 import { euiRangeLevelColor } from './range_levels_colors';
 import { euiRangeSliderStyles, euiRangeSliderThumbStyles } from './range_slider.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiRangeSlider = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var EuiRangeSlider = function EuiRangeSlider(_ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
     id = _ref.id,
@@ -34,6 +35,7 @@ export var EuiRangeSlider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     showTicks = _ref.showTicks,
     showRange = _ref.showRange,
     thumbColor = _ref.thumbColor,
+    onResize = _ref.onResize,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiRangeSlider', className);
   var euiTheme = useEuiTheme();
@@ -45,21 +47,24 @@ export var EuiRangeSlider = /*#__PURE__*/forwardRef(function (_ref, ref) {
       color: thumbColor && euiRangeLevelColor(thumbColor, euiTheme.euiTheme)
     }, style));
   }, [thumbColor, euiTheme, style]);
-  return ___EmotionJSX("input", _extends({
-    ref: ref,
-    type: "range",
-    id: id,
-    name: name,
-    className: classes,
-    css: cssStyles,
-    min: min,
-    max: max,
-    step: step,
-    value: value,
-    disabled: disabled,
-    onChange: onChange,
-    style: sliderStyle,
-    tabIndex: tabIndex
-  }, rest));
-});
-EuiRangeSlider.displayName = 'EuiRangeSlider';
+  return ___EmotionJSX(EuiResizeObserver, {
+    onResize: onResize
+  }, function (resizeRef) {
+    return ___EmotionJSX("input", _extends({
+      ref: resizeRef,
+      type: "range",
+      id: id,
+      name: name,
+      className: classes,
+      css: cssStyles,
+      min: min,
+      max: max,
+      step: step,
+      value: value,
+      disabled: disabled,
+      onChange: onChange,
+      style: sliderStyle,
+      tabIndex: tabIndex
+    }, rest));
+  });
+};

package/optimize/es/components/form/text_area/text_area.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "compressed", "fullWidth", "id", "inputRef", "isLoading", "isInvalid", "name", "placeholder", "resize", "rows"];
+var _excluded = ["children", "className", "compressed", "fullWidth", "id", "icon", "inputRef", "isLoading", "isInvalid", "isClearable", "name", "placeholder", "resize", "rows"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,8 +9,9 @@ var _excluded = ["children", "className", "compressed", "fullWidth", "id", "inpu
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useRef, useMemo } from 'react';
 import classNames from 'classnames';
+import { useCombinedRefs } from '../../../services';
 import { EuiFormControlLayout } from '../form_control_layout';
 import { EuiValidatableControl } from '../validatable_control';
 import { useFormContext } from '../eui_form_context';
@@ -31,9 +32,11 @@ export var EuiTextArea = function EuiTextArea(props) {
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
     id = props.id,
+    icon = props.icon,
     inputRef = props.inputRef,
     isLoading = props.isLoading,
     isInvalid = props.isInvalid,
+    isClearable = props.isClearable,
     name = props.name,
     placeholder = props.placeholder,
     _props$resize = props.resize,
@@ -52,10 +55,33 @@ export var EuiTextArea = function EuiTextArea(props) {
   } else {
     definedRows = 6;
   }
+  var ref = useRef(null);
+  var refs = useCombinedRefs([ref, inputRef]);
+  var clear = useMemo(function () {
+    if (isClearable) {
+      return {
+        onClick: function onClick() {
+          if (ref.current) {
+            ref.current.value = '';
+            var event = new Event('input', {
+              bubbles: true,
+              cancelable: false
+            });
+            ref.current.dispatchEvent(event);
+            ref.current.focus(); // set focus back to the textarea
+          }
+        },
+
+        'data-test-subj': 'clearTextAreaButton'
+      };
+    }
+  }, [isClearable]);
   return ___EmotionJSX(EuiFormControlLayout, {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    clear: clear,
+    icon: icon,
     className: "euiFormControlLayout--euiTextArea"
   }, ___EmotionJSX(EuiValidatableControl, {
     isInvalid: isInvalid
@@ -65,7 +91,7 @@ export var EuiTextArea = function EuiTextArea(props) {
     rows: definedRows,
     name: name,
     id: id,
-    ref: inputRef,
+    ref: refs,
     placeholder: placeholder
   }), children)));
 };

package/optimize/es/components/index.js

@@ -26,7 +26,6 @@ export * from './combo_box';
 export * from './comment_list';
 export * from './context';
 export * from './context_menu';
-export * from './control_bar';
 export * from './copy';
 export * from './datagrid';
 export * from './date_picker';
@@ -60,7 +59,6 @@ export * from './markdown_editor';
 export * from './mark';
 export * from './modal';
 export * from './observer/mutation_observer';
-export * from './notification';
 export * from './outside_click_detector';
 export * from './overlay_mask';
 export * from './page';

package/optimize/es/components/markdown_editor/markdown_editor.js

@@ -258,20 +258,19 @@ export var EuiMarkdownEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setEditorToolbarHeight(editorToolbarRef.current.offsetHeight);
   }, [setEditorToolbarHeight]);
   useEffect(function () {
-    if (isPreviewing && autoExpandPreview && height !== 'full') {
-      if (previewRef.current.scrollHeight > currentHeight) {
-        // scrollHeight does not include the border or margin
-        // so we ask for the computed value for those,
-        // which is always in pixels because getComputedValue
-        // returns the resolved values
-        var elementComputedStyle = window.getComputedStyle(previewRef.current);
-        var borderWidth = parseFloat(elementComputedStyle.borderTopWidth) + parseFloat(elementComputedStyle.borderBottomWidth);
-        var marginWidth = parseFloat(elementComputedStyle.marginTop) + parseFloat(elementComputedStyle.marginBottom);
+    if (height === 'full' || currentHeight === 'full') return;
+    if (isPreviewing && autoExpandPreview && previewRef.current.scrollHeight > currentHeight) {
+      // scrollHeight does not include the border or margin
+      // so we ask for the computed value for those,
+      // which is always in pixels because getComputedValue
+      // returns the resolved values
+      var elementComputedStyle = window.getComputedStyle(previewRef.current);
+      var borderWidth = parseFloat(elementComputedStyle.borderTopWidth) + parseFloat(elementComputedStyle.borderBottomWidth);
+      var marginWidth = parseFloat(elementComputedStyle.marginTop) + parseFloat(elementComputedStyle.marginBottom);
 
-        // then add an extra pixel for safety and because the scrollHeight value is rounded
-        var extraHeight = borderWidth + marginWidth + 1;
-        setCurrentHeight(previewRef.current.scrollHeight + extraHeight);
-      }
+      // then add an extra pixel for safety and because the scrollHeight value is rounded
+      var extraHeight = borderWidth + marginWidth + 1;
+      setCurrentHeight(previewRef.current.scrollHeight + extraHeight);
     }
   }, [currentHeight, isPreviewing, height, autoExpandPreview]);
   var previewHeight = height === 'full' ? "calc(100% - ".concat(editorFooterHeight, "px)") : currentHeight;

package/optimize/es/components/page_template/bottom_bar/page_bottom_bar.js

@@ -55,7 +55,7 @@ export var _EuiPageBottomBar = function _EuiPageBottomBar(_ref2) {
     // Hide the overflow in case of larger flex margins than padding
     ,
     css: _ref
-    // Using unknown here because of the possible conflict with overriding props and position `sticky`
+    // Using object here because of the possible conflict with overriding props and position `sticky`
   }, rest), ___EmotionJSX(EuiPageSection, {
     paddingSize: paddingSize,
     restrictWidth: restrictWidth

package/optimize/es/components/selectable/selectable_list/selectable_list_item.js

@@ -208,7 +208,7 @@ export var EuiSelectableListItem = /*#__PURE__*/function (_Component) {
           onFocusBadgeNode = ___EmotionJSX(EuiBadge, _extends({
             className: "euiSelectableListItem__onFocusBadge"
           }, defaultOnFocusBadgeProps));
-        } else if (!!onFocusBadge && onFocusBadge !== false) {
+        } else if (typeof onFocusBadge !== 'boolean' && !!onFocusBadge) {
           var _children = onFocusBadge.children,
             _className = onFocusBadge.className,
             restBadgeProps = _objectWithoutProperties(onFocusBadge, _excluded2);

package/optimize/es/components/tree_view/tree_view.js

@@ -42,34 +42,12 @@ var displayToClassNameMap = {
 export var EuiTreeView = /*#__PURE__*/function (_Component) {
   _inherits(EuiTreeView, _Component);
   var _super = _createSuper(EuiTreeView);
-  function EuiTreeView() {
+  function EuiTreeView(props, context) {
     var _this;
     _classCallCheck(this, EuiTreeView);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props, context);
     _defineProperty(_assertThisInitialized(_this), "treeIdGenerator", htmlIdGenerator('euiTreeView'));
-    _defineProperty(_assertThisInitialized(_this), "isNested", !!_this.context);
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      openItems: _this.props.expandByDefault ? _this.props.items.map(function (_ref) {
-        var id = _ref.id,
-          children = _ref.children;
-        return children ? id : null;
-      }).filter(function (x) {
-        return x != null;
-      }) : _this.props.items.map(function (_ref2) {
-        var id = _ref2.id,
-          children = _ref2.children,
-          isExpanded = _ref2.isExpanded;
-        return children && isExpanded ? id : null;
-      }).filter(function (x) {
-        return x != null;
-      }),
-      activeItem: '',
-      treeID: getTreeId(_this.props.id, _this.context, _this.treeIdGenerator),
-      expandChildNodes: _this.props.expandByDefault || false
-    });
+    _defineProperty(_assertThisInitialized(_this), "isNested", void 0);
     _defineProperty(_assertThisInitialized(_this), "buttonRef", []);
     _defineProperty(_assertThisInitialized(_this), "setButtonRef", function (ref, index) {
       _this.buttonRef[index] = ref;
@@ -164,6 +142,26 @@ export var EuiTreeView = /*#__PURE__*/function (_Component) {
         _this.buttonRef[index].focus();
       }
     });
+    _this.isNested = !!_this.context;
+    _this.state = {
+      openItems: _this.props.expandByDefault ? _this.props.items.map(function (_ref) {
+        var id = _ref.id,
+          children = _ref.children;
+        return children ? id : null;
+      }).filter(function (x) {
+        return x != null;
+      }) : _this.props.items.map(function (_ref2) {
+        var id = _ref2.id,
+          children = _ref2.children,
+          isExpanded = _ref2.isExpanded;
+        return children && isExpanded ? id : null;
+      }).filter(function (x) {
+        return x != null;
+      }),
+      activeItem: '',
+      treeID: getTreeId(_this.props.id, context, _this.treeIdGenerator),
+      expandChildNodes: _this.props.expandByDefault || false
+    };
     return _this;
   }
   _createClass(EuiTreeView, [{

package/optimize/es/utils/prop_types/is.js

@@ -12,7 +12,7 @@ export var is = function is(expectedValue) {
     var compName = componentName || 'ANONYMOUS';
     var value = props[propName];
     if (value !== expectedValue) {
-      return new Error("[".concat(propName, "] property in [").concat(compName, "] component is expected to equal [").concat(expectedValue, "] but\n         [").concat(value, "] was provided instead."));
+      return new Error("[".concat(propName.toString(), "] property in [").concat(compName, "] component is expected to equal [").concat(expectedValue, "] but\n         [").concat(value, "] was provided instead."));
     }
     return null;
   };
@@ -20,7 +20,7 @@ export var is = function is(expectedValue) {
     var compName = componentName || 'ANONYMOUS';
     var value = props[propName];
     if (isNil(value)) {
-      return new Error("[".concat(propName, "] property in [").concat(compName, "] component is required but seems to be missing"));
+      return new Error("[".concat(propName.toString(), "] property in [").concat(compName, "] component is required but seems to be missing"));
     }
     return validator(props, propName, componentName);
   };

package/optimize/lib/components/basic_table/basic_table.js

@@ -430,7 +430,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
         var sortDirection = _this2.resolveColumnSortDirection(column);
         items.push({
           name: column.name,
-          key: "_data_s_".concat(column.field, "_").concat(index),
+          key: "_data_s_".concat(String(column.field), "_").concat(index),
           onSort: _this2.resolveColumnOnSort(column),
           isSorted: !!sortDirection,
           isSortAscending: sortDirection ? _services.SortDirection.isAsc(sortDirection) : undefined
@@ -583,11 +583,11 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
           }
         }
         headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, (0, _extends2.default)({
-          key: "_data_h_".concat(field, "_").concat(index),
+          key: "_data_h_".concat(String(field), "_").concat(index),
           align: columnAlign,
           width: width,
           mobileOptions: mobileOptions,
-          "data-test-subj": "tableHeaderCell_".concat(field, "_").concat(index),
+          "data-test-subj": "tableHeaderCell_".concat(String(field), "_").concat(index),
           description: description
         }, sorting), name));
       });
@@ -624,7 +624,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
 
         if (footer) {
           footers.push((0, _react2.jsx)(_table.EuiTableFooterCell, {
-            key: "footer_".concat(field, "_").concat(footers.length - 1),
+            key: "footer_".concat(String(field), "_").concat(footers.length - 1),
             align: align
           }, footer));
           hasDefinedFooter = true;
@@ -807,19 +807,22 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderItemActionsCell",
     value: function renderItemActionsCell(itemId, item, column, columnIndex) {
-      var _this7 = this;
-      var actionEnabled = function actionEnabled(action) {
-        return _this7.state.selection.length === 0 && (!action.enabled || action.enabled(item));
-      };
+      // Disable all actions if any row(s) are selected
+      var allDisabled = this.state.selection.length > 0;
       var actualActions = column.actions.filter(function (action) {
         return !action.available || action.available(item);
       });
       if (actualActions.length > 2) {
-        // if any of the actions `isPrimary`, add them inline as well, but only the first 2
-        var primaryActions = actualActions.filter(function (o) {
-          return o.isPrimary;
-        });
-        actualActions = primaryActions.slice(0, 2);
+        if (allDisabled) {
+          // If all actions are disabled, do not show any actions but the popover toggle
+          actualActions = [];
+        } else {
+          // if any of the actions `isPrimary`, add them inline as well, but only the first 2
+          var primaryActions = actualActions.filter(function (o) {
+            return o.isPrimary;
+          });
+          actualActions = primaryActions.slice(0, 2);
+        }
 
         // if we have more than 1 action, we don't show them all in the cell, instead we
         // put them all in a popover tool. This effectively means we can only have a maximum
@@ -832,18 +835,18 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
           render: function render(item) {
             return (0, _react2.jsx)(_collapsed_item_actions.CollapsedItemActions, {
               actions: column.actions,
+              actionsDisabled: allDisabled,
               itemId: itemId,
-              item: item,
-              actionEnabled: actionEnabled
+              item: item
             });
           }
         });
       }
       var tools = (0, _react2.jsx)(_expanded_item_actions.ExpandedItemActions, {
         actions: actualActions,
+        actionsDisabled: allDisabled,
         itemId: itemId,
-        item: item,
-        actionEnabled: actionEnabled
+        item: item
       });
       var key = "record_actions_".concat(itemId, "_").concat(columnIndex);
       return (0, _react2.jsx)(_table.EuiTableRowCell, {
@@ -861,7 +864,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var field = column.field,
         render = column.render,
         dataType = column.dataType;
-      var key = "_data_column_".concat(field, "_").concat(itemId, "_").concat(columnIndex);
+      var key = "_data_column_".concat(String(field), "_").concat(itemId, "_").concat(columnIndex);
       var contentRenderer = render || this.getRendererForDataType(dataType);
       var value = (0, _objects.get)(item, field);
       var content = contentRenderer(value, item);
@@ -930,7 +933,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderPaginationBar",
     value: function renderPaginationBar() {
-      var _this8 = this;
+      var _this7 = this;
       var _this$props11 = this.props,
         error = _this$props11.error,
         pagination = _this$props11.pagination,
@@ -949,9 +952,9 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
         }, function (tablePagination) {
           return (0, _react2.jsx)(_pagination_bar.PaginationBar, {
             pagination: pagination,
-            onPageSizeChange: _this8.onPageSizeChange.bind(_this8),
-            onPageChange: _this8.onPageChange.bind(_this8),
-            "aria-controls": _this8.tableId,
+            onPageSizeChange: _this7.onPageSizeChange.bind(_this7),
+            onPageChange: _this7.onPageChange.bind(_this7),
+            "aria-controls": _this7.tableId,
             "aria-label": tablePagination
           });
         });