@elastic/eui 72.2.0 → 74.0.0

package/test-env/components/page/page_header/page_header.a11y.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = require("../../button");
+
+var _page_header = require("./page_header");
+
+var _react2 = require("@emotion/react");
+
+/*
+ * 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
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../../cypress/support"/>
+describe('EuiPageHeader', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(_page_header.EuiPageHeader, {
+      pageTitle: "Page title",
+      iconType: "logoKibana",
+      description: "This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content.",
+      rightSideItems: [(0, _react2.jsx)(_button.EuiButton, {
+        fill: true
+      }, "Add something"), (0, _react2.jsx)(_button.EuiButton, null, "Do something")]
+    }));
+    cy.get('h1.euiTitle').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+});

package/test-env/components/portal/portal.a11y.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _button = require("../button");
+
+var _portal = require("./portal");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*
+ * 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
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../cypress/support"/>
+var Portal = function Portal() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isPortalVisible = _useState2[0],
+      setIsPortalVisible = _useState2[1];
+
+  var togglePortal = function togglePortal() {
+    setIsPortalVisible(!isPortalVisible);
+  };
+
+  var closePortal = function closePortal() {
+    setIsPortalVisible(false);
+  };
+
+  var customPortal;
+
+  if (isPortalVisible) {
+    customPortal = (0, _react2.jsx)(_portal.EuiPortal, null, (0, _react2.jsx)("div", null, "This is the portal. Click anywhere to close."), (0, _react2.jsx)(_button.EuiButton, {
+      onClick: closePortal
+    }, "Close portal"));
+  }
+
+  return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButton, {
+    onClick: togglePortal
+  }, "View guide"), customPortal);
+};
+
+describe('EuiPortal', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(Portal, null));
+    cy.get('div[data-relative-to-header="above"]').should('not.exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations after the portal is activated', function () {
+      cy.get('button[type="button"]').contains('View guide').realClick();
+      cy.get('div[data-euiportal="true"]').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/test-env/components/resizable_container/resizable_panel.js

@@ -329,6 +329,11 @@ EuiResizablePanel.propTypes = {
      */
   style: _propTypes.default.any,
 
+  /**
+     * tabIndex={0} provides full keyboard access when content overflows `<EuiResizablePanel />`
+     */
+  tabIndex: _propTypes.default.number,
+
   /**
      * Props to add to the wrapping `.euiResizablePanel` div
      */

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

@@ -35,19 +35,21 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _common = require("../common");
 
-var _portal = require("../portal");
+var _services = require("../../services");
 
-var _tool_tip_anchor = require("./tool_tip_anchor");
+var _react2 = require("../../services/react");
 
-var _tool_tip_arrow = require("./tool_tip_arrow");
+var _resize_observer = require("../observer/resize_observer");
+
+var _portal = require("../portal");
 
 var _tool_tip_popover = require("./tool_tip_popover");
 
-var _react2 = require("../../services/react");
+var _tool_tip_anchor = require("./tool_tip_anchor");
 
-var _services = require("../../services");
+var _tool_tip_arrow = require("./tool_tip_arrow");
 
-var _resize_observer = require("../observer/resize_observer");
+var _tool_tip_manager = require("./tool_tip_manager");
 
 var _react3 = require("@emotion/react");
 
@@ -146,9 +148,11 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
       if (!_this.timeoutId) {
         _this.timeoutId = setTimeout(function () {
           (0, _react2.enqueueStateChange)(function () {
-            return _this.setState({
+            _this.setState({
               visible: true
             });
+
+            _tool_tip_manager.toolTipManager.registerTooltip(_this.hideToolTip);
           });
         }, delayToMsMap[_this.props.delay]);
       }
@@ -207,6 +211,8 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
             toolTipStyles: DEFAULT_TOOLTIP_STYLES,
             arrowStyles: undefined
           });
+
+          _tool_tip_manager.toolTipManager.deregisterToolTip(_this.hideToolTip);
         }
       });
     });

package/test-env/components/tool_tip/tool_tip_manager.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolTipManager = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+/*
+ * 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
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Manager utility that ensures only one tooltip is visible at a time
+ *
+ * UX rationale (primarily for mouse-only users):
+ * @see https://github.com/elastic/kibana/issues/144482
+ * @see https://github.com/elastic/eui/issues/5883
+ */
+var ToolTipManager = function ToolTipManager() {
+  var _this = this;
+
+  (0, _classCallCheck2.default)(this, ToolTipManager);
+  (0, _defineProperty2.default)(this, "toolTipsToHide", new Set());
+  (0, _defineProperty2.default)(this, "registerTooltip", function (hideCallback) {
+    _this.toolTipsToHide.forEach(function (hide) {
+      return hide();
+    });
+
+    _this.toolTipsToHide.clear();
+
+    _this.toolTipsToHide.add(hideCallback);
+  });
+  (0, _defineProperty2.default)(this, "deregisterToolTip", function (hideCallback) {
+    _this.toolTipsToHide.delete(hideCallback);
+  });
+};
+
+var toolTipManager = new ToolTipManager();
+exports.toolTipManager = toolTipManager;

package/test-env/services/security/get_secure_rel_for_target.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSecureRelForTarget = void 0;
 
-var _url = require("../url");
-
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,18 +18,13 @@ var _url = require("../url");
  * https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
  */
 var getSecureRelForTarget = function getSecureRelForTarget(_ref) {
-  var href = _ref.href,
-      _ref$target = _ref.target,
+  var _ref$target = _ref.target,
       target = _ref$target === void 0 ? '' : _ref$target,
       rel = _ref.rel;
-  var isElasticHref = !!href && (0, _url.isDomainSecure)(href);
   var relParts = !!rel ? rel.split(' ').filter(function (part) {
     return !!part.length && part !== 'noreferrer';
   }) : [];
-
-  if (!isElasticHref) {
-    relParts.push('noreferrer');
-  }
+  relParts.push('noreferrer');
 
   if (target.includes('_blank') && relParts.indexOf('noopener') === -1) {
     relParts.push('noopener');

package/test-env/services/theme/hooks.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withEuiTheme = exports.useEuiTheme = void 0;
+exports.withEuiTheme = exports.useEuiTheme = exports.RenderWithEuiTheme = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -31,6 +31,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Side Public License, v 1.
  */
 var providerMessage = "`EuiProvider` is missing which can result in negative effects.\nWrap your component in `EuiProvider`: https://ela.st/euiprovider.";
+/**
+ * Hook for function components
+ */
 
 var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
@@ -66,6 +69,10 @@ var useEuiTheme = function useEuiTheme() {
   }, [theme, colorMode, modifications]);
   return assembledTheme;
 };
+/**
+ * HOC for class components
+ */
+
 
 exports.useEuiTheme = useEuiTheme;
 
@@ -86,5 +93,18 @@ var withEuiTheme = function withEuiTheme(Component) {
   WithEuiTheme.displayName = componentName;
   return WithEuiTheme;
 };
+/**
+ * Render prop alternative for complex class components
+ * Most useful for scenarios where a HOC may interfere with typing
+ */
+
+
+exports.withEuiTheme = withEuiTheme;
+
+var RenderWithEuiTheme = function RenderWithEuiTheme(_ref) {
+  var children = _ref.children;
+  var theme = useEuiTheme();
+  return children(theme);
+};
 
-exports.withEuiTheme = withEuiTheme;
+exports.RenderWithEuiTheme = RenderWithEuiTheme;

package/test-env/services/theme/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "EuiThemeProvider", {
     return _provider.EuiThemeProvider;
   }
 });
+Object.defineProperty(exports, "RenderWithEuiTheme", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.RenderWithEuiTheme;
+  }
+});
 Object.defineProperty(exports, "buildTheme", {
   enumerable: true,
   get: function get() {

package/es/services/url.js

@@ -1,23 +0,0 @@
-/*
- * 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
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-var isElasticHost = /^([a-zA-Z0-9]+\.)*elastic\.co$/; // In order for the domain to be secure it needs to be in a parsable format,
-// with the protocol of http: or https: and the host matching elastic.co or
-// of one its subdomains
-
-export var isDomainSecure = function isDomainSecure() {
-  var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-  try {
-    var parsed = new URL(url);
-    var protocolMatches = parsed.protocol === 'http:' || parsed.protocol === 'https:';
-    var domainMatches = !!parsed.host.match(isElasticHost);
-    return protocolMatches && domainMatches;
-  } catch (e) {
-    return false;
-  }
-};

package/lib/services/url.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isDomainSecure = void 0;
-
-/*
- * 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
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-var isElasticHost = /^([a-zA-Z0-9]+\.)*elastic\.co$/; // In order for the domain to be secure it needs to be in a parsable format,
-// with the protocol of http: or https: and the host matching elastic.co or
-// of one its subdomains
-
-var isDomainSecure = function isDomainSecure() {
-  var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-  try {
-    var parsed = new URL(url);
-    var protocolMatches = parsed.protocol === 'http:' || parsed.protocol === 'https:';
-    var domainMatches = !!parsed.host.match(isElasticHost);
-    return protocolMatches && domainMatches;
-  } catch (e) {
-    return false;
-  }
-};
-
-exports.isDomainSecure = isDomainSecure;

package/optimize/es/services/url.js

@@ -1,23 +0,0 @@
-/*
- * 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
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-var isElasticHost = /^([a-zA-Z0-9]+\.)*elastic\.co$/; // In order for the domain to be secure it needs to be in a parsable format,
-// with the protocol of http: or https: and the host matching elastic.co or
-// of one its subdomains
-
-export var isDomainSecure = function isDomainSecure() {
-  var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-  try {
-    var parsed = new URL(url);
-    var protocolMatches = parsed.protocol === 'http:' || parsed.protocol === 'https:';
-    var domainMatches = !!parsed.host.match(isElasticHost);
-    return protocolMatches && domainMatches;
-  } catch (e) {
-    return false;
-  }
-};

package/optimize/lib/services/url.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isDomainSecure = void 0;
-
-/*
- * 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
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-var isElasticHost = /^([a-zA-Z0-9]+\.)*elastic\.co$/; // In order for the domain to be secure it needs to be in a parsable format,
-// with the protocol of http: or https: and the host matching elastic.co or
-// of one its subdomains
-
-var isDomainSecure = function isDomainSecure() {
-  var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-  try {
-    var parsed = new URL(url);
-    var protocolMatches = parsed.protocol === 'http:' || parsed.protocol === 'https:';
-    var domainMatches = !!parsed.host.match(isElasticHost);
-    return protocolMatches && domainMatches;
-  } catch (e) {
-    return false;
-  }
-};
-
-exports.isDomainSecure = isDomainSecure;

package/src/components/basic_table/_basic_table.scss

@@ -1,41 +0,0 @@
-.euiBasicTable {
-  &-loading {
-    position: relative;
-
-    tbody {
-      overflow: hidden;
-    }
-
-    tbody::before {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: $euiBorderWidthThick;
-      background-color: $euiColorPrimary;
-      animation: euiBasicTableLoading 1000ms linear;
-      animation-iteration-count: infinite;
-    }
-  }
-}
-
-@keyframes euiBasicTableLoading {
-  from {
-    left: 0;
-    width: 0;
-  }
-
-  20% {
-    left: 0;
-    width: 40%;
-  }
-
-  80% {
-    left: 60%;
-    width: 40%;
-  }
-
-  100% {
-    left: 100%;
-    width: 0;
-  }
-}

package/src/components/basic_table/_index.scss

@@ -1 +0,0 @@
-@import 'basic_table';

package/test-env/services/url.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isDomainSecure = void 0;
-
-/*
- * 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
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-var isElasticHost = /^([a-zA-Z0-9]+\.)*elastic\.co$/; // In order for the domain to be secure it needs to be in a parsable format,
-// with the protocol of http: or https: and the host matching elastic.co or
-// of one its subdomains
-
-var isDomainSecure = function isDomainSecure() {
-  var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-  try {
-    var parsed = new URL(url);
-    var protocolMatches = parsed.protocol === 'http:' || parsed.protocol === 'https:';
-    var domainMatches = !!parsed.host.match(isElasticHost);
-    return protocolMatches && domainMatches;
-  } catch (e) {
-    return false;
-  }
-};
-
-exports.isDomainSecure = isDomainSecure;