@elastic/eui 122.1.0 → 123.0.0

package/test-env/components/form/described_form_group/described_form_group.js

@@ -1,13 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiDescribedFormGroup = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-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");
@@ -17,7 +18,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
@@ -25,6 +26,8 @@ var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "t
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+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; }
 /**
  * @see {@link https://eui.elastic.co/docs/components/forms/layouts/described-groups/|EuiDescribedFormGroup documentation}
  */
@@ -45,7 +48,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 = (0, _objectWithoutProperties2.default)(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];
@@ -79,7 +90,11 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
       break;
   }
   return (0, _react2.jsx)(_flex.EuiFlexGroup, (0, _extends2.default)({
-    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,
@@ -91,6 +106,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, (0, _extends2.default)({

package/test-env/components/tabs/tabbed_content/tabbed_content.js

@@ -7,27 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiTabbedContent = exports.AUTOFOCUS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 _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 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) { (0, _defineProperty2.default)(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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!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
@@ -37,129 +27,94 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 /**
  * Marked as const so type is `['initial', 'selected']` instead of `string[]`
  */
+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; }
 var AUTOFOCUS = exports.AUTOFOCUS = ['initial', 'selected'];
-var EuiTabbedContent = exports.EuiTabbedContent = /*#__PURE__*/function (_Component) {
-  function EuiTabbedContent(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, EuiTabbedContent);
-    _this = _callSuper(this, EuiTabbedContent, [props]);
-    (0, _defineProperty2.default)(_this, "rootId", (0, _services.htmlIdGenerator)()());
-    (0, _defineProperty2.default)(_this, "tabsRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)(_this, "focusTab", function () {
-      var targetTab = _this.tabsRef.current.querySelector("#".concat(_this.state.selectedTabId));
-      targetTab.focus();
-    });
-    (0, _defineProperty2.default)(_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();
-        });
-      }
-    });
-    (0, _defineProperty2.default)(_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
-        });
-      }
-    });
-    (0, _defineProperty2.default)(_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 = (0, _objectWithoutProperties2.default)(_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 = (0, _slicedToArray2.default)(_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;
-  }
-  (0, _inherits2.default)(EuiTabbedContent, _Component);
-  return (0, _createClass2.default)(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 = (0, _objectWithoutProperties2.default)(_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", (0, _extends2.default)({
-        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 = (0, _objectWithoutProperties2.default)(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);
-(0, _defineProperty2.default)(EuiTabbedContent, "defaultProps", {
-  autoFocus: 'initial'
-});
+  var selectedTabContent = selectedTab.content,
+    selectedTabContentId = selectedTab.id;
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    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 = (0, _objectWithoutProperties2.default)(tab, _excluded2);
+    return (0, _react2.jsx)(_tab.EuiTab, (0, _extends2.default)({
+      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,
@@ -235,4 +190,5 @@ EuiTabbedContent.propTypes = {
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any
   }).isRequired).isRequired
-};
+};
+EuiTabbedContent.displayName = 'EuiTabbedContent';

package/test-env/components/text_truncate/text_truncate.js

@@ -19,7 +19,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
@@ -108,7 +108,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,
@@ -124,6 +128,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     calculationDelayMs = _ref2.calculationDelayMs,
     containerRef = _ref2.containerRef,
     className = _ref2.className,
+    toolTipProps = _ref2.toolTipProps,
     rest = (0, _objectWithoutProperties2.default)(_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),
@@ -225,11 +230,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, (0, _extends2.default)({
     content: text,
     disableScreenReaderOutput: true,
     display: "block"
-  }, content) : content;
+  }, toolTipProps), content) : content;
 };
 EuiTextTruncateWithWidth.propTypes = {
   width: _propTypes.default.number.isRequired,