@elastic/eui 72.1.0 → 73.0.0

package/es/components/accordion/accordion.js

@@ -239,7 +239,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           css: cssSpinnerStyles
         }), ___EmotionJSX(EuiText, {
           size: "s"
-        }, ___EmotionJSX("p", null, isLoadingMessage && isLoadingMessage !== true ? isLoadingMessage : ___EmotionJSX(EuiI18n, {
+        }, ___EmotionJSX("p", null, isLoadingMessage !== true ? isLoadingMessage : ___EmotionJSX(EuiI18n, {
           token: "euiAccordion.isLoading",
           default: "Loading"
         }))));

package/es/components/datagrid/controls/column_selector.js

@@ -6,6 +6,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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."); }
@@ -28,7 +30,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { Fragment, useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../../popover';
-import { EuiI18n } from '../../i18n';
+import { EuiI18n, useEuiI18n } from '../../i18n';
 import { EuiButtonEmpty } from '../../button';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiSwitch, EuiFieldText } from '../../form';
@@ -96,6 +98,8 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
   }, [sortedColumns, columnSearchText, displayValues]);
   var isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
 
+  var dragHandleAriaLabel = useEuiI18n('euiColumnSelector.dragHandleAriaLabel', 'Drag handle');
+
   var buttonText = ___EmotionJSX(EuiI18n, {
     token: "euiColumnSelector.button",
     default: "Columns"
@@ -168,18 +172,23 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       key: id,
       draggableId: id,
       index: index,
-      isDragDisabled: !isDragEnabled
+      isDragDisabled: !isDragEnabled,
+      hasInteractiveChildren: true,
+      customDragHandle: true
     }, function (provided, state) {
       return ___EmotionJSX("div", {
         className: "euiDataGridColumnSelector__item ".concat(state.isDragging && 'euiDataGridColumnSelector__item-isDragging'),
         "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
       }, ___EmotionJSX(EuiFlexGroup, {
         responsive: false,
-        gutterSize: "m",
+        gutterSize: "s",
         alignItems: "center"
-      }, ___EmotionJSX(EuiFlexItem, null, allowColumnHiding ? ___EmotionJSX(EuiSwitch, {
+      }, allowColumnHiding && ___EmotionJSX(EuiFlexItem, {
+        grow: false
+      }, ___EmotionJSX(EuiSwitch, {
         name: id,
         label: displayValues[id] || id,
+        showLabel: false,
         checked: visibleColumnIds.has(id),
         compressed: true,
         className: "euiSwitch--mini",
@@ -191,11 +200,18 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
           setVisibleColumns(nextVisibleColumns);
         },
         "data-test-subj": "dataGridColumnSelectorToggleColumnVisibility-".concat(id)
-      }) : ___EmotionJSX("span", {
+      })), ___EmotionJSX(EuiFlexItem // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+      , _extends({}, provided.dragHandleProps, {
+        "aria-hidden": true,
+        tabIndex: -1
+      }), ___EmotionJSX("span", {
         className: "euiDataGridColumnSelector__itemLabel"
-      }, id)), isDragEnabled && ___EmotionJSX(EuiFlexItem, {
+      }, displayValues[id] || id)), isDragEnabled && ___EmotionJSX(EuiFlexItem, _extends({
         grow: false
-      }, ___EmotionJSX(EuiIcon, {
+      }, provided.dragHandleProps, {
+        "aria-label": dragHandleAriaLabel
+      }), ___EmotionJSX(EuiIcon, {
         type: "grab",
         color: "subdued"
       }))));

package/es/components/datagrid/controls/column_sorting_draggable.js

@@ -72,7 +72,9 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
   var dragHandleAriaLabel = useEuiI18n('euiColumnSortingDraggable.dragHandleAriaLabel', 'Drag handle');
   return ___EmotionJSX(EuiDraggable, _extends({
     draggableId: id,
-    index: index
+    index: index,
+    hasInteractiveChildren: true,
+    customDragHandle: true
   }, rest), function (provided, state) {
     return ___EmotionJSX("div", {
       className: "euiDataGridColumnSorting__item ".concat(state.isDragging && 'euiDataGridColumnSorting__item-isDragging')
@@ -114,18 +116,25 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
           sorting.onSort(nextColumns);
         }
       });
-    })), ___EmotionJSX(EuiFlexItem, {
+    })), ___EmotionJSX(EuiFlexItem, _extends({
+      className: "euiDataGridColumnSorting__name" // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+
+    }, provided.dragHandleProps, {
+      tabIndex: -1,
+      "aria-hidden": true
+    }), ___EmotionJSX(EuiFlexGroup, {
+      gutterSize: "xs",
+      alignItems: "center",
+      responsive: false
+    }, ___EmotionJSX(EuiFlexItem, {
       grow: false
     }, ___EmotionJSX(EuiToken, {
       color: schemaDetails != null ? schemaDetails.color : undefined,
       iconType: schemaDetails != null ? schemaDetails.icon : 'tokenString'
-    })), ___EmotionJSX(EuiFlexItem, {
-      "aria-hidden": true
-    }, ___EmotionJSX(EuiText, {
+    })), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiText, {
       size: "xs"
-    }, ___EmotionJSX("p", null, display))), ___EmotionJSX(EuiFlexItem, {
-      className: "euiDataGridColumnSorting__orderButtons"
-    }, ___EmotionJSX(EuiI18n, {
+    }, ___EmotionJSX("p", null, display))))), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
       token: "euiColumnSortingDraggable.toggleLegend",
       default: "Select sorting method for {display}",
       values: {

package/es/components/datagrid/data_grid.a11y.js

@@ -184,7 +184,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations on first render', function () {
       cy.checkAxe();
     });
-    it('has zero violations when the columns reorder menu is open', function () {
+    it('has zero violations when the columns visibility menu is open', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.checkAxe();
     });
@@ -237,9 +237,10 @@ describe('EuiDataGrid', function () {
       cy.get('div[data-gridcell-visible-row-index="0"][data-gridcell-column-index="1"]').find('button.euiButtonIcon').last().realClick();
       cy.checkAxe();
     });
-    it('has zero violations when the Favorite Distro column has been sorted', function () {
+    it('has zero violations on sort and when the columns sorting menu is open', function () {
       cy.get('button.euiDataGridHeaderCell__button').last().realClick();
       cy.get('button.euiListGroupItem__button').contains('Sort Alma to Debian').should('exist').realClick();
+      cy.get('button[data-test-subj="dataGridColumnSortingPopover"]').realClick();
       cy.checkAxe();
     });
     it('has zero violations when fullscreen is open', function () {

package/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -693,6 +693,14 @@ EuiSuperDatePickerInternal.propTypes = {
          */
       position: PropTypes.oneOf(["top", "right", "bottom", "left"]).isRequired,
 
+      /**
+         * When `true`, the tooltip's position is re-calculated when the user
+         * scrolls. This supports having fixed-position tooltip anchors.
+         *
+         * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+         */
+      repositionOnScroll: PropTypes.bool,
+
       /**
          * If supplied, called when mouse movement causes the tool tip to be
          * hidden.
@@ -861,6 +869,7 @@ EuiSuperDatePicker.propTypes = {
       title: PropTypes.node,
       id: PropTypes.string,
       position: PropTypes.oneOf(["top", "right", "bottom", "left"]).isRequired,
+      repositionOnScroll: PropTypes.bool,
       onMouseOut: PropTypes.func
     }),
     iconOnly: PropTypes.bool,

package/es/components/date_picker/super_date_picker/super_update_button.js

@@ -281,6 +281,14 @@ EuiSuperUpdateButton.propTypes = {
        */
     position: PropTypes.oneOf(["top", "right", "bottom", "left"]).isRequired,
 
+    /**
+       * When `true`, the tooltip's position is re-calculated when the user
+       * scrolls. This supports having fixed-position tooltip anchors.
+       *
+       * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+       */
+    repositionOnScroll: PropTypes.bool,
+
     /**
        * If supplied, called when mouse movement causes the tool tip to be
        * hidden.

package/es/components/image/image.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "alt", "url", "src", "size", "hasShadow", "style", "wrapperProps", "fullScreenIconColor", "allowFullScreen", "caption", "float", "margin"];
+var _excluded = ["className", "alt", "url", "src", "size", "hasShadow", "style", "wrapperProps", "fullScreenIconColor", "allowFullScreen", "caption", "float", "margin", "onFullScreen"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -55,6 +55,7 @@ export var EuiImage = function EuiImage(_ref) {
       caption = _ref.caption,
       float = _ref.float,
       margin = _ref.margin,
+      onFullScreen = _ref.onFullScreen,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(false),
@@ -85,7 +86,8 @@ export var EuiImage = function EuiImage(_ref) {
     alt: alt,
     caption: caption,
     float: float,
-    margin: margin
+    margin: margin,
+    onFullScreen: onFullScreen
   };
 
   var commonImgProps = _objectSpread({
@@ -157,6 +159,11 @@ EuiImage.propTypes = {
        */
   allowFullScreen: PropTypes.bool,
 
+  /**
+       * Callback when the image is clicked and `allowFullScreen` is `true`
+       */
+  onFullScreen: PropTypes.func,
+
   /**
        * Changes the color of the icon that floats above the image when it can be clicked to fullscreen.
        * The default value of `light` is fine unless your image has a white background, in which case you should change it to `dark`.

package/es/components/image/image_fullscreen_wrapper.js

@@ -40,7 +40,8 @@ export var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref)
       setIsFullScreen = _ref.setIsFullScreen,
       wrapperProps = _ref.wrapperProps,
       isFullWidth = _ref.isFullWidth,
-      fullScreenIconColor = _ref.fullScreenIconColor;
+      fullScreenIconColor = _ref.fullScreenIconColor,
+      onFullScreen = _ref.onFullScreen;
   var euiTheme = useEuiTheme();
   var styles = euiImageFullscreenWrapperStyles(euiTheme);
   var cssStyles = [styles.euiImageFullscreenWrapper];
@@ -56,6 +57,7 @@ export var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref)
 
   var closeFullScreen = function closeFullScreen() {
     setIsFullScreen(false);
+    onFullScreen === null || onFullScreen === void 0 ? void 0 : onFullScreen(false);
   };
 
   var _useInnerText = useInnerText(),

package/es/components/image/image_wrapper.js

@@ -39,10 +39,12 @@ export var EuiImageWrapper = function EuiImageWrapper(_ref) {
       setIsFullScreen = _ref.setIsFullScreen,
       wrapperProps = _ref.wrapperProps,
       fullScreenIconColor = _ref.fullScreenIconColor,
-      isFullWidth = _ref.isFullWidth;
+      isFullWidth = _ref.isFullWidth,
+      onFullScreen = _ref.onFullScreen;
 
   var openFullScreen = function openFullScreen() {
     setIsFullScreen(true);
+    onFullScreen === null || onFullScreen === void 0 ? void 0 : onFullScreen(true);
   };
 
   var classes = classNames('euiImageWrapper', wrapperProps && wrapperProps.className);

package/es/components/markdown_editor/markdown_format.styles.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalCSS, logicalShorthandCSS, euiFontSize, mathWithUnits } from '../../global_styling';
+import { logicalCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 /**
  * Mixins
  */
@@ -20,16 +20,13 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var measurement = options.measurement;
   var lineHeightSize = measurement === 'em' ? "".concat(lineHeight, "em") : lineHeight; // Custom scales
 
-  var blockQuoteBorderWidth = mathWithUnits(fontSize, function (x) {
-    return x / 4;
-  });
   var tablePaddingVertical = mathWithUnits(fontSize, function (x) {
     return x / 4;
   });
   var tablePaddingHorizontal = mathWithUnits(fontSize, function (x) {
     return x / 2;
   });
-  return "\n    .euiMarkdownFormat__blockquote {\n      ".concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalCSS('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(logicalCSS('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+  return "\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ".concat(fontSize, ";\n      ").concat(logicalCSS('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(logicalCSS('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
 };
 /**
  * Styles

package/es/components/notification/notification_event.a11y.js

@@ -0,0 +1,113 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+ * 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"/>
+import React, { useState } from 'react';
+import { EuiContextMenuItem } from '../context_menu';
+import { EuiNotificationEvent } from './notification_event';
+import { EuiPanel } from '../panel';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NotificationEvent = function NotificationEvent() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isRead = _useState2[0],
+      setIsRead = _useState2[1];
+
+  var onRead = function onRead(id, isRead) {
+    setIsRead(!isRead);
+  };
+
+  var onOpenContextMenu = function onOpenContextMenu(id) {
+    return [___EmotionJSX(EuiContextMenuItem, {
+      key: "contextMenuItemA",
+      onClick: function onClick() {
+        return onRead(id, isRead);
+      }
+    }, isRead ? 'Mark as unread' : 'Mark as read'), ___EmotionJSX(EuiContextMenuItem, {
+      key: "contextMenuItemB",
+      onClick: function onClick() {}
+    }, "View messages like this"), ___EmotionJSX(EuiContextMenuItem, {
+      key: "contextMenuItemC",
+      onClick: function onClick() {}
+    }, "Don\u2019t notify me about this")];
+  };
+
+  return ___EmotionJSX(EuiPanel, {
+    paddingSize: "none",
+    hasShadow: true,
+    style: {
+      maxWidth: '540px'
+    }
+  }, ___EmotionJSX(EuiNotificationEvent, {
+    id: "cy-eui-notification-1",
+    type: "Report",
+    iconType: "logoKibana",
+    iconAriaLabel: "Kibana",
+    time: "1 min ago",
+    title: "[Error Monitoring Report] is generated",
+    primaryAction: "Download",
+    primaryActionProps: {
+      iconType: 'download'
+    },
+    messages: ['The reported was generated at 17:12:16 GMT+4'],
+    isRead: isRead,
+    onRead: onRead,
+    onOpenContextMenu: onOpenContextMenu,
+    onClickPrimaryAction: function onClickPrimaryAction() {},
+    onClickTitle: function onClickTitle() {}
+  }));
+};
+
+describe('EuiNotificationEvent', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(NotificationEvent, null));
+    cy.get('article.euiNotificationEvent').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is open', function () {
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').realClick();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations after the Mark as read button is clicked', function () {
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').realClick();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.get('div.euiPopover__panel button').first().realClick();
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility', function () {
+    it('has zero violations when the popover is opened by keyboard', function () {
+      cy.repeatRealPress('Tab');
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').should('have.focus');
+      cy.realPress('Enter');
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+      cy.realPress('Escape');
+      cy.get('div.euiPopover__panel').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/es/components/page/page_header/page_header.a11y.js

@@ -0,0 +1,32 @@
+/*
+ * 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"/>
+import React from 'react';
+import { EuiButton } from '../../button';
+import { EuiPageHeader } from './page_header';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+describe('EuiPageHeader', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(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: [___EmotionJSX(EuiButton, {
+        fill: true
+      }, "Add something"), ___EmotionJSX(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/es/components/portal/portal.a11y.js

@@ -0,0 +1,70 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+ * 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"/>
+import React, { useState } from 'react';
+import { EuiButton } from '../button';
+import { EuiPortal } from './portal';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Portal = function Portal() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_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 = ___EmotionJSX(EuiPortal, null, ___EmotionJSX("div", null, "This is the portal. Click anywhere to close."), ___EmotionJSX(EuiButton, {
+      onClick: closePortal
+    }, "Close portal"));
+  }
+
+  return ___EmotionJSX("div", null, ___EmotionJSX(EuiButton, {
+    onClick: togglePortal
+  }, "View guide"), customPortal);
+};
+
+describe('EuiPortal', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(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/es/components/text/text.styles.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS, euiFontSize, euiBackgroundColor, mathWithUnits } from '../../global_styling';
+import { logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiFontSize, euiBackgroundColor, mathWithUnits } from '../../global_styling';
 import { euiLinkCSS } from '../link/link.styles';
 import { euiTitle } from '../title/title.styles';
 /**
@@ -50,7 +50,10 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
     return x * 2;
   });
   var headingMarginBottom = marginSize;
-  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    ul,\n    ol,\n    dl,\n    blockquote,\n    img,\n    pre {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; // 90% of parent font size\n    }\n    ").concat( // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
+  var blockQuoteBorderWidth = mathWithUnits(fontSize, function (x) {
+    return x / 4;
+  });
+  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    ul,\n    ol,\n    dl,\n    blockquote,\n    img,\n    pre {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; // 90% of parent font size\n    }\n    ").concat( // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
   _customScale === 'm' ? "\n    kbd {\n      ".concat(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      // ensures when only one character the shape looks like a square\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
 };
 /**
@@ -61,7 +64,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", logicalCSS('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", logicalTextAlignCSS('center'), " ", logicalCSS('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", logicalCSS('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", logicalCSS('height', euiTheme.border.width.thick), " ", logicalCSS('width', '50%'), " ", logicalCSS('left', '25%'), " ", logicalCSS('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", logicalCSS('top', '0'), ";}&:after{", logicalCSS('bottom', '0'), ";}}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", logicalCSS('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

package/es/components/tool_tip/icon_tip.js

@@ -84,6 +84,14 @@ EuiIconTip.propTypes = {
      */
   id: PropTypes.string,
 
+  /**
+     * When `true`, the tooltip's position is re-calculated when the user
+     * scrolls. This supports having fixed-position tooltip anchors.
+     *
+     * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+     */
+  repositionOnScroll: PropTypes.bool,
+
   /**
      * If supplied, called when mouse movement causes the tool tip to be
      * hidden.