@elastic/eui 122.1.0 → 123.0.0

package/lib/components/form/described_form_group/described_form_group.js

@@ -1,10 +1,11 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiDescribedFormGroup = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
@@ -14,7 +15,7 @@ var _flex = require("../../flex");
 var _eui_form_context = require("../eui_form_context");
 var _described_form_group = require("./described_form_group.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "titleSize", "title", "description", "descriptionFlexItemProps", "fieldFlexItemProps"];
+var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "titleSize", "title", "description", "descriptionFlexItemProps", "fieldFlexItemProps", "aria-label", "aria-labelledby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,6 +24,8 @@ var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "t
  * Side Public License, v 1.
  */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -46,7 +49,15 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
     description = props.description,
     descriptionFlexItemProps = props.descriptionFlexItemProps,
     fieldFlexItemProps = props.fieldFlexItemProps,
+    ariaLabel = props['aria-label'],
+    ariaLabelledby = props['aria-labelledby'],
     rest = _objectWithoutProperties(props, _excluded);
+  var generatedTitleId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'euiDescribedFormGroupTitle'
+  });
+  // Reuse an `id` already set on the title element, so that consumers
+  // referencing it from their own `aria-labelledby` keep working
+  var titleId = /*#__PURE__*/(0, _react.isValidElement)(title) && title.props.id || generatedTitleId;
   var styles = (0, _services.useEuiMemoizedStyles)(_described_form_group.euiDescribedFormGroupStyles);
   var cssStyles = [styles.euiDescribedFormGroup, fullWidth ? styles.fullWidth : styles.formWidth];
   var descriptionColumnStyles = [styles.euiDescribedFormGroup__descriptionColumn, descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.css];
@@ -80,7 +91,11 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
       break;
   }
   return (0, _react2.jsx)(_flex.EuiFlexGroup, _extends({
-    role: "group"
+    role: "group",
+    "aria-label": ariaLabel
+    // The title names the group, unless the consumer provides their own label
+    ,
+    "aria-labelledby": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : ariaLabel == null ? titleId : undefined
   }, rest, {
     css: cssStyles,
     className: classes,
@@ -92,6 +107,7 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
     css: descriptionColumnStyles,
     className: (0, _classnames.default)('euiDescribedFormGroup__descriptionColumn', descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.className)
   }), (0, _react2.jsx)(_title.EuiTitle, {
+    id: titleId,
     size: titleSize,
     className: "euiDescribedFormGroup__title"
   }, title), renderedDescription), (0, _react2.jsx)(_flex.EuiFlexItem, _extends({

package/lib/components/tabs/tabbed_content/tabbed_content.js

@@ -1,39 +1,19 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiTabbedContent = exports.AUTOFOCUS = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _services = require("../../../services");
 var _tabs = require("../tabs");
 var _tab = require("../tab");
+var _services = require("../../../services");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "expand", "initialSelectedTab", "onTabClick", "selectedTab", "size", "tabs", "autoFocus"],
+var _excluded = ["autoFocus", "className", "expand", "initialSelectedTab", "onTabClick", "selectedTab", "size", "tabs"],
   _excluded2 = ["id", "name", "content"];
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
+/*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
@@ -43,129 +23,104 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 /**
  * Marked as const so type is `['initial', 'selected']` instead of `string[]`
  */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 var AUTOFOCUS = exports.AUTOFOCUS = ['initial', 'selected'];
-var EuiTabbedContent = exports.EuiTabbedContent = /*#__PURE__*/function (_Component) {
-  function EuiTabbedContent(props) {
-    var _this;
-    _classCallCheck(this, EuiTabbedContent);
-    _this = _callSuper(this, EuiTabbedContent, [props]);
-    _defineProperty(_this, "rootId", (0, _services.htmlIdGenerator)()());
-    _defineProperty(_this, "tabsRef", /*#__PURE__*/(0, _react.createRef)());
-    _defineProperty(_this, "focusTab", function () {
-      var targetTab = _this.tabsRef.current.querySelector("#".concat(_this.state.selectedTabId));
-      targetTab.focus();
-    });
-    _defineProperty(_this, "initializeFocus", function () {
-      if (!_this.state.inFocus && _this.props.autoFocus === 'selected') {
-        // Must wait for setState to finish before calling `.focus()`
-        // as the focus call triggers a blur on the first tab
-        _this.setState({
-          inFocus: true
-        }, function () {
-          _this.focusTab();
-        });
-      }
-    });
-    _defineProperty(_this, "removeFocus", function (blurEvent) {
-      // only set inFocus to false if the wrapping div doesn't contain the now-focusing element
-      var currentTarget = blurEvent.currentTarget;
-      var relatedTarget = blurEvent.relatedTarget;
-      if (currentTarget.contains(relatedTarget) === false) {
-        _this.setState({
-          inFocus: false
-        });
-      }
-    });
-    _defineProperty(_this, "onTabClick", function (selectedTab) {
-      var _this$props = _this.props,
-        onTabClick = _this$props.onTabClick,
-        externalSelectedTab = _this$props.selectedTab;
-      if (onTabClick) {
-        onTabClick(selectedTab);
-      }
-
-      // Only track selection state if it's not controlled externally.
-      if (!externalSelectedTab) {
-        _this.setState({
-          selectedTabId: selectedTab.id
-        }, function () {
-          _this.focusTab();
-        });
-      }
-    });
-    var initialSelectedTab = props.initialSelectedTab,
-      _selectedTab = props.selectedTab,
-      tabs = props.tabs;
+var EuiTabbedContent = exports.EuiTabbedContent = function EuiTabbedContent(_ref) {
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? 'initial' : _ref$autoFocus,
+    className = _ref.className,
+    expand = _ref.expand,
+    initialSelectedTab = _ref.initialSelectedTab,
+    onTabClick = _ref.onTabClick,
+    externalSelectedTab = _ref.selectedTab,
+    size = _ref.size,
+    tabs = _ref.tabs,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var rootId = (0, _services.useGeneratedHtmlId)();
+  var tabsRef = (0, _react.useRef)(null);
+  var inFocusRef = (0, _react.useRef)(false);
+  var _useState = (0, _react.useState)(function () {
+      return externalSelectedTab ? undefined : (initialSelectedTab === null || initialSelectedTab === void 0 ? void 0 : initialSelectedTab.id) || tabs[0].id;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedTabId = _useState2[0],
+    setSelectedTabId = _useState2[1];
+  var focusTab = function focusTab(id) {
+    var _tabsRef$current;
+    var targetTab = (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.querySelector("#".concat(id));
+    targetTab === null || targetTab === void 0 || targetTab.focus();
+  };
+  var initializeFocus = function initializeFocus() {
+    if (!inFocusRef.current && autoFocus === 'selected') {
+      inFocusRef.current = true;
+      focusTab(selectedTabId);
+    }
+  };
+  var removeFocus = function removeFocus(blurEvent) {
+    // only set inFocus to false if the wrapping div doesn't contain the now-focusing element
+    var currentTarget = blurEvent.currentTarget;
+    var relatedTarget = blurEvent.relatedTarget;
+    if (currentTarget.contains(relatedTarget) === false) {
+      inFocusRef.current = false;
+    }
+  };
+  var handleTabClick = function handleTabClick(tab) {
+    onTabClick === null || onTabClick === void 0 || onTabClick(tab);
 
     // Only track selection state if it's not controlled externally.
-    var selectedTabId;
-    if (!_selectedTab) {
-      selectedTabId = (initialSelectedTab === null || initialSelectedTab === void 0 ? void 0 : initialSelectedTab.id) || tabs[0].id;
+    if (!externalSelectedTab) {
+      setSelectedTabId(tab.id);
+      focusTab(tab.id);
     }
-    _this.state = {
-      selectedTabId: selectedTabId,
-      inFocus: false
-    };
-    return _this;
-  }
-  _inherits(EuiTabbedContent, _Component);
-  return _createClass(EuiTabbedContent, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        className = _this$props2.className,
-        expand = _this$props2.expand,
-        initialSelectedTab = _this$props2.initialSelectedTab,
-        onTabClick = _this$props2.onTabClick,
-        externalSelectedTab = _this$props2.selectedTab,
-        size = _this$props2.size,
-        tabs = _this$props2.tabs,
-        autoFocus = _this$props2.autoFocus,
-        rest = _objectWithoutProperties(_this$props2, _excluded);
+  };
 
-      // Allow the consumer to control tab selection.
-      var selectedTab = externalSelectedTab || tabs.find(function (tab) {
-        return tab.id === _this2.state.selectedTabId;
-      }) || tabs[0]; // Fall back to the first tab if a selected tab can't be found
+  // Allow the consumer to control tab selection.
+  var selectedTab = externalSelectedTab || tabs.find(function (tab) {
+    return tab.id === selectedTabId;
+  }) || tabs[0]; // Fall back to the first tab if a selected tab can't be found
 
-      var selectedTabContent = selectedTab.content,
-        selectedTabId = selectedTab.id;
-      return (0, _react2.jsx)("div", _extends({
-        className: className
-      }, rest), (0, _react2.jsx)(_tabs.EuiTabs, {
-        ref: this.tabsRef,
-        expand: expand,
-        size: size,
-        onFocus: this.initializeFocus,
-        onBlur: this.removeFocus
-      }, tabs.map(function (tab) {
-        var id = tab.id,
-          name = tab.name,
-          content = tab.content,
-          tabProps = _objectWithoutProperties(tab, _excluded2);
-        var props = _objectSpread(_objectSpread({
-          key: id,
-          id: id
-        }, tabProps), {}, {
-          onClick: function onClick() {
-            return _this2.onTabClick(tab);
-          },
-          isSelected: tab === selectedTab,
-          'aria-controls': "".concat(_this2.rootId)
-        });
-        return (0, _react2.jsx)(_tab.EuiTab, props, name);
-      })), (0, _react2.jsx)("div", {
-        role: "tabpanel",
-        id: "".concat(this.rootId),
-        "aria-labelledby": selectedTabId
-      }, selectedTabContent));
-    }
-  }]);
-}(_react.Component);
-_defineProperty(EuiTabbedContent, "defaultProps", {
-  autoFocus: 'initial'
-});
+  var selectedTabContent = selectedTab.content,
+    selectedTabContentId = selectedTab.id;
+  return (0, _react2.jsx)("div", _extends({
+    className: className
+  }, rest), (0, _react2.jsx)(_tabs.EuiTabs, {
+    ref: tabsRef,
+    expand: expand,
+    size: size,
+    onFocus: initializeFocus,
+    onBlur: removeFocus
+  }, tabs.map(function (tab) {
+    var id = tab.id,
+      name = tab.name,
+      content = tab.content,
+      tabProps = _objectWithoutProperties(tab, _excluded2);
+    return (0, _react2.jsx)(_tab.EuiTab, _extends({
+      key: id,
+      id: id
+    }, tabProps, {
+      onClick: function onClick() {
+        return handleTabClick(tab);
+      },
+      isSelected: tab === selectedTab,
+      "aria-controls": rootId
+    }), name);
+  })), (0, _react2.jsx)("div", {
+    role: "tabpanel",
+    id: rootId,
+    "aria-labelledby": selectedTabContentId
+  }, selectedTabContent));
+};
 EuiTabbedContent.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
@@ -241,4 +196,5 @@ EuiTabbedContent.propTypes = {
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any
   }).isRequired).isRequired
-};
+};
+EuiTabbedContent.displayName = 'EuiTabbedContent';

package/lib/components/text_truncate/text_truncate.js

@@ -15,7 +15,7 @@ var _utils = require("./utils");
 var _text_truncate = require("./text_truncate.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["width", "onResize"],
-  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "calculationDelayMs", "containerRef", "className"],
+  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "calculationDelayMs", "containerRef", "className", "toolTipProps"],
   _excluded3 = ["onResize"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -114,7 +114,11 @@ EuiTextTruncate.propTypes = {
        * fonts are done loading or layout is done shifting or settling. Adding a delay
        * may help resolve any rendering issues.
        */
-  calculationDelayMs: _propTypes.default.number
+  calculationDelayMs: _propTypes.default.number,
+  /**
+       * Placement of the tooltip that shows the full text while truncating.
+       */
+  toolTipProps: _propTypes.default.any
 };
 var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
   var width = _ref2.width,
@@ -130,6 +134,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     calculationDelayMs = _ref2.calculationDelayMs,
     containerRef = _ref2.containerRef,
     className = _ref2.className,
+    toolTipProps = _ref2.toolTipProps,
     rest = _objectWithoutProperties(_ref2, _excluded2);
   // Note: This needs to be a state and not a ref to trigger a rerender on mount
   var _useState = (0, _react.useState)(null),
@@ -231,11 +236,11 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     className: "euiTextTruncate__fullText",
     "data-test-subj": "fullText"
   }, children ? children(text) : text));
-  return isTruncating ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+  return isTruncating ? (0, _react2.jsx)(_tool_tip.EuiToolTip, _extends({
     content: text,
     disableScreenReaderOutput: true,
     display: "block"
-  }, content) : content;
+  }, toolTipProps), content) : content;
 };
 EuiTextTruncateWithWidth.propTypes = {
   width: _propTypes.default.number.isRequired,

package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js

@@ -1,7 +1,8 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "style"];
+var _excluded = ["children", "style"],
+  _excluded2 = ["onScroll"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -76,40 +77,93 @@ var InnerElement = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, r
   }, rest), headerRow, children), footerRow);
 }));
 InnerElement.displayName = 'EuiDataGridInnerElement';
-export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
-  var leadingControlColumns = _ref3.leadingControlColumns,
-    trailingControlColumns = _ref3.trailingControlColumns,
-    columns = _ref3.columns,
-    visibleColCount = _ref3.visibleColCount,
-    schema = _ref3.schema,
-    schemaDetectors = _ref3.schemaDetectors,
-    rowCount = _ref3.rowCount,
-    _ref3$visibleRows = _ref3.visibleRows,
-    startRow = _ref3$visibleRows.startRow,
-    endRow = _ref3$visibleRows.endRow,
-    visibleRowCount = _ref3$visibleRows.visibleRowCount,
-    renderCellValue = _ref3.renderCellValue,
-    cellContext = _ref3.cellContext,
-    renderCellPopover = _ref3.renderCellPopover,
-    renderFooterCellValue = _ref3.renderFooterCellValue,
-    interactiveCellId = _ref3.interactiveCellId,
-    pagination = _ref3.pagination,
-    sorting = _ref3.sorting,
-    setVisibleColumns = _ref3.setVisibleColumns,
-    switchColumnPos = _ref3.switchColumnPos,
-    onColumnResize = _ref3.onColumnResize,
-    rowHeightsOptions = _ref3.rowHeightsOptions,
-    virtualizationOptions = _ref3.virtualizationOptions,
-    isFullScreen = _ref3.isFullScreen,
-    gridStyles = _ref3.gridStyles,
-    gridWidth = _ref3.gridWidth,
-    gridRef = _ref3.gridRef,
-    gridItemsRendered = _ref3.gridItemsRendered,
-    wrapperRef = _ref3.wrapperRef,
-    className = _ref3.className,
-    canDragAndDropColumns = _ref3.canDragAndDropColumns,
-    _ref3$showHeader = _ref3.showHeader,
-    showHeader = _ref3$showHeader === void 0 ? true : _ref3$showHeader;
+var DataGridOuterElementContext = /*#__PURE__*/createContext({
+  scrollPositionRef: {
+    current: null
+  }
+});
+var clampScrollOffset = function clampScrollOffset(offset, max) {
+  return Math.max(0, Math.min(offset, max));
+};
+var OuterElement = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var onScroll = _ref3.onScroll,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var _useContext2 = useContext(DataGridOuterElementContext),
+    _useContext2$outerEle = _useContext2.outerElementType,
+    Element = _useContext2$outerEle === void 0 ? 'div' : _useContext2$outerEle,
+    direction = _useContext2.direction,
+    scrollPositionRef = _useContext2.scrollPositionRef;
+
+  // react-window compares the raw scroll offsets against its own clamped
+  // offsets, and flags the grid as scrolling (setting `pointer-events: none`
+  // on the inner element) whenever they differ. Firefox can report a
+  // `scrollTop` above the maximum at fractional device pixel ratios, which
+  // makes every scroll event at the bottom of the grid look like a scroll,
+  // so hovered cells lose the pointer and tooltips repeatedly open and close.
+  var onScrollIfMoved = useCallback(function (event) {
+    if (direction !== 'rtl') {
+      var _event$currentTarget = event.currentTarget,
+        scrollTop = _event$currentTarget.scrollTop,
+        scrollLeft = _event$currentTarget.scrollLeft,
+        scrollHeight = _event$currentTarget.scrollHeight,
+        scrollWidth = _event$currentTarget.scrollWidth,
+        clientHeight = _event$currentTarget.clientHeight,
+        clientWidth = _event$currentTarget.clientWidth;
+      var scrollPosition = {
+        scrollTop: clampScrollOffset(scrollTop, scrollHeight - clientHeight),
+        scrollLeft: clampScrollOffset(scrollLeft, scrollWidth - clientWidth)
+      };
+      var previousScrollPosition = scrollPositionRef.current;
+      if (previousScrollPosition && scrollPosition.scrollTop === previousScrollPosition.scrollTop && scrollPosition.scrollLeft === previousScrollPosition.scrollLeft) {
+        return;
+      }
+      // react-window may not have rendered the previous event's position
+      // yet, so the ref must reflect every forwarded event, not only the
+      // positions react-window reports back through its `onScroll` prop.
+      scrollPositionRef.current = scrollPosition;
+    }
+    onScroll(event);
+  }, [onScroll, direction, scrollPositionRef]);
+  return ___EmotionJSX(Element, _extends({
+    ref: ref,
+    onScroll: onScrollIfMoved
+  }, rest));
+});
+OuterElement.displayName = 'EuiDataGridOuterElement';
+export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref4) {
+  var leadingControlColumns = _ref4.leadingControlColumns,
+    trailingControlColumns = _ref4.trailingControlColumns,
+    columns = _ref4.columns,
+    visibleColCount = _ref4.visibleColCount,
+    schema = _ref4.schema,
+    schemaDetectors = _ref4.schemaDetectors,
+    rowCount = _ref4.rowCount,
+    _ref4$visibleRows = _ref4.visibleRows,
+    startRow = _ref4$visibleRows.startRow,
+    endRow = _ref4$visibleRows.endRow,
+    visibleRowCount = _ref4$visibleRows.visibleRowCount,
+    renderCellValue = _ref4.renderCellValue,
+    cellContext = _ref4.cellContext,
+    renderCellPopover = _ref4.renderCellPopover,
+    renderFooterCellValue = _ref4.renderFooterCellValue,
+    interactiveCellId = _ref4.interactiveCellId,
+    pagination = _ref4.pagination,
+    sorting = _ref4.sorting,
+    setVisibleColumns = _ref4.setVisibleColumns,
+    switchColumnPos = _ref4.switchColumnPos,
+    onColumnResize = _ref4.onColumnResize,
+    rowHeightsOptions = _ref4.rowHeightsOptions,
+    virtualizationOptions = _ref4.virtualizationOptions,
+    isFullScreen = _ref4.isFullScreen,
+    gridStyles = _ref4.gridStyles,
+    gridWidth = _ref4.gridWidth,
+    gridRef = _ref4.gridRef,
+    gridItemsRendered = _ref4.gridItemsRendered,
+    wrapperRef = _ref4.wrapperRef,
+    className = _ref4.className,
+    canDragAndDropColumns = _ref4.canDragAndDropColumns,
+    _ref4$showHeader = _ref4.showHeader,
+    showHeader = _ref4$showHeader === void 0 ? true : _ref4$showHeader;
   /**
    * Grid refs & observers
    */
@@ -305,7 +359,30 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       footerRow: footerRow
     };
   }, [headerRowHeight, headerRow, footerRow, showHeader]);
+  var scrollPositionRef = useRef(null);
+  var outerElementContextValue = useMemo(function () {
+    return {
+      outerElementType: virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.outerElementType,
+      direction: virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.direction,
+      scrollPositionRef: scrollPositionRef
+    };
+  }, [virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.outerElementType, virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.direction]);
   var onScroll = useCallback(function (args) {
+    var element = outerGridRef.current;
+    // `scrollTo` reports the requested offset, which can sit past the
+    // end. Storing that would replace the clamped position already
+    // taken from the DOM. Leave the ref unchanged instead of writing
+    // the clamped value: a scroll event that has not arrived yet still
+    // differs from the previous position and is forwarded.
+    var topInRange = element == null || args.scrollTop === clampScrollOffset(args.scrollTop, element.scrollHeight - element.clientHeight);
+    var leftInRange = element == null || args.scrollLeft === clampScrollOffset(args.scrollLeft, element.scrollWidth - element.clientWidth);
+    if (topInRange && leftInRange) {
+      scrollPositionRef.current = {
+        scrollTop: args.scrollTop,
+        scrollLeft: args.scrollLeft
+      };
+    }
+
     // check only if a callback is passed
     if (typeof (virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.onScroll) !== 'function') return;
     var enhancedArgs = _objectSpread(_objectSpread({}, args), {}, {
@@ -349,10 +426,13 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
   }, [outerGridRef, virtualizationOptions]);
   return IS_JEST_ENVIRONMENT || finalWidth > 0 ? ___EmotionJSX(DataGridWrapperRowsContext.Provider, {
     value: rowWrapperContextValue
+  }, ___EmotionJSX(DataGridOuterElementContext.Provider, {
+    value: outerElementContextValue
   }, ___EmotionJSX(Grid, _extends({}, virtualizationOptions, {
     ref: gridRef,
     className: classNames('euiDataGrid__virtualized', className, virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
     onItemsRendered: onItemsRendered,
+    outerElementType: OuterElement,
     innerElementType: InnerElement,
     outerRef: outerGridRef,
     innerRef: innerGridRef,
@@ -364,6 +444,6 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     itemData: itemData,
     rowCount: IS_JEST_ENVIRONMENT || headerRowHeight > 0 || showHeader === false && innerGridRef.current ? visibleRowCount : 0,
     onScroll: onScroll
-  }), Cell), scrollBorderOverlay) : null;
+  }), Cell)), scrollBorderOverlay) : null;
 });
 EuiDataGridBodyVirtualized.displayName = 'EuiDataGridBodyVirtualized';

package/optimize/es/components/datagrid/utils/row_heights.js

@@ -295,7 +295,10 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref3) {
     if (forceRenderRef.current == null) {
       return;
     }
-    requestAnimationFrame(forceRenderRef.current);
+    var frameId = requestAnimationFrame(forceRenderRef.current);
+    return function () {
+      return cancelAnimationFrame(frameId);
+    };
   }, [// Effects that should cause rerendering
   rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight, rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.rowHeights,
   // Dependencies